2023-05-19 17:44:27 +08:00
|
|
|
import type { HsbaColorType } from '@rc-component/color-picker';
|
2023-05-12 14:43:48 +08:00
|
|
|
import type { FC } from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
import Divider from '../divider';
|
|
|
|
import type { Color } from './color';
|
2023-06-29 11:46:11 +08:00
|
|
|
import PanelPicker from './components/PanelPicker';
|
|
|
|
import PanelPresets from './components/PanelPresets';
|
|
|
|
import { PanelPickerProvider, PanelPresetsProvider } from './context';
|
2023-05-12 14:43:48 +08:00
|
|
|
import type { ColorPickerBaseProps } from './interface';
|
|
|
|
|
|
|
|
interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
2023-05-29 16:50:12 +08:00
|
|
|
onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
|
|
|
|
onChangeComplete?: (type?: HsbaColorType) => void;
|
2023-05-26 15:19:34 +08:00
|
|
|
onClear?: () => void;
|
2023-05-12 14:43:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
2023-05-29 16:50:12 +08:00
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
presets,
|
2023-06-29 11:46:11 +08:00
|
|
|
panelRender,
|
|
|
|
color,
|
2023-05-29 16:50:12 +08:00
|
|
|
onChange,
|
|
|
|
onClear,
|
|
|
|
onChangeComplete,
|
|
|
|
...injectProps
|
|
|
|
} = props;
|
2023-06-29 11:46:11 +08:00
|
|
|
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
|
|
|
|
|
|
|
|
// ==== Inject props ===
|
|
|
|
const panelPickerProps = {
|
|
|
|
prefixCls,
|
|
|
|
value: color,
|
|
|
|
onChange,
|
|
|
|
onClear,
|
|
|
|
onChangeComplete,
|
|
|
|
...injectProps,
|
|
|
|
};
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2023-06-29 11:46:11 +08:00
|
|
|
const panelPresetsProps = React.useMemo(
|
|
|
|
() => ({
|
|
|
|
prefixCls,
|
|
|
|
value: color,
|
|
|
|
presets,
|
|
|
|
onChange,
|
|
|
|
}),
|
|
|
|
[prefixCls, color, presets, onChange],
|
2023-05-12 14:43:48 +08:00
|
|
|
);
|
2023-06-29 11:46:11 +08:00
|
|
|
|
|
|
|
// ====================== Render ======================
|
|
|
|
const innerPanel = (
|
|
|
|
<>
|
|
|
|
<PanelPicker />
|
|
|
|
{Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
|
|
|
|
<PanelPresets />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
return (
|
2023-06-29 11:46:11 +08:00
|
|
|
<PanelPickerProvider value={panelPickerProps}>
|
|
|
|
<PanelPresetsProvider value={panelPresetsProps}>
|
|
|
|
<div className={colorPickerPanelPrefixCls}>
|
|
|
|
{typeof panelRender === 'function'
|
|
|
|
? panelRender(innerPanel, {
|
|
|
|
components: {
|
|
|
|
Picker: PanelPicker,
|
|
|
|
Presets: PanelPresets,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
: innerPanel}
|
|
|
|
</div>
|
|
|
|
</PanelPresetsProvider>
|
|
|
|
</PanelPickerProvider>
|
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;
|