mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
ce7da2ef41
* refactor: refactoring custom panel logic * chore: update test case & update snapshot * chore: update un-stable snap??? * docs: update demo * chore: update snapshots * fix: table filterDropdown should accept cssvar (#46314) * chore: revert files * chore: update demo * chore: update snap --------- Co-authored-by: MadCcc <madccc@foxmail.com>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import type { HsbaColorType } from '@rc-component/color-picker';
|
|
import type { FC } from 'react';
|
|
import React from 'react';
|
|
import Divider from '../divider';
|
|
import type { Color } from './color';
|
|
import PanelPicker from './components/PanelPicker';
|
|
import PanelPresets from './components/PanelPresets';
|
|
import { PanelPickerProvider, PanelPresetsProvider } from './context';
|
|
import type { ColorPickerBaseProps } from './interface';
|
|
|
|
interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
|
onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
|
|
onClear?: () => void;
|
|
}
|
|
|
|
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
|
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
|
|
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
|
|
|
|
// ==== Inject props ===
|
|
const panelPickerProps = {
|
|
prefixCls,
|
|
value: color,
|
|
onChange,
|
|
onClear,
|
|
...injectProps,
|
|
};
|
|
|
|
const panelPresetsProps = React.useMemo(
|
|
() => ({
|
|
prefixCls,
|
|
value: color,
|
|
presets,
|
|
onChange,
|
|
}),
|
|
[prefixCls, color, presets, onChange],
|
|
);
|
|
|
|
// ====================== Render ======================
|
|
const innerPanel = (
|
|
<div className={`${colorPickerPanelPrefixCls}-content`}>
|
|
<PanelPicker />
|
|
{Array.isArray(presets) && <Divider />}
|
|
<PanelPresets />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<PanelPickerProvider value={panelPickerProps}>
|
|
<PanelPresetsProvider value={panelPresetsProps}>
|
|
<div className={colorPickerPanelPrefixCls}>
|
|
{typeof panelRender === 'function'
|
|
? panelRender(innerPanel, {
|
|
components: {
|
|
Picker: PanelPicker,
|
|
Presets: PanelPresets,
|
|
},
|
|
})
|
|
: innerPanel}
|
|
</div>
|
|
</PanelPresetsProvider>
|
|
</PanelPickerProvider>
|
|
);
|
|
};
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
ColorPickerPanel.displayName = 'ColorPickerPanel';
|
|
}
|
|
|
|
export default ColorPickerPanel;
|