diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx index bc9c4c98..0763a7c8 100644 --- 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 = (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(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 = (props) => { const sliderElementRef = useRef(null); const hasInit = useRef(false); const color = useRef(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 = (props) => { [setCoreStyle], ); - useEffect(() => { - setShow(visible); - }, [visible]); - useEffect(() => { function init() { const innerValue = value || defaultValue; @@ -156,7 +135,7 @@ const ColorPicker: FC = (props) => { hasInit.current = true; setTimeout(() => { getEleRect(format); - }); + }, 350); } if (hasInit.current) { @@ -181,22 +160,6 @@ const ColorPicker: FC = (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 = (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 = (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 = (props) => { ); - const renderPopupPicker = () => ( - - {renderColorPicker()} - - ); - - 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 index 9eafb85c..bcd855cd 100644 --- 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 \| 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 index a5846114..3181f412 100644 --- 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 \| 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 index 22202680..9a0a5204 100644 --- 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 index 939b06f1..d4a02781 100644 --- 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 index 448c0a88..f5644363 100644 --- 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 '' diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index b0ff4832..71dee1a3 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -11883,201 +11883,8 @@ exports[`csr snapshot test > csr test src/color-picker/_example/index.tsx 1`] = >