mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 22:39:34 +08:00
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import type { CSSProperties, FC, ReactNode } from 'react';
|
|
import type { ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker';
|
|
|
|
import type { SizeType } from '../config-provider/SizeContext';
|
|
import type { PopoverProps } from '../popover';
|
|
import type { TooltipPlacement } from '../tooltip';
|
|
import type { AggregationColor } from './color';
|
|
|
|
export enum ColorFormat {
|
|
hex = 'hex',
|
|
rgb = 'rgb',
|
|
hsb = 'hsb',
|
|
}
|
|
|
|
export type ColorFormatType = keyof typeof ColorFormat;
|
|
|
|
export interface PresetsItem {
|
|
label: ReactNode;
|
|
colors: (string | AggregationColor)[];
|
|
/**
|
|
* Whether the initial state is collapsed
|
|
* @since 5.11.0
|
|
* @default true
|
|
*/
|
|
defaultOpen?: boolean;
|
|
}
|
|
export type TriggerType = 'click' | 'hover';
|
|
|
|
export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes.
|
|
|
|
export interface ColorPickerBaseProps {
|
|
color?: AggregationColor;
|
|
prefixCls: string;
|
|
format?: ColorFormatType;
|
|
allowClear?: boolean;
|
|
disabled?: boolean;
|
|
disabledAlpha?: boolean;
|
|
presets?: PresetsItem[];
|
|
panelRender?: ColorPickerProps['panelRender'];
|
|
onFormatChange?: ColorPickerProps['onFormatChange'];
|
|
onChangeComplete?: ColorPickerProps['onChangeComplete'];
|
|
}
|
|
|
|
export type ColorValueType = AggregationColor | 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?: ColorFormatType;
|
|
defaultFormat?: ColorFormatType;
|
|
allowClear?: boolean;
|
|
presets?: PresetsItem[];
|
|
arrow?: boolean | { pointAtCenter: boolean };
|
|
panelRender?: (
|
|
panel: React.ReactNode,
|
|
extra: { components: { Picker: FC; Presets: FC } },
|
|
) => React.ReactNode;
|
|
showText?: boolean | ((color: AggregationColor) => React.ReactNode);
|
|
size?: SizeType;
|
|
styles?: { popup?: CSSProperties; popupOverlayInner?: CSSProperties };
|
|
rootClassName?: string;
|
|
disabledAlpha?: boolean;
|
|
[key: `data-${string}`]: string;
|
|
onOpenChange?: (open: boolean) => void;
|
|
onFormatChange?: (format?: ColorFormatType) => void;
|
|
onChange?: (value: AggregationColor, hex: string) => void;
|
|
onClear?: () => void;
|
|
onChangeComplete?: (value: AggregationColor) => void;
|
|
} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
|