From 6bb18b361db451b458d5c9051e91a3c6e7f30c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Thu, 29 Jun 2023 11:46:11 +0800 Subject: [PATCH] feat: ColorPicker implement `panelRender` API (#43134) * feat: implement `panelRender` api and add demo * test: add test case * docs: update doc * fix: styles add overlayInnerStyle * fix: variable name * docs: reorder api * refactor: optimize code * test: update snapshot * test: update snapshots * refactor: remove memo * refactor: rename overlayInnerStyle to popupOverlayInner * fix: props error * docs: update demo --- components/color-picker/ColorPicker.tsx | 11 +- components/color-picker/ColorPickerPanel.tsx | 86 +- .../__snapshots__/demo-extend.test.ts.snap | 11074 +++++++++------- .../__tests__/__snapshots__/demo.test.ts.snap | 88 + .../__snapshots__/index.test.tsx.snap | 578 + .../color-picker/__tests__/index.test.tsx | 24 + .../color-picker/components/PanelPicker.tsx | 54 + .../color-picker/components/PanelPresets.tsx | 22 + components/color-picker/context.ts | 10 + components/color-picker/demo/panel-render.md | 7 + components/color-picker/demo/panel-render.tsx | 125 + components/color-picker/index.en-US.md | 22 +- components/color-picker/index.zh-CN.md | 20 +- components/color-picker/interface.ts | 1 + components/color-picker/style/index.ts | 31 +- components/color-picker/style/picker.ts | 5 +- components/color-picker/style/presets.ts | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 406 +- 18 files changed, 7377 insertions(+), 5189 deletions(-) create mode 100644 components/color-picker/components/PanelPicker.tsx create mode 100644 components/color-picker/components/PanelPresets.tsx create mode 100644 components/color-picker/context.ts create mode 100644 components/color-picker/demo/panel-render.md create mode 100644 components/color-picker/demo/panel-render.tsx diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 46fdbfd9ea..1448ec4c42 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -4,7 +4,7 @@ import type { } from '@rc-component/color-picker'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import type { CSSProperties } from 'react'; +import type { CSSProperties, FC } from 'react'; import React, { useContext, useRef, useState } from 'react'; import genPurePanel from '../_util/PurePanel'; import type { SizeType } from '../config-provider/SizeContext'; @@ -43,9 +43,13 @@ export type ColorPickerProps = Omit< allowClear?: boolean; presets?: PresetsItem[]; arrow?: boolean | { pointAtCenter: boolean }; + panelRender?: ( + panel: React.ReactNode, + extra: { components: { Picker: FC; Presets: FC } }, + ) => React.ReactNode; showText?: boolean | ((color: Color) => React.ReactNode); - styles?: { popup?: CSSProperties }; size?: SizeType; + styles?: { popup?: CSSProperties; popupOverlayInner?: CSSProperties }; rootClassName?: string; onOpenChange?: (open: boolean) => void; onFormatChange?: (format: ColorFormat) => void; @@ -70,6 +74,7 @@ const ColorPicker: CompoundedComponent = (props) => { disabled, placement = 'bottomLeft', arrow = true, + panelRender, showText, style, className, @@ -172,6 +177,7 @@ const ColorPicker: CompoundedComponent = (props) => { colorCleared, disabled, presets, + panelRender, format: formatValue, onFormatChange: setFormatValue, }; @@ -179,6 +185,7 @@ const ColorPicker: CompoundedComponent = (props) => { return wrapSSR( { if (popupAllowCloseRef.current) { setPopupOpen(visible); diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx index 2b8f7663e9..45c2153915 100644 --- a/components/color-picker/ColorPickerPanel.tsx +++ b/components/color-picker/ColorPickerPanel.tsx @@ -1,12 +1,11 @@ import type { HsbaColorType } from '@rc-component/color-picker'; -import RcColorPicker from '@rc-component/color-picker'; import type { FC } from 'react'; import React from 'react'; import Divider from '../divider'; import type { Color } from './color'; -import ColorClear from './components/ColorClear'; -import ColorInput from './components/ColorInput'; -import ColorPresets from './components/ColorPresets'; +import PanelPicker from './components/PanelPicker'; +import PanelPresets from './components/PanelPresets'; +import { PanelPickerProvider, PanelPresetsProvider } from './context'; import type { ColorPickerBaseProps } from './interface'; interface ColorPickerPanelProps extends ColorPickerBaseProps { @@ -18,49 +17,60 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps { const ColorPickerPanel: FC = (props) => { const { prefixCls, - allowClear, presets, + panelRender, + color, onChange, onClear, onChangeComplete, - color, - colorCleared, ...injectProps } = props; - const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`; + const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`; - const extraPanelRender = (panel: React.ReactNode) => ( -
- {allowClear && ( - { - onChange?.(clearColor); - onClear?.(); - }} - {...injectProps} - /> - )} - {panel} - - {Array.isArray(presets) && ( - <> - - - - )} -
+ // ==== Inject props === + const panelPickerProps = { + prefixCls, + value: color, + onChange, + onClear, + onChangeComplete, + ...injectProps, + }; + + const panelPresetsProps = React.useMemo( + () => ({ + prefixCls, + value: color, + presets, + onChange, + }), + [prefixCls, color, presets, onChange], ); + + // ====================== Render ====================== + const innerPanel = ( + <> + + {Array.isArray(presets) && } + + + ); + return ( - onChange?.(colorValue, type, true)} - panelRender={extraPanelRender} - onChangeComplete={onChangeComplete} - /> + + +
+ {typeof panelRender === 'function' + ? panelRender(innerPanel, { + components: { + Picker: PanelPicker, + Presets: PanelPresets, + }, + }) + : innerPanel} +
+ + ); }; diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index f227bb8995..5a659f54c1 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -33,14 +33,14 @@ Array [ class="ant-popover-inner-content" >
+
-
@@ -120,149 +120,229 @@ Array [ />
+
+
-
- - - - - HEX - -
-