From ee66418a768dcb9e6f3fe2c423446d5357b33cb1 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 2 Jan 2025 18:57:03 +0800 Subject: [PATCH 1/4] feat(ColorPicker): support fixed props --- src/color-picker/README.en-US.md | 1 + src/color-picker/README.md | 1 + src/color-picker/color-picker.ts | 9 +++++---- src/color-picker/props.ts | 5 +++++ src/color-picker/type.ts | 8 ++++++++ src/textarea/README.en-US.md | 1 + src/textarea/README.md | 3 ++- src/textarea/__test__/__snapshots__/index.test.js.snap | 2 +- src/textarea/props.ts | 7 +------ src/textarea/type.ts | 10 +--------- 10 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/color-picker/README.en-US.md b/src/color-picker/README.en-US.md index 872f91a97..ffa780933 100644 --- a/src/color-picker/README.en-US.md +++ b/src/color-picker/README.en-US.md @@ -10,6 +10,7 @@ style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N auto-close | Boolean | true | \- | N enable-alpha | Boolean | false | \- | N +fixed | Boolean | false | `1.8.5` | N footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N header | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N diff --git a/src/color-picker/README.md b/src/color-picker/README.md index 7aa568f1d..0fa8e37bc 100644 --- a/src/color-picker/README.md +++ b/src/color-picker/README.md @@ -44,6 +44,7 @@ style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N enable-alpha | Boolean | false | 是否开启透明通道 | N +fixed | Boolean | false | `1.8.5`。如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N footer | Slot | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N header | Slot | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N diff --git a/src/color-picker/color-picker.ts b/src/color-picker/color-picker.ts index be59e0ddc..bf96b58fc 100644 --- a/src/color-picker/color-picker.ts +++ b/src/color-picker/color-picker.ts @@ -17,14 +17,14 @@ import { Color, getColorObject } from './utils'; const { prefix } = config; const name = `${prefix}-color-picker`; -const getCoordinate = (e, react, isPopup?: boolean) => { +const getCoordinate = (e, react, isFixed?: boolean) => { const { pageX, pageY, clientY } = e.changedTouches[0] || {}; - const offsetY = isPopup ? react.top : e.currentTarget?.offsetTop; + const offsetY = isFixed ? react.top : e.currentTarget?.offsetTop; return { x: Math.min(Math.max(0, pageX - react.left), react.width), - y: Math.min(Math.max(0, (isPopup ? clientY : pageY) - offsetY), react.height), + y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - offsetY), react.height), }; }; @@ -312,7 +312,8 @@ export default class ColorPicker extends SuperComponent { }, handleSaturationDrag(e) { - const coordinate = getCoordinate(e, this.data.panelRect, this.properties.usePopup); + const { usePopup, fixed } = this.properties; + const coordinate = getCoordinate(e, this.data.panelRect, usePopup || fixed); const { saturation, value } = this.getSaturationAndValueByCoordinate(coordinate); this.onChangeSaturation({ saturation, value }); }, diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts index 70ca8b2b9..d5389acf1 100644 --- a/src/color-picker/props.ts +++ b/src/color-picker/props.ts @@ -16,6 +16,11 @@ const props: TdColorPickerProps = { type: Boolean, value: false, }, + /** 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */ + fixed: { + type: Boolean, + value: false, + }, /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */ format: { type: String, diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index 6f3316529..1eb6db4ef 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -23,6 +23,14 @@ export interface TdColorPickerProps { type: BooleanConstructor; value?: boolean; }; + /** + * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true + * @default false + */ + fixed?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 * @default RGB diff --git a/src/textarea/README.en-US.md b/src/textarea/README.en-US.md index be6f40134..cc2ac38b6 100644 --- a/src/textarea/README.en-US.md +++ b/src/textarea/README.en-US.md @@ -43,6 +43,7 @@ enter | `(value: TextareaValue)` | \- focus | `(value: TextareaValue)` | \- keyboardheightchange | `(height: number, duration: number)` | \- line-change | `(value: TextareaValue)` | \- + ### Textarea External Classes className | Description diff --git a/src/textarea/README.md b/src/textarea/README.md index 3a2d9c932..04c2c7f9a 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -81,7 +81,7 @@ cursor | Number | -1 | 指定 focus 时的光标位置 | N cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N disabled | Boolean | undefined | 是否禁用文本框 | N -fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N +fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N focus | Boolean | false | 自动聚焦 | N hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N @@ -106,6 +106,7 @@ enter | `(value: TextareaValue)` | 点击完成时触发 focus | `(value: TextareaValue)` | 获得焦点时触发 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件 line-change | `(value: TextareaValue)` | 行高发生变化时触发 + ### Textarea External Classes 类名 | 描述 diff --git a/src/textarea/__test__/__snapshots__/index.test.js.snap b/src/textarea/__test__/__snapshots__/index.test.js.snap index 09650f8f8..e441ecc0b 100644 --- a/src/textarea/__test__/__snapshots__/index.test.js.snap +++ b/src/textarea/__test__/__snapshots__/index.test.js.snap @@ -31,7 +31,7 @@ exports[`textarea slots : label 1`] = ` cursorSpacing="{{0}}" disabled="{{null}}" disableDefaultPadding="{{false}}" - fixed="{{null}}" + fixed="{{false}}" focus="{{false}}" holdKeyboard="{{false}}" maxlength="{{-1}}" diff --git a/src/textarea/props.ts b/src/textarea/props.ts index ac3f2b8e2..8ae321e34 100644 --- a/src/textarea/props.ts +++ b/src/textarea/props.ts @@ -56,13 +56,8 @@ const props: TdTextareaProps = { type: null, value: undefined, }, - /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true */ + /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */ fixed: { - type: Boolean, - value: null, - }, - /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true，非受控属性 */ - defaultFixed: { type: Boolean, value: false, }, diff --git a/src/textarea/type.ts b/src/textarea/type.ts index 59da49435..f667de15b 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -85,21 +85,13 @@ export interface TdTextareaProps { value?: boolean; }; /** - * 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true + * 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true * @default false */ fixed?: { type: BooleanConstructor; value?: boolean; }; - /** - * 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true，非受控属性 - * @default false - */ - defaultFixed?: { - type: BooleanConstructor; - value?: boolean; - }; /** * 自动聚焦 * @default false From f160e22ac0076ca53b1c30c9a6600a4c1da010df Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 16 Jan 2025 16:59:05 +0800 Subject: [PATCH 2/4] feat(ColorPicker): adapting the use scenarios of scroll-view --- src/color-picker/color-picker.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/color-picker/color-picker.ts b/src/color-picker/color-picker.ts index bf96b58fc..96f1b92ec 100644 --- a/src/color-picker/color-picker.ts +++ b/src/color-picker/color-picker.ts @@ -11,7 +11,7 @@ import { HUE_MAX, DEFAULT_SYSTEM_SWATCH_COLORS, } from './constants'; -import { getRect } from '../common/utils'; +import { getRect, debounce } from '../common/utils'; import { Color, getColorObject } from './utils'; const { prefix } = config; @@ -141,6 +141,10 @@ export default class ColorPicker extends SuperComponent { this.init(); }, + attached() { + this.debouncedUpdateEleRect = debounce((e: WechatMiniprogram.TouchEvent) => this.updateEleRect(e), 150); + }, + detached() { clearTimeout(this.timer); }, @@ -160,6 +164,22 @@ export default class ColorPicker extends SuperComponent { this.getEleReact(); }, + updateEleRect(e: WechatMiniprogram.TouchEvent) { + if (!e) return; + + const { scrollTop } = e.detail; + const { width, height, left, initTop } = this.data.panelRect; + this.setData({ + panelRect: { + width, + height, + left, + top: initTop - scrollTop, + initTop, + }, + }); + }, + getEleReact() { Promise.all([getRect(this, `.${name}__saturation`), getRect(this, `.${name}__slider`)]).then( ([saturationRect, sliderRect]) => { @@ -170,6 +190,7 @@ export default class ColorPicker extends SuperComponent { height: saturationRect.height || SATURATION_PANEL_DEFAULT_HEIGHT, left: saturationRect.left || 0, top: saturationRect.top || 0, + initTop: saturationRect.top || 0, }, sliderRect: { left: sliderRect.left || 0, From 5adf5cd52445368f0784a4e109d06586499ccc6f Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 16 Jan 2025 17:30:33 +0800 Subject: [PATCH 3/4] fix(ColorPicker): fixed the problem that dynamic value changes are invalid --- src/color-picker/color-picker.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/color-picker/color-picker.ts b/src/color-picker/color-picker.ts index 96f1b92ec..2a7e94ea3 100644 --- a/src/color-picker/color-picker.ts +++ b/src/color-picker/color-picker.ts @@ -95,6 +95,11 @@ export default class ColorPicker extends SuperComponent { }, 350); // popup的transition-duration为300ms，为保证popup已渲染完毕，故使用350ms } }, + value(v: string) { + if (v) { + this.init(); + } + }, }; color = new Color(props.defaultValue.value || props.value.value || DEFAULT_COLOR); From 8791339cdba2a5f023ca5bac1d9f78917c85b489 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 16 Jan 2025 17:36:08 +0800 Subject: [PATCH 4/4] docs(ColorPicker): add FAQ --- src/color-picker/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/color-picker/README.md b/src/color-picker/README.md index 0fa8e37bc..32378195a 100644 --- a/src/color-picker/README.md +++ b/src/color-picker/README.md @@ -63,3 +63,20 @@ visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 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)。
`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `
close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。
`type ColorPickerTrigger = 'overlay'`
palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/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;}`
+ +## FAQ + +如果使用场景为 `scroll-view`，除了需要显示指定 `fixed` 属性为 `true`，还需要手动调用组件的 debouncedUpdateEleRect() 事件。 + +```html + + + +``` + +```js +onScroll(e) { + if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker'); + this.colorPicker.debouncedUpdateEleRect(e); +} +```