From b82e830f9a8693df0a63d989067d5e72f4bf9a81 Mon Sep 17 00:00:00 2001 From: slatejack <1815846446@qq.com> Date: Wed, 22 Jan 2025 19:12:22 +0800 Subject: [PATCH 1/3] feat(ColorPicker): update mobile-react type, sync from mini --- db/TDesign.db | Bin 1007616 -> 1007616 bytes .../src/color-picker/color-picker.en-US.md | 8 +++ .../src/color-picker/color-picker.md | 8 +++ .../src/color-picker/defaultProps.ts | 3 + .../src/color-picker/type.ts | 55 ++++++++++++++++++ packages/scripts/api.json | 14 +++++ 6 files changed, 88 insertions(+) diff --git a/db/TDesign.db b/db/TDesign.db index 1ae68f97898d2c44fef35175bf0ec72f0192ed33..f06b027f771c10de889ac935ece6bfd7ae147d57 100644 GIT binary patch delta 149 zcmZoTVB2uOc7ilx#6%fq)(8f@vaZII))dCp6sFb`=GGLJ))dy(6t>nB_SO`Rttp(6 z(v0ELnmC_rPm$rA#mE>w{l6?{6=QgNl^iD!a{)2;_9{7^Tb~&Nwy%}sG-aILCCnSm x7T}zplV3DFF@Q;UyFxRkAmem?QQp}=HLFE=`4|}k+INZZ0x{qAU1I!ho&ZQLFFF7K delta 148 zcmZoTVB2uOc7ilx;6xc`)<6cmvW~`-))dCp6sFb`=GGLJ))dy(6t>nB_SO`Rttp(6 z($oJpaz5XlBEvb0k \| 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 +onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
| N onClose | Function | | Typescript：`(trigger: ColorPickerTrigger) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerTrigger = 'overlay'`
| N +onPaletteBarChange | Function | | Typescript：`(context: { color: ColorObject }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`
| 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 index 9ce93848..9d0f6bba 100644 --- 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,17 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autoClose | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N clearable | Boolean | false | 是否可清空 | N +enableAlpha | Boolean | false | 是否开启透明通道 | 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 +onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
| N onClose | Function | | TS 类型：`(trigger: ColorPickerTrigger) => void`
关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerTrigger = 'overlay'`
| N +onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`
调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`
| 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 index 263023f1..22202680 100644 --- 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,10 @@ import { TdColorPickerProps } from './type'; export const colorPickerDefaultProps: TdColorPickerProps = { autoClose: true, clearable: false, + enableAlpha: false, + format: 'RGB', popupProps: {}, + type: 'base', usePopup: false, 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 index bab97204..4113cc31 100644 --- a/packages/products/tdesign-mobile-react/src/color-picker/type.ts +++ b/packages/products/tdesign-mobile-react/src/color-picker/type.ts @@ -18,10 +18,20 @@ export interface TdColorPickerProps { * @default false */ clearable?: boolean; + /** + * 是否开启透明通道 + * @default false + */ + enableAlpha?: boolean; /** * 底部插槽，仅在 `usePopup` 为 `true` 时有效 */ footer?: TElement; + /** + * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 + * @default RGB + */ + format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS'; /** * 顶部插槽，仅在 `usePopup` 为 `true` 时有效 */ @@ -31,20 +41,65 @@ export interface TdColorPickerProps { * @default {} */ popupProps?: PopupProps; + /** + * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 + */ + swatchColors?: Array | null; + /** + * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容 + * @default base + */ + type?: TypeEnum; /** * 是否使用弹出层包裹颜色选择器 * @default false */ usePopup?: boolean; + /** + * 色值 + * @default '' + */ + 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-hue-bar' | 'palette-alpha-bar' | 'preset'; + 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 index 67457046..d843b594 100644 --- 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": [ @@ -29203,6 +29205,7 @@ "1", "2", "4", + "16", "64" ], "component": "ColorPicker", @@ -29234,6 +29237,7 @@ "Vue(PC)", "React(PC)", "Angular(PC)", + "React(Mobile)", "Miniprogram" ], "field_type_text": [ @@ -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": [ @@ -29778,6 +29786,7 @@ { "id": 1705294511, "platform_framework": [ + "16", "64" ], "component": "ColorPicker", @@ -29806,6 +29815,7 @@ "support_default_value": 1, "field_category_text": "Props", "platform_framework_text": [ + "React(Mobile)", "Miniprogram" ], "field_type_text": [ @@ -29895,6 +29905,7 @@ { "id": 1705294804, "platform_framework": [ + "16", "64" ], "component": "ColorPicker", @@ -29921,6 +29932,7 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ + "React(Mobile)", "Miniprogram" ], "field_type_text": [] @@ -30004,6 +30016,7 @@ { "id": 1705394290, "platform_framework": [ + "16", "64" ], "component": "ColorPicker", @@ -30030,6 +30043,7 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ + "React(Mobile)", "Miniprogram" ], "field_type_text": [] From 7afbc72e0049e36f606599bc60b31df446ae1ee4 Mon Sep 17 00:00:00 2001 From: slatejack <1815846446@qq.com> Date: Wed, 22 Jan 2025 19:39:06 +0800 Subject: [PATCH 2/3] feat(ColorPicker): update mobile-react type, remove usePopup and popupProps --- db/TDesign.db | Bin 1007616 -> 1007616 bytes .../src/color-picker/color-picker.en-US.md | 2 -- .../src/color-picker/color-picker.md | 2 -- .../src/color-picker/defaultProps.ts | 2 -- .../src/color-picker/type.ts | 11 ----------- packages/scripts/api.json | 4 ---- 6 files changed, 21 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index f06b027f771c10de889ac935ece6bfd7ae147d57..349ac0fc82a1f8947c2319a7bf093d62840a1012 100644 GIT binary patch delta 93 zcmZoTVB2uOc7ilx)I=F)#;C@G)&$1Z1g6#m=GFw3)&$np1h&=$_N@sV_6dv`(* \| 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/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md b/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md index 9d0f6bba..b9e1a0ff 100644 --- a/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md +++ b/packages/products/tdesign-mobile-react/src/color-picker/color-picker.md @@ -14,10 +14,8 @@ enableAlpha | Boolean | false | 是否开启透明通道 | 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/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts b/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts index 22202680..fd4bf970 100644 --- a/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts +++ b/packages/products/tdesign-mobile-react/src/color-picker/defaultProps.ts @@ -9,8 +9,6 @@ export const colorPickerDefaultProps: TdColorPickerProps = { clearable: false, enableAlpha: false, format: 'RGB', - popupProps: {}, type: 'base', - usePopup: false, 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 index 4113cc31..a29c8c99 100644 --- 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 { @@ -36,11 +35,6 @@ export interface TdColorPickerProps { * 顶部插槽，仅在 `usePopup` 为 `true` 时有效 */ header?: TElement; - /** - * 透传 Popup 组件全部属性 - * @default {} - */ - popupProps?: PopupProps; /** * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ @@ -50,11 +44,6 @@ export interface TdColorPickerProps { * @default base */ type?: TypeEnum; - /** - * 是否使用弹出层包裹颜色选择器 - * @default false - */ - usePopup?: boolean; /** * 色值 * @default '' diff --git a/packages/scripts/api.json b/packages/scripts/api.json index d843b594..3a7c1993 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -29412,7 +29412,6 @@ "id": 1730984839, "platform_framework": [ "8", - "16", "32", "64" ], @@ -29443,7 +29442,6 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(Mobile)", - "React(Mobile)", "Angular(Mobile)", "Miniprogram" ], @@ -29703,7 +29701,6 @@ "id": 1730970213, "platform_framework": [ "8", - "16", "32", "64" ], @@ -29734,7 +29731,6 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(Mobile)", - "React(Mobile)", "Angular(Mobile)", "Miniprogram" ], From b9d23a1ed4640d6a2e1e6ccd99287d3ebd51d859 Mon Sep 17 00:00:00 2001 From: slatejack <1815846446@qq.com> Date: Thu, 23 Jan 2025 10:50:23 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(ColorPicker):=20mobile-react=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9Efixed=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- db/TDesign.db | Bin 1007616 -> 1007616 bytes .../src/color-picker/color-picker.en-US.md | 3 ++- .../src/color-picker/color-picker.md | 3 ++- .../src/color-picker/defaultProps.ts | 1 + .../src/color-picker/type.ts | 15 ++++++++++++++- packages/scripts/api.json | 10 ++++++---- 6 files changed, 25 insertions(+), 7 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 349ac0fc82a1f8947c2319a7bf093d62840a1012..780d471d9290abbc5a6d797013b70cbdd447e540 100644 GIT binary patch delta 127 zcmZoTVB2uOc7ilx>_i!7#@NP$)&$1Z1g6#m=GFw3)&$np1h&=$_SOWBtqGjU;%ws1 z`8oMT(-Q-jgtsd+a|$v}=NIKwYribP3B+7L%)R}x1dq^fHV1Tt?LdV<%(tCilt0{q MF<^UoEdNX<024AMX#fBK delta 115 zcmZoTVB2uOc7ilx)I=F)#;C@G)&$1Z1g6#m=GFw3)&$np1h&=$_SOWBtqGjU;@jDq zIkgz4^NaGTwO^Lt1Y#~A=H7l;f=B2#TYz(ZPJYq!!~iDY?F!ADf{g7zg+R==onMqc O+=J0!dwMMYOeO$YP9o|6 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 index 6023bcc5..bcd855cd 100644 --- 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`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
| N +onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N onClose | Function | | Typescript：`(trigger: ColorPickerTrigger) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerTrigger = 'overlay'`
| N onPaletteBarChange | Function | | Typescript：`(context: { color: ColorObject }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`
| 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 index b9e1a0ff..3181f412 100644 --- 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`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
| N +onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N onClose | Function | | TS 类型：`(trigger: ColorPickerTrigger) => void`
关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`type ColorPickerTrigger = 'overlay'`
| N onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`
调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`
| 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 index fd4bf970..9a0a5204 100644 --- 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 index a29c8c99..f5644363 100644 --- 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 index 3a7c1993..ccafc340 100644 --- 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": []