mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: ColorPicker Implement onChangeComplete API (#43370)
* feat: implement onChangeComplete api * docs: add change completed demo * perf: optimization code
This commit is contained in:
红果汁
GitHub
parent
574fae3499
commit
e72a7836f4
@ -30,7 +30,7 @@ import { customizePrefixCls, generateColor } from './util';
|
||||
|
||||
export type ColorPickerProps = Omit<
|
||||
RcColorPickerProps,
|
||||
'onChange' | 'value' | 'defaultValue' | 'panelRender'
|
||||
'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'onChangeComplete'
|
||||
> & {
|
||||
value?: Color | string;
|
||||
defaultValue?: Color | string;
|
||||
@ -55,6 +55,7 @@ export type ColorPickerProps = Omit<
|
||||
onFormatChange?: (format: ColorFormat) => void;
|
||||
onChange?: (value: Color, hex: string) => void;
|
||||
onClear?: () => void;
|
||||
onChangeComplete?: (value: Color) => void;
|
||||
} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
|
||||
|
||||
type CompoundedComponent = React.FC<ColorPickerProps> & {
|
||||
@ -85,6 +86,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
onChange,
|
||||
onClear,
|
||||
onOpenChange,
|
||||
onChangeComplete,
|
||||
getPopupContainer,
|
||||
autoAdjustOverflow = true,
|
||||
destroyTooltipOnHide,
|
||||
@ -142,13 +144,12 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
color = generateColor(hsba);
|
||||
}
|
||||
}
|
||||
if (!value) {
|
||||
setColorValue(color);
|
||||
}
|
||||
// Only for drag-and-drop color picking
|
||||
if (pickColor) {
|
||||
popupAllowCloseRef.current = false;
|
||||
}
|
||||
|
||||
setColorValue(color);
|
||||
onChange?.(color, color.toHexString());
|
||||
};
|
||||
|
||||
@ -157,8 +158,9 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
onClear?.();
|
||||
};
|
||||
|
||||
const handleChangeComplete = () => {
|
||||
const handleChangeComplete: ColorPickerProps['onChangeComplete'] = (color) => {
|
||||
popupAllowCloseRef.current = true;
|
||||
onChangeComplete?.(generateColor(color));
|
||||
};
|
||||
|
||||
const popoverProps: PopoverProps = {
|
||||
@ -182,6 +184,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
panelRender,
|
||||
format: formatValue,
|
||||
onFormatChange: setFormatValue,
|
||||
onChangeComplete: handleChangeComplete,
|
||||
};
|
||||
|
||||
const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
|
||||
@ -196,12 +199,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
}
|
||||
}}
|
||||
content={
|
||||
<ColorPickerPanel
|
||||
{...colorBaseProps}
|
||||
onChange={handleChange}
|
||||
onChangeComplete={handleChangeComplete}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
<ColorPickerPanel {...colorBaseProps} onChange={handleChange} onClear={handleClear} />
|
||||
}
|
||||
overlayClassName={mergePopupCls}
|
||||
{...popoverProps}
|
||||
@ -211,7 +209,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
open={popupOpen}
|
||||
className={mergeCls}
|
||||
style={mergedStyle}
|
||||
color={colorValue}
|
||||
color={value ? generateColor(value) : colorValue}
|
||||
prefixCls={prefixCls}
|
||||
disabled={disabled}
|
||||
colorCleared={colorCleared}
|
||||
|
||||
@ -10,21 +10,11 @@ import type { ColorPickerBaseProps } from './interface';
|
||||
|
||||
interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
||||
onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
|
||||
onChangeComplete?: (type?: HsbaColorType) => void;
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
const {
|
||||
prefixCls,
|
||||
presets,
|
||||
panelRender,
|
||||
color,
|
||||
onChange,
|
||||
onClear,
|
||||
onChangeComplete,
|
||||
...injectProps
|
||||
} = props;
|
||||
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
|
||||
|
||||
// ==== Inject props ===
|
||||
@ -33,7 +23,6 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
value: color,
|
||||
onChange,
|
||||
onClear,
|
||||
onChangeComplete,
|
||||
...injectProps,
|
||||
};
|
||||
|
||||
|
||||
@ -767,6 +767,390 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</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"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
hsb
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HEX
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HSB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
RGB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677FF"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
|
||||
@ -30,6 +30,25 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/change-completed.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
|
||||
@ -397,4 +397,19 @@ describe('ColorPicker', () => {
|
||||
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('Should onChangeComplete work', async () => {
|
||||
spyElementPrototypes(HTMLElement, {
|
||||
getBoundingClientRect: () => ({
|
||||
x: 0,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 100,
|
||||
}),
|
||||
});
|
||||
const handleChangeComplete = jest.fn();
|
||||
const { container } = render(<ColorPicker open onChangeComplete={handleChangeComplete} />);
|
||||
doMouseMove(container, 0, 999);
|
||||
expect(handleChangeComplete).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -9,10 +9,12 @@ import ColorClear from './ColorClear';
|
||||
import ColorInput from './ColorInput';
|
||||
|
||||
export interface PanelPickerProps
|
||||
extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'allowClear'> {
|
||||
extends Pick<
|
||||
ColorPickerBaseProps,
|
||||
'prefixCls' | 'colorCleared' | 'allowClear' | 'onChangeComplete'
|
||||
> {
|
||||
value?: Color;
|
||||
onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
|
||||
onChangeComplete?: (type?: HsbaColorType) => void;
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
|
||||
7
components/color-picker/demo/change-completed.md
Normal file
7
components/color-picker/demo/change-completed.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
颜色选择完成才会触发回调
|
||||
|
||||
## en-US
|
||||
|
||||
The callback will be called only when the color selection is completed.
|
||||
21
components/color-picker/demo/change-completed.tsx
Normal file
21
components/color-picker/demo/change-completed.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { App, ColorPicker } from 'antd';
|
||||
import type { ColorPickerProps } from 'antd/es/color-picker';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Demo = () => {
|
||||
const { message } = App.useApp();
|
||||
const [value, setValue] = useState<ColorPickerProps['value']>('#1677ff');
|
||||
return (
|
||||
<App>
|
||||
<ColorPicker
|
||||
value={value}
|
||||
onChangeComplete={(color) => {
|
||||
setValue(color);
|
||||
message.success(`The selected color is ${color.toHexString()}`);
|
||||
}}
|
||||
/>
|
||||
</App>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
@ -22,6 +22,7 @@ Used when the user needs to customize the color selection.
|
||||
<code src="./demo/base.tsx">Basic Usage</code>
|
||||
<code src="./demo/size.tsx">Trigger size</code>
|
||||
<code src="./demo/controlled.tsx">controlled mode</code>
|
||||
<code src="./demo/change-completed.tsx">Color change completed</code>
|
||||
<code src="./demo/text-render.tsx">Rendering Trigger Text</code>
|
||||
<code src="./demo/disabled.tsx">Disable</code>
|
||||
<code src="./demo/allowClear.tsx">Clear Color</code>
|
||||
@ -55,6 +56,7 @@ Used when the user needs to customize the color selection.
|
||||
| trigger | ColorPicker trigger mode | `hover` \| `click` | `click` | |
|
||||
| value | Value of color | string \| `Color` | - | |
|
||||
| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | |
|
||||
| onChangeComplete | Called when color pick ends | `(value: Color) => void` | - | 5.7.0 |
|
||||
| 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` | - | 5.6.0 |
|
||||
|
||||
@ -23,6 +23,7 @@ group:
|
||||
<code src="./demo/base.tsx">基本使用</code>
|
||||
<code src="./demo/size.tsx">触发器尺寸大小</code>
|
||||
<code src="./demo/controlled.tsx">受控模式</code>
|
||||
<code src="./demo/change-completed.tsx">颜色完成选择</code>
|
||||
<code src="./demo/text-render.tsx">渲染触发器文本</code>
|
||||
<code src="./demo/disabled.tsx">禁用</code>
|
||||
<code src="./demo/allowClear.tsx">清除颜色</code>
|
||||
@ -56,6 +57,7 @@ group:
|
||||
| trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` | |
|
||||
| value | 颜色的值 | string \| `Color` | - | |
|
||||
| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | |
|
||||
| onChangeComplete | 颜色选择完成的回调 | `(value: Color) => void` | - | 5.7.0 |
|
||||
| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
|
||||
| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | |
|
||||
| onClear | 清除的回调 | `() => void` | - | 5.6.0 |
|
||||
|
||||
@ -31,4 +31,5 @@ export interface ColorPickerBaseProps {
|
||||
presets?: PresetsItem[];
|
||||
panelRender?: ColorPickerProps['panelRender'];
|
||||
onFormatChange?: ColorPickerProps['onFormatChange'];
|
||||
onChangeComplete?: ColorPickerProps['onChangeComplete'];
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@
|
||||
"@ant-design/react-slick": "~1.0.0",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@ctrl/tinycolor": "^3.6.0",
|
||||
"@rc-component/color-picker": "~1.3.0",
|
||||
"@rc-component/color-picker": "~1.4.0",
|
||||
"@rc-component/mutate-observer": "^1.0.0",
|
||||
"@rc-component/tour": "~1.8.0",
|
||||
"@rc-component/trigger": "^1.13.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user