feat(color-picker): add fixed prop, sync from mini

Tencent · Jan 23, 2025 · 5ae9d5c · 5ae9d5c
1 parent 1500ec2
commit 5ae9d5c
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 476 deletions.
diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx
@@ -1,5 +1,5 @@
 import React, { FC, TouchEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { ColorPickerChangeTrigger, Popup } from 'tdesign-mobile-react';
+import { ColorPickerChangeTrigger } from 'tdesign-mobile-react';
 import classNames from 'classnames';
 import { usePrefixClass } from '../hooks/useClass';
 import { Color, Coordinate, getColorObject } from '../_common/js/color-picker';
@@ -20,24 +20,8 @@ import { ALPHA_MAX, HUE_MAX } from './constants';
 export interface ColorPickerProps extends TdColorPickerProps, StyledProps {}
 
 const ColorPicker: FC<ColorPickerProps> = (props) => {
-  const {
-    autoClose,
-    format,
-    usePopup,
-    visible,
-    popupProps,
-    type,
-    enableAlpha,
-    swatchColors,
-    style,
-    value,
-    defaultValue,
-    onChange,
-    onClose,
-    onPaletteBarChange,
-  } = useDefaultProps(props, colorPickerDefaultProps);
-  const { showOverlay = true, zIndex = 11500, overlayProps } = popupProps;
-  const [show, setShow] = useState<boolean>(false);
+  const { format, type, enableAlpha, swatchColors, style, value, defaultValue, fixed, onChange, onPaletteBarChange } =
+    useDefaultProps(props, colorPickerDefaultProps);
   const [formatList, setFormatList] = useState([]);
   const [innerSwatchList, setInnerSwatchList] = useState([]);
   const [showPrimaryColorPreview] = useState(false);
@@ -70,7 +54,6 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
   const sliderElementRef = useRef<HTMLDivElement>(null);
   const hasInit = useRef<boolean>(false);
   const color = useRef<Color>(null);
-  const timer = useRef(null);
   const isMultiple = type === 'multiple';
   const rootClassName = usePrefixClass('color-picker');
   const contentClassName = classNames(`${rootClassName}__body`, `${rootClassName}__body--${type}`);
@@ -143,10 +126,6 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
     [setCoreStyle],
   );
 
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
-
   useEffect(() => {
     function init() {
       const innerValue = value || defaultValue;
@@ -156,7 +135,7 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
       hasInit.current = true;
       setTimeout(() => {
         getEleRect(format);
-      });
+      }, 350);
     }
 
     if (hasInit.current) {
@@ -181,22 +160,6 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
     setInnerSwatchList(genSwatchList(swatchColors));
   }, [swatchColors]);
 
-  useEffect(() => {
-    if (timer.current) {
-      return;
-    }
-
-    if (usePopup && show) {
-      timer.current = setTimeout(() => {
-        getEleRect(format);
-      }, 350);
-    }
-
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, [usePopup, show, getEleRect, format]);
-
   function getSaturationAndValueByCoordinate(coordinate: Coordinate) {
     const { width, height } = panelRect;
     const { x, y } = coordinate;
@@ -212,7 +175,7 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
   }
 
   function handleSaturationDrag(e: TouchEvent) {
-    const coordinate = getCoordinate(e, panelRect, usePopup);
+    const coordinate = getCoordinate(e, panelRect, fixed);
     const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);
     onChangeSaturation({ saturation, value });
   }
@@ -294,12 +257,6 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
     });
   }
 
-  const handleVisibleChange = () => {
-    if (autoClose) {
-      setShow(false);
-    }
-    onClose?.('overlay');
-  };
   const onTouchStart = (e: TouchEvent, dragType: string) => {
     handleDiffDrag(dragType, e);
   };
@@ -457,20 +414,7 @@ const ColorPicker: FC<ColorPickerProps> = (props) => {
       </div>
     );
 
-    const renderPopupPicker = () => (
-      <Popup
-        visible={show}
-        showOverlay={showOverlay}
-        zIndex={zIndex}
-        overlayProps={overlayProps}
-        placement="bottom"
-        onVisibleChange={handleVisibleChange}
-      >
-        {renderColorPicker()}
-      </Popup>
-    );
-
-    return usePopup ? renderPopupPicker() : renderColorPicker();
+    return renderColorPicker();
   };
 
   return renderPicker();

diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md
@@ -11,13 +11,12 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
 autoClose | Boolean | true | \- | N
 clearable | Boolean | false | \- | N
 enableAlpha | Boolean | false | \- | N
+fixed | Boolean | false | \- | N
 footer | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 header | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts) | N
 swatchColors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
 type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts) | N
-usePopup | Boolean | false | \- | N
 value | String | - | color value | N
 defaultValue | String | - | color value。uncontrolled property | N
 visible | Boolean | false | \- | N

diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md
@@ -11,13 +11,12 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autoClose | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
 clearable | Boolean | false | 是否可清空 | N
 enableAlpha | Boolean | false | 是否开启透明通道 | N
+fixed | Boolean | false | 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N
 footer | TElement | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 header | TElement | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts) | N
 swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
 type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts) | N
-usePopup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
 value | String | - | 色值 | N
 defaultValue | String | - | 色值。非受控属性 | N
 visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N

diff --git a/src/color-picker/defaultProps.ts b/src/color-picker/defaultProps.ts
@@ -8,9 +8,8 @@ export const colorPickerDefaultProps: TdColorPickerProps = {
   autoClose: true,
   clearable: false,
   enableAlpha: false,
+  fixed: false,
   format: 'RGB',
-  popupProps: {},
   type: 'base',
-  usePopup: false,
   visible: false,
 };
diff --git a/src/color-picker/helper/format.ts b/src/color-picker/helper/format.ts
@@ -4,12 +4,12 @@ import { Color } from '../../_common/js/color-picker';
 import { ColorPickerProps } from '../ColorPicker';
 import { PanelRectType } from '../types';
 
-export const getCoordinate = (e: TouchEvent, rect: PanelRectType, isPopup?: boolean) => {
+export const getCoordinate = (e: TouchEvent, rect: PanelRectType, isFixed?: boolean) => {
   const { pageX, pageY, clientY } = e?.changedTouches?.[0] || {};
-  const offsetY = isPopup ? rect.top : (e.target as HTMLElement).offsetTop;
+  const offsetY = isFixed ? rect.top : (e.target as HTMLElement).offsetTop;
   return {
     x: Math.min(Math.max(0, pageX - rect.left), rect.width),
-    y: Math.min(Math.max(0, (isPopup ? clientY : pageY) - offsetY), rect.height),
+    y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - offsetY), rect.height),
   };
 };
 

diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
@@ -4,7 +4,6 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { PopupProps } from '../popup';
 import { TElement } from '../common';
 
 export interface TdColorPickerProps {
@@ -23,6 +22,11 @@ export interface TdColorPickerProps {
    * @default false
    */
   enableAlpha?: boolean;
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
   /**
    * 底部插槽，仅在 `usePopup` 为 `true` 时有效
    */
@@ -36,11 +40,6 @@ export interface TdColorPickerProps {
    * 顶部插槽，仅在 `usePopup` 为 `true` 时有效
    */
   header?: TElement;
-  /**
-   * 透传 Popup 组件全部属性
-   * @default {}
-   */
-  popupProps?: PopupProps;
   /**
    * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
    */
@@ -50,11 +49,6 @@ export interface TdColorPickerProps {
    * @default base
    */
   type?: TypeEnum;
-  /**
-   * 是否使用弹出层包裹颜色选择器
-   * @default false
-   */
-  usePopup?: boolean;
   /**
    * 色值
    * @default ''