mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 22:39:34 +08:00
1cb644d476
* fix: fix control value not show in dom * chore: update title * add test case * change test title * fix: cleared color should change after controlled value changed * chore: code clean * test: change test * comment * fix: should respect empty string * test: add test case * chore: update demo --------- Co-authored-by: tanghui <yoyo837@hotmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: lijianan <574980606@qq.com>
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import type { CSSProperties, FC, ReactNode } from 'react';
|
|
import type { Color } from './color';
|
|
import type { ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker';
|
|
import type { SizeType } from '../config-provider/SizeContext';
|
|
import type { PopoverProps } from '../popover';
|
|
|
|
export enum ColorFormat {
|
|
hex = 'hex',
|
|
rgb = 'rgb',
|
|
hsb = 'hsb',
|
|
}
|
|
|
|
export interface PresetsItem {
|
|
label: ReactNode;
|
|
colors: (string | Color)[];
|
|
/**
|
|
* Whether the initial state is collapsed
|
|
* @since 5.11.0
|
|
* @default true
|
|
*/
|
|
defaultOpen?: boolean;
|
|
}
|
|
export type TriggerType = 'click' | 'hover';
|
|
|
|
export type TriggerPlacement =
|
|
| 'top'
|
|
| 'topLeft'
|
|
| 'topRight'
|
|
| 'bottom'
|
|
| 'bottomLeft'
|
|
| 'bottomRight';
|
|
export interface ColorPickerBaseProps {
|
|
color?: Color;
|
|
prefixCls: string;
|
|
format?: keyof typeof ColorFormat;
|
|
allowClear?: boolean;
|
|
disabled?: boolean;
|
|
disabledAlpha?: boolean;
|
|
presets?: PresetsItem[];
|
|
panelRender?: ColorPickerProps['panelRender'];
|
|
onFormatChange?: ColorPickerProps['onFormatChange'];
|
|
onChangeComplete?: ColorPickerProps['onChangeComplete'];
|
|
}
|
|
|
|
export type ColorValueType = Color | string | null;
|
|
|
|
export type ColorPickerProps = Omit<
|
|
RcColorPickerProps,
|
|
'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'disabledAlpha' | 'onChangeComplete'
|
|
> & {
|
|
value?: ColorValueType;
|
|
defaultValue?: ColorValueType;
|
|
children?: React.ReactNode;
|
|
open?: boolean;
|
|
disabled?: boolean;
|
|
placement?: TriggerPlacement;
|
|
trigger?: TriggerType;
|
|
format?: keyof typeof ColorFormat;
|
|
defaultFormat?: keyof typeof ColorFormat;
|
|
allowClear?: boolean;
|
|
presets?: PresetsItem[];
|
|
arrow?: boolean | { pointAtCenter: boolean };
|
|
panelRender?: (
|
|
panel: React.ReactNode,
|
|
extra: { components: { Picker: FC; Presets: FC } },
|
|
) => React.ReactNode;
|
|
showText?: boolean | ((color: Color) => React.ReactNode);
|
|
size?: SizeType;
|
|
styles?: { popup?: CSSProperties; popupOverlayInner?: CSSProperties };
|
|
rootClassName?: string;
|
|
disabledAlpha?: boolean;
|
|
[key: `data-${string}`]: string;
|
|
onOpenChange?: (open: boolean) => void;
|
|
onFormatChange?: (format: ColorFormat) => void;
|
|
onChange?: (value: Color, hex: string) => void;
|
|
onClear?: () => void;
|
|
onChangeComplete?: (value: Color) => void;
|
|
} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
|