From 5e063ba9a3117a58a259175585f861b671c74416 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 16 Feb 2021 15:41:00 +0800
Subject: [PATCH] chore: remove colorpicker
---
components/color-picker/ColorPicker.jsx | 208 -----------
.../__tests__/__snapshots__/demo.test.js.snap | 36 --
.../__snapshots__/index.test.js.snap | 337 ------------------
.../color-picker/__tests__/demo.test.js | 3 -
.../color-picker/__tests__/index.test.js | 155 --------
components/color-picker/index.js | 9 -
components/color-picker/locale/en_US.js | 5 -
components/color-picker/locale/zh_CN.js | 5 -
components/color-picker/locale/zh_TW.js | 5 -
components/color-picker/style/index.js | 4 -
components/color-picker/style/index.less | 121 -------
components/index.js | 4 -
components/locale/default.js | 2 -
components/locale/zh_CN.js | 2 -
components/locale/zh_TW.js | 2 -
components/style.js | 1 -
16 files changed, 899 deletions(-)
delete mode 100644 components/color-picker/ColorPicker.jsx
delete mode 100644 components/color-picker/__tests__/__snapshots__/demo.test.js.snap
delete mode 100644 components/color-picker/__tests__/__snapshots__/index.test.js.snap
delete mode 100644 components/color-picker/__tests__/demo.test.js
delete mode 100644 components/color-picker/__tests__/index.test.js
delete mode 100644 components/color-picker/index.js
delete mode 100644 components/color-picker/locale/en_US.js
delete mode 100644 components/color-picker/locale/zh_CN.js
delete mode 100644 components/color-picker/locale/zh_TW.js
delete mode 100644 components/color-picker/style/index.js
delete mode 100644 components/color-picker/style/index.less
diff --git a/components/color-picker/ColorPicker.jsx b/components/color-picker/ColorPicker.jsx
deleted file mode 100644
index dfcd64ccd..000000000
--- a/components/color-picker/ColorPicker.jsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
-import BaseMixin from '../_util/BaseMixin';
-import Pickr from '@simonwep/pickr/dist/pickr.es5.min';
-import Icon from '../icon';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import enUS from './locale/en_US';
-import debounce from 'lodash/debounce';
-
-import { getOptionProps } from '../_util/props-util';
-let colors = '#194d33';
-export default {
- name: 'AColorPicker',
- mixins: [BaseMixin],
- model: {
- prop: 'value',
- event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
- },
- props: {
- prefixCls: PropTypes.string,
- defaultValue: PropTypes.string, //默认值
- config: PropTypes.object, //pickr配置
- value: PropTypes.string, //颜色值
- locale: PropTypes.object, //双语包
- colorRounded: PropTypes.number, //颜色数值保留几位小数
- size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸
- getPopupContainer: PropTypes.func, //指定渲染容器
- disabled: PropTypes.bool.def(false), //是否禁用
- format: PropTypes.string, //颜色格式设置
- alpha: PropTypes.bool.def(false), //是否开启透明通道
- hue: PropTypes.bool.def(true), //是否开启色彩预选
- },
- inject: {
- configProvider: { default: () => ConfigConsumerProps },
- },
- data() {
- return {
- colors,
- myOpen: false,
- pickr: null,
- i18n: enUS,
- };
- },
- watch: {
- 'configProvider.locale.ColorPicker': {
- handler(val) {
- if (this.locale) return;
- this.i18n = val;
- this.reInitialize();
- },
- },
- locale(val) {
- this.i18n = val.ColorPicker || val.lang;
- this.reInitialize();
- },
- value(val) {
- this.setColor(val);
- },
- disabled(val) {
- this.pickr[val ? 'disable' : 'enable']();
- },
- config: {
- handler() {
- this.reInitialize();
- },
- deep: true,
- },
- format(val) {
- const type = val.toLocaleUpperCase();
- let res = this.pickr.setColorRepresentation(type);
- if (res) {
- this.pickr.applyColor();
- } else {
- throw new TypeError('format was invalid');
- }
- },
- },
- mounted() {
- if (this.locale) {
- this.i18n = this.locale.ColorPicker || this.locale.lang;
- }
- this.createPickr();
- this.eventsBinding();
- },
- destroyed() {
- this.pickr.destroyAndRemove();
- },
- methods: {
- reInitialize() {
- this.pickr.destroyAndRemove();
- const dom = document.createElement('div');
- dom.id = 'color-picker' + this._uid;
- const box = this.$el.querySelector('#color-picker-box' + this._uid);
- box.appendChild(dom);
- this.createPickr();
- this.eventsBinding();
- },
- setColor: debounce(function(val) {
- this.pickr.setColor(val);
- }, 1000),
- eventsBinding() {
- const pickrEvents = [
- 'init',
- 'hide',
- 'show',
- 'save',
- 'clear',
- 'change',
- 'changestop',
- 'cancel',
- 'swatchselect',
- ];
- Object.keys(this.$listeners).forEach(event => {
- pickrEvents.includes(event) && this.pickr.on(event, this.$listeners[event]);
- });
- },
- createPickr() {
- const { getPopupContainer } = getOptionProps(this);
- const { getPopupContainer: getContextPopupContainer } = this.configProvider;
- const container = getPopupContainer || getContextPopupContainer;
- this.pickr = Pickr.create(
- Object.assign(
- {
- el: '#color-picker' + this._uid,
- container: (container && container(this.$el)) || document.body,
- theme: 'monolith', // or 'monolith', or 'nano'
- default: this.value || this.defaultValue || null, // 有默认颜色pickr才可以获取到_representation
- components: {
- // Main components
- preview: true,
- opacity: this.alpha,
- hue: this.hue,
- // Input / output Options
- interaction: {
- hex: true,
- rgba: true,
- input: true,
- clear: true,
- save: true,
- },
- },
- },
- this.config,
- { i18n: this.i18n },
- ),
- )
- .on('save', (color, instance) => {
- if (color) {
- let _representation = instance._representation || 'HEXA';
- color = color['to' + _representation]().toString(this.colorRounded || 0);
- }
- this.$emit('change.value', color || '');
- })
- .on('hide', () => {
- this.setState({ myOpen: false });
- });
- },
- handleOpenChange() {
- const open = !this.myOpen;
- this.setState({ myOpen: open });
- this.pickr[open ? 'show' : 'hide']();
- this.$emit('openChange', open);
- },
- getDefaultLocale() {
- const result = {
- ...enUS,
- ...this.$props.locale,
- };
- result.lang = {
- ...result.lang,
- ...(this.$props.locale || {}).lang,
- };
- return result;
- },
- renderColorPicker() {
- const { prefixCls: customizePrefixCls } = this.$props;
- const { getPrefixCls } = this.configProvider;
- const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
- const { disabled } = getOptionProps(this);
- const classString = {
- [prefixCls]: true,
- [`${prefixCls}-open`]: this.myOpen,
- [`${prefixCls}-lg`]: this.size === 'large',
- [`${prefixCls}-sm`]: this.size === 'small',
- [`${prefixCls}-disabled`]: this.disabled,
- };
- return (
-
- );
- },
- },
- render() {
- return (
-
- );
- },
-};
diff --git a/components/color-picker/__tests__/__snapshots__/demo.test.js.snap b/components/color-picker/__tests__/__snapshots__/demo.test.js.snap
deleted file mode 100644
index 460351ba0..000000000
--- a/components/color-picker/__tests__/__snapshots__/demo.test.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// 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
deleted file mode 100644
index 6b59146eb..000000000
--- a/components/color-picker/__tests__/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,337 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorPicker prop locale should works 1`] = `
-
-`;
-
-exports[`ColorPicker save event should works 1`] = `
-
-`;
-
-exports[`ColorPicker should support default value 1`] = `
-
-`;
-
-exports[`ColorPicker should support disabled 1`] = `
-
-`;
-
-exports[`ColorPicker should support format 1`] = `
-
-`;
-
-exports[`ColorPicker should support v-model 1`] = `
-
-`;
diff --git a/components/color-picker/__tests__/demo.test.js b/components/color-picker/__tests__/demo.test.js
deleted file mode 100644
index 131bad76c..000000000
--- a/components/color-picker/__tests__/demo.test.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('color-picker');
diff --git a/components/color-picker/__tests__/index.test.js b/components/color-picker/__tests__/index.test.js
deleted file mode 100644
index 61b963c05..000000000
--- a/components/color-picker/__tests__/index.test.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ColorPicker from '..';
-import { asyncExpect } from '@/tests/utils';
-describe('ColorPicker', () => {
- it('should support default value', async () => {
- const wrapper = mount(
- {
- render() {
- return p}>;
- },
- },
- { sync: false, attachToDocument: true },
- );
- await asyncExpect(() => {
- expect(wrapper.html()).toMatchSnapshot();
- wrapper.destroy();
- }, 1000);
- });
- it('should support v-model', async () => {
- let color = 'rgba(10, 10, 10, 1)';
- const wrapper = mount(
- {
- data() {
- return {
- color,
- };
- },
- render() {
- return p}>;
- },
- mounted() {
- this.color = 'rgba(110, 120, 130, 1)';
- },
- },
- { sync: false, attachToDocument: true },
- );
-
- await asyncExpect(() => {
- expect(wrapper.html()).toMatchSnapshot();
- wrapper.destroy();
- }, 1000);
- });
- it('should support disabled', async () => {
- const wrapper = mount(
- {
- data() {
- return {
- disabled: false,
- };
- },
- render() {
- return p}>;
- },
- mounted() {
- this.disabled = true;
- },
- },
- { sync: false, attachToDocument: true },
- );
-
- await asyncExpect(async () => {
- expect(wrapper.html()).toMatchSnapshot();
- await asyncExpect(() => {
- wrapper.destroy();
- });
- }, 1000);
- });
- it('should support format', async () => {
- const wrapper = mount(
- {
- data() {
- return {
- format: 'RGBA',
- };
- },
- render() {
- return p}>;
- },
- mounted() {
- this.format = 'HEX';
- },
- },
- { sync: false, attachToDocument: true },
- );
-
- await asyncExpect(async () => {
- expect(wrapper.html()).toMatchSnapshot();
- await asyncExpect(() => {
- wrapper.destroy();
- });
- }, 1000);
- });
- it('prop locale should works', async () => {
- const wrapper = mount(
- {
- data() {
- return {
- locale: {
- lang: {
- 'btn:save': 'セーブ',
- 'btn:cancel': 'キャンセル',
- 'btn:clear': '晴れ',
- },
- },
- };
- },
- render() {
- return (
- p} />
- );
- },
- mounted() {
- this.locale = {
- lang: {
- 'btn:save': '1セーブ',
- 'btn:cancel': '1キャンセル',
- 'btn:clear': '1晴れ',
- },
- };
- },
- },
- { sync: false, attachToDocument: true },
- );
- await asyncExpect(async () => {
- expect(wrapper.html()).toMatchSnapshot();
- await asyncExpect(() => {
- wrapper.destroy();
- });
- }, 1000);
- });
- it('save event should works', async () => {
- const wrapper = mount(
- {
- render() {
- return (
- p} onSave={this.save} />
- );
- },
- methods: {
- save(val) {
- return val;
- },
- },
- },
- { sync: false, attachToDocument: true },
- );
- await asyncExpect(async () => {
- wrapper.find('.pcr-save').trigger('click');
- expect(wrapper.html()).toMatchSnapshot();
- await asyncExpect(() => {
- wrapper.destroy();
- });
- }, 1000);
- });
-});
diff --git a/components/color-picker/index.js b/components/color-picker/index.js
deleted file mode 100644
index 9b7c87faa..000000000
--- a/components/color-picker/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import ColorPicker from './ColorPicker';
-import Base from '../base';
-/* istanbul ignore next */
-ColorPicker.install = function(Vue) {
- Vue.use(Base);
- Vue.component(ColorPicker.name, ColorPicker);
-};
-
-export default ColorPicker;
diff --git a/components/color-picker/locale/en_US.js b/components/color-picker/locale/en_US.js
deleted file mode 100644
index d8f2854de..000000000
--- a/components/color-picker/locale/en_US.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
- 'btn:save': 'Save',
- 'btn:cancel': 'Cancel',
- 'btn:clear': 'Clear',
-};
diff --git a/components/color-picker/locale/zh_CN.js b/components/color-picker/locale/zh_CN.js
deleted file mode 100644
index 74117e2c7..000000000
--- a/components/color-picker/locale/zh_CN.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
- 'btn:save': '保存',
- 'btn:cancel': '取消',
- 'btn:clear': '清除',
-};
diff --git a/components/color-picker/locale/zh_TW.js b/components/color-picker/locale/zh_TW.js
deleted file mode 100644
index 74117e2c7..000000000
--- a/components/color-picker/locale/zh_TW.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
- 'btn:save': '保存',
- 'btn:cancel': '取消',
- 'btn:clear': '清除',
-};
diff --git a/components/color-picker/style/index.js b/components/color-picker/style/index.js
deleted file mode 100644
index 5c465d6dc..000000000
--- a/components/color-picker/style/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-// style dependencies
-import '../../grid/style';
diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less
deleted file mode 100644
index 681dd6d97..000000000
--- a/components/color-picker/style/index.less
+++ /dev/null
@@ -1,121 +0,0 @@
-@import '../../style/themes/index';
-@import '../../input/style/mixin';
-
-@color-picker-prefix-cls: ~'@{ant-prefix}-color-picker';
-.@{color-picker-prefix-cls} {
- 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;
- .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;
- 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;
- }
- }
- &.@{color-picker-prefix-cls}-open {
- .@{color-picker-prefix-cls}-icon {
- & svg {
- transform: none;
- }
- }
- }
- }
- &-open {
- .@{color-picker-prefix-cls}-icon {
- & svg {
- transform: rotate(180deg);
- }
- }
- .@{color-picker-prefix-cls}-selection {
- .active();
- }
- }
- &-selection {
- display: block;
- box-sizing: border-box;
- background-color: @select-background;
- border: @border-width-base @border-style-base @select-border-color;
- border-top-width: @border-width-base + 0.02px;
- border-radius: @border-radius-base;
- outline: none;
- transition: all 0.3s @ease-in-out;
- user-select: none;
-
- position: relative;
- height: @input-height-base;
- cursor: inherit;
- &:hover {
- .hover;
- }
- }
- &-icon {
- .iconfont-mixin();
- position: absolute;
- top: 50%;
- right: @control-padding-horizontal - 4px;
- margin-top: -@font-size-sm / 2;
- color: @disabled-color;
- font-size: @font-size-sm;
- line-height: 1;
- transform-origin: 50% 50%;
- & svg {
- transition: transform 0.3s;
- }
- }
- &-lg {
- font-size: @font-size-lg;
- .@{color-picker-prefix-cls}-selection {
- line-height: @input-height-lg - 12;
- height: @input-height-lg;
- }
- .@{color-picker-prefix-cls}-icon {
- top: @input-height-lg / 2;
- }
- }
-
- &-sm {
- .@{color-picker-prefix-cls}-selection {
- line-height: @input-height-sm - 12;
- height: @input-height-sm;
- }
- .pickr .pcr-button {
- width: 14px;
- height: 14px;
- }
- .@{color-picker-prefix-cls}-icon {
- right: @control-padding-horizontal - 2px;
- top: @input-height-sm / 2;
- font-size: 10px;
- }
- }
-}
diff --git a/components/index.js b/components/index.js
index 57ec362a3..95e18711a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -124,8 +124,6 @@ import { default as Timeline } from './timeline';
import { default as Tooltip } from './tooltip';
-// import { default as Mention } from './mention'
-
import { default as Upload } from './upload';
import { default as version } from './version';
@@ -136,8 +134,6 @@ import { default as Skeleton } from './skeleton';
import { default as Comment } from './comment';
-// import { default as ColorPicker } from './color-picker';
-
import { default as ConfigProvider } from './config-provider';
import { default as Empty } from './empty';
diff --git a/components/locale/default.js b/components/locale/default.js
index 1d9655ef4..b7c5c1654 100644
--- a/components/locale/default.js
+++ b/components/locale/default.js
@@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/en_US';
import DatePicker from '../date-picker/locale/en_US';
import TimePicker from '../time-picker/locale/en_US';
import Calendar from '../calendar/locale/en_US';
-import ColorPicker from '../color-picker/locale/en_US';
export default {
locale: 'en',
@@ -10,7 +9,6 @@ export default {
DatePicker,
TimePicker,
Calendar,
- ColorPicker,
global: {
placeholder: 'Please select',
},
diff --git a/components/locale/zh_CN.js b/components/locale/zh_CN.js
index d77241d3b..65283c371 100644
--- a/components/locale/zh_CN.js
+++ b/components/locale/zh_CN.js
@@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_CN';
import DatePicker from '../date-picker/locale/zh_CN';
import TimePicker from '../time-picker/locale/zh_CN';
import Calendar from '../calendar/locale/zh_CN';
-import ColorPicker from '../color-picker/locale/zh_CN';
export default {
locale: 'zh-cn',
@@ -10,7 +9,6 @@ export default {
DatePicker,
TimePicker,
Calendar,
- ColorPicker,
// locales for all comoponents
global: {
placeholder: '请选择',
diff --git a/components/locale/zh_TW.js b/components/locale/zh_TW.js
index d0f421fa8..caa9268b3 100644
--- a/components/locale/zh_TW.js
+++ b/components/locale/zh_TW.js
@@ -2,7 +2,6 @@ import Pagination from '../vc-pagination/locale/zh_TW';
import DatePicker from '../date-picker/locale/zh_TW';
import TimePicker from '../time-picker/locale/zh_TW';
import Calendar from '../calendar/locale/zh_TW';
-import ColorPicker from '../color-picker/locale/zh_TW';
export default {
locale: 'zh-tw',
@@ -10,7 +9,6 @@ export default {
DatePicker,
TimePicker,
Calendar,
- ColorPicker,
Table: {
filterTitle: '篩選器',
filterConfirm: '確定',
diff --git a/components/style.js b/components/style.js
index 55e1270ea..c9af15814 100644
--- a/components/style.js
+++ b/components/style.js
@@ -61,4 +61,3 @@ import './descriptions/style';
import './page-header/style';
import './form-model/style';
import './space/style';
-// import './color-picker/style';