Skip to content

Commit 49ce199

Browse files
anlyyaoanlyyao
authored
feat(ColorPicker): support use-popup props (#3260)
* feat(ColorPicker): support use=popup props * feat(ColorPicker): add example * test: update snapshots for demos * feat(ColorPicker): support style and customStyle props * docs: update * feat: support popupProps * docs: update * fix(ColorPicker): fix cr
1 parent 39a663b commit 49ce199

File tree

19 files changed

+940
-139
lines changed

19 files changed

+940
-139
lines changed

‎src/color-picker/README.en-US.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,23 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9+
style | Object | - | CSS(Cascading Style Sheets) | N
10+
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
11+
auto-close | Boolean | true | \- | N
912
enable-alpha | Boolean | false | \- | N
1013
format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
14+
popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
1115
swatch-colors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
1216
type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
17+
use-popup | Boolean | false | \- | N
1318
value | String | - | color value | N
1419
default-value | String | undefined | color value。uncontrolled property | N
20+
visible | Boolean | false | \- | N
1521

1622
### ColorPicker Events
1723

1824
name | params | description
1925
-- | -- | --
2026
change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
27+
close | `(trigger: ColorPickerTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
2128
palette-bar-change | `(detail: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/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/>

‎src/color-picker/README.md‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,25 @@ isComponent: true
3838

3939
### ColorPicker Props
4040

41-
| 名称 | 类型 | 默认值 | 说明 | 必传 |
42-
| ------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- |
43-
| enable-alpha | Boolean | false | 是否开启透明通道 | N |
44-
| format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N |
45-
| swatch-colors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N |
46-
| type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N |
47-
| value | String | - | 色值 | N |
48-
| default-value | String | undefined | 色值。非受控属性 | N |
41+
名称 | 类型 | 默认值 | 描述 | 必传
42+
-- | -- | -- | -- | --
43+
style | Object | - | 样式 | N
44+
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
45+
auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
46+
enable-alpha | Boolean | false | 是否开启透明通道 | N
47+
format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
48+
popup-props | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
49+
swatch-colors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
50+
type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
51+
use-popup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
52+
value | String | - | 色值 | N
53+
default-value | String | undefined | 色值。非受控属性 | N
54+
visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
4955

5056
### ColorPicker Events
5157

52-
| 名称 | 参数 | 描述 |
53-
| ------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54-
| change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/> |
55-
| palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/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/> |
58+
名称 | 参数 | 描述
59+
-- | -- | --
60+
change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
61+
close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
62+
palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/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/>

‎src/color-picker/__test__/__snapshots__/demo.test.js.snap‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,28 @@ exports[`ColorPicker ColorPicker multiple demo works fine 1`] = `
9898
/>
9999
</multiple>
100100
`;
101+
102+
exports[`ColorPicker ColorPicker use-popup demo works fine 1`] = `
103+
<use-popup>
104+
<t-color-picker
105+
enableAlpha="{{true}}"
106+
type="multiple"
107+
usePopup="{{true}}"
108+
visible=""
109+
bind:change="onChange"
110+
bind:palette-bar-change="onPaletteBarChange"
111+
/>
112+
<t-button
113+
block="{{true}}"
114+
size="large"
115+
tClass="wrapper"
116+
theme="primary"
117+
variant="outline"
118+
bind:tap="handlePopup"
119+
>
120+
121+
弹窗形式的颜色选择器
122+
123+
</t-button>
124+
</use-popup>
125+
`;

‎src/color-picker/__test__/demo.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import path from 'path';
66
import simulate from 'miniprogram-simulate';
77

8-
const mapper = ['base', 'format', 'multiple'];
8+
const mapper = ['base', 'format', 'multiple', 'use-popup'];
99

1010
describe('ColorPicker', () => {
1111
mapper.forEach((demoName) => {

‎src/color-picker/_example/color-picker.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"usingComponents": {
44
"base": "./base",
55
"multiple": "./multiple",
6-
"format": "./format"
6+
"format": "./format",
7+
"usePopup": "./use-popup"
78
}
89
}

‎src/color-picker/_example/color-picker.wxml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<t-navbar class="demo-navbar" title="ColorPicker" leftArrow />
2+
23
<view class="demo">
34
<view class="demo-title">ColorPicker 颜色选择器</view>
45
<view class="demo-desc">用于颜色选择，支持多种格式。</view>
@@ -10,6 +11,10 @@
1011
<multiple />
1112
</t-demo>
1213

14+
<t-demo desc="弹窗形式的颜色选择器" padding>
15+
<usePopup />
16+
</t-demo>
17+
1318
<t-demo title="02 组件状态" desc="组件模式选择">
1419
<format />
1520
</t-demo>

‎src/color-picker/_example/use-popup/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Component({
2+
methods: {
3+
onChange(e) {
4+
console.log('change', e.detail);
5+
},
6+
7+
handlePopup() {
8+
this.setData({ visible: true });
9+
},
10+
onPaletteBarChange(e) {
11+
console.log('onPaletteBarChange', e.detail);
12+
},
13+
},
14+
});

‎src/color-picker/_example/use-popup/index.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
"t-color-picker": "tdesign-miniprogram/color-picker/color-picker",
5+
"t-popup": "tdesign-miniprogram/popup/popup"
6+
}
7+
}

‎src/color-picker/_example/use-popup/index.wxml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<t-color-picker
2+
visible="{{visible}}"
3+
use-popup
4+
enableAlpha
5+
type="multiple"
6+
bind:change="onChange"
7+
bind:palette-bar-change="onPaletteBarChange"
8+
/>
9+
10+
<t-button block size="large" variant="outline" theme="primary" bind:tap="handlePopup" t-class="wrapper">
11+
弹窗形式的颜色选择器
12+
</t-button>

‎src/color-picker/_example/use-popup/index.wxss‎

Whitespace-only changes.

0 commit comments

Comments
 (0)