feat(ColorPicker): support fixed props (#3426)

* feat(ColorPicker): support fixed props

* feat(ColorPicker): adapting the use scenarios of scroll-view

* fix(ColorPicker): fixed the problem that dynamic value changes are invalid

* docs(ColorPicker): add FAQ

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

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
@@ -62,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)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
 close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
 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/>
+
+## FAQ
+
+如果使用场景为 `scroll-view`，除了需要显示指定 `fixed` 属性为 `true`，还需要手动调用组件的 debouncedUpdateEleRect() 事件。
+
+```html
+<scroll-view type="list" scroll-y bind:scroll="onScroll">
+  <t-color-picker id="ColorPicker" fixed />
+</scroll-view>
+```
+
+```js
+onScroll(e) {
+  if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker');
+  this.colorPicker.debouncedUpdateEleRect(e);
+}
+```

src/color-picker/color-picker.ts

@@ -11,20 +11,20 @@ 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;
 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),
   };
 };
 
@@ -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);
@@ -141,6 +146,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 +169,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 +195,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,
@@ -312,7 +338,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 });
     },

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,

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

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

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
 
 类名 | 描述

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}}"

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,
   },

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