Browse Source

prefer: optimize allow clear logic (#42439)

* refactor: optimize allow clear logic

* test: fix test coverage down

* refactor: use onChange type
pull/42501/head
红果汁 2 years ago
committed by GitHub
parent
commit
d61c08e7df
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 17
      components/color-picker/ColorPicker.tsx
  2. 3
      components/color-picker/ColorPickerPanel.tsx
  3. 16
      components/color-picker/__tests__/index.test.tsx
  4. 4
      package.json

17
components/color-picker/ColorPicker.tsx

@ -1,4 +1,7 @@
import type { ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker'; import type {
HsbaColorType,
ColorPickerProps as RcColorPickerProps,
} from '@rc-component/color-picker';
import classNames from 'classnames'; import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState'; import useMergedState from 'rc-util/lib/hooks/useMergedState';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
@ -95,10 +98,16 @@ const ColorPicker: CompoundedComponent = (props) => {
}); });
const mergeCls = classNames(mergeRootCls, className, hashId); const mergeCls = classNames(mergeRootCls, className, hashId);
const handleChange = (data: Color) => { const handleChange = (data: Color, type?: HsbaColorType) => {
const color: Color = generateColor(data); let color: Color = generateColor(data);
if (colorCleared && color.toHsb().a > 0) { if (colorCleared) {
setColorCleared(false); setColorCleared(false);
const hsba = color.toHsb();
// ignore alpha slider
if (colorValue.toHsb().a === 0 && type !== 'alpha') {
hsba.a = 1;
color = generateColor(hsba);
}
} }
if (!value) { if (!value) {
setColorValue(color); setColorValue(color);

3
components/color-picker/ColorPickerPanel.tsx

@ -1,3 +1,4 @@
import type { HsbaColorType } from '@rc-component/color-picker';
import RcColorPicker from '@rc-component/color-picker'; import RcColorPicker from '@rc-component/color-picker';
import type { FC } from 'react'; import type { FC } from 'react';
import React from 'react'; import React from 'react';
@ -9,7 +10,7 @@ import ColorPresets from './components/ColorPresets';
import type { ColorPickerBaseProps } from './interface'; import type { ColorPickerBaseProps } from './interface';
interface ColorPickerPanelProps extends ColorPickerBaseProps { interface ColorPickerPanelProps extends ColorPickerBaseProps {
onChange?: (value?: Color) => void; onChange?: (value?: Color, type?: HsbaColorType) => void;
onClear?: (clear?: boolean) => void; onClear?: (clear?: boolean) => void;
} }

16
components/color-picker/__tests__/index.test.tsx

@ -86,6 +86,7 @@ describe('ColorPicker', () => {
expect(container.querySelector('.ant-popover-hidden')).toBeFalsy(); expect(container.querySelector('.ant-popover-hidden')).toBeFalsy();
expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy(); expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
fireEvent.click(container.querySelector('.ant-color-picker-clear')!); fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
await waitFakeTimer(); await waitFakeTimer();
expect(container.querySelector('.ant-popover-hidden')).toBeTruthy(); expect(container.querySelector('.ant-popover-hidden')).toBeTruthy();
expect( expect(
@ -94,12 +95,19 @@ describe('ColorPicker', () => {
expect( expect(
container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'), container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
).toBeTruthy(); ).toBeTruthy();
fireEvent.change(container.querySelector('.ant-color-picker-alpha-input input')!, {
target: { value: 1 }, fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
await waitFakeTimer();
expect(
container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
).toEqual('0%');
fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
target: { value: '#273B57' },
}); });
expect( expect(
container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'), container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
).toBeFalsy(); ).toEqual('100%');
}); });
it('Should render trigger work', async () => { it('Should render trigger work', async () => {

4
package.json

@ -113,7 +113,7 @@
"@ant-design/react-slick": "~1.0.0", "@ant-design/react-slick": "~1.0.0",
"@babel/runtime": "^7.18.3", "@babel/runtime": "^7.18.3",
"@ctrl/tinycolor": "^3.6.0", "@ctrl/tinycolor": "^3.6.0",
"@rc-component/color-picker": "~1.1.0", "@rc-component/color-picker": "~1.1.1",
"@rc-component/mutate-observer": "^1.0.0", "@rc-component/mutate-observer": "^1.0.0",
"@rc-component/tour": "~1.8.0", "@rc-component/tour": "~1.8.0",
"@rc-component/trigger": "^1.13.0", "@rc-component/trigger": "^1.13.0",
@ -323,4 +323,4 @@
"*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write", "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write",
"*.{json,less,md}": "prettier --ignore-unknown --write" "*.{json,less,md}": "prettier --ignore-unknown --write"
} }
} }
Loading…
Cancel
Save