mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat: ColorPicker show clear when value is not set (#45993)

Browse Source 
* feat: color-picker show clear when value is not set

* fix: lint issue

* refactor: turn color defaultvalue to #1677ff

* test: update snap

* refactor: optimize demo type

* chore: back prettier

* chore: back prettier
This commit is contained in:
红果汁 2023-12-13 19:37:28 +08:00 committed by GitHub
parent 0e1545964c
commit b03ca50ab4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 116 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/color-picker/ColorPicker.tsx
View File

@ -12,14 +12,13 @@ import { getStatusClassNames } from '../_util/statusUtils';
import { devUseWarning } from '../_util/warning'; import { devUseWarning } from '../_util/warning';
import type { ConfigConsumerProps } from '../config-provider/context'; import type { ConfigConsumerProps } from '../config-provider/context';
import { ConfigContext } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import DisabledContext from '../config-provider/DisabledContext'; import DisabledContext from '../config-provider/DisabledContext';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useSize from '../config-provider/hooks/useSize'; import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext'; import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext, NoFormStyle } from '../form/context'; import { FormItemInputContext, NoFormStyle } from '../form/context';
import type { PopoverProps } from '../popover'; import type { PopoverProps } from '../popover';
import Popover from '../popover'; import Popover from '../popover';
import { useToken } from '../theme/internal';
import type { Color } from './color'; import type { Color } from './color';
import ColorPickerPanel from './ColorPickerPanel'; import ColorPickerPanel from './ColorPickerPanel';
import ColorTrigger from './components/ColorTrigger'; import ColorTrigger from './components/ColorTrigger';
@ -108,9 +107,8 @@ const ColorPicker: CompoundedComponent = (props) => {
const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext); const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
const contextDisabled = useContext(DisabledContext); const contextDisabled = useContext(DisabledContext);
const mergedDisabled = disabled ?? contextDisabled; const mergedDisabled = disabled ?? contextDisabled;
const [, token] = useToken();
const [colorValue, setColorValue] = useColorState(token.colorPrimary, { const [colorValue, setColorValue] = useColorState('', {
value, value,
defaultValue, defaultValue,
}); });
@ -125,7 +123,7 @@ const ColorPicker: CompoundedComponent = (props) => {
onChange: onFormatChange, onChange: onFormatChange,
}); });
const [colorCleared, setColorCleared] = useState(false); const [colorCleared, setColorCleared] = useState(!value && !defaultValue);
const prefixCls = getPrefixCls('color-picker', customizePrefixCls); const prefixCls = getPrefixCls('color-picker', customizePrefixCls);

96
components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -6,13 +6,8 @@ exports[`ColorPicker Should disabled work 1`] = `
class="ant-color-picker-trigger ant-color-picker-trigger-disabled" class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
</div> </div>
`; `;
@ -23,13 +18,8 @@ exports[`ColorPicker Should panelRender work 1`] = `
class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active" class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
<div <div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft" class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
@ -66,16 +56,16 @@ exports[`ColorPicker Should panelRender work 1`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;" style="position: absolute; left: -50px; top: 50px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler" class="ant-color-picker-handler"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
class="ant-color-picker-saturation" class="ant-color-picker-saturation"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -93,11 +83,11 @@ exports[`ColorPicker Should panelRender work 1`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 9.728183118741065px; top: -16.666666666666668px; z-index: 1;" style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
<div <div
@ -114,11 +104,11 @@ exports[`ColorPicker Should panelRender work 1`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;" style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
@ -133,7 +123,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
> >
<div <div
class="ant-color-picker-color-block-inner" class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);" style="background: rgba(0, 0, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -215,7 +205,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
<input <input
class="ant-input ant-input-sm" class="ant-input ant-input-sm"
type="text" type="text"
value="1677ff" value="000000"
/> />
</span> </span>
</div> </div>
@ -226,9 +216,9 @@ exports[`ColorPicker Should panelRender work 1`] = `
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
> >
<span <span
aria-disabled="true" aria-disabled="false"
aria-label="Increase Value" aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" class="ant-input-number-handler ant-input-number-handler-up"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -253,9 +243,9 @@ exports[`ColorPicker Should panelRender work 1`] = `
</span> </span>
</span> </span>
<span <span
aria-disabled="false" aria-disabled="true"
aria-label="Decrease Value" aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -286,12 +276,12 @@ exports[`ColorPicker Should panelRender work 1`] = `
<input <input
aria-valuemax="100" aria-valuemax="100"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="100" aria-valuenow="0"
autocomplete="off" autocomplete="off"
class="ant-input-number-input" class="ant-input-number-input"
role="spinbutton" role="spinbutton"
step="1" step="1"
value="100%" value="0%"
/> />
</div> </div>
</div> </div>
@ -311,13 +301,8 @@ exports[`ColorPicker Should panelRender work 2`] = `
class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active" class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
<div <div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft" class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
@ -354,16 +339,16 @@ exports[`ColorPicker Should panelRender work 2`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;" style="position: absolute; left: -50px; top: 50px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler" class="ant-color-picker-handler"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
class="ant-color-picker-saturation" class="ant-color-picker-saturation"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -381,11 +366,11 @@ exports[`ColorPicker Should panelRender work 2`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 9.728183118741065px; top: -16.666666666666668px; z-index: 1;" style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
<div <div
@ -402,11 +387,11 @@ exports[`ColorPicker Should panelRender work 2`] = `
style="position: relative;" style="position: relative;"
> >
<div <div
style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;" style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
@ -421,7 +406,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
> >
<div <div
class="ant-color-picker-color-block-inner" class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);" style="background: rgba(0, 0, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -503,7 +488,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
<input <input
class="ant-input ant-input-sm" class="ant-input ant-input-sm"
type="text" type="text"
value="1677ff" value="000000"
/> />
</span> </span>
</div> </div>
@ -514,9 +499,9 @@ exports[`ColorPicker Should panelRender work 2`] = `
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
> >
<span <span
aria-disabled="true" aria-disabled="false"
aria-label="Increase Value" aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" class="ant-input-number-handler ant-input-number-handler-up"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -541,9 +526,9 @@ exports[`ColorPicker Should panelRender work 2`] = `
</span> </span>
</span> </span>
<span <span
aria-disabled="false" aria-disabled="true"
aria-label="Decrease Value" aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -574,12 +559,12 @@ exports[`ColorPicker Should panelRender work 2`] = `
<input <input
aria-valuemax="100" aria-valuemax="100"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="100" aria-valuenow="0"
autocomplete="off" autocomplete="off"
class="ant-input-number-input" class="ant-input-number-input"
role="spinbutton" role="spinbutton"
step="1" step="1"
value="100%" value="0%"
/> />
</div> </div>
</div> </div>
@ -606,12 +591,7 @@ exports[`ColorPicker rtl render component should be rendered correctly in RTL di
class="ant-color-picker-trigger ant-color-picker-rtl" class="ant-color-picker-trigger ant-color-picker-rtl"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
`; `;

19
components/color-picker/__tests__/index.test.tsx
View File

@ -114,7 +114,9 @@ describe('ColorPicker', () => {
it('Should allowClear and onClear work', async () => { it('Should allowClear and onClear work', async () => {
const onClear = jest.fn(); const onClear = jest.fn();
const { container } = render(<ColorPicker allowClear onClear={onClear} />); const { container } = render(
<ColorPicker defaultValue="#1677ff" allowClear onClear={onClear} />,
);
fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
await waitFakeTimer(); await waitFakeTimer();
expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy(); expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
@ -326,7 +328,9 @@ describe('ColorPicker', () => {
it('Should not trigger onChange when click clear after clearing', async () => { it('Should not trigger onChange when click clear after clearing', async () => {
const onChange = jest.fn(); const onChange = jest.fn();
const { container } = render(<ColorPicker allowClear onChange={onChange} />); const { container } = render(
<ColorPicker defaultValue="#1677ff" allowClear onChange={onChange} />,
);
fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
fireEvent.click(container.querySelector('.ant-color-picker-clear')!); fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledTimes(1);
@ -372,14 +376,16 @@ describe('ColorPicker', () => {
}); });
it('Should showText as render function work', async () => { it('Should showText as render function work', async () => {
const { container } = render(<ColorPicker showText={(color) => color.toHexString()} />); const { container } = render(
<ColorPicker defaultValue="#1677ff" showText={(color) => color.toHexString()} />,
);
const targetEle = container.querySelector('.ant-color-picker-trigger-text'); const targetEle = container.querySelector('.ant-color-picker-trigger-text');
expect(targetEle).toBeTruthy(); expect(targetEle).toBeTruthy();
expect(targetEle?.innerHTML).toBe('#1677ff'); expect(targetEle?.innerHTML).toBe('#1677ff');
}); });
it('Should showText work', async () => { it('Should showText work', async () => {
const { container } = render(<ColorPicker open showText />); const { container } = render(<ColorPicker defaultValue="#1677ff" open showText />);
const targetEle = container.querySelector('.ant-color-picker-trigger-text'); const targetEle = container.querySelector('.ant-color-picker-trigger-text');
expect(targetEle).toBeTruthy(); expect(targetEle).toBeTruthy();
@ -595,4 +601,9 @@ describe('ColorPicker', () => {
const { container } = render(<ColorPicker open defaultFormat="hsb" />); const { container } = render(<ColorPicker open defaultFormat="hsb" />);
expect(container.querySelector('.ant-color-picker-hsb-input')).toBeTruthy(); expect(container.querySelector('.ant-color-picker-hsb-input')).toBeTruthy();
}); });
it('Should clear show when value not set', () => {
const { container } = render(<ColorPicker />);
expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
});
}); });

2
components/color-picker/demo/allowClear.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React from 'react';
import { ColorPicker } from 'antd'; import { ColorPicker } from 'antd';
export default () => <ColorPicker allowClear />; export default () => <ColorPicker defaultValue="#1677ff" allowClear />;

2
components/color-picker/demo/base.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { ColorPicker } from 'antd'; import { ColorPicker } from 'antd';
const Demo = () => <ColorPicker />; const Demo = () => <ColorPicker defaultValue="#1677ff" />;
export default Demo; export default Demo;

7
components/color-picker/demo/controlled.tsx
View File

@ -1,10 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ColorPicker, theme } from 'antd'; import { ColorPicker } from 'antd';
import type { Color } from 'antd/es/color-picker'; import type { ColorPickerProps } from 'antd/es/color-picker';
const Demo: React.FC = () => { const Demo: React.FC = () => {
const { token } = theme.useToken(); const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
const [color, setColor] = useState<Color | string>(token.colorPrimary);
return <ColorPicker value={color} onChange={setColor} />; return <ColorPicker value={color} onChange={setColor} />;
}; };

2
components/color-picker/demo/disabled-alpha.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { ColorPicker } from 'antd'; import { ColorPicker } from 'antd';
const Demo = () => <ColorPicker disabledAlpha />; const Demo = () => <ColorPicker defaultValue="#1677ff" disabledAlpha />;
export default Demo; export default Demo;

2
components/color-picker/demo/disabled.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React from 'react';
import { ColorPicker } from 'antd'; import { ColorPicker } from 'antd';
export default () => <ColorPicker showText disabled />; export default () => <ColorPicker defaultValue="#1677ff" showText disabled />;

14
components/color-picker/demo/format.tsx
View File

@ -1,27 +1,27 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Col, ColorPicker, Row, Space } from 'antd'; import { Col, ColorPicker, Row, Space } from 'antd';
import type { Color, ColorPickerProps } from 'antd/es/color-picker'; import type { ColorPickerProps } from 'antd/es/color-picker';
export default () => { export default () => {
const [colorHex, setColorHex] = useState<Color | string>('#1677ff'); const [colorHex, setColorHex] = useState<ColorPickerProps['value']>('#1677ff');
const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)'); const [colorHsb, setColorHsb] = useState<ColorPickerProps['value']>('hsb(215, 91%, 100%)');
const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)'); const [colorRgb, setColorRgb] = useState<ColorPickerProps['value']>('rgb(22, 119, 255)');
const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex'); const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb'); const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb'); const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
const hexString = useMemo( const hexString = useMemo(
() => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()), () => (typeof colorHex === 'string' ? colorHex : colorHex?.toHexString()),
[colorHex], [colorHex],
); );
const hsbString = useMemo( const hsbString = useMemo(
() => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()), () => (typeof colorHsb === 'string' ? colorHsb : colorHsb?.toHsbString()),
[colorHsb], [colorHsb],
); );
const rgbString = useMemo( const rgbString = useMemo(
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()), () => (typeof colorRgb === 'string' ? colorRgb : colorRgb?.toRgbString()),
[colorRgb], [colorRgb],
); );

2
components/color-picker/demo/panel-render.tsx
View File

@ -8,6 +8,7 @@ const Demo = () => (
<span>Add title: </span> <span>Add title: </span>
<Col> <Col>
<ColorPicker <ColorPicker
defaultValue="#1677ff"
panelRender={(panel) => ( panelRender={(panel) => (
<div className="custom-panel"> <div className="custom-panel">
<div <div
@ -32,6 +33,7 @@ const Demo = () => (
<span>Horizontal layout: </span> <span>Horizontal layout: </span>
<Col> <Col>
<ColorPicker <ColorPicker
defaultValue="#1677ff"
styles={{ styles={{
popupOverlayInner: { popupOverlayInner: {
width: 468 + 24, width: 468 + 24,

1
components/color-picker/demo/presets.tsx
View File

@ -3,6 +3,7 @@ import { ColorPicker } from 'antd';
export default () => ( export default () => (
<ColorPicker <ColorPicker
defaultValue="#1677ff"
presets={[ presets={[
{ {
label: 'Recommended', label: 'Recommended',

7
components/color-picker/demo/pure-panel.tsx
View File

@ -1,12 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ColorPicker, theme } from 'antd'; import { ColorPicker } from 'antd';
import type { Color } from 'antd/es/color-picker'; import type { ColorPickerProps } from 'antd/es/color-picker';
const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired; const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired;
export default () => { export default () => {
const { token } = theme.useToken(); const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
const [color, setColor] = useState<Color | string>(token.colorPrimary);
return ( return (
<div style={{ paddingLeft: 100 }}> <div style={{ paddingLeft: 100 }}>

12
components/color-picker/demo/size.tsx
View File

@ -4,14 +4,14 @@ import { ColorPicker, Space } from 'antd';
const Demo = () => ( const Demo = () => (
<Space> <Space>
<Space direction="vertical"> <Space direction="vertical">
<ColorPicker size="small" /> <ColorPicker defaultValue="#1677ff" size="small" />
<ColorPicker /> <ColorPicker defaultValue="#1677ff" />
<ColorPicker size="large" /> <ColorPicker defaultValue="#1677ff" size="large" />
</Space> </Space>
<Space direction="vertical"> <Space direction="vertical">
<ColorPicker size="small" showText /> <ColorPicker defaultValue="#1677ff" size="small" showText />
<ColorPicker showText /> <ColorPicker defaultValue="#1677ff" showText />
<ColorPicker size="large" showText /> <ColorPicker defaultValue="#1677ff" size="large" showText />
</Space> </Space>
</Space> </Space>
); );

11
components/color-picker/demo/text-render.tsx
View File

@ -1,15 +1,18 @@
import { DownOutlined } from '@ant-design/icons';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { ColorPicker, Space } from 'antd'; import { ColorPicker, Space } from 'antd';
const Demo = () => { const Demo = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<Space direction="vertical"> <Space direction="vertical">
<ColorPicker showText /> <ColorPicker defaultValue="#1677ff" showText />
<ColorPicker showText={(color) => <span>Custom Text ({color.toHexString()})</span>} />
<ColorPicker <ColorPicker
defaultValue="#1677ff"
showText={(color) => <span>Custom Text ({color.toHexString()})</span>}
/>
<ColorPicker
defaultValue="#1677ff"
open={open} open={open}
onOpenChange={setOpen} onOpenChange={setOpen}
showText={() => ( showText={() => (

2
components/color-picker/demo/trigger-event.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { ColorPicker } from 'antd'; import { ColorPicker } from 'antd';
const Demo = () => <ColorPicker trigger="hover" />; const Demo = () => <ColorPicker defaultValue="#1677ff" trigger="hover" />;
export default Demo; export default Demo;

9
components/color-picker/demo/trigger.tsx
View File

@ -1,13 +1,12 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Button, ColorPicker, theme } from 'antd'; import { Button, ColorPicker } from 'antd';
import type { Color } from 'antd/es/color-picker'; import type { ColorPickerProps } from 'antd/es/color-picker';
const Demo: React.FC = () => { const Demo: React.FC = () => {
const { token } = theme.useToken(); const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
const [color, setColor] = useState<Color | string>(token.colorPrimary);
const bgColor = useMemo<string>( const bgColor = useMemo<string>(
() => (typeof color === 'string' ? color : color.toHexString()), () => (typeof color === 'string' ? color : color!.toHexString()),
[color], [color],
); );

42
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5371,13 +5371,8 @@ Array [
class="ant-color-picker-trigger ant-color-picker-trigger-disabled" class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
<div <div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft" class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
@ -5415,12 +5410,12 @@ Array [
> >
<div <div
class="ant-color-picker-handler" class="ant-color-picker-handler"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
class="ant-color-picker-saturation" class="ant-color-picker-saturation"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -5442,7 +5437,7 @@ Array [
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(0, 0, 0);" style="background-color: rgb(255, 0, 0);"
/> />
</div> </div>
<div <div
@ -5463,7 +5458,7 @@ Array [
> >
<div <div
class="ant-color-picker-handler ant-color-picker-handler-sm" class="ant-color-picker-handler ant-color-picker-handler-sm"
style="background-color: rgb(22, 119, 255);" style="background-color: rgba(0, 0, 0, 0);"
/> />
</div> </div>
<div <div
@ -5478,7 +5473,7 @@ Array [
> >
<div <div
class="ant-color-picker-color-block-inner" class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);" style="background: rgba(0, 0, 0, 0);"
/> />
</div> </div>
</div> </div>
@ -5659,7 +5654,7 @@ Array [
class="ant-input ant-input-disabled ant-input-sm" class="ant-input ant-input-disabled ant-input-sm"
disabled="" disabled=""
type="text" type="text"
value="1677ff" value="000000"
/> />
</span> </span>
</div> </div>
@ -5670,9 +5665,9 @@ Array [
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
> >
<span <span
aria-disabled="true" aria-disabled="false"
aria-label="Increase Value" aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" class="ant-input-number-handler ant-input-number-handler-up"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -5697,9 +5692,9 @@ Array [
</span> </span>
</span> </span>
<span <span
aria-disabled="false" aria-disabled="true"
aria-label="Decrease Value" aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
role="button" role="button"
unselectable="on" unselectable="on"
> >
@ -5730,13 +5725,13 @@ Array [
<input <input
aria-valuemax="100" aria-valuemax="100"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="100" aria-valuenow="0"
autocomplete="off" autocomplete="off"
class="ant-input-number-input" class="ant-input-number-input"
disabled="" disabled=""
role="spinbutton" role="spinbutton"
step="1" step="1"
value="100%" value="0%"
/> />
</div> </div>
</div> </div>
@ -21295,13 +21290,8 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
id="validate_other_color-picker" id="validate_other_color-picker"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgba(0, 0, 0, 0);"
/>
</div>
</div> </div>
<div <div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft" class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"

18
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -2886,13 +2886,8 @@ Array [
class="ant-color-picker-trigger ant-color-picker-trigger-disabled" class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background:rgb(22, 119, 255)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -9855,13 +9850,8 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
id="validate_other_color-picker" id="validate_other_color-picker"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background:rgba(0, 0, 0, 0)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

9
components/form/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -1074,13 +1074,8 @@ exports[`Form form should support disabled 1`] = `
class="ant-color-picker-trigger ant-color-picker-trigger-disabled" class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
> >
<div <div
class="ant-color-picker-color-block" class="ant-color-picker-clear"
> />
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div> </div>
</div> </div>
</div> </div>