From 9e14728bc8a07edfb8a2569496823973fa76ac27 Mon Sep 17 00:00:00 2001 From: JosonYang <258490116@qq.com> Date: Fri, 18 Nov 2022 23:07:41 +0800 Subject: [PATCH 1/3] feat: add preset&recent when color change --- src/color-picker/color-picker.en-US.md | 3 +-- src/color-picker/color-picker.md | 2 +- src/color-picker/components/panel/index.tsx | 8 ++++---- src/color-picker/type.ts | 5 +++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 0ef14fba5..0f88162ec 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/src/color-picker/color-picker.en-US.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### ColorPicker Props name | type | default | description | required @@ -22,6 +21,6 @@ selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput A swatchColors | Array | - | swatch colors。Typescript：`Array` | N value | String | - | color value | N defaultValue | String | - | color value。uncontrolled property | N -onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input'`
| N +onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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 onPaletteBarChange | Function | | Typescript：`(context: { color: ColorObject }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
| N onRecentColorsChange | Function | | Typescript：`(value: Array) => void`
| N diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index 4c0e6f867..325b3e5ab 100644 --- a/src/color-picker/color-picker.md +++ b/src/color-picker/color-picker.md @@ -21,6 +21,6 @@ selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件 swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array` | N value | String | - | 色值 | N defaultValue | String | - | 色值。非受控属性 | N -onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input'`
| N +onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/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 onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`
调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
| N onRecentColorsChange | Function | | TS 类型：`(value: Array) => void`
最近使用颜色发生变化时触发 | N diff --git a/src/color-picker/components/panel/index.tsx b/src/color-picker/components/panel/index.tsx index 1bd89a9f9..2314dca72 100644 --- a/src/color-picker/components/panel/index.tsx +++ b/src/color-picker/components/panel/index.tsx @@ -247,7 +247,7 @@ const Panel = forwardRef((props: ColorPickerProps, ref: MutableRefObject { + const handleSetColor = (value: string, trigger: ColorPickerChangeTrigger) => { const isGradientValue = Color.isGradientColor(value); const color = colorInstanceRef.current; if (isGradientValue) { @@ -264,7 +264,7 @@ const Panel = forwardRef((props: ColorPickerProps, ref: MutableRefObject handleSetColor(color)} + onSetColor={(color: string) => handleSetColor(color, 'recent')} onChange={handleRecentlyUsedColorsChange} /> )} @@ -286,7 +286,7 @@ const Panel = forwardRef((props: ColorPickerProps, ref: MutableRefObject handleSetColor(color)} + onSetColor={(color: string) => handleSetColor(color, 'preset')} /> )} diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index c893d9025..3432cc48c 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -22,7 +22,6 @@ export interface TdColorPickerProps { colorModes?: Array<'monochrome' | 'linear-gradient'>; /** * 是否禁用组件 - * @default false */ disabled?: boolean; /** @@ -96,7 +95,9 @@ export type ColorPickerChangeTrigger = | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' - | 'input'; + | 'input' + | 'preset' + | 'recent'; export interface ColorObject { alpha: number; From 5cc8f2a71b1c4a5b9540b6fc3bfcc8e3b8d20404 Mon Sep 17 00:00:00 2001 From: JosonYang <258490116@qq.com> Date: Thu, 15 Dec 2022 10:42:34 +0800 Subject: [PATCH 2/3] fix(colorpicker): remove swatches default title --- src/_common | 2 +- .../components/panel/swatches.tsx | 43 ++++++++----------- 2 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/_common b/src/_common index 67b722c9a..1c6613d1e 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 67b722c9ae1e7dff4e0a24ba69a969850afcc803 +Subproject commit 1c6613d1e1eefc365a7a552a81568dab3fa82ee1 diff --git a/src/color-picker/components/panel/swatches.tsx b/src/color-picker/components/panel/swatches.tsx index 82c7c49e7..30b3773c3 100644 --- a/src/color-picker/components/panel/swatches.tsx +++ b/src/color-picker/components/panel/swatches.tsx @@ -15,16 +15,7 @@ export interface TdColorSwathcesProps extends TdColorBaseProps { } const Swatches = (props: TdColorSwathcesProps) => { - const { - baseClassName, - colors = [], - title = '系统色彩', - editable = false, - onChange, - disabled, - onSetColor, - handleAddColor, - } = props; + const { baseClassName, colors = [], editable = false, title, onChange, disabled, onSetColor, handleAddColor } = props; const { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon }); const swatchesClass = `${baseClassName}__swatches`; const { STATUS: statusClassNames } = useCommonClassName(); @@ -44,21 +35,25 @@ const Swatches = (props: TdColorSwathcesProps) => { return (
-

- {title} - {editable && ( -
- handleAddColor()}> - - - {colors.length > 0 ? ( - handleRemoveColor()}> - + {title ? ( +

+ {title} + {editable && ( +
+ handleAddColor()}> + - ) : null} -
- )} -

+ {colors.length > 0 ? ( + handleRemoveColor()}> + + + ) : null} +
+ )} +

+ ) : ( + <> + )}
    {colors.map((color) => (
  • Date: Thu, 22 Dec 2022 12:36:03 +0800 Subject: [PATCH 3/3] feat: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 1c6613d1e..b81e88fd0 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 1c6613d1e1eefc365a7a552a81568dab3fa82ee1 +Subproject commit b81e88fd0c2d50ba4536e82b97dd18551a6d472f