2023-05-12 14:43:48 +08:00
|
|
|
import type { FC } from 'react';
|
|
|
|
import React from 'react';
|
2024-04-01 15:49:45 +08:00
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
import Divider from '../divider';
|
2023-06-29 11:46:11 +08:00
|
|
|
import PanelPicker from './components/PanelPicker';
|
|
|
|
import PanelPresets from './components/PanelPresets';
|
2024-07-29 16:38:50 +08:00
|
|
|
import { PanelPickerContext, PanelPresetsContext } from './context';
|
|
|
|
import type { PanelPickerContextProps, PanelPresetsContextProps } from './context';
|
|
|
|
import type { ColorPickerProps } from './interface';
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2024-07-29 16:38:50 +08:00
|
|
|
export interface ColorPickerPanelProps
|
|
|
|
extends PanelPickerContextProps,
|
|
|
|
Omit<PanelPresetsContextProps, 'onChange'> {
|
2023-05-26 15:19:34 +08:00
|
|
|
onClear?: () => void;
|
2024-07-29 16:38:50 +08:00
|
|
|
panelRender?: ColorPickerProps['panelRender'];
|
2023-05-12 14:43:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
2024-07-29 16:38:50 +08:00
|
|
|
const {
|
2023-06-29 11:46:11 +08:00
|
|
|
prefixCls,
|
2024-07-29 16:38:50 +08:00
|
|
|
presets,
|
|
|
|
panelRender,
|
|
|
|
value,
|
2023-06-29 11:46:11 +08:00
|
|
|
onChange,
|
|
|
|
onClear,
|
2024-07-29 16:38:50 +08:00
|
|
|
allowClear,
|
|
|
|
disabledAlpha,
|
|
|
|
mode,
|
|
|
|
onModeChange,
|
|
|
|
modeOptions,
|
|
|
|
onChangeComplete,
|
|
|
|
activeIndex,
|
|
|
|
onActive,
|
|
|
|
format,
|
|
|
|
onFormatChange,
|
|
|
|
gradientDragging,
|
|
|
|
onGradientDragging,
|
|
|
|
} = props;
|
|
|
|
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
|
|
|
|
|
|
|
|
// ===================== Context ======================
|
|
|
|
const panelContext: PanelPickerContextProps = React.useMemo(
|
|
|
|
() => ({
|
|
|
|
prefixCls,
|
|
|
|
value,
|
|
|
|
onChange,
|
|
|
|
onClear,
|
|
|
|
allowClear,
|
|
|
|
disabledAlpha,
|
|
|
|
mode,
|
|
|
|
onModeChange,
|
|
|
|
modeOptions,
|
|
|
|
onChangeComplete,
|
|
|
|
activeIndex,
|
|
|
|
onActive,
|
|
|
|
format,
|
|
|
|
onFormatChange,
|
|
|
|
gradientDragging,
|
|
|
|
onGradientDragging,
|
|
|
|
}),
|
|
|
|
[
|
|
|
|
prefixCls,
|
|
|
|
value,
|
|
|
|
onChange,
|
|
|
|
onClear,
|
|
|
|
allowClear,
|
|
|
|
disabledAlpha,
|
|
|
|
mode,
|
|
|
|
onModeChange,
|
|
|
|
modeOptions,
|
|
|
|
onChangeComplete,
|
|
|
|
activeIndex,
|
|
|
|
onActive,
|
|
|
|
format,
|
|
|
|
onFormatChange,
|
|
|
|
gradientDragging,
|
|
|
|
onGradientDragging,
|
|
|
|
],
|
|
|
|
);
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2024-07-29 16:38:50 +08:00
|
|
|
const presetContext: PanelPresetsContextProps = React.useMemo(
|
2023-06-29 11:46:11 +08:00
|
|
|
() => ({
|
|
|
|
prefixCls,
|
2024-07-29 16:38:50 +08:00
|
|
|
value,
|
2023-06-29 11:46:11 +08:00
|
|
|
presets,
|
|
|
|
onChange,
|
|
|
|
}),
|
2024-07-29 16:38:50 +08:00
|
|
|
[prefixCls, value, presets, onChange],
|
2023-05-12 14:43:48 +08:00
|
|
|
);
|
2023-06-29 11:46:11 +08:00
|
|
|
|
|
|
|
// ====================== Render ======================
|
|
|
|
const innerPanel = (
|
2023-12-18 13:56:01 +08:00
|
|
|
<div className={`${colorPickerPanelPrefixCls}-content`}>
|
2023-06-29 11:46:11 +08:00
|
|
|
<PanelPicker />
|
2023-12-18 13:56:01 +08:00
|
|
|
{Array.isArray(presets) && <Divider />}
|
2023-06-29 11:46:11 +08:00
|
|
|
<PanelPresets />
|
2023-12-18 13:56:01 +08:00
|
|
|
</div>
|
2023-06-29 11:46:11 +08:00
|
|
|
);
|
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
return (
|
2024-07-29 16:38:50 +08:00
|
|
|
<PanelPickerContext.Provider value={panelContext}>
|
|
|
|
<PanelPresetsContext.Provider value={presetContext}>
|
2023-06-29 11:46:11 +08:00
|
|
|
<div className={colorPickerPanelPrefixCls}>
|
|
|
|
{typeof panelRender === 'function'
|
|
|
|
? panelRender(innerPanel, {
|
|
|
|
components: {
|
|
|
|
Picker: PanelPicker,
|
|
|
|
Presets: PanelPresets,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
: innerPanel}
|
|
|
|
</div>
|
2024-07-29 16:38:50 +08:00
|
|
|
</PanelPresetsContext.Provider>
|
|
|
|
</PanelPickerContext.Provider>
|
2023-05-12 14:43:48 +08:00
|
|
|
);
|
|
|
|
};
|
2023-05-13 23:05:26 +08:00
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
ColorPickerPanel.displayName = 'ColorPickerPanel';
|
|
|
|
}
|
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
export default ColorPickerPanel;
|