2023-08-21 10:03:15 +08:00
|
|
|
import type { CSSProperties, FC } from 'react';
|
|
|
|
import React, { useContext, useMemo, useRef, useState } from 'react';
|
2023-05-19 17:44:27 +08:00
|
|
|
import type {
|
|
|
|
HsbaColorType,
|
|
|
|
ColorPickerProps as RcColorPickerProps,
|
|
|
|
} from '@rc-component/color-picker';
|
2023-05-12 14:43:48 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
2023-08-21 10:03:15 +08:00
|
|
|
|
2023-05-16 23:32:18 +08:00
|
|
|
import genPurePanel from '../_util/PurePanel';
|
2023-07-12 10:15:04 +08:00
|
|
|
import { getStatusClassNames } from '../_util/statusUtils';
|
2023-09-11 17:28:04 +08:00
|
|
|
import { devUseWarning } from '../_util/warning';
|
2023-05-12 14:43:48 +08:00
|
|
|
import type { ConfigConsumerProps } from '../config-provider/context';
|
|
|
|
import { ConfigContext } from '../config-provider/context';
|
2023-11-16 11:57:10 +08:00
|
|
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
2023-06-21 11:30:09 +08:00
|
|
|
import useSize from '../config-provider/hooks/useSize';
|
2023-08-28 20:16:34 +08:00
|
|
|
import type { SizeType } from '../config-provider/SizeContext';
|
2023-07-12 10:15:04 +08:00
|
|
|
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
2023-05-12 14:43:48 +08:00
|
|
|
import type { PopoverProps } from '../popover';
|
|
|
|
import Popover from '../popover';
|
2023-09-07 10:15:58 +08:00
|
|
|
import { useToken } from '../theme/internal';
|
2023-05-12 14:43:48 +08:00
|
|
|
import type { Color } from './color';
|
2023-08-28 20:16:34 +08:00
|
|
|
import ColorPickerPanel from './ColorPickerPanel';
|
2023-05-12 14:43:48 +08:00
|
|
|
import ColorTrigger from './components/ColorTrigger';
|
|
|
|
import useColorState from './hooks/useColorState';
|
2023-05-18 13:34:06 +08:00
|
|
|
import type {
|
|
|
|
ColorFormat,
|
|
|
|
ColorPickerBaseProps,
|
2023-07-12 10:15:04 +08:00
|
|
|
ColorValueType,
|
2023-05-18 13:34:06 +08:00
|
|
|
PresetsItem,
|
|
|
|
TriggerPlacement,
|
|
|
|
TriggerType,
|
|
|
|
} from './interface';
|
2023-11-16 11:57:10 +08:00
|
|
|
import useCSSVar from './style/cssVar';
|
2023-05-12 14:43:48 +08:00
|
|
|
import useStyle from './style/index';
|
2023-07-12 19:42:33 +08:00
|
|
|
import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util';
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2023-06-19 14:28:11 +08:00
|
|
|
export type ColorPickerProps = Omit<
|
|
|
|
RcColorPickerProps,
|
2023-07-12 19:42:33 +08:00
|
|
|
'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'disabledAlpha' | 'onChangeComplete'
|
2023-06-19 14:28:11 +08:00
|
|
|
> & {
|
2023-07-12 10:15:04 +08:00
|
|
|
value?: ColorValueType;
|
|
|
|
defaultValue?: ColorValueType;
|
2023-05-13 17:34:09 +08:00
|
|
|
children?: React.ReactNode;
|
2023-05-12 14:43:48 +08:00
|
|
|
open?: boolean;
|
|
|
|
disabled?: boolean;
|
|
|
|
placement?: TriggerPlacement;
|
|
|
|
trigger?: TriggerType;
|
|
|
|
format?: keyof typeof ColorFormat;
|
2023-09-05 18:42:40 +08:00
|
|
|
defaultFormat?: keyof typeof ColorFormat;
|
2023-05-12 14:43:48 +08:00
|
|
|
allowClear?: boolean;
|
|
|
|
presets?: PresetsItem[];
|
|
|
|
arrow?: boolean | { pointAtCenter: boolean };
|
2023-06-29 11:46:11 +08:00
|
|
|
panelRender?: (
|
|
|
|
panel: React.ReactNode,
|
|
|
|
extra: { components: { Picker: FC; Presets: FC } },
|
|
|
|
) => React.ReactNode;
|
2023-06-19 19:29:39 +08:00
|
|
|
showText?: boolean | ((color: Color) => React.ReactNode);
|
2023-06-21 11:30:09 +08:00
|
|
|
size?: SizeType;
|
2023-06-29 11:46:11 +08:00
|
|
|
styles?: { popup?: CSSProperties; popupOverlayInner?: CSSProperties };
|
2023-05-12 14:43:48 +08:00
|
|
|
rootClassName?: string;
|
2023-07-12 19:42:33 +08:00
|
|
|
disabledAlpha?: boolean;
|
2023-10-20 17:10:00 +08:00
|
|
|
[key: `data-${string}`]: string;
|
2023-05-12 14:43:48 +08:00
|
|
|
onOpenChange?: (open: boolean) => void;
|
|
|
|
onFormatChange?: (format: ColorFormat) => void;
|
|
|
|
onChange?: (value: Color, hex: string) => void;
|
2023-05-26 15:19:34 +08:00
|
|
|
onClear?: () => void;
|
2023-07-10 13:37:43 +08:00
|
|
|
onChangeComplete?: (value: Color) => void;
|
2023-06-19 14:28:11 +08:00
|
|
|
} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
|
2023-05-12 14:43:48 +08:00
|
|
|
|
|
|
|
type CompoundedComponent = React.FC<ColorPickerProps> & {
|
|
|
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
|
|
|
};
|
|
|
|
|
|
|
|
const ColorPicker: CompoundedComponent = (props) => {
|
|
|
|
const {
|
|
|
|
value,
|
|
|
|
defaultValue,
|
|
|
|
format,
|
2023-09-05 18:42:40 +08:00
|
|
|
defaultFormat,
|
2023-05-12 14:43:48 +08:00
|
|
|
allowClear = false,
|
|
|
|
presets,
|
|
|
|
children,
|
|
|
|
trigger = 'click',
|
|
|
|
open,
|
|
|
|
disabled,
|
|
|
|
placement = 'bottomLeft',
|
|
|
|
arrow = true,
|
2023-06-29 11:46:11 +08:00
|
|
|
panelRender,
|
2023-06-19 19:29:39 +08:00
|
|
|
showText,
|
2023-05-12 14:43:48 +08:00
|
|
|
style,
|
|
|
|
className,
|
2023-06-21 11:30:09 +08:00
|
|
|
size: customizeSize,
|
2023-05-12 14:43:48 +08:00
|
|
|
rootClassName,
|
|
|
|
styles,
|
2023-07-12 19:42:33 +08:00
|
|
|
disabledAlpha = false,
|
2023-05-12 14:43:48 +08:00
|
|
|
onFormatChange,
|
|
|
|
onChange,
|
2023-05-26 15:19:34 +08:00
|
|
|
onClear,
|
2023-05-12 14:43:48 +08:00
|
|
|
onOpenChange,
|
2023-07-10 13:37:43 +08:00
|
|
|
onChangeComplete,
|
2023-05-12 14:43:48 +08:00
|
|
|
getPopupContainer,
|
2023-05-16 14:18:12 +08:00
|
|
|
autoAdjustOverflow = true,
|
2023-06-19 14:28:11 +08:00
|
|
|
destroyTooltipOnHide,
|
2023-10-20 17:10:00 +08:00
|
|
|
...rest
|
2023-05-12 14:43:48 +08:00
|
|
|
} = props;
|
|
|
|
|
2023-07-04 11:23:58 +08:00
|
|
|
const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
|
|
|
|
|
2023-09-07 10:15:58 +08:00
|
|
|
const [, token] = useToken();
|
2023-05-12 14:43:48 +08:00
|
|
|
|
|
|
|
const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
|
|
|
|
value,
|
|
|
|
defaultValue,
|
|
|
|
});
|
|
|
|
const [popupOpen, setPopupOpen] = useMergedState(false, {
|
|
|
|
value: open,
|
|
|
|
postState: (openData) => !disabled && openData,
|
|
|
|
onChange: onOpenChange,
|
|
|
|
});
|
2023-06-19 19:29:39 +08:00
|
|
|
const [formatValue, setFormatValue] = useMergedState(format, {
|
|
|
|
value: format,
|
2023-09-05 18:42:40 +08:00
|
|
|
defaultValue: defaultFormat,
|
2023-06-19 19:29:39 +08:00
|
|
|
onChange: onFormatChange,
|
|
|
|
});
|
|
|
|
|
2023-05-17 09:58:41 +08:00
|
|
|
const [colorCleared, setColorCleared] = useState(false);
|
2023-05-12 14:43:48 +08:00
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
|
|
|
|
|
2023-07-12 19:42:33 +08:00
|
|
|
const isAlphaColor = useMemo(() => getAlphaColor(colorValue) < 100, [colorValue]);
|
|
|
|
|
2023-07-12 10:15:04 +08:00
|
|
|
// ===================== Form Status =====================
|
|
|
|
const { status: contextStatus } = React.useContext(FormItemInputContext);
|
|
|
|
|
2023-06-21 11:30:09 +08:00
|
|
|
// ===================== Style =====================
|
|
|
|
const mergedSize = useSize(customizeSize);
|
2023-11-16 11:57:10 +08:00
|
|
|
const [, hashId] = useStyle(prefixCls);
|
|
|
|
const rootCls = useCSSVarCls(prefixCls);
|
|
|
|
const wrapCSSVar = useCSSVar(rootCls);
|
2023-05-30 12:50:04 +08:00
|
|
|
const rtlCls = { [`${prefixCls}-rtl`]: direction };
|
2023-11-16 11:57:10 +08:00
|
|
|
const mergeRootCls = classNames(rootClassName, rootCls, rtlCls);
|
2023-06-21 11:30:09 +08:00
|
|
|
const mergeCls = classNames(
|
2023-07-12 10:15:04 +08:00
|
|
|
getStatusClassNames(prefixCls, contextStatus),
|
2023-06-21 11:30:09 +08:00
|
|
|
{
|
|
|
|
[`${prefixCls}-sm`]: mergedSize === 'small',
|
|
|
|
[`${prefixCls}-lg`]: mergedSize === 'large',
|
|
|
|
},
|
2023-07-04 11:23:58 +08:00
|
|
|
colorPicker?.className,
|
2023-06-21 11:30:09 +08:00
|
|
|
mergeRootCls,
|
|
|
|
className,
|
|
|
|
hashId,
|
|
|
|
);
|
2023-11-16 11:57:10 +08:00
|
|
|
const mergePopupCls = classNames(prefixCls, mergeRootCls);
|
2023-05-30 12:50:04 +08:00
|
|
|
|
2023-05-29 16:50:12 +08:00
|
|
|
const popupAllowCloseRef = useRef(true);
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2023-07-12 19:42:33 +08:00
|
|
|
// ===================== Warning ======================
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2023-09-13 22:07:33 +08:00
|
|
|
const warning = devUseWarning('ColorPicker');
|
2023-09-11 17:28:04 +08:00
|
|
|
|
2023-07-12 19:42:33 +08:00
|
|
|
warning(
|
|
|
|
!(disabledAlpha && isAlphaColor),
|
2023-09-11 17:28:04 +08:00
|
|
|
'usage',
|
2023-07-12 19:42:33 +08:00
|
|
|
'`disabledAlpha` will make the alpha to be 100% when use alpha color.',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-05-29 16:50:12 +08:00
|
|
|
const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => {
|
2023-05-19 17:44:27 +08:00
|
|
|
let color: Color = generateColor(data);
|
2023-07-12 10:15:04 +08:00
|
|
|
const isNull = value === null || (!value && defaultValue === null);
|
|
|
|
if (colorCleared || isNull) {
|
2023-05-17 09:58:41 +08:00
|
|
|
setColorCleared(false);
|
2023-05-19 17:44:27 +08:00
|
|
|
// ignore alpha slider
|
2023-07-12 19:42:33 +08:00
|
|
|
if (getAlphaColor(colorValue) === 0 && type !== 'alpha') {
|
|
|
|
color = genAlphaColor(color);
|
2023-05-19 17:44:27 +08:00
|
|
|
}
|
2023-05-12 14:43:48 +08:00
|
|
|
}
|
2023-07-12 19:42:33 +08:00
|
|
|
// ignore alpha color
|
|
|
|
if (disabledAlpha && isAlphaColor) {
|
|
|
|
color = genAlphaColor(color);
|
|
|
|
}
|
2023-07-28 14:36:46 +08:00
|
|
|
|
2023-05-29 16:50:12 +08:00
|
|
|
// Only for drag-and-drop color picking
|
|
|
|
if (pickColor) {
|
|
|
|
popupAllowCloseRef.current = false;
|
2023-07-28 14:36:46 +08:00
|
|
|
} else {
|
|
|
|
onChangeComplete?.(color);
|
2023-05-29 16:50:12 +08:00
|
|
|
}
|
2023-07-10 13:37:43 +08:00
|
|
|
|
|
|
|
setColorValue(color);
|
2023-05-12 14:43:48 +08:00
|
|
|
onChange?.(color, color.toHexString());
|
|
|
|
};
|
|
|
|
|
2023-05-26 15:19:34 +08:00
|
|
|
const handleClear = () => {
|
|
|
|
setColorCleared(true);
|
|
|
|
onClear?.();
|
2023-05-12 14:43:48 +08:00
|
|
|
};
|
|
|
|
|
2023-07-10 13:37:43 +08:00
|
|
|
const handleChangeComplete: ColorPickerProps['onChangeComplete'] = (color) => {
|
2023-05-29 16:50:12 +08:00
|
|
|
popupAllowCloseRef.current = true;
|
2023-07-12 19:42:33 +08:00
|
|
|
let changeColor = generateColor(color);
|
|
|
|
// ignore alpha color
|
|
|
|
if (disabledAlpha && isAlphaColor) {
|
|
|
|
changeColor = genAlphaColor(color);
|
|
|
|
}
|
|
|
|
onChangeComplete?.(changeColor);
|
2023-05-29 16:50:12 +08:00
|
|
|
};
|
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
const popoverProps: PopoverProps = {
|
|
|
|
open: popupOpen,
|
|
|
|
trigger,
|
|
|
|
placement,
|
|
|
|
arrow,
|
|
|
|
rootClassName,
|
|
|
|
getPopupContainer,
|
2023-05-16 14:18:12 +08:00
|
|
|
autoAdjustOverflow,
|
2023-06-19 14:28:11 +08:00
|
|
|
destroyTooltipOnHide,
|
2023-05-12 14:43:48 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const colorBaseProps: ColorPickerBaseProps = {
|
|
|
|
prefixCls,
|
|
|
|
color: colorValue,
|
|
|
|
allowClear,
|
2023-05-17 09:58:41 +08:00
|
|
|
colorCleared,
|
2023-05-12 14:43:48 +08:00
|
|
|
disabled,
|
2023-07-12 19:42:33 +08:00
|
|
|
disabledAlpha,
|
2023-05-12 14:43:48 +08:00
|
|
|
presets,
|
2023-06-29 11:46:11 +08:00
|
|
|
panelRender,
|
2023-06-19 19:29:39 +08:00
|
|
|
format: formatValue,
|
|
|
|
onFormatChange: setFormatValue,
|
2023-07-10 13:37:43 +08:00
|
|
|
onChangeComplete: handleChangeComplete,
|
2023-05-12 14:43:48 +08:00
|
|
|
};
|
|
|
|
|
2023-07-04 11:23:58 +08:00
|
|
|
const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
|
|
|
|
|
2023-10-24 21:17:16 +08:00
|
|
|
// ============================ zIndex ============================
|
|
|
|
|
2023-11-16 11:57:10 +08:00
|
|
|
return wrapCSSVar(
|
2023-05-12 14:43:48 +08:00
|
|
|
<Popover
|
|
|
|
style={styles?.popup}
|
2023-06-29 11:46:11 +08:00
|
|
|
overlayInnerStyle={styles?.popupOverlayInner}
|
2023-05-29 16:50:12 +08:00
|
|
|
onOpenChange={(visible) => {
|
2023-08-28 20:16:34 +08:00
|
|
|
if (popupAllowCloseRef.current && !disabled) {
|
2023-05-29 16:50:12 +08:00
|
|
|
setPopupOpen(visible);
|
|
|
|
}
|
|
|
|
}}
|
2023-05-12 14:43:48 +08:00
|
|
|
content={
|
2023-07-12 10:15:04 +08:00
|
|
|
<NoFormStyle override status>
|
|
|
|
<ColorPickerPanel
|
|
|
|
{...colorBaseProps}
|
|
|
|
onChange={handleChange}
|
|
|
|
onChangeComplete={handleChangeComplete}
|
|
|
|
onClear={handleClear}
|
|
|
|
/>
|
|
|
|
</NoFormStyle>
|
2023-05-12 14:43:48 +08:00
|
|
|
}
|
2023-05-30 12:50:04 +08:00
|
|
|
overlayClassName={mergePopupCls}
|
2023-05-12 14:43:48 +08:00
|
|
|
{...popoverProps}
|
|
|
|
>
|
|
|
|
{children || (
|
|
|
|
<ColorTrigger
|
|
|
|
open={popupOpen}
|
|
|
|
className={mergeCls}
|
2023-07-04 11:23:58 +08:00
|
|
|
style={mergedStyle}
|
2023-07-10 13:37:43 +08:00
|
|
|
color={value ? generateColor(value) : colorValue}
|
2023-05-12 14:43:48 +08:00
|
|
|
prefixCls={prefixCls}
|
|
|
|
disabled={disabled}
|
2023-05-17 09:58:41 +08:00
|
|
|
colorCleared={colorCleared}
|
2023-06-19 19:29:39 +08:00
|
|
|
showText={showText}
|
|
|
|
format={formatValue}
|
2023-10-20 17:10:00 +08:00
|
|
|
{...rest}
|
2023-05-12 14:43:48 +08:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Popover>,
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
ColorPicker.displayName = 'ColorPicker';
|
|
|
|
}
|
|
|
|
|
2023-05-16 14:18:12 +08:00
|
|
|
const PurePanel = genPurePanel(
|
|
|
|
ColorPicker,
|
|
|
|
'color-picker',
|
2023-06-07 21:59:21 +08:00
|
|
|
/* istanbul ignore next */
|
2023-05-16 14:18:12 +08:00
|
|
|
(prefixCls) => prefixCls,
|
|
|
|
(props: ColorPickerProps) => ({
|
|
|
|
...props,
|
|
|
|
placement: 'bottom' as TriggerPlacement,
|
|
|
|
autoAdjustOverflow: false,
|
|
|
|
}),
|
|
|
|
);
|
2023-05-12 14:43:48 +08:00
|
|
|
|
|
|
|
ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
|
|
|
|
|
|
|
export default ColorPicker;
|