From 1a3a022bb5e22f31518629f1dea393b55afaf7ce Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Fri, 3 Jul 2020 18:12:44 +0800 Subject: [PATCH] feat: remove colorpicker --- components/color-picker/ColorPicker.jsx | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 36 ++++++++ .../__snapshots__/index.test.js.snap | 12 +-- components/color-picker/style/index.less | 88 +++++++++---------- components/index.js | 6 +- components/style.js | 2 +- tests/__snapshots__/index.test.js.snap | 1 - 7 files changed, 89 insertions(+), 58 deletions(-) create mode 100644 components/color-picker/__tests__/__snapshots__/demo.test.js.snap diff --git a/components/color-picker/ColorPicker.jsx b/components/color-picker/ColorPicker.jsx index 37913b091..77bc630c4 100644 --- a/components/color-picker/ColorPicker.jsx +++ b/components/color-picker/ColorPicker.jsx @@ -178,7 +178,7 @@ export default { const prefixCls = getPrefixCls('color-picker', customizePrefixCls); const { disabled } = getOptionProps(this); const classString = { - [`${prefixCls}-box`]: true, + [prefixCls]: true, [`${prefixCls}-open`]: this.myOpen, [`${prefixCls}-lg`]: this.size === 'large', [`${prefixCls}-sm`]: this.size === 'small', diff --git a/components/color-picker/__tests__/__snapshots__/demo.test.js.snap b/components/color-picker/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..460351ba0 --- /dev/null +++ b/components/color-picker/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./antdv-demo/docs/color-picker/demo/alpha.md correctly 1`] = ``; + +exports[`renders ./antdv-demo/docs/color-picker/demo/basic.md correctly 1`] = ` +
+
+ 有默认值 + +
+
+ 无默认值 + +
+
+`; + +exports[`renders ./antdv-demo/docs/color-picker/demo/colors.md correctly 1`] = ``; + +exports[`renders ./antdv-demo/docs/color-picker/demo/hue.md correctly 1`] = ``; + +exports[`renders ./antdv-demo/docs/color-picker/demo/size.md correctly 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+
+`; diff --git a/components/color-picker/__tests__/__snapshots__/index.test.js.snap b/components/color-picker/__tests__/__snapshots__/index.test.js.snap index a7c0a86e4..128a41973 100644 --- a/components/color-picker/__tests__/__snapshots__/index.test.js.snap +++ b/components/color-picker/__tests__/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ColorPicker prop locale should works 1`] = ` -
+
@@ -57,7 +57,7 @@ exports[`ColorPicker prop locale should works 1`] = ` `; exports[`ColorPicker save event should works 1`] = ` -
+
@@ -113,7 +113,7 @@ exports[`ColorPicker save event should works 1`] = ` `; exports[`ColorPicker should support default value 1`] = ` -
+
@@ -169,7 +169,7 @@ exports[`ColorPicker should support default value 1`] = ` `; exports[`ColorPicker should support disabled 1`] = ` -
+
@@ -225,7 +225,7 @@ exports[`ColorPicker should support disabled 1`] = ` `; exports[`ColorPicker should support format 1`] = ` -
+
@@ -281,7 +281,7 @@ exports[`ColorPicker should support format 1`] = ` `; exports[`ColorPicker should support v-model 1`] = ` -
+
diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less index 0b10ddc6b..681dd6d97 100644 --- a/components/color-picker/style/index.less +++ b/components/color-picker/style/index.less @@ -1,55 +1,51 @@ @import '../../style/themes/index'; @import '../../input/style/mixin'; -@import '~@simonwep/pickr/dist/themes/classic.min.css'; // 'classic' theme -@import '~@simonwep/pickr/dist/themes/monolith.min.css'; // 'monolith' theme -@import '~@simonwep/pickr/dist/themes/nano.min.css'; // 'nano' theme + @color-picker-prefix-cls: ~'@{ant-prefix}-color-picker'; .@{color-picker-prefix-cls} { - &-box{ - box-sizing: border-box; - margin: 0; - padding: 0; - color: rgba(0, 0, 0, 0.65); - font-size: 14px; - font-variant: tabular-nums; - line-height: 1.5; - list-style: none; - font-feature-settings: 'tnum'; - position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0, 0, 0, 0.65); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + list-style: none; + font-feature-settings: 'tnum'; + position: relative; + display: inline-block; + outline: none; + cursor: pointer; + transition: opacity 0.3s; + min-width: 55px; + .pickr { display: inline-block; - outline: none; - cursor: pointer; - transition: opacity 0.3s; - min-width: 55px; - .pickr{ - display: inline-block; - button{ - width: 18px; - height: 18px; - margin-left: 7px; - &:focus{ - box-shadow: none; - } + .pcr-button { + width: 18px; + height: 18px; + margin-left: 7px; + &:focus { + box-shadow: none; } } - &.@{color-picker-prefix-cls}-disabled{ - cursor: not-allowed; - .@{color-picker-prefix-cls}-selection { - background: @input-disabled-bg; - box-shadow: none; + } + &.@{color-picker-prefix-cls}-disabled { + cursor: not-allowed; + .@{color-picker-prefix-cls}-selection { + background: @input-disabled-bg; + box-shadow: none; + border: @border-width-base @border-style-base @select-border-color; + &:hover, + &:focus, + &:active { border: @border-width-base @border-style-base @select-border-color; - &:hover, - &:focus, - &:active { - border: @border-width-base @border-style-base @select-border-color; - box-shadow: none; - } + box-shadow: none; } - &.@{color-picker-prefix-cls}-open { - .@{color-picker-prefix-cls}-icon { - & svg { - transform: none; - } + } + &.@{color-picker-prefix-cls}-open { + .@{color-picker-prefix-cls}-icon { + & svg { + transform: none; } } } @@ -64,7 +60,7 @@ .active(); } } - &-selection{ + &-selection { display: block; box-sizing: border-box; background-color: @select-background; @@ -82,7 +78,7 @@ .hover; } } - &-icon{ + &-icon { .iconfont-mixin(); position: absolute; top: 50%; @@ -112,7 +108,7 @@ line-height: @input-height-sm - 12; height: @input-height-sm; } - .pickr button{ + .pickr .pcr-button { width: 14px; height: 14px; } diff --git a/components/index.js b/components/index.js index c92ffd057..226826aaa 100644 --- a/components/index.js +++ b/components/index.js @@ -136,7 +136,7 @@ import { default as Skeleton } from './skeleton'; import { default as Comment } from './comment'; -import { default as ColorPicker } from './color-picker'; +// import { default as ColorPicker } from './color-picker'; import { default as ConfigProvider } from './config-provider'; @@ -205,7 +205,7 @@ const components = [ Drawer, Skeleton, Comment, - ColorPicker, + // ColorPicker, ConfigProvider, Empty, Result, @@ -295,7 +295,7 @@ export { Drawer, Skeleton, Comment, - ColorPicker, + // ColorPicker, ConfigProvider, Empty, Result, diff --git a/components/style.js b/components/style.js index 6c1bbbbbf..acf4fc160 100644 --- a/components/style.js +++ b/components/style.js @@ -60,4 +60,4 @@ import './result/style'; import './descriptions/style'; import './page-header/style'; import './form-model/style'; -import './color-picker/style'; +// import './color-picker/style'; diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index 7200a421e..a5f701213 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -63,7 +63,6 @@ Array [ "Drawer", "Skeleton", "Comment", - "ColorPicker", "ConfigProvider", "Empty", "Result",