feat(ColorPicker): add showPrimaryColorPreview API (#1788)

Tencent · Dec 8, 2022 · 6d6d9c6 · 6d6d9c6
1 parent b72439d
commit 6d6d9c6
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git a/src/color-picker/_example/trigger.jsx b/src/color-picker/_example/trigger.jsx
@@ -2,5 +2,5 @@ import React from 'react';
 import { ColorPicker } from 'tdesign-react';
 
 export default function PanelExample() {
-  return <ColorPicker defaultValue={'#0052d9'} />;
+  return <ColorPicker defaultValue={'#0052d9'} showPrimaryColorPreview={false} />;
 }
diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md
@@ -18,6 +18,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
 recentColors | Array | [] | used color recently。Typescript：`boolean \| Array<string>` | N
 defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array<string>` | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N
+showPrimaryColorPreview | Boolean | true | \- | N
 swatchColors | Array | - | swatch colors。Typescript：`Array<string>` | N
 value | String | - | color value | N
 defaultValue | String | - | color value。uncontrolled property | N

diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md
@@ -18,6 +18,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `ove
 recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。TS 类型：`boolean \| Array<string>` | N
 defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array<string>` | N
 selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N
+showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N
 swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string>` | N
 value | String | - | 色值 | N
 defaultValue | String | - | 色值。非受控属性 | N

diff --git a/src/color-picker/components/panel/index.tsx b/src/color-picker/components/panel/index.tsx
@@ -44,6 +44,7 @@ const Panel = forwardRef((props: ColorPickerProps, ref: MutableRefObject<HTMLDiv
     togglePopup,
     closeBtn,
     colorModes = ['linear-gradient', 'monochrome'],
+    showPrimaryColorPreview = true,
   } = props;
   const [innerValue, setInnerValue] = useControlled(props, 'value', onChange);
   const colorInstanceRef = useRef<Color>(new Color(innerValue || DEFAULT_COLOR));
@@ -319,14 +320,16 @@ const Panel = forwardRef((props: ColorPickerProps, ref: MutableRefObject<HTMLDiv
             <HUESlider {...baseProps} onChange={handleHUEChange} />
             {enableAlpha && <AlphaSlider {...baseProps} onChange={handleAlphaChange} />}
           </div>
-          <div className={classNames([`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`])}>
-            <span
-              className={`${baseClassName}__sliders-preview-inner`}
-              style={{
-                background: isGradient ? colorInstanceRef.current.linearGradient : colorInstanceRef.current.rgba,
-              }}
-            />
-          </div>
+          {showPrimaryColorPreview ? (
+            <div className={classNames([`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`])}>
+              <span
+                className={`${baseClassName}__sliders-preview-inner`}
+                style={{
+                  background: isGradient ? colorInstanceRef.current.linearGradient : colorInstanceRef.current.rgba,
+                }}
+              />
+            </div>
+          ) : null}
         </div>
 
         <FormatPanel

diff --git a/src/color-picker/defaultProps.ts b/src/color-picker/defaultProps.ts
@@ -11,4 +11,5 @@ export const colorPickerDefaultProps: TdColorPickerProps = {
   format: 'RGB',
   multiple: false,
   defaultRecentColors: [],
+  showPrimaryColorPreview: true,
 };
diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
@@ -61,6 +61,11 @@ export interface TdColorPickerProps {
    * 透传 SelectInputProps 筛选器输入框组件全部属性
    */
   selectInputProps?: SelectInputProps;
+  /**
+   * 是否展示颜色选择条右侧的颜色预览区域
+   * @default true
+   */
+  showPrimaryColorPreview?: boolean;
   /**
    * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
    */