feat(ColorPicker): mobile-react 新增fixed 属性

TDesignOteam · Jan 23, 2025 · b9d23a1 · b9d23a1
1 parent 7afbc72
commit b9d23a1
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-react/src/color-picker/color-picker.en-US.md b/packages/products/tdesign-mobile-react/src/color-picker/color-picker.en-US.md
@@ -11,6 +11,7 @@ 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
@@ -19,6 +20,6 @@ type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type T
 value | String | - | color value | N
 defaultValue | String | - | color value。uncontrolled property | N
 visible | Boolean | false | \- | N
-onChange | Function |  | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/> | N
+onChange | Function |  | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
 onClose | Function |  | Typescript：`(trigger: ColorPickerTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
 onPaletteBarChange | Function |  | Typescript：`(context: { color: ColorObject }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N
diff --git a/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md b/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md
@@ -11,6 +11,7 @@ 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
@@ -19,6 +20,6 @@ type | String | base | 颜色选择器类型。（base 表示仅展示系统预
 value | String | - | 色值 | N
 defaultValue | String | - | 色值。非受控属性 | N
 visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
-onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/> | N
+onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
 onClose | Function |  | TS 类型：`(trigger: ColorPickerTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
 onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N
diff --git a/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts b/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts
@@ -8,6 +8,7 @@ export const colorPickerDefaultProps: TdColorPickerProps = {
   autoClose: true,
   clearable: false,
   enableAlpha: false,
+  fixed: false,
   format: 'RGB',
   type: 'base',
   visible: false,

diff --git a/packages/products/tdesign-mobile-react/src/color-picker/type.ts b/packages/products/tdesign-mobile-react/src/color-picker/type.ts
@@ -22,6 +22,11 @@ export interface TdColorPickerProps {
    * @default false
    */
   enableAlpha?: boolean;
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
   /**
    * 底部插槽，仅在 `usePopup` 为 `true` 时有效
    */
@@ -75,7 +80,15 @@ export interface TdColorPickerProps {
 
 export type TypeEnum = 'base' | 'multiple';
 
-export type ColorPickerChangeTrigger = 'palette-hue-bar' | 'palette-alpha-bar' | 'preset';
+export type ColorPickerChangeTrigger =
+  | 'palette-saturation-brightness'
+  | 'palette-saturation'
+  | 'palette-brightness'
+  | 'palette-hue-bar'
+  | 'palette-alpha-bar'
+  | 'input'
+  | 'preset'
+  | 'recent';
 
 export type ColorPickerTrigger = 'overlay';
 

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -29124,6 +29124,7 @@
     {
       "id": 1735814342,
       "platform_framework": [
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29152,6 +29153,7 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29866,7 +29868,8 @@
       "platform_framework": [
         "1",
         "2",
-        "4"
+        "4",
+        "16"
       ],
       "component": "ColorPicker",
       "field_category": 2,
@@ -29894,14 +29897,14 @@
       "platform_framework_text": [
         "Vue(PC)",
         "React(PC)",
-        "Angular(PC)"
+        "Angular(PC)",
+        "React(Mobile)"
       ],
       "field_type_text": []
     },
     {
       "id": 1705294804,
       "platform_framework": [
-        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29928,7 +29931,6 @@
       "support_default_value": 0,
       "field_category_text": "Events",
       "platform_framework_text": [
-        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": []