From a6617c9763a0443434721d38decbe8b4952dce04 Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Fri, 26 May 2023 15:19:34 +0800 Subject: [PATCH 1/4] feat(ColorPicker): add onClear --- components/color-picker/ColorPicker.tsx | 15 ++++++--------- components/color-picker/ColorPickerPanel.tsx | 4 ++-- components/color-picker/__tests__/index.test.tsx | 14 ++++---------- components/color-picker/demo/allowClear.md | 4 ++-- components/color-picker/demo/allowClear.tsx | 16 ++++++++++++++-- components/color-picker/index.en-US.md | 7 ++++--- components/color-picker/index.zh-CN.md | 7 ++++--- 7 files changed, 36 insertions(+), 31 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index ea8083c1ba..f84186cd5c 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -5,7 +5,7 @@ import type { import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { CSSProperties } from 'react'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import genPurePanel from '../_util/PurePanel'; import type { ConfigConsumerProps } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context'; @@ -44,6 +44,7 @@ export interface ColorPickerProps onOpenChange?: (open: boolean) => void; onFormatChange?: (format: ColorFormat) => void; onChange?: (value: Color, hex: string) => void; + onClear?: () => void; getPopupContainer?: PopoverProps['getPopupContainer']; autoAdjustOverflow?: PopoverProps['autoAdjustOverflow']; } @@ -71,6 +72,7 @@ const ColorPicker: CompoundedComponent = (props) => { styles, onFormatChange, onChange, + onClear, onOpenChange, getPopupContainer, autoAdjustOverflow = true, @@ -115,8 +117,9 @@ const ColorPicker: CompoundedComponent = (props) => { onChange?.(color, color.toHexString()); }; - const handleClear = (clear: boolean) => { - setColorCleared(clear); + const handleClear = () => { + setColorCleared(true); + onClear?.(); }; const popoverProps: PopoverProps = { @@ -140,12 +143,6 @@ const ColorPicker: CompoundedComponent = (props) => { onFormatChange, }; - useEffect(() => { - if (colorCleared) { - setPopupOpen(false); - } - }, [colorCleared]); - return wrapSSR( void; - onClear?: (clear?: boolean) => void; + onClear?: () => void; } const ColorPickerPanel: FC = (props) => { @@ -26,7 +26,7 @@ const ColorPickerPanel: FC = (props) => { value={color} onChange={(clearColor) => { onChange?.(clearColor); - onClear?.(true); + onClear?.(); }} {...injectProps} /> diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index 7f9083d061..9e4397f324 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -79,16 +79,16 @@ describe('ColorPicker', () => { expect(container.querySelector('.ant-color-picker')).toBeFalsy(); }); - it('Should allowClear work', async () => { - const { container } = render(); + it('Should allowClear and onClear work', async () => { + const onClear = jest.fn(); + const { container } = render(); fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); await waitFakeTimer(); - expect(container.querySelector('.ant-popover-hidden')).toBeFalsy(); expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy(); fireEvent.click(container.querySelector('.ant-color-picker-clear')!); + expect(onClear).toHaveBeenCalledTimes(1); await waitFakeTimer(); - expect(container.querySelector('.ant-popover-hidden')).toBeTruthy(); expect( container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'), ).toEqual('0%'); @@ -96,12 +96,6 @@ describe('ColorPicker', () => { container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'), ).toBeTruthy(); - 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' }, }); diff --git a/components/color-picker/demo/allowClear.md b/components/color-picker/demo/allowClear.md index d09748a780..1eef68ffbb 100644 --- a/components/color-picker/demo/allowClear.md +++ b/components/color-picker/demo/allowClear.md @@ -1,7 +1,7 @@ ## zh-CN -清除已选择的颜色。 +清除已选择的颜色。可以使用受控 open 和 onClear 控制清除时关闭弹窗。 ## en-US -Clear Color. +Clear Color. You can use the controlled open and onClear controls to close popovers when clearing. diff --git a/components/color-picker/demo/allowClear.tsx b/components/color-picker/demo/allowClear.tsx index 90139f523f..71ac5db19b 100644 --- a/components/color-picker/demo/allowClear.tsx +++ b/components/color-picker/demo/allowClear.tsx @@ -1,4 +1,16 @@ import { ColorPicker } from 'antd'; -import React from 'react'; +import React, { useState } from 'react'; -export default () => ; +export default () => { + const [open, setOpen] = useState(false); + return ( + { + setOpen(false); + }} + /> + ); +}; diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index f386923ebc..407d7e2a87 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -36,19 +36,20 @@ Used when the user needs to customize the color selection. | Property | Description | Type | Default | | :-- | :-- | :-- | :-- | | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | -| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | | value | Value of color | string \| `Color` | - | | defaultValue | Default value of color | string \| `Color` | - | -| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | | allowClear | Allow clearing color selected | boolean | false | | presets | Preset colors | `{ label: ReactNode, colors: Array }[]` | - | | children | Trigger of ColorPicker | React.ReactNode | - | | trigger | ColorPicker trigger mode | `hover` \| `click` | `click` | | open | Whether to show popup | boolean | - | -| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - | | disabled | Disable ColorPicker | boolean | - | | placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | | arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | `true` | - | +| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | +| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | +| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - | +| onClear | Called when clear | `() => void` | - | ### Color diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 76d23d3bf5..6613faee45 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -37,19 +37,20 @@ group: | 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :-- | | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | -| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | | value | 颜色的值 | string \| `Color` | - | | defaultValue | 颜色默认的值 | string \| `Color` | - | -| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | | allowClear | 允许清除选择的颜色 | boolean | false | | presets | 预设的颜色 | `{ label: ReactNode, colors: Array }[]` | - | | children | 颜色选择器的触发器 | React.ReactNode | - | | trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` | | open | 是否显示弹出窗口 | boolean | - | -| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | | disabled | 禁用颜色选择器 | boolean | - | | placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | | arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | `true` | - | +| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | +| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | +| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | +| onClear | 清除的回调 | `() => void` | - | ### Color From 434ef1fd7cb75ed5e1b1da3149db548d4ba3a05f Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Fri, 26 May 2023 16:23:21 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/color-picker/demo/allowClear.md | 4 ++-- components/color-picker/demo/allowClear.tsx | 16 ++-------------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/components/color-picker/demo/allowClear.md b/components/color-picker/demo/allowClear.md index 1eef68ffbb..d09748a780 100644 --- a/components/color-picker/demo/allowClear.md +++ b/components/color-picker/demo/allowClear.md @@ -1,7 +1,7 @@ ## zh-CN -清除已选择的颜色。可以使用受控 open 和 onClear 控制清除时关闭弹窗。 +清除已选择的颜色。 ## en-US -Clear Color. You can use the controlled open and onClear controls to close popovers when clearing. +Clear Color. diff --git a/components/color-picker/demo/allowClear.tsx b/components/color-picker/demo/allowClear.tsx index 71ac5db19b..90139f523f 100644 --- a/components/color-picker/demo/allowClear.tsx +++ b/components/color-picker/demo/allowClear.tsx @@ -1,16 +1,4 @@ import { ColorPicker } from 'antd'; -import React, { useState } from 'react'; +import React from 'react'; -export default () => { - const [open, setOpen] = useState(false); - return ( - { - setOpen(false); - }} - /> - ); -}; +export default () => ; From ae54275b25bd432fcdac89cd34625dcde247c9ba Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Fri, 26 May 2023 16:31:54 +0800 Subject: [PATCH 3/4] demo: add clear-close --- components/color-picker/demo/clear-close.md | 7 +++++++ components/color-picker/demo/clear-close.tsx | 9 +++++++++ 2 files changed, 16 insertions(+) create mode 100644 components/color-picker/demo/clear-close.md create mode 100644 components/color-picker/demo/clear-close.tsx diff --git a/components/color-picker/demo/clear-close.md b/components/color-picker/demo/clear-close.md new file mode 100644 index 0000000000..2175907709 --- /dev/null +++ b/components/color-picker/demo/clear-close.md @@ -0,0 +1,7 @@ +## zh-CN + +清除时关闭弹窗。 + +## en-US + +close popover when clearing. diff --git a/components/color-picker/demo/clear-close.tsx b/components/color-picker/demo/clear-close.tsx new file mode 100644 index 0000000000..1d7d581a19 --- /dev/null +++ b/components/color-picker/demo/clear-close.tsx @@ -0,0 +1,9 @@ +import { ColorPicker } from 'antd'; +import React, { useState } from 'react'; + +export default () => { + const [open, setOpen] = useState(false); + return ( + setOpen(false)} /> + ); +}; From cf24e3dd575f9fa89d8131a5098f2eccbd10931a Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Fri, 26 May 2023 16:32:44 +0800 Subject: [PATCH 4/4] demo: remove --- components/color-picker/demo/clear-close.md | 7 ------- components/color-picker/demo/clear-close.tsx | 9 --------- 2 files changed, 16 deletions(-) delete mode 100644 components/color-picker/demo/clear-close.md delete mode 100644 components/color-picker/demo/clear-close.tsx diff --git a/components/color-picker/demo/clear-close.md b/components/color-picker/demo/clear-close.md deleted file mode 100644 index 2175907709..0000000000 --- a/components/color-picker/demo/clear-close.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -清除时关闭弹窗。 - -## en-US - -close popover when clearing. diff --git a/components/color-picker/demo/clear-close.tsx b/components/color-picker/demo/clear-close.tsx deleted file mode 100644 index 1d7d581a19..0000000000 --- a/components/color-picker/demo/clear-close.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { ColorPicker } from 'antd'; -import React, { useState } from 'react'; - -export default () => { - const [open, setOpen] = useState(false); - return ( - setOpen(false)} /> - ); -};