feat(color-picker): update mobile-react type, sync from mini (#534)

* feat(ColorPicker): update mobile-react type, sync from mini * feat(ColorPicker): update mobile-react type, remove usePopup and popupProps * feat(ColorPicker): mobile-react 新增fixed 属性
TDesignOteam · Jan 23, 2025 · bd806e5 · bd806e5
1 parent ead0a7c
commit bd806e5
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 19 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
@@ -10,9 +10,16 @@ className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 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
-usePopup | Boolean | false | \- | 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
+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-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
@@ -10,9 +10,16 @@ className | String | - | 类名 | N
 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
-usePopup | Boolean | false | 是否使用弹出层包裹颜色选择器 | 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
+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-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
@@ -7,7 +7,9 @@ import { TdColorPickerProps } from './type';
 export const colorPickerDefaultProps: TdColorPickerProps = {
   autoClose: true,
   clearable: false,
-  popupProps: {},
-  usePopup: 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
@@ -4,7 +4,6 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { PopupProps } from '../popup';
 import { TElement } from '../common';
 
 export interface TdColorPickerProps {
@@ -18,33 +17,91 @@ export interface TdColorPickerProps {
    * @default false
    */
   clearable?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
   /**
    * 底部插槽，仅在 `usePopup` 为 `true` 时有效
    */
   footer?: TElement;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
+   * @default RGB
+   */
+  format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
   /**
    * 顶部插槽，仅在 `usePopup` 为 `true` 时有效
    */
   header?: TElement;
   /**
-   * 透传 Popup 组件全部属性
-   * @default {}
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
    */
-  popupProps?: PopupProps;
+  swatchColors?: Array<string> | null;
   /**
-   * 是否使用弹出层包裹颜色选择器
-   * @default false
+   * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
+   * @default base
+   */
+  type?: TypeEnum;
+  /**
+   * 色值
+   * @default ''
    */
-  usePopup?: boolean;
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
   /**
    * 是否显示颜色选择器。`usePopup` 为 true 时有效
    * @default false
    */
   visible?: boolean;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
   /**
    * 关闭按钮时触发
    */
   onClose?: (trigger: ColorPickerTrigger) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
 }
 
+export type TypeEnum = 'base' | 'multiple';
+
+export type ColorPickerChangeTrigger =
+  | 'palette-saturation-brightness'
+  | 'palette-saturation'
+  | 'palette-brightness'
+  | 'palette-hue-bar'
+  | 'palette-alpha-bar'
+  | 'input'
+  | 'preset'
+  | 'recent';
+
 export type ColorPickerTrigger = 'overlay';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  value: number;
+}
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -29041,6 +29041,7 @@
         "1",
         "2",
         "4",
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29072,6 +29073,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29122,6 +29124,7 @@
     {
       "id": 1735814342,
       "platform_framework": [
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29150,6 +29153,7 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29203,6 +29207,7 @@
         "1",
         "2",
         "4",
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29234,6 +29239,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29408,7 +29414,6 @@
       "id": 1730984839,
       "platform_framework": [
         "8",
-        "16",
         "32",
         "64"
       ],
@@ -29439,7 +29444,6 @@
       "field_category_text": "Props",
       "platform_framework_text": [
         "Vue(Mobile)",
-        "React(Mobile)",
         "Angular(Mobile)",
         "Miniprogram"
       ],
@@ -29617,6 +29621,7 @@
         "1",
         "2",
         "4",
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29648,6 +29653,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29657,6 +29663,7 @@
     {
       "id": 1705294739,
       "platform_framework": [
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29685,6 +29692,7 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29695,7 +29703,6 @@
       "id": 1730970213,
       "platform_framework": [
         "8",
-        "16",
         "32",
         "64"
       ],
@@ -29726,7 +29733,6 @@
       "field_category_text": "Props",
       "platform_framework_text": [
         "Vue(Mobile)",
-        "React(Mobile)",
         "Angular(Mobile)",
         "Miniprogram"
       ],
@@ -29778,6 +29784,7 @@
     {
       "id": 1705294511,
       "platform_framework": [
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -29806,6 +29813,7 @@
       "support_default_value": 1,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -29860,7 +29868,8 @@
       "platform_framework": [
         "1",
         "2",
-        "4"
+        "4",
+        "16"
       ],
       "component": "ColorPicker",
       "field_category": 2,
@@ -29888,7 +29897,8 @@
       "platform_framework_text": [
         "Vue(PC)",
         "React(PC)",
-        "Angular(PC)"
+        "Angular(PC)",
+        "React(Mobile)"
       ],
       "field_type_text": []
     },
@@ -30004,6 +30014,7 @@
     {
       "id": 1705394290,
       "platform_framework": [
+        "16",
         "64"
       ],
       "component": "ColorPicker",
@@ -30030,6 +30041,7 @@
       "support_default_value": 0,
       "field_category_text": "Events",
       "platform_framework_text": [
+        "React(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": []