diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap index 77adee3e..6424a34a 100644 --- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap @@ -4,24 +4,33 @@ exports[`ColorPicker renders correctly 1`] = `
- -
-
- -
-
+
+
+
+
+
+ + +
`; @@ -29,24 +38,33 @@ exports[`ColorPicker renders correctly 2`] = `
- -
-
- -
-
+
+
+
+
+
+ + +
`; @@ -58,9 +76,29 @@ exports[`ColorPicker renders correctly with no child 1`] = ` +
+
+
+
+ } value="" > +
+
+
+
+ } type="text" value="" /> @@ -83,52 +140,96 @@ exports[`ColorPicker renders correctly with no child 1`] = ` handleReset={[Function]} inputCount={null} inputType="input" + onBlur={[Function]} onChange={[Function]} onClick={[Function]} placeholder="#" + prefix={ +
+
+
+
+
+ } prefixCls="kd-input" size="middle" type="text" value="" > - - - -
-
- - +
+
+
+
+
+ + +
+
+
+
+ } + style={null} + type="text" + value="" /> - -
-
+ + +
`; @@ -141,9 +242,29 @@ exports[`ColorPicker renders correctly with null or undefined 1`] = ` +
+
+
+
+ } value="" > +
+
+
+
+ } type="text" value="" /> @@ -166,52 +306,96 @@ exports[`ColorPicker renders correctly with null or undefined 1`] = ` handleReset={[Function]} inputCount={null} inputType="input" + onBlur={[Function]} onChange={[Function]} onClick={[Function]} placeholder="#" + prefix={ +
+
+
+
+
+ } prefixCls="kd-input" size="middle" type="text" value="" > - - - -
-
- - +
+
+
+
+
+ + +
+
+
+
+ } + style={null} + type="text" + value="" /> - -
-
+ + +
`; diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index d0f485f0..a5f8d1c3 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { ReactNode } from 'react' import { mount, render } from 'enzyme' import ColorPicker from '../index' import ColorPickerPanel from '../color-picker-panel' @@ -19,9 +19,7 @@ describe('ColorPicker', () => { // 2.render test it('renders correctly', () => { BorderTypes.forEach((type) => { - const wrapper = render( - , - ) + const wrapper = render() expect(wrapper).toMatchSnapshot() }) }) @@ -51,7 +49,28 @@ describe('ColorPicker', () => { mount() expect(mockWarn).toHaveBeenCalledTimes(1) expect(mockWarn.mock.calls[0][0]).toMatch( - "Warning: [kdesign]-color-picker: 'presetColor' must be an array of hexadecimal, RGB, HSB, HSL or English color name string type", + "Warning: [kdesign]-color-picker: 'presetColor' must be an array of hexadecimal, HEXA, RGB, RGBA, HSB, HSBA, HSL, HSLA or English color name string type", + ) + }) + it('should warns when set first wrong of "panelFormatConfig" of prop', () => { + const mockWarn = jest.fn() + jest.spyOn(console, 'warn').mockImplementation(mockWarn) + const config: any = { + show: ['HEX', 'RGB', 'HSB'], + default: 'test', + } + const props = { + defaultOpen: true, + panelFormatConfig: config, + } + + mount() + expect(mockWarn).toHaveBeenCalledTimes(2) + expect(mockWarn.mock.calls[0][0]).toMatch( + "Warning: [kdesign]-color-picker: 'default' property of 'panelFormatConfig' must be one of HEX, RGB, HSB, or HSL", + ) + expect(mockWarn.mock.calls[1][0]).toMatch( + "Warning: [kdesign]-color-picker: 'default' property of 'panelFormatConfig' must be one of 'show'", ) }) // #endregion @@ -85,10 +104,16 @@ describe('ColorPicker', () => { // borderType expect( - underlineWrapper.find('.kd-color-picker-container .kd-color-picker-input').at(2).hasClass('kd-input-underline'), + underlineWrapper + .find('.kd-color-picker-container .kd-color-picker-input') + .at(2) + .hasClass('kd-input-wrapper-underline'), ).toBeTruthy() expect( - borderedWrapper.find('.kd-color-picker-container .kd-color-picker-input').at(2).hasClass('kd-input-underline'), + borderedWrapper + .find('.kd-color-picker-container .kd-color-picker-input') + .at(2) + .hasClass('kd-input-wrapper-underline'), ).toBeFalsy() // className @@ -110,23 +135,74 @@ describe('ColorPicker', () => { expect(borderedWrapper.find('.kd-color-picker-input').at(0).prop('placeholder')).toEqual('请输入色值') // style - expect(underlineWrapper.find('.kd-input-underline').prop('style')).toBeFalsy() + expect(underlineWrapper.find('.kd-input-wrapper-underline').prop('style')).toBeFalsy() underlineWrapper.setProps({ style: { height: '40px' } }) underlineWrapper.update() - expect(underlineWrapper.find('.kd-input-underline').prop('style')).toEqual({ height: '40px' }) - expect(underlineWrapper.find('.kd-input-underline')).toHaveStyle('height', '40px') + expect(underlineWrapper.find('.kd-input-wrapper-underline').prop('style')).toEqual({ height: '40px' }) + expect(underlineWrapper.find('.kd-input-wrapper-underline')).toHaveStyle('height', '40px') + + // default prefixIcon + expect(underlineWrapper.find('.kd-input-prefix').find('.kd-color-picker-icon')).toHaveClassName( + 'kd-color-picker-icon-underline', + ) + expect( + underlineWrapper + .find('.kd-input-prefix') + .find('.kd-color-picker-icon') + .find('.kd-color-picker-icon-no-color-line'), + ).toExist() + expect(borderedWrapper.find('.kd-input-prefix').find('.kd-color-picker-icon')).toHaveClassName( + 'kd-color-picker-icon-bordered', + ) + expect( + borderedWrapper + .find('.kd-input-prefix') + .find('.kd-color-picker-icon') + .find('.kd-color-picker-icon-no-color-line'), + ).toExist() // default suffixIcon - expect(underlineWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-down') - underlineWrapper.find('.kd-color-picker-input').at(0).simulate('click') - expect(underlineWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-up') - underlineWrapper.find('.kd-color-picker-icon-container').simulate('click') - expect(underlineWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-down') - expect(borderedWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-down') - borderedWrapper.find('.kd-color-picker-input').at(0).simulate('click') - expect(borderedWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-up') - borderedWrapper.find('.kd-color-picker-icon-container').simulate('click') - expect(borderedWrapper.find('.kd-color-picker-icon')).toHaveClassName('kd-color-picker-icon-down') + underlineWrapper.setProps({ prefixIcon: () => null, suffixIcon: (_: string, dom: ReactNode) => dom }) + borderedWrapper.setProps({ prefixIcon: () => null, suffixIcon: (_: string, dom: ReactNode) => dom }) + underlineWrapper.update() + borderedWrapper.update() + expect(underlineWrapper.find('.kd-input-suffix').find('.kd-color-picker-icon')).toHaveClassName( + 'kd-color-picker-icon-underline', + ) + expect( + underlineWrapper + .find('.kd-input-suffix') + .find('.kd-color-picker-icon') + .find('.kd-color-picker-icon-no-color-line'), + ).toExist() + expect(borderedWrapper.find('.kd-input-suffix').find('.kd-color-picker-icon')).toHaveClassName( + 'kd-color-picker-icon-bordered', + ) + expect( + borderedWrapper + .find('.kd-input-suffix') + .find('.kd-color-picker-icon') + .find('.kd-color-picker-icon-no-color-line'), + ).toExist() + + // custom prefixIcon + const prefix = (rgbColor: string) => { + return ( +
+ 点击 +
+ ) + } + const customPrefixWrapper = mount() + expect(customPrefixWrapper.find('.kd-input-prefix').find('.prefix-icon')).toBeTruthy() + expect(customPrefixWrapper.find('.kd-input-prefix').find('.prefix-icon')).toHaveStyle( + 'color', + 'RGBA(255, 255, 255, 0)', + ) + customPrefixWrapper.setProps({ value: 'red' }) + customPrefixWrapper.update() + expect(customPrefixWrapper.find('.kd-input-prefix').find('.prefix-icon')).toHaveStyle('color', 'RGB(255, 0, 0)') + expect(customPrefixWrapper.find('.kd-input-prefix').find('.prefix-icon').text()).toEqual('点击') // custom suffixIcon const suffix = (rgbColor: string) => { @@ -136,19 +212,36 @@ describe('ColorPicker', () => {
) } - const customSuffixWrapper = mount() - expect(customSuffixWrapper.find('.suffix-icon')).toBeTruthy() - expect(customSuffixWrapper.find('.suffix-icon')).toHaveStyle('color', 'rgb(178, 178, 178)') + const customSuffixWrapper = mount( null} suffixIcon={suffix} />) + expect(customSuffixWrapper.find('.kd-input-suffix').find('.suffix-icon')).toBeTruthy() + expect(customSuffixWrapper.find('.kd-input-suffix').find('.suffix-icon')).toHaveStyle( + 'color', + 'RGBA(255, 255, 255, 0)', + ) customSuffixWrapper.setProps({ value: 'red' }) customSuffixWrapper.update() - expect(customSuffixWrapper.find('.suffix-icon')).toHaveStyle('color', 'rgb(255, 0, 0)') - expect(customSuffixWrapper.find('.suffix-icon').text()).toEqual('点击') + expect(customSuffixWrapper.find('.kd-input-suffix').find('.suffix-icon')).toHaveStyle('color', 'RGB(255, 0, 0)') + expect(customSuffixWrapper.find('.kd-input-suffix').find('.suffix-icon').text()).toEqual('点击') // defaultValue - const underlineDefValueWrapper = mount() - const borderedDefValueWrapper = mount() + const underlineDefValueWrapper = mount( + , + ) + const borderedDefValueWrapper = mount() expect(underlineDefValueWrapper.find('.kd-input-underline').prop('value')).toEqual('#fff') + expect(underlineDefValueWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual( + '#FFFFFF', + ) + expect(underlineDefValueWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual( + '100%', + ) expect(borderedDefValueWrapper.find('.kd-color-picker-input').at(0).prop('value')).toEqual('#666') + expect(borderedDefValueWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual( + '#666666', + ) + expect(borderedDefValueWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual( + '100%', + ) // value underlineDefValueWrapper.setProps({ value: 'red' }) @@ -156,8 +249,19 @@ describe('ColorPicker', () => { underlineDefValueWrapper.update() borderedDefValueWrapper.update() expect(underlineDefValueWrapper.find('.kd-input-underline').prop('value')).toEqual('red') + expect(underlineDefValueWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual( + '#FF0000', + ) + expect(underlineDefValueWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual( + '100%', + ) expect(borderedDefValueWrapper.find('.kd-color-picker-input').at(0).prop('value')).toEqual('blue') - + expect(borderedDefValueWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual( + '#0000FF', + ) + expect(borderedDefValueWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual( + '100%', + ) // defaultOpen let colorValue = '' const onChange = jest.fn((color) => { @@ -165,12 +269,14 @@ describe('ColorPicker', () => { }) const defaultOpenWrapper = mount() expect(defaultOpenWrapper.exists('.kd-color-picker-pop')).toBeTruthy() - expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('#b2b2b2') - expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('100%') + expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('HEX') + expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual('#FFFFFF') + expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('0%') defaultOpenWrapper.setProps({ defaultValue: 'blue' }) defaultOpenWrapper.update() expect(borderedDefValueWrapper.find('.kd-color-picker-input').at(0).prop('value')).toEqual('blue') - expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('#0000ff') + expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('HEX') + expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual('#0000FF') expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('100%') // functionalColor、functionalColorName、switchName、showSwitch @@ -188,7 +294,8 @@ describe('ColorPicker', () => { expect(onChange).toHaveBeenCalled() expect(colorValue).toEqual('#themeColor') expect(defaultOpenWrapper.find('.kd-switch').hasClass('kd-switch-checked')).toBeTruthy() - expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('#333333') + expect(defaultOpenWrapper.find('.kd-select-selection-item').text()).toEqual('HEX') + expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual('#333333') expect(defaultOpenWrapper.find('.kd-color-picker-input').at(0).prop('value')).toEqual('#themeColor') expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('100%') expect( @@ -207,20 +314,36 @@ describe('ColorPicker', () => { expect(defaultOpenWrapper.find('.kd-color-picker-panel-switch').find('span').at(0).text()).toEqual('酷玩风格') // presetColor、showPresetColor - expect(defaultOpenWrapper.find('.kd-color-picker-panel-colorDivContainer').children('li').length).toEqual(36) + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-container').children('li').length).toEqual(36) const colorArr = ['blue', '#0000ff', 'rgb(0,0,255)', 'hsl(240,100%,50%)', 'hsb(240,100%,100%)'] defaultOpenWrapper.setProps({ presetColor: colorArr }) defaultOpenWrapper.update() - expect(defaultOpenWrapper.find('.kd-color-picker-panel-colorDivContainer').children('li').length).toEqual(5) + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-title')).not.toExist() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-container').children('li').length).toEqual(5) defaultOpenWrapper.setProps({ showPresetColor: false }) defaultOpenWrapper.update() - expect(defaultOpenWrapper.exists('.kd-color-picker-panel-colorDivContainer')).toBeFalsy() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-title')).not.toExist() + expect(defaultOpenWrapper.exists('.kd-color-picker-panel-color-box-container')).toBeFalsy() defaultOpenWrapper.setProps({ showPresetColor: true }) defaultOpenWrapper.update() - expect(defaultOpenWrapper.exists('.kd-color-picker-panel-colorDivContainer')).toBeTruthy() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-title')).not.toExist() + expect(defaultOpenWrapper.exists('.kd-color-picker-panel-color-box-container')).toBeTruthy() defaultOpenWrapper.setProps({ presetColor: [] }) defaultOpenWrapper.update() - expect(defaultOpenWrapper.exists('.kd-color-picker-panel-colorDivContainer-unset-color')).toBeTruthy() + expect(defaultOpenWrapper.exists('.kd-color-picker-panel-color-box-container')).toBeFalsy() + + // historicalColor + defaultOpenWrapper.setProps({ historicalColor: colorArr, presetColor: colorArr }) + defaultOpenWrapper.update() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-title')).toExist() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-historical-color-box-title')).toExist() + expect( + defaultOpenWrapper.find('.kd-color-picker-panel-historical-color-box-container').children('li').length, + ).toEqual(5) + defaultOpenWrapper.setProps({ historicalColor: [] }) + defaultOpenWrapper.update() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-historical-color-box')).not.toExist() + expect(defaultOpenWrapper.find('.kd-color-picker-panel-color-box-title')).not.toExist() // showColorTransfer defaultOpenWrapper.setProps({ showColorTransfer: false }) @@ -246,6 +369,73 @@ describe('ColorPicker', () => { ), ).toBeFalsy() + // showAlpha + expect(defaultOpenWrapper.find('.kd-color-picker-panel-container-transparent')).toExist() + defaultOpenWrapper.setProps({ showAlphaInput: false }) + defaultOpenWrapper.update() + expect(defaultOpenWrapper.exists('.kd-color-picker-panel-container-transparent')).toBeFalsy() + + // format + const formatWrapper = mount() + formatWrapper.find('.kd-color-picker-panel-color-box-container').find('li').at(0).simulate('click') + expect( + (formatWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#A1ECFF') + formatWrapper.setProps({ format: 'RGB' }) + formatWrapper.update() + formatWrapper.find('.kd-color-picker-panel-color-box-container').find('li').at(0).simulate('click') + expect( + (formatWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('RGB(161, 236, 255)') + formatWrapper.setProps({ format: 'HSB' }) + formatWrapper.update() + formatWrapper.find('.kd-color-picker-panel-color-box-container').find('li').at(0).simulate('click') + expect( + (formatWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('HSB(192, 37%, 100%)') + formatWrapper.setProps({ format: 'HSL' }) + formatWrapper.update() + formatWrapper.find('.kd-color-picker-panel-color-box-container').find('li').at(0).simulate('click') + expect( + (formatWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('HSL(192, 100%, 82%)') + + // panelFormatConfig + const panelFormatConfigWrapper = mount( + , + ) + expect((panelFormatConfigWrapper.find('.kd-select-bordered').getDOMNode() as HTMLInputElement).title).toEqual('RGB') + + // showClear + const showClearWrapper = mount() + expect(showClearWrapper.find('.kd-color-picker-panel-clear')).toExist() + expect( + (showClearWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#EEEEEE') + expect( + ( + showClearWrapper + .find('.kd-color-picker-panel-container-input') + .find('.kd-input') + .getDOMNode() as HTMLInputElement + ).value, + ).toEqual('#EEEEEE') + showClearWrapper.find('.kd-color-picker-panel-clear-box').simulate('click') + expect( + (showClearWrapper.find('.kd-color-picker-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('') + expect( + ( + showClearWrapper + .find('.kd-color-picker-panel-container-input') + .find('.kd-input') + .getDOMNode() as HTMLInputElement + ).value, + ).toEqual('#FFFFFF') + showClearWrapper.setProps({ showClear: false }) + showClearWrapper.update() + expect(showClearWrapper.find('.kd-color-picker-panel-clear')).not.toExist() + // getPopupContainer const wrapperRef = React.createRef() as any const popuContainer = mount( @@ -293,29 +483,45 @@ describe('ColorPicker', () => { // #region controlled & uncontrolled // value it('should display value when both value and defaultValue exist', () => { - const wrapper = mount() + const wrapper = mount() expect(wrapper.find('.kd-color-picker-input').at(0).props().value).toBe('red') + expect( + (wrapper.find('.kd-color-picker-panel-container-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#FF0000') }) it('should display defaultValue when only defaultValue exists', () => { - const wrapper = mount() + const wrapper = mount() expect(wrapper.find('.kd-color-picker-input').at(0).props().value).toBe('blue') + expect( + (wrapper.find('.kd-color-picker-panel-container-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#0000FF') }) it('should not change value when selected in the component', () => { const wrapper = mount() - wrapper.find('.kd-color-picker-panel-colorDivContainer').childAt(0).simulate('click') + wrapper.find('.kd-color-picker-panel-color-box-container').childAt(0).simulate('click') expect(wrapper.find('.kd-color-picker-input').at(0).props().value).toBe('blue') + expect( + (wrapper.find('.kd-color-picker-panel-container-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#0000FF') }) it('should change value when use onChange event', async () => { const changeValue = 'blue' const handleChangeValue = jest.fn(async (colorValue) => { - expect(colorValue).toEqual('#a1ecff') + expect(colorValue).toEqual('#A1ECFF') await sleep(1000) - expect(wrapper.find('.kd-color-picker-input').first().props().value).toEqual('#a1ecff') + expect(wrapper.find('.kd-color-picker-input').first().props().value).toEqual('#A1ECFF') + expect( + (wrapper.find('.kd-color-picker-panel-container-input').find('.kd-input').getDOMNode() as HTMLInputElement) + .value, + ).toEqual('#A1ECFF') }) const wrapper = mount() expect(wrapper.find('.kd-color-picker-input').first().props().value).toEqual('blue') + expect( + (wrapper.find('.kd-color-picker-panel-container-input').find('.kd-input').getDOMNode() as HTMLInputElement).value, + ).toEqual('#0000FF') act(() => { - wrapper.find('.kd-color-picker-panel-colorDivContainer').childAt(0).simulate('click') + wrapper.find('.kd-color-picker-panel-color-box-container').childAt(0).simulate('click') }) }) // visible @@ -345,30 +551,31 @@ describe('ColorPicker', () => { // #endregion // #region 8.component interaction(event) - const testCommonState = (wrapper: any, colorValue: string, opacity: string) => { + const testCommonState = (format: string, wrapper: any, colorValue: string, noAlphaValue: string, opacity: string) => { expect(wrapper.find('.kd-color-picker-input').at(0).prop('value')).toEqual(colorValue) - expect(wrapper.find('.kd-select-wrapper').props().title).toEqual(colorValue) - expect(wrapper.find('.kd-select-selection-item').text()).toEqual(colorValue) + expect(wrapper.find('.kd-select-wrapper').props().title).toEqual(format) + expect(wrapper.find('.kd-select-selection-item').text()).toEqual(format) + expect(wrapper.find('.kd-color-picker-panel-container-input').at(0).prop('value')).toEqual(noAlphaValue) expect(wrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual(opacity) expect(wrapper.find('.kd-select').hasClass('kd-select-visible')).toBeFalsy() } it('should display the correct color values and corrent opacity when setting different alpha values', () => { const wrapper = mount() - expect(wrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('100%') + expect(wrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('0%') wrapper .find('.kd-color-picker-panel-container-transparent') .at(0) .simulate('change', { target: { value: '10%' } }) expect(wrapper.find('.kd-color-picker-panel-container-transparent').at(0).prop('value')).toEqual('10%') - testCommonState(wrapper, '#b2b2b21a', '10%') + testCommonState('HEX', wrapper, '#FFFFFF1A', '#FFFFFF', '10%') wrapper.unmount() }) it('should display the correct color values and corrent opacity when clicking on different preset colors', () => { const wrapper = mount() - wrapper.find('.kd-color-picker-panel-colorDivContainer').children('li').at(0).simulate('click') - testCommonState(wrapper, '#a1ecff', '100%') + wrapper.find('.kd-color-picker-panel-color-box-container').children('li').at(0).simulate('click') + testCommonState('HEX', wrapper, '#A1ECFF', '#A1ECFF', '100%') wrapper.unmount() }) @@ -381,7 +588,7 @@ describe('ColorPicker', () => { const wrapper = mount() expect(wrapper.find('.kd-color-picker-panel')).toExist() expect(wrapper.find('.kdicon-arrow-down')).toExist() - wrapper.setProps({ showColorTransfer: false, showPresetColor: false }) + wrapper.setProps({ showColorTransfer: false, showPresetColor: false, showClear: false }) wrapper.update() expect(wrapper.find('.kd-color-picker-panel')).not.toExist() expect(wrapper.find('.kdicon-arrow-down')).not.toExist() @@ -420,6 +627,7 @@ describe('ColorPicker', () => { placeholder: '??', showColorTransfer: true, showPresetColor: true, + showClear: false, showColorPickerBox: { showBox: false, showHue: false, showOpacity: false }, }, }, @@ -435,8 +643,8 @@ describe('ColorPicker', () => { expect(wrapper.find('.kd-color-picker-input').at(0).prop('placeholder')).toEqual('??') expect(wrapper.find('.kd-color-picker-panel-container-input')).toExist() expect(wrapper.find('.kd-color-picker-panel-container-transparent')).toExist() - expect(wrapper.find('.kd-color-picker-panel-container-transparent')).toExist() - expect(wrapper.find('.kd-color-picker-panel-colorDivContainer')).toExist() + expect(wrapper.find('.kd-color-picker-panel-color-box-container')).toExist() + expect(wrapper.find('.kd-color-picker-panel-clear')).not.toExist() expect( wrapper.find( '.kd-color-picker-panel-chrome-no-box.kd-color-picker-panel-chrome-no-hue.kd-color-picker-panel-chrome-no-opacity', diff --git a/components/color-picker/color-picker-panel.tsx b/components/color-picker/color-picker-panel.tsx index fada970d..e8c15db7 100644 --- a/components/color-picker/color-picker-panel.tsx +++ b/components/color-picker/color-picker-panel.tsx @@ -10,7 +10,6 @@ import { valOfCorrespondingType, strFixed, getColorObj, - highlightPresetColorIndex, presetColorToHEX, colorToStr, } from './utils/colorFormat' @@ -26,11 +25,14 @@ import { isIE } from '../_utils/ieUtil' const ColorPickerPanel: FC = (props) => { const { setCorrectColorValue, + setInputCorrectColorValue, setInputColorValue, setAlpha, setAlphaNoVerifyVal, setIsFollow, - setClickedColorIndex, + setClickedPresetColorIndex, + setClickedHistoricalColorIndex, + setClickColorIndex, setShowPanel, setColTypeArr, setCurrentColorType, @@ -38,9 +40,11 @@ const ColorPickerPanel: FC = (props) => { onVisibleChange, alpha, alphaNoVerifyVal, - clickedColorIndex, + clickedPresetColorIndex, + clickedHistoricalColorIndex, colTypeArr, correctColorValue, + inputCorrectColorValue, currentColorType, functionalColor, functionalColorName, @@ -57,6 +61,7 @@ const ColorPickerPanel: FC = (props) => { showPresetColor, showColorPickerBox, showColorPickerPanel, + showAlphaInput, value, visible, showPanel, @@ -104,74 +109,87 @@ const ColorPickerPanel: FC = (props) => { const historicalColorBoxTitleCls = classNames(`${colorPickerPrefixCls}-panel-historical-color-box-title`) const historicalColorBoxContainerCls = classNames(`${colorPickerPrefixCls}-panel-historical-color-box-container`) + const setPanelState = ( + formatArr: Array, + correctColorValue: string, + inputColorValue: string, + alpha?: number, + alphaStr?: string, + ) => { + setColTypeArr(formatArr) + setCorrectColorValue(correctColorValue) + setInputCorrectColorValue(inputColorValue) + setInputColorValue(inputColorValue) + alpha && setAlpha(alpha) + alphaStr && setAlphaNoVerifyVal(alphaStr) + } + const handleClearClick = () => { - const formatArr = colorFormat(defaultSystemColor) as IColorTypesObj[] + const formatArr = colorFormat(defaultSystemColor, 0) as IColorTypesObj[] setPanelState(formatArr, defaultSystemColor, '', 0, '0%') + setClickColorIndex(-1) + onChange?.('', formatArr) } - const colorLiClick = (index: number, colorValue: string) => { - const formatArr = colorFormat(colorValue, alpha) as IColorTypesObj[] + const presetColorClick = (index: number, colorValue: string) => { + const colorLiAlpha = strFixed(Color(getColorObj(colorValue)).alpha(), 2) + const formatArr = colorFormat(colorValue, colorLiAlpha) as IColorTypesObj[] const formatCorrectValue = removeTransparency(colorValue) const formatInputValue = toUpCase(formatArr[valOfCorrespondingType(format) as number].value) setIsFollow(false) - if (isFollow) { - setAlpha(1) - setAlphaNoVerifyVal(100 + '%') + setAlpha(isFollow ? 1 : colorLiAlpha) + setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%') + if (value === undefined) { + setInputColorValue(formatInputValue) + setCorrectColorValue(formatCorrectValue) + setColTypeArr(formatArr) } + setClickedPresetColorIndex(index) + onChange?.(formatInputValue, formatArr) + } + const historicalColorClick = (index: number, colorValue: string) => { + const colorLiAlpha = strFixed(Color(getColorObj(colorValue)).alpha(), 2) + const formatArr = colorFormat(colorValue, colorLiAlpha) as IColorTypesObj[] + const formatCorrectValue = removeTransparency(colorValue) + const formatInputValue = toUpCase(formatArr[valOfCorrespondingType(format) as number].value) + setIsFollow(false) + setAlpha(isFollow ? 1 : colorLiAlpha) + setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%') if (value === undefined) { setInputColorValue(formatInputValue) setCorrectColorValue(formatCorrectValue) setColTypeArr(formatArr) } - setClickedColorIndex(index) - onChange && onChange(formatInputValue, formatArr) + setClickedHistoricalColorIndex(index) + onChange?.(formatInputValue, formatArr) } const handleTypeChange = (selectValue: IColorTypesObj['type']) => { setCurrentColorType(selectValue) - if (value === undefined) { - const colorStr = colTypeArr.find((item) => item.type === selectValue)?.value! - setCorrectColorValue( - colorFormat(colorStr, 1, selectValue as Exclude, true) as string, - ) - setInputColorValue(colTypeArr.find((item) => item.type === format)?.value!) - } - onChange && onChange(colTypeArr.find((item) => item.type === format)?.value!, colTypeArr) + const colorStr = colTypeArr.find((item) => item.type === selectValue)?.value! + setCorrectColorValue( + colorFormat(colorStr, 1, selectValue as Exclude, true) as string, + ) + setInputColorValue(colTypeArr.find((item) => item.type === format)?.value!) + onChange?.(colTypeArr.find((item) => item.type === format)?.value!, colTypeArr) } const removeTransparency = (color: string) => { return colorFormat(color, 1, currentColorType as Exclude, true) as string } - const setPanelState = ( - formatArr: Array, - correctColorValue: string, - inputColorValue: string, - alpha?: number, - alphaStr?: string, - ) => { - setColTypeArr(formatArr) - setCorrectColorValue(correctColorValue) - setInputColorValue(inputColorValue) - alpha && setAlpha(alpha) - alphaStr && setAlphaNoVerifyVal(alphaStr) - } - const handleAlphaChange = (e: React.ChangeEvent) => { const regPercentage = /^(0|[1-9][0-9]?|100)%$/ const regDot = /^(0(\.\d+)?|1(\.0+)?)$/ const val = e.target.value - if (value !== undefined) return - - setAlphaNoVerifyVal(val) - const getColorFormat = (alpha: number) => { const formatArr = colorFormat(correctColorValue, alpha, 'all', true) as IColorTypesObj[] const outValue = formatArr[valOfCorrespondingType(format) as number].value const innerInput = removeTransparency(outValue) return { formatArr, outValue, innerInput } } + let alphaValue: number if (regPercentage.test(val)) { alphaValue = +val.replace('%', '') / 100 @@ -181,11 +199,13 @@ const ColorPickerPanel: FC = (props) => { alphaValue = 1 } const { formatArr, outValue, innerInput } = getColorFormat(alphaValue) - setPanelState(formatArr, innerInput as string, outValue, alphaValue) - setClickedColorIndex( - highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)), - ) - onChange && onChange(outValue as string, formatArr as IColorTypesObj[]) + + if (value === undefined) { + setAlphaNoVerifyVal(val) + setPanelState(formatArr, innerInput as string, outValue, alphaValue) + setClickColorIndex(formatArr[0].value) + } + onChange?.(outValue as string, formatArr as IColorTypesObj[]) } const handleAlphaBlur = (e: React.ChangeEvent) => { @@ -207,20 +227,30 @@ const ColorPickerPanel: FC = (props) => { const handleHEXInputBlur = (e: React.ChangeEvent) => { const val = e.target.value + const correctColor = colTypeArr.find((item) => item.type === format)?.value as string if (validateColor(val)) { - const formatArr = colorFormat(val, alpha, 'all', true) as IColorTypesObj[] + const formatArr = colorFormat(val, inputCorrectColorValue ? alpha : 1, 'all', true) as IColorTypesObj[] const outValue = formatArr[valOfCorrespondingType(format) as number].value if (value === undefined) { const innerInput = removeTransparency(val) - setPanelState(formatArr, innerInput as string, outValue) + if (!inputCorrectColorValue) { + setPanelState(formatArr, innerInput as string, outValue, 1, '100%') + } else { + setPanelState(formatArr, innerInput as string, outValue) + } + } else if (onChange === undefined) { + setPanelState(colTypeArr, removeTransparency(correctColor), correctColor) } - onChange && onChange(outValue, formatArr) + onChange?.(outValue, formatArr) } else { - if (value === undefined) { - const correctColor = colTypeArr.find((item) => item.type === format)?.value as string + if (!inputCorrectColorValue) { + const formatArr = colorFormat(correctColor, 1, 'all', true) as IColorTypesObj[] + setPanelState(formatArr, removeTransparency(correctColor), correctColor, 1, '100%') + onChange?.(formatArr.find((item) => item.type === format)?.value!, formatArr) + } else { setPanelState(colTypeArr, removeTransparency(correctColor), correctColor) + onChange?.(colTypeArr.find((item) => item.type === format)?.value!, colTypeArr) } - onChange && onChange(colTypeArr.find((item) => item.type === format)?.value!, colTypeArr) } } @@ -229,12 +259,24 @@ const ColorPickerPanel: FC = (props) => { } const handleInputGroupItemBlur = () => { - const formatArr = colorFormat(correctColorValue, alpha, 'all', true) as IColorTypesObj[] + const formatArr = colorFormat( + correctColorValue, + inputCorrectColorValue ? alpha : 1, + 'all', + true, + ) as IColorTypesObj[] const outValue = formatArr[valOfCorrespondingType(format) as number].value if (value === undefined) { - setPanelState(formatArr, correctColorValue as string, outValue) + if (inputCorrectColorValue) { + setPanelState(formatArr, correctColorValue as string, outValue) + } else { + setPanelState(formatArr, correctColorValue as string, outValue, 1, '100%') + } + } else if (onChange === undefined) { + const correctColor = colTypeArr.find((item) => item.type === format)?.value as string + setPanelState(colTypeArr, removeTransparency(correctColor), correctColor) } - onChange && onChange(outValue, formatArr) + onChange?.(outValue, formatArr) } const handleInputGroupItemChange = (e: React.ChangeEvent, color: string, i: number) => { @@ -250,7 +292,7 @@ const ColorPickerPanel: FC = (props) => { const getColorAttr = () => { const selectedComponents = (colorComponents as any)[currentColorType] if (!selectedComponents) { - return // 如果 currentColorType 不是预期的类型，返回 undefined 或处理错误 + return } return selectedComponents.reduce((acc: any, component: string, index: number) => { acc[component] = i === index ? number : colorArr[index] @@ -264,7 +306,6 @@ const ColorPickerPanel: FC = (props) => { } return colorToStr(colorObj) } - setCorrectColorValue(getColorValue()) } @@ -284,52 +325,67 @@ const ColorPickerPanel: FC = (props) => { formatArr = colorFormat(functionalColor, alpha) as IColorTypesObj[] setPanelState( formatArr, - formatArr[valOfCorrespondingType(currentColorType) as number].value, + removeTransparency(formatArr[valOfCorrespondingType(currentColorType) as number].value), functionalColorName, strFixed(Color(getColorObj(functionalColor)).alpha(), 2), strFixed(Color(getColorObj(functionalColor)).alpha(), 2) * 100 + '%', ) - setClickedColorIndex( - highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)), - ) + setClickColorIndex(formatArr[0].value) } else { + // formatArr = colorFormat(correctColorValue, alpha, 'all', true) as IColorTypesObj[] + // setPanelState( + // formatArr, + // correctColorValue, + // formatArr[valOfCorrespondingType(format) as number].value, + // alpha, + // alpha * 100 + '%', + // ) formatArr = colorFormat(defaultSystemColor, 1, 'all', true) as IColorTypesObj[] setPanelState(formatArr, defaultSystemColor, '', 1, 100 + '%') - setClickedColorIndex(-1) + setClickColorIndex(formatArr[0].value) } } } devWarning(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or English color name") } if (switchValue) { - onChange && onChange(functionalColorName, formatArr as IColorTypesObj[]) + onChange?.(functionalColorName, formatArr as IColorTypesObj[]) } else { - onChange && onChange(defaultSystemColor, formatArr as IColorTypesObj[]) + onChange?.(defaultSystemColor, formatArr as IColorTypesObj[]) } } const handleChromeChange = (color: any) => { - const formatArr = colorFormat(color.hex, color.rgb.a) as IColorTypesObj[] + const formatArr = colorFormat(color.hex, inputCorrectColorValue ? color.rgb.a : 1) as IColorTypesObj[] const colorObj = formatArr[valOfCorrespondingType(currentColorType) as number] + console.log('colorObj', formatArr, colorObj) + if (value === undefined) { setIsFollow(false) - setPanelState(formatArr, colorObj.value, colorObj.value, color.rgb.a, (color.rgb.a * 100).toFixed() + '%') - setClickedColorIndex( - highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)), + setPanelState( + formatArr, + removeTransparency(colorObj.value), + colorObj.value, + inputCorrectColorValue ? color.rgb.a : 1, + inputCorrectColorValue ? (color.rgb.a * 100).toFixed() + '%' : '100%', ) + setClickColorIndex(formatArr[0].value) } - onChange && onChange(colorObj.value, formatArr) + onChange?.(colorObj.value, formatArr) } const checkUserPresetColor = (colorArr: string[] | undefined): boolean => { if (!colorArr) return false const isTrueFormat = colorArr.every((hexColor) => { - return ['HEX', 'HSB', 'RGB', 'HSL', 'colorName'].indexOf(validateColor(hexColor)) !== -1 + return ( + ['HEX', 'HEXA', 'HSB', 'HSBA', 'RGB', 'RGBA', 'HSL', 'HSLA', 'colorName'].indexOf(validateColor(hexColor)) !== + -1 + ) }) devWarning( !isTrueFormat, 'color-picker', - "'presetColor' must be an array of hexadecimal, RGB, HSB, HSL or English color name string type", + "'presetColor' must be an array of hexadecimal, HEXA, RGB, RGBA, HSB, HSBA, HSL, HSLA or English color name string type", ) return isTrueFormat } @@ -342,26 +398,24 @@ const ColorPickerPanel: FC = (props) => { }) useEffect(() => { + if (!panelFormatConfig) return if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) { - setInnerFormatConfig({ ...panelFormatConfig, show: baseFormat }) - if (baseFormat.indexOf(panelFormatConfig.default) === -1) { - setInnerFormatConfig({ ...panelFormatConfig, default: 'HEX' }) - devWarning( - true, - 'color-picker', - "'default' property of 'panelFormatConfig' must be one of HEX, RGB, HSB, or HSL", - ) - } - } else if (panelFormatConfig.show.every((item) => baseFormat.indexOf(item) !== -1)) { + devWarning( + true, + 'color-picker', + "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL", + ) + } + if (baseFormat.indexOf(panelFormatConfig?.default) === -1) { + setInnerFormatConfig({ ...panelFormatConfig, default: 'HEX' }) + devWarning(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of HEX, RGB, HSB, or HSL") + } + if (panelFormatConfig.show.every((item) => baseFormat.indexOf(item) !== -1)) { const newShow = baseFormat.filter((ele) => panelFormatConfig.show.indexOf(ele) !== -1) - setInnerFormatConfig({ - ...panelFormatConfig, - show: newShow, - }) if (newShow.indexOf(panelFormatConfig.default) === -1) { - setInnerFormatConfig({ ...panelFormatConfig, default: newShow[0] }) devWarning(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of 'show'") } + } else { devWarning( true, 'color-picker', @@ -389,11 +443,7 @@ const ColorPickerPanel: FC = (props) => {
)} - + {showColorTransfer && (
@@ -428,6 +478,7 @@ const ColorPickerPanel: FC = (props) => { onChange={handleHEXInputChange} onBlur={handleHEXInputBlur} borderType="bordered" + disabled={isFollow} /> ) : (
@@ -444,18 +495,21 @@ const ColorPickerPanel: FC = (props) => { handleInputGroupItemChange(e, correctColorValue, i) }} borderType="bordered" + disabled={isFollow} /> ))}
)} - + {showAlphaInput && ( + + )}
)} {historicalColor && historicalColor?.length > 0 && ( @@ -469,38 +523,43 @@ const ColorPickerPanel: FC = (props) => { key={i} style={{ backgroundColor: `${colorValue}` }} onClick={() => { - colorLiClick(i, colorValue) + historicalColorClick(i, colorValue) }} > -
+
) })}
)} - {showPresetColor && ((presetColor && presetColor?.length > 0) || systemPresetColor.length > 0) && ( -
- {historicalColor && historicalColor?.length > 0 &&
推荐色
} -
- {((checkUserPresetColor(presetColor) && presetColorToHEX(presetColor)) || systemPresetColor).map( - (colorValue: string, i) => { - return ( -
  • { - colorLiClick(i, colorValue) - }} - > -
    -
    • - ) - }, - )} + {showPresetColor && + ((presetColor && presetColor?.length > 0) || (!presetColor && systemPresetColor.length > 0)) && ( +
    + {historicalColor && historicalColor?.length > 0 &&
    推荐色
    } +
    + {((checkUserPresetColor(presetColor) && presetColorToHEX(presetColor)) || systemPresetColor).map( + (colorValue: string, i) => { + return ( +
  • { + presetColorClick(i, colorValue) + }} + > +
    +
    • + ) + }, + )} +
    -
    - )} + )}
    )} diff --git a/components/color-picker/color-picker.tsx b/components/color-picker/color-picker.tsx index 8231bbc5..060cb1b3 100644 --- a/components/color-picker/color-picker.tsx +++ b/components/color-picker/color-picker.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext, useState, useRef, useEffect } from 'react' +import React, { FC, useContext, useState, useRef, useEffect, useCallback } from 'react' import classNames from 'classnames' import { ConfigContext } from '../config-provider' import { Input } from '../index' @@ -20,9 +20,11 @@ const ColorPicker: FC> = (props) => { value, className, style, + pure, functionalColor, functionalColorName, switchName, + showAlphaInput, showClear, showSwitch, showColorTransfer, @@ -43,6 +45,7 @@ const ColorPicker: FC> = (props) => { onVisibleChange, } = colorPickerProps const [inputColorValue, setInputColorValue] = useState(defaultValue || '') + const [inputCorrectColorValue, setInputCorrectColorValue] = useState('') const [correctColorValue, setCorrectColorValue] = useState(defaultValue || defaultSystemColor) const [currentColorType, setCurrentColorType] = useState(panelFormatConfig.default) const [colTypeArr, setColTypeArr] = useState>(colorTypes as IColorTypesObj[]) @@ -50,22 +53,37 @@ const ColorPicker: FC> = (props) => { const [alpha, setAlpha] = useState(0) const [alphaNoVerifyVal, setAlphaNoVerifyVal] = useState(alpha * 100 + '%') const [isFollow, setIsFollow] = useState(false) - const [clickedColorIndex, setClickedColorIndex] = useState() + const [clickedPresetColorIndex, setClickedPresetColorIndex] = useState() + const [clickedHistoricalColorIndex, setClickedHistoricalColorIndex] = useState() const colorPickerPrefixCls = getPrefixCls!(prefixCls, 'color-picker') const popUpLayer = getPrefixCls!(prefixCls, 'color-picker-pop') - const containerCls = classNames(`${colorPickerPrefixCls}-container`) + const containerCls = classNames(`${colorPickerPrefixCls}-container`, { + [`${colorPickerPrefixCls}-container-pure`]: pure, + }) const inputCls = classNames(`${colorPickerPrefixCls}-input`, className) const inputRef = useRef(null) const showColorPickerPanel = showColorTransfer || - (typeof showPresetColor === 'boolean' && showPresetColor && presetColor?.length) || + (typeof showPresetColor === 'boolean' && showPresetColor && (presetColor?.length || systemPresetColor.length)) || typeof showPresetColor === 'undefined' || + showClear || + historicalColor?.length || (functionalColor?.length && showSwitch) || showColorPickerBox?.showBox || showColorPickerBox?.showHue || showColorPickerBox?.showOpacity + const setClickColorIndex = (value: string | number) => { + if (typeof value === 'number') { + setClickedPresetColorIndex(value) + setClickedHistoricalColorIndex(value) + } else { + setClickedPresetColorIndex(highlightPresetColorIndex(value, presetColorToHEX(presetColor || systemPresetColor))) + setClickedHistoricalColorIndex(highlightPresetColorIndex(value, presetColorToHEX(historicalColor))) + } + } + const setIconColor = (value: string) => { value === functionalColorName ? setIsFollow(true) : setIsFollow(false) const inpValue = value === functionalColorName ? functionalColor : value @@ -87,28 +105,27 @@ const ColorPicker: FC> = (props) => { Color(getColorObj(inpValue)).alpha(), getAlphaStr(inpValue), ) - setClickedColorIndex( - highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)), - ) + setClickColorIndex(formatArr[0].value) } else if (inpValue) { - const formatArr = colorFormat(correctColorValue) as IColorTypesObj[] + const formatArr = colorFormat(correctColorValue, alpha) as IColorTypesObj[] setState(formatArr, correctColorValue, alpha, alphaNoVerifyVal) } else { - const formatArr = colorFormat(defaultSystemColor) as IColorTypesObj[] + const formatArr = colorFormat(defaultSystemColor, 0) as IColorTypesObj[] setState(formatArr, defaultSystemColor, 0, '0%') } } const handleChange = (e: React.ChangeEvent) => { - setClickedColorIndex(-1) + setClickColorIndex(-1) const inpValue = e.target.value + if (!inpValue) setInputCorrectColorValue('') if (value === undefined) { setIconColor(inpValue) - setInputColorValue(inpValue) } + setInputColorValue(inpValue) const callback = (val: string, alpha: number) => { const formatArr = colorFormat(val, alpha) as IColorTypesObj[] - onChange && onChange(inpValue, formatArr) + onChange?.(inpValue, formatArr) } if (validateColor(inpValue)) { callback(inpValue, alpha) @@ -118,6 +135,22 @@ const ColorPicker: FC> = (props) => { functionalColor && showSwitch && setIsFollow(false) } + const handleBlur = (e: React.ChangeEvent) => { + const inpValue = e.target.value + const formatArr = colorFormat(correctColorValue, alpha) as IColorTypesObj[] + const getCurrentOutputColor = () => { + if (inputCorrectColorValue) { + return formatArr.find((item) => item.type === format)!.value + } + return '' + } + if (value === undefined) { + setIconColor(inpValue) + setInputColorValue(getCurrentOutputColor()) + } + onChange?.(getCurrentOutputColor(), formatArr) + } + const handleClick = () => { if (typeof visible === 'undefined') { setShowPanel(!showPanel) @@ -125,6 +158,12 @@ const ColorPicker: FC> = (props) => { onVisibleChange && onVisibleChange(!showPanel) } + useEffect(() => { + if (validateColor(value ?? inputColorValue)) { + setInputCorrectColorValue(value ?? inputColorValue) + } + }, [inputColorValue, value]) + useEffect(() => { if (typeof visible !== 'undefined') { setShowPanel(visible) @@ -132,7 +171,7 @@ const ColorPicker: FC> = (props) => { }, [visible]) useEffect(() => { - if (value) { + if (value !== undefined) { setIconColor(value) } else { if (defaultValue) { @@ -141,45 +180,43 @@ const ColorPicker: FC> = (props) => { } }, [value, defaultValue]) - const afterIcon = () => { + const beforeIcon = useCallback(() => { const afterIconContainerCls = classNames(`${colorPickerPrefixCls}-icon`, { [`${colorPickerPrefixCls}-icon-underline`]: borderType === 'underline', [`${colorPickerPrefixCls}-icon-bordered`]: borderType === 'bordered', - [`${colorPickerPrefixCls}-icon-up`]: showPanel, - [`${colorPickerPrefixCls}-icon-down`]: !showPanel, }) const noneLineCls = `${colorPickerPrefixCls}-icon-no-color-line` - return (
    - {!value && !defaultValue && !inputColorValue &&
    } + {!validateColor(value) && !inputCorrectColorValue &&
    }
    ) - } + }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]) const colorInputEle = (
    - {(prefixIcon && prefixIcon(colTypeArr[2].value)) || afterIcon()} + {prefixIcon ? prefixIcon(colTypeArr[2].value, beforeIcon()) : beforeIcon()}
    } suffix={ suffixIcon && (
    - {suffixIcon(colTypeArr[2].value)} + {suffixIcon(colTypeArr[2].value, beforeIcon())}
    ) } @@ -190,6 +227,7 @@ const ColorPicker: FC> = (props) => { const panel = ( > = (props) => { showPanel={showPanel} onVisibleChange={onVisibleChange} // private + setInputCorrectColorValue={setInputCorrectColorValue} setInputColorValue={setInputColorValue} setCorrectColorValue={setCorrectColorValue} + setClickedPresetColorIndex={setClickedPresetColorIndex} + setClickedHistoricalColorIndex={setClickedHistoricalColorIndex} + setClickColorIndex={setClickColorIndex} + setAlpha={setAlpha} + setAlphaNoVerifyVal={setAlphaNoVerifyVal} + setIsFollow={setIsFollow} + setShowPanel={setShowPanel} + setColTypeArr={setColTypeArr} + setCurrentColorType={setCurrentColorType} correctColorValue={correctColorValue} - clickedColorIndex={clickedColorIndex} - setClickedColorIndex={setClickedColorIndex} + inputCorrectColorValue={inputCorrectColorValue} + clickedPresetColorIndex={clickedPresetColorIndex} + clickedHistoricalColorIndex={clickedHistoricalColorIndex} onChange={onChange} alpha={alpha} - setAlpha={setAlpha} alphaNoVerifyVal={alphaNoVerifyVal} - setAlphaNoVerifyVal={setAlphaNoVerifyVal} isFollow={isFollow} - setIsFollow={setIsFollow} - setShowPanel={setShowPanel} inputRef={inputRef} colTypeArr={colTypeArr} - setColTypeArr={setColTypeArr} currentColorType={currentColorType} - setCurrentColorType={setCurrentColorType} showColorPickerPanel={showColorPickerPanel} /> ) diff --git a/components/color-picker/demo/color-picker-alpha.md b/components/color-picker/demo/color-picker-alpha.md new file mode 100644 index 00000000..5f6e92d9 --- /dev/null +++ b/components/color-picker/demo/color-picker-alpha.md @@ -0,0 +1,28 @@ +--- +title: 透明度输入框可配置 +order: 12 +--- + +我们提供透明度输入的配置能力，可通过 showAlphaInput 控制透明度输入框的显隐 + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ColorPicker } from '@kdcloudjs/kdesign' + +const Demo: React.FC = () => { + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + return ( + <> + +
    + + + ) +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-controlled.md b/components/color-picker/demo/color-picker-controlled.md index 7f63c583..6771451a 100644 --- a/components/color-picker/demo/color-picker-controlled.md +++ b/components/color-picker/demo/color-picker-controlled.md @@ -11,7 +11,7 @@ import ReactDOM from 'react-dom' import { ColorPicker, Button } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { - const [color, setColor] = React.useState('#ff0000') + const [color, setColor] = React.useState('#FF0000') const onChange = (inputValue: string) => { console.log('inputValue', inputValue) @@ -27,7 +27,7 @@ const Demo: React.FC = () => { - + ) } diff --git a/components/color-picker/demo/color-picker-default-value.md b/components/color-picker/demo/color-picker-default-value.md index 025c6979..03a7b62a 100644 --- a/components/color-picker/demo/color-picker-default-value.md +++ b/components/color-picker/demo/color-picker-default-value.md @@ -15,7 +15,7 @@ const Demo: React.FC = () => { console.log('color', inputValue) } - return + return } ReactDOM.render(, mountNode) diff --git a/components/color-picker/demo/color-picker-format.md b/components/color-picker/demo/color-picker-format.md new file mode 100644 index 00000000..1b81061c --- /dev/null +++ b/components/color-picker/demo/color-picker-format.md @@ -0,0 +1,28 @@ +--- +title: 输出颜色格式可配置 +order: 13 +--- + +可以通过 format 属性对输出的颜色格式进行限制 + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ColorPicker } from '@kdcloudjs/kdesign' + +const Demo: React.FC = () => { + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + return ( + <> + +
    + + + ) +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-function-color.md b/components/color-picker/demo/color-picker-function-color.md index 9a151e76..a801efae 100644 --- a/components/color-picker/demo/color-picker-function-color.md +++ b/components/color-picker/demo/color-picker-function-color.md @@ -17,11 +17,11 @@ const Demo: React.FC = () => { return ( <> - +
    { + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + const historicalColor = [ + 'blue', + '#0000FF', + '#0000FFEE', + 'RGB(0,0,255)', + 'RGBA(0,0,200,0.5)', + 'HSL(240,100%,50%)', + 'HSLA(240,100%,50%,0.5)', + 'HSB(240,100%,100%)', + 'HSBA(240,100%,100%,0.5)', + ] + + return +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-linked-controlled.md b/components/color-picker/demo/color-picker-linked-controlled.md index 23585a55..421ba630 100644 --- a/components/color-picker/demo/color-picker-linked-controlled.md +++ b/components/color-picker/demo/color-picker-linked-controlled.md @@ -11,7 +11,7 @@ import ReactDOM from 'react-dom' import { ColorPicker, Button } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { - const [color, setColor] = React.useState('#ff0000') + const [color, setColor] = React.useState('#FF0000') const handleClick = () => { setColor('blue') } @@ -21,7 +21,7 @@ const Demo: React.FC = () => { - + ) } diff --git a/components/color-picker/demo/color-picker-panel-color-format-config.md b/components/color-picker/demo/color-picker-panel-color-format-config.md new file mode 100644 index 00000000..d9573b1b --- /dev/null +++ b/components/color-picker/demo/color-picker-panel-color-format-config.md @@ -0,0 +1,31 @@ +--- +title: 面板可显示颜色类型可配置 +order: 14 +--- + +可以通过 panelFormatConfig 属性对颜色面板中的默认颜色格式以及供选择的颜色格式进行配置 + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ColorPicker } from '@kdcloudjs/kdesign' + +const Demo: React.FC = () => { + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + const config1 = { show: ['HEX', 'RGB'], default: 'RGB' } + const config2 = { show: ['HEX', 'RGB', 'HSB'], default: 'HEX' } + + return ( + <> + +
    + + + ) +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-preset-color.md b/components/color-picker/demo/color-picker-preset-color.md index fbb3afe8..525fd85b 100644 --- a/components/color-picker/demo/color-picker-preset-color.md +++ b/components/color-picker/demo/color-picker-preset-color.md @@ -11,7 +11,17 @@ import ReactDOM from 'react-dom' import { ColorPicker } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { - const colorArr = ['blue', '#0000ff', 'rgb(0,0,255)', 'hsl(240,100%,50%)', 'hsb(240,100%,100%)'] + const colorArr = [ + 'blue', + '#0000FF', + '#0000FFEE', + 'RGB(0,0,255)', + 'RGBA(0,0,200,0.5)', + 'HSL(240,100%,50%)', + 'HSLA(240,100%,50%,0.5)', + 'HSB(240,100%,100%)', + 'HSBA(240,100%,100%,0.5)', + ] const onChange = (inputValue: string) => { console.log('color', inputValue) } diff --git a/components/color-picker/demo/color-picker-pure.md b/components/color-picker/demo/color-picker-pure.md new file mode 100644 index 00000000..432894ae --- /dev/null +++ b/components/color-picker/demo/color-picker-pure.md @@ -0,0 +1,22 @@ +--- +title: 纯色块 +order: 11 +--- + +我们提供纯色块模式，配置属性 pure 即可开启，纯色块模式下 borderType 属性失效 + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ColorPicker } from '@kdcloudjs/kdesign' + +const Demo: React.FC = () => { + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + return +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-suffix-prefix.md b/components/color-picker/demo/color-picker-suffix-prefix.md new file mode 100644 index 00000000..c0b32799 --- /dev/null +++ b/components/color-picker/demo/color-picker-suffix-prefix.md @@ -0,0 +1,49 @@ +--- +title: 颜色展示色块样式 +order: 4 +--- + +可配置属性 prefixIcon、suffixIcon 自定义输入框内颜色展示色块样式及位置 + +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ColorPicker, Icon } from '@kdcloudjs/kdesign' + +const Demo: React.FC = () => { + const homeIcon = (rgbColor) => { + return ( + <> + +
    + + ) + } + + const onChange = (inputValue: string) => { + console.log('color', inputValue) + } + + return ( + <> + +
    + +
    + null} suffixIcon={(_, dom) => dom} /> +
    + null} suffixIcon={homeIcon} /> + + ) +} + +ReactDOM.render(, mountNode) +``` diff --git a/components/color-picker/demo/color-picker-suffix.md b/components/color-picker/demo/color-picker-suffix.md deleted file mode 100644 index b26a5ea6..00000000 --- a/components/color-picker/demo/color-picker-suffix.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 输入框图标 -order: 4 ---- - -可配置属性 suffixIcon 自定义输入框右侧的图标 - -```jsx -import React from 'react' -import ReactDOM from 'react-dom' -import { ColorPicker, Icon } from '@kdcloudjs/kdesign' - -const Demo: React.FC = () => { - const homeIcon = (rgbColor) => { - return - } - - const onChange = (inputValue: string) => { - console.log('color', inputValue) - } - - return -} - -ReactDOM.render(, mountNode) -``` diff --git a/components/color-picker/index.md b/components/color-picker/index.md index 256742b3..928e0ba6 100644 --- a/components/color-picker/index.md +++ b/components/color-picker/index.md @@ -19,17 +19,23 @@ subtitle: 颜色选择器 | className | color-picker 输入框类名 | string | - | 1.7.0 | | defaultOpen | 颜色面板展开配置 | boolean | false | 1.7.0 | | defaultValue | 设置输入框的默认值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 | +| format | 限制颜色选择器的输出格式，必须是 HEX、RGB 、HSB 、HSL 中的一种 | `HEX` \| `RGB` \| `HSB` \| `HSL` | `HEX` | 1.8.16 | | functionalColor | 设置功能色色值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 | | functionalColorName | 设置功能色的名称 | string | #themeColor | 1.7.0 | +| historicalColor | 用户自定义的最近使用颜色，数组中支持十六进制、RGB 、HSB 、HSL 或者颜色英文名称，同时支持透明度，如:\['blue', '#0000FF', '#0000FFEE', 'RGB(0,0,255)', 'RGBA(0,0,200,0.5)', 'HSL(240,100%,50%)', 'HSLA(240,100%,50%,0.5)', 'HSB(240,100%,100%)', 'HSBA(240,100%,100%,0.5)'\] | string[] | - | 1.8.16 | +| panelFormatConfig | 配置颜色面板下拉颜色格式选项，**注意：default 的值必须是 show 中存在的值** | {show:('HEX' \| 'RGB' \| 'HSB' \| 'HSL')[], default:'HEX' \| 'RGB' \| 'HSB' \| 'HSL'} | { show: \['HEX', 'HSB', 'RGB', 'HSL'\], default: 'HEX' } | 1.8.16 | | placeholder | 输入框内容为空时的输入提示 | string | # | 1.7.0 | -| presetColor | 用户自定义的预设颜色，数组中支持十六进制、RGB 、HSB 、HSL 或者颜色英文名称，如:\['blue', '#0000ff', 'rgb(0,0,255)', 'hsl(240,100%,50%)', 'hsb(240,100%,100%)'\] | string[] | - | 1.7.0 | +| presetColor | 用户自定义的预设颜色，数组中支持十六进制、RGB 、HSB 、HSL 或者颜色英文名称，同时支持透明度，如:\['blue', '#0000FF', '#0000FFEE', 'RGB(0,0,255)', 'RGBA(0,0,200,0.5)', 'HSL(240,100%,50%)', 'HSLA(240,100%,50%,0.5)', 'HSB(240,100%,100%)', 'HSBA(240,100%,100%,0.5)'\] | string[] | - | 1.8.16 | +| pure | 纯色块模式 | boolean | false | 1.8.16 | | switchName | 设置功能色开关的名称，**注意：如自定义的名称需支持国际化需要提供 internationalName** | { name: string; internationalName?: string } | { name: '跟随主题色'; internationalName:'followFunctionalColor' } | 1.7.0 | | style | color-picker 输入框样式 | React.CSSProperties | - | 1.7.0 | | showSwitch | 是否展示跟随功能色开关，**注意：设置了功能色才能显示跟随功能色开关** | boolean | false | 1.7.0 | +| showClear | 是否显示无颜色填充按钮 | boolean | true | 1.8.16 | | showColorTransfer | 是否展示颜色格式转换下拉框及透明度输入框 | boolean | true | 1.7.0 | | | showPresetColor | 是否展示预设颜色 | boolean | true | 1.7.0 | | showColorPickerBox | 是否展示拾色容器 | { showBox?: boolean; showHue?: boolean; showOpacity?: boolean } | { showBox: false, showHue: false, showOpacity: false } | 1.7.0 | -| suffixIcon | color-picker 输入框右侧图标(其中 color 为 RGB 格式的字符串，可以同步颜色选择面板的透明度) | (rgbColor: string) => React.ReactNode | - | 1.7.0 | +| suffixIcon | color-picker 输入框右侧图标(其中 rgbColor 为 RGB 格式的字符串，可以同步颜色选择面板的透明度) | (rgbColor: string) => React.ReactNode | - | 1.7.0 | +| prefixIcon | color-picker 输入框左侧图标(其中 rgbColor 为 RGB 格式的字符串，可以同步颜色选择面板的透明度) | (rgbColor: string) => React.ReactNode | - | 1.8.16 | | value | 设置输入框的值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 | | visible | 手动控制面板显隐 | boolean | - | 1.7.35 | | onChange | 输入框颜色值发生变化时触发的回调函数 | (inputValue: string, colorObj:{type: `HEX` \| `HSB` \| `RGB` \| `HSL`, value: string}) => void | - | 1.7.0 | @@ -37,19 +43,23 @@ subtitle: 颜色选择器 ## Design Token -| 分类 | 组件token | 全局token | 默认值 | -| --- | --- | --- | --- | -| color | --kd-c-color-picker-panel-option-color-background-selected | --kd-g-color-theme-3 | rgb(227, 238, 255) | -| font | --kd-c-color-picker-input-font-size | --kd-g-font-size-middle | 14px | -| | --kd-c-color-picker-panel-select-font-size | --kd-g-font-size-middle | 14px | -| | --kd-c-color-picker-panel-alpha-font-size | --kd-g-font-size-middle | 14px | -| sizing | --kd-c-color-picker-input-sizing-width | - | 230px | -| | --kd-c-color-picker-input-sizing-height | - | 28px | -| | --kd-c-color-picker-input-suffix-sizing-width | - | 20px | -| | --kd-c-color-picker-input-suffix-sizing-height | - | 20px | -| | --kd-c-color-picker-panel-sizing-width | - | 304px | -| | --kd-c-color-picker-panel-select-sizing-width | - | 212px | -| | --kd-c-color-picker-panel-select-sizing-height | - | 28px | -| | --kd-c-color-picker-panel-preset-sizing-width | - | 16px | -| | --kd-c-color-picker-panel-preset-sizing-height | - | 16px | -| z-index | --kd-c-color-picker-panel-z-index | --kd-g-z-index-popper | 1050 | +| 分类 | 组件 token | 全局 token | 默认值 | +| ------- | ---------------------------------------------------------- | ----------------------- | ------------------ | +| color | --kd-c-color-picker-panel-option-color-background-selected | --kd-g-color-theme-3 | rgb(227, 238, 255) | +| font | --kd-c-color-picker-input-font-size | --kd-g-font-size-middle | 14px | +| | --kd-c-color-picker-panel-select-font-size | --kd-g-font-size-middle | 14px | +| | --kd-c-color-picker-panel-alpha-font-size | --kd-g-font-size-middle | 14px | +| sizing | --kd-c-color-picker-input-sizing-width | - | 230px | +| | --kd-c-color-picker-input-sizing-height | - | 28px | +| | --kd-c-color-picker-input-prefix-sizing-width | - | 16px | +| | --kd-c-color-picker-input-prefix-line-sizing-width | - | 1px | +| | --kd-c-color-picker-input-prefix-line-sizing-height | - | 22.6px | +| | --kd-c-color-picker-input-prefix-sizing-height | - | 16px | +| | --kd-c-color-picker-panel-sizing-width | - | 304px | +| | --kd-c-color-picker-panel-select-sizing-width | - | 212px | +| | --kd-c-color-picker-panel-select-sizing-height | - | 28px | +| | --kd-c-color-picker-panel-preset-sizing-width | - | 16px | +| | --kd-c-color-picker-panel-preset-sizing-height | - | 16px | +| | --kd-c-color-picker-panel-historical-sizing-width | - | 16px | +| | --kd-c-color-picker-panel-historical-sizing-height | - | 16px | +| z-index | --kd-c-color-picker-panel-z-index | --kd-g-z-index-popper | 1050 | diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index 180ca1b4..182f83f2 100644 --- a/components/color-picker/interface.ts +++ b/components/color-picker/interface.ts @@ -1,3 +1,4 @@ +import { ReactNode } from 'react' import { tuple } from '../_utils/type' import { PopperProps } from '../_utils/usePopper' @@ -29,12 +30,22 @@ export interface IColorPickerProps extends PopperProps { functionalColor: string // 外部输入框的颜色格式配置 format: Exclude + // 历史颜色 + historicalColor: string[] // 颜色面板的颜色格式配置 panelFormatConfig: IInnerFormat + // 占位字符 + placeholder: string + // 用户自定义的预设颜色 + presetColor: string[] + // 纯色块模式 + pure: boolean // 选择输入框样式 style: React.CSSProperties // 功能色开关的名称 switchName: { name: string; internationalName?: string } + // 是否显示透明度输入框 + showAlphaInput: boolean // 是否显示无颜色填充按钮 showClear: boolean // 是否跟随功能色,定义了功能色才能控制显示跟随主题色开关 @@ -45,12 +56,6 @@ export interface IColorPickerProps extends PopperProps { showPresetColor: boolean // 是否显示外层输入框色块的箭头 showArrow: boolean - // 占位字符 - placeholder: string - // 用户自定义的预设颜色 - presetColor: string[] - // 历史颜色 - historicalColor: string[] // 是否展示拾色容器 showColorPickerBox: { showBox: boolean; showHue: boolean; showOpacity: boolean } // 面板显隐受控配置 @@ -58,9 +63,9 @@ export interface IColorPickerProps extends PopperProps { // 设置颜色选择器的值，可以是十六进制颜色值，RGB颜色值，HSL颜色值，或者颜色名称 value: string // 输入框右侧的图标 - suffixIcon: (rgbColor: string) => React.ReactNode + suffixIcon: (rgbColor: string, dom: ReactNode) => React.ReactNode // 输入框左侧的图标 - prefixIcon: (rgbColor: string) => React.ReactNode + prefixIcon: (rgbColor: string, dom: ReactNode) => React.ReactNode // 当颜色选择器的值发生变化时触发的回调函数 onChange: (inputValue: string, formatColorArr: Array) => void // 面板显隐回调 @@ -70,10 +75,12 @@ export interface IColorPickerProps extends PopperProps { export interface IColorPickerPanelProps { alpha: number alphaNoVerifyVal: string - clickedColorIndex?: number + clickedPresetColorIndex?: number + clickedHistoricalColorIndex?: number colTypeArr: Array correctColorValue: string currentColorType: IColorTypesObj['type'] + inputCorrectColorValue: string functionalColor?: string functionalColorName: string switchName: { name: string; internationalName?: string } @@ -83,6 +90,7 @@ export interface IColorPickerPanelProps { format: Exclude presetColor?: string[] historicalColor?: string[] + showAlphaInput?: boolean showSwitch?: boolean showClear?: boolean showColorTransfer?: boolean @@ -94,11 +102,14 @@ export interface IColorPickerPanelProps { showPanel: boolean setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void setColTypeArr: (colTypeArr: Array) => void - setClickedColorIndex: (clickedColorIndex: number) => void + setClickedPresetColorIndex: (clickedColorIndex: number) => void + setClickedHistoricalColorIndex: (clickedColorIndex: number) => void + setClickColorIndex: (value: number | string) => void setIsFollow: (isFollow: boolean) => void setAlphaNoVerifyVal: (NoVerifyVal: string) => void setAlpha: (alpha: number) => void setCorrectColorValue: (colorValue: string) => void + setInputCorrectColorValue: (colorValue: string) => void setInputColorValue: (colorValue: string) => void setShowPanel: (showPanel: boolean) => void onChange?: (inputValue: string, formatColorArr: Array) => void diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less index c6328583..ab42ca05 100644 --- a/components/color-picker/style/index.less +++ b/components/color-picker/style/index.less @@ -8,6 +8,29 @@ position: relative; width: @color-picker-input-sizing-width; + &-pure { + width: 28px; + + .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + + .@{kd-prefix}-input-prefix { + margin-right: 0; + } + + .@{kd-prefix}-input-suffix { + margin-left: 0; + } + + .@{kd-prefix}-input { + display: none; + } + } + } + .@{color-picker-prefix-cls}-input { width: @color-picker-input-sizing-width; height: @color-picker-input-sizing-height; @@ -31,20 +54,6 @@ text-align: center; color: @bg; - &-up { - .kdicon-arrow-down { - transform: rotate(180deg); - transition: transform @transition-duration-quickly ease-in-out; - } - } - - &-down { - .kdicon-arrow-down { - transform: rotate(0deg); - transition: transform @transition-duration-quickly ease-in-out; - } - } - &-no-color-line { width: @color-picker-input-prefix-line-sizing-width; height: @color-picker-input-prefix-line-sizing-height; @@ -422,8 +431,8 @@ li { position: relative; box-sizing: border-box; - width: @color-picker-panel-preset-sizing-width; - height: @color-picker-panel-preset-sizing-height; + width: @color-picker-panel-historical-sizing-width; + height: @color-picker-panel-historical-sizing-height; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 2px; list-style: none; @@ -435,8 +444,8 @@ box-sizing: inherit; top: -3px; left: -3px; - width: calc(@color-picker-panel-preset-sizing-width + 4px); - height: calc(@color-picker-panel-preset-sizing-height + 4px); + width: calc(@color-picker-panel-historical-sizing-width + 4px); + height: calc(@color-picker-panel-historical-sizing-height + 4px); border: 1px solid rgba(178, 178, 176, 1); border-radius: 4px; diff --git a/components/color-picker/style/token.less b/components/color-picker/style/token.less index 7ee603a8..00d4a238 100644 --- a/components/color-picker/style/token.less +++ b/components/color-picker/style/token.less @@ -22,6 +22,8 @@ @color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px); @color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px); @color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px); +@color-picker-panel-historical-sizing-width: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-width', 16px); +@color-picker-panel-historical-sizing-height: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-height', 16px); // z-index @color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper); diff --git a/components/color-picker/utils/colorFormat.ts b/components/color-picker/utils/colorFormat.ts index bb852d78..d15179c1 100644 --- a/components/color-picker/utils/colorFormat.ts +++ b/components/color-picker/utils/colorFormat.ts @@ -151,7 +151,7 @@ export const highlightPresetColorIndex = (color: string, colorArr: string[]): nu export const presetColorToHEX = (colorArr: string[] | undefined): string[] => { if (!colorArr) return [] const hexColorArr = colorArr.map((color: string) => { - return colorFormat(color, 1, 'HEX') + return colorFormat(color, Color(getColorObj(color)).alpha(), 'HEX') }) return hexColorArr as string[] } diff --git a/components/color-picker/utils/validateColor.ts b/components/color-picker/utils/validateColor.ts index 194e3a72..c7eb383f 100644 --- a/components/color-picker/utils/validateColor.ts +++ b/components/color-picker/utils/validateColor.ts @@ -2,6 +2,7 @@ import { toLowerCase } from './convertLetters' // 输入框颜色类型校验 export function validateColor(color: string): string { + if (!color) return '' const lowerColor = toLowerCase(color) const hexReg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/ const hexaReg = /^#([0-9a-fA-F]{8})$/ diff --git a/components/config-provider/compDefaultProps.tsx b/components/config-provider/compDefaultProps.tsx index ca7165d7..a8517e72 100644 --- a/components/config-provider/compDefaultProps.tsx +++ b/components/config-provider/compDefaultProps.tsx @@ -67,6 +67,8 @@ const compDefaultProps = { functionalColorName: '#themeColor', switchName: { name: '', internationalName: 'followFunctionalColor' }, placeholder: '#', + pure: false, + showAlphaInput: true, showClear: true, showColorTransfer: true, showPresetColor: true,