mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
feat: ColorPicker show clear when value is not set (#45993)
* 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:
红果汁
GitHub
parent
0e1545964c
commit
b03ca50ab4
@ -12,14 +12,13 @@ import { getStatusClassNames } from '../_util/statusUtils';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import type { ConfigConsumerProps } from '../config-provider/context';
|
||||
import { ConfigContext } from '../config-provider/context';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
||||
import type { PopoverProps } from '../popover';
|
||||
import Popover from '../popover';
|
||||
import { useToken } from '../theme/internal';
|
||||
import type { Color } from './color';
|
||||
import ColorPickerPanel from './ColorPickerPanel';
|
||||
import ColorTrigger from './components/ColorTrigger';
|
||||
@ -108,9 +107,8 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
|
||||
const contextDisabled = useContext(DisabledContext);
|
||||
const mergedDisabled = disabled ?? contextDisabled;
|
||||
const [, token] = useToken();
|
||||
|
||||
const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
|
||||
const [colorValue, setColorValue] = useColorState('', {
|
||||
value,
|
||||
defaultValue,
|
||||
});
|
||||
@ -125,7 +123,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
onChange: onFormatChange,
|
||||
});
|
||||
|
||||
const [colorCleared, setColorCleared] = useState(false);
|
||||
const [colorCleared, setColorCleared] = useState(!value && !defaultValue);
|
||||
|
||||
const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
|
||||
|
||||
|
||||
@ -6,13 +6,8 @@ exports[`ColorPicker Should disabled work 1`] = `
|
||||
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;"
|
||||
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,11 +83,11 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
style="position: relative;"
|
||||
>
|
||||
<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
|
||||
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
|
||||
@ -114,11 +104,11 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;"
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
@ -133,7 +123,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -215,7 +205,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677ff"
|
||||
value="000000"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -226,9 +216,9 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-disabled="false"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -253,9 +243,9 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-disabled="true"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -286,12 +276,12 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
value="0%"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;"
|
||||
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -381,11 +366,11 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
style="position: relative;"
|
||||
>
|
||||
<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
|
||||
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
|
||||
@ -402,11 +387,11 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;"
|
||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
@ -421,7 +406,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -503,7 +488,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677ff"
|
||||
value="000000"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -514,9 +499,9 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-disabled="false"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -541,9 +526,9 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-disabled="true"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -574,12 +559,12 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
value="0%"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -114,7 +114,9 @@ describe('ColorPicker', () => {
|
||||
|
||||
it('Should allowClear and onClear work', async () => {
|
||||
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')!);
|
||||
await waitFakeTimer();
|
||||
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 () => {
|
||||
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-clear')!);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
@ -372,14 +376,16 @@ describe('ColorPicker', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
expect(targetEle).toBeTruthy();
|
||||
expect(targetEle?.innerHTML).toBe('#1677ff');
|
||||
});
|
||||
|
||||
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');
|
||||
expect(targetEle).toBeTruthy();
|
||||
|
||||
@ -595,4 +601,9 @@ describe('ColorPicker', () => {
|
||||
const { container } = render(<ColorPicker open defaultFormat="hsb" />);
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
export default () => <ColorPicker allowClear />;
|
||||
export default () => <ColorPicker defaultValue="#1677ff" allowClear />;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
const Demo = () => <ColorPicker />;
|
||||
const Demo = () => <ColorPicker defaultValue="#1677ff" />;
|
||||
|
||||
export default Demo;
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ColorPicker, theme } from 'antd';
|
||||
import type { Color } from 'antd/es/color-picker';
|
||||
import { ColorPicker } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd/es/color-picker';
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
const [color, setColor] = useState<Color | string>(token.colorPrimary);
|
||||
const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
return <ColorPicker value={color} onChange={setColor} />;
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
const Demo = () => <ColorPicker disabledAlpha />;
|
||||
const Demo = () => <ColorPicker defaultValue="#1677ff" disabledAlpha />;
|
||||
|
||||
export default Demo;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
export default () => <ColorPicker showText disabled />;
|
||||
export default () => <ColorPicker defaultValue="#1677ff" showText disabled />;
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
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 () => {
|
||||
const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
|
||||
const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
|
||||
const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
|
||||
const [colorHex, setColorHex] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
const [colorHsb, setColorHsb] = useState<ColorPickerProps['value']>('hsb(215, 91%, 100%)');
|
||||
const [colorRgb, setColorRgb] = useState<ColorPickerProps['value']>('rgb(22, 119, 255)');
|
||||
const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
|
||||
const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
|
||||
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
|
||||
|
||||
const hexString = useMemo(
|
||||
() => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
|
||||
() => (typeof colorHex === 'string' ? colorHex : colorHex?.toHexString()),
|
||||
[colorHex],
|
||||
);
|
||||
|
||||
const hsbString = useMemo(
|
||||
() => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
|
||||
() => (typeof colorHsb === 'string' ? colorHsb : colorHsb?.toHsbString()),
|
||||
[colorHsb],
|
||||
);
|
||||
|
||||
const rgbString = useMemo(
|
||||
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
|
||||
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb?.toRgbString()),
|
||||
[colorRgb],
|
||||
);
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ const Demo = () => (
|
||||
<span>Add title: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
panelRender={(panel) => (
|
||||
<div className="custom-panel">
|
||||
<div
|
||||
@ -32,6 +33,7 @@ const Demo = () => (
|
||||
<span>Horizontal layout: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
styles={{
|
||||
popupOverlayInner: {
|
||||
width: 468 + 24,
|
||||
|
||||
@ -3,6 +3,7 @@ import { ColorPicker } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
presets={[
|
||||
{
|
||||
label: 'Recommended',
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ColorPicker, theme } from 'antd';
|
||||
import type { Color } from 'antd/es/color-picker';
|
||||
import { ColorPicker } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd/es/color-picker';
|
||||
|
||||
const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired;
|
||||
|
||||
export default () => {
|
||||
const { token } = theme.useToken();
|
||||
const [color, setColor] = useState<Color | string>(token.colorPrimary);
|
||||
const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
|
||||
return (
|
||||
<div style={{ paddingLeft: 100 }}>
|
||||
|
||||
@ -4,14 +4,14 @@ import { ColorPicker, Space } from 'antd';
|
||||
const Demo = () => (
|
||||
<Space>
|
||||
<Space direction="vertical">
|
||||
<ColorPicker size="small" />
|
||||
<ColorPicker />
|
||||
<ColorPicker size="large" />
|
||||
<ColorPicker defaultValue="#1677ff" size="small" />
|
||||
<ColorPicker defaultValue="#1677ff" />
|
||||
<ColorPicker defaultValue="#1677ff" size="large" />
|
||||
</Space>
|
||||
<Space direction="vertical">
|
||||
<ColorPicker size="small" showText />
|
||||
<ColorPicker showText />
|
||||
<ColorPicker size="large" showText />
|
||||
<ColorPicker defaultValue="#1677ff" size="small" showText />
|
||||
<ColorPicker defaultValue="#1677ff" showText />
|
||||
<ColorPicker defaultValue="#1677ff" size="large" showText />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import React, { useState } from 'react';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { ColorPicker, Space } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<ColorPicker showText />
|
||||
<ColorPicker showText={(color) => <span>Custom Text ({color.toHexString()})</span>} />
|
||||
<ColorPicker defaultValue="#1677ff" showText />
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
showText={(color) => <span>Custom Text ({color.toHexString()})</span>}
|
||||
/>
|
||||
<ColorPicker
|
||||
defaultValue="#1677ff"
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
showText={() => (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ColorPicker } from 'antd';
|
||||
|
||||
const Demo = () => <ColorPicker trigger="hover" />;
|
||||
const Demo = () => <ColorPicker defaultValue="#1677ff" trigger="hover" />;
|
||||
|
||||
export default Demo;
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Button, ColorPicker, theme } from 'antd';
|
||||
import type { Color } from 'antd/es/color-picker';
|
||||
import { Button, ColorPicker } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd/es/color-picker';
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
const [color, setColor] = useState<Color | string>(token.colorPrimary);
|
||||
const [color, setColor] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
|
||||
const bgColor = useMemo<string>(
|
||||
() => (typeof color === 'string' ? color : color.toHexString()),
|
||||
() => (typeof color === 'string' ? color : color!.toHexString()),
|
||||
[color],
|
||||
);
|
||||
|
||||
|
||||
@ -5371,13 +5371,8 @@ Array [
|
||||
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -5442,7 +5437,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
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
|
||||
@ -5463,7 +5458,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
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
|
||||
@ -5478,7 +5473,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -5659,7 +5654,7 @@ Array [
|
||||
class="ant-input ant-input-disabled ant-input-sm"
|
||||
disabled=""
|
||||
type="text"
|
||||
value="1677ff"
|
||||
value="000000"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -5670,9 +5665,9 @@ Array [
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-disabled="false"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -5697,9 +5692,9 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-disabled="true"
|
||||
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"
|
||||
unselectable="on"
|
||||
>
|
||||
@ -5730,13 +5725,13 @@ Array [
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
disabled=""
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
value="0%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -21295,13 +21290,8 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
|
||||
id="validate_other_color-picker"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
|
||||
@ -2886,13 +2886,8 @@ Array [
|
||||
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -9855,13 +9850,8 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
id="validate_other_color-picker"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgba(0, 0, 0, 0)"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1074,13 +1074,8 @@ exports[`Form form should support disabled 1`] = `
|
||||
class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user