feat(TreeSelect): enrich external classes (#3395)

* feat(TreeSelect): enrich external classes

* chore(SideBar): hide scroll bar style

Author: anlyyao

src/side-bar/side-bar.less

@@ -11,6 +11,10 @@
   height: @side-bar-height;
   overflow-y: auto;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   &__padding {
     flex: 1;
     background-color: @side-bar-bg-color;

src/tree-select/README.en-US.md

@@ -21,6 +21,18 @@ name | params | description
 -- | -- | --
 change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
 
+### TreeSelect External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-left-column | \-
+t-class-left-item | \-
+t-class-middle-item | \-
+t-class-right-column | \-
+t-class-right-item | \-
+t-class-right-item-label | \-
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.

src/tree-select/README.md

@@ -67,6 +67,18 @@ default-value | String / Number / Array | undefined | 选中值。非受控属
 -- | -- | --
 change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
 
+### TreeSelect External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-left-column | 左侧第一列样式类
+t-class-left-item | 左侧第一列子项样式类
+t-class-middle-item | 中间列子项样式类
+t-class-right-column | 右侧第一列样式类
+t-class-right-item | 右侧第一列子项样式类
+t-class-right-item-label | 右侧第一列子项标签样式类
+
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。

src/tree-select/tree-select.ts

@@ -9,7 +9,15 @@ const name = `${prefix}-tree-select`;
 
 @wxComponent()
 export default class TreeSelect extends SuperComponent {
-  externalClasses = [`${prefix}-class`];
+  externalClasses = [
+    `${prefix}-class`,
+    `${prefix}-class-left-column`,
+    `${prefix}-class-left-item`,
+    `${prefix}-class-middle-item`,
+    `${prefix}-class-right-column`,
+    `${prefix}-class-right-item`,
+    `${prefix}-class-right-item-label`,
+  ];
 
   options = {
     multipleSlots: true,
@@ -46,10 +54,12 @@ export default class TreeSelect extends SuperComponent {
     buildTreeOptions() {
       const { options, value, multiple, keys } = this.data;
       const treeOptions = [];
+      const innerValue = [];
+
       let level = -1;
       let node = { children: options };
 
-      if (options.length === 0 || (Array.isArray(value) && value.length === 0)) return;
+      if (options.length === 0) return;
 
       while (node && node.children) {
         level += 1;
@@ -73,6 +83,11 @@ export default class TreeSelect extends SuperComponent {
 
       const leafLevel = Math.max(0, level);
 
+      treeOptions?.forEach((ele, idx) => {
+        const v = idx === treeOptions.length - 1 && multiple ? [ele[0].value] : ele[0].value;
+        innerValue.push(value?.[idx] || v);
+      });
+
       if (multiple) {
         const finalValue = this.data.value || this.data.defaultValue;
         if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
@@ -81,6 +96,7 @@ export default class TreeSelect extends SuperComponent {
       }
 
       this.setData({
+        innerValue,
         leafLevel,
         treeOptions,
       });
@@ -106,33 +122,33 @@ export default class TreeSelect extends SuperComponent {
     },
 
     onRootChange(e) {
-      const { value } = this.data;
+      const { innerValue } = this.data;
       const { value: itemValue } = e.detail;
 
       this.getScrollIntoView('none');
-      value[0] = itemValue;
+      innerValue[0] = itemValue;
 
-      this._trigger('change', { value, level: 0 });
+      this._trigger('change', { value: innerValue, level: 0 });
     },
 
     handleTreeClick(e) {
       const { level, value: itemValue } = e.currentTarget.dataset;
-      const { value } = this.data;
+      const { innerValue } = this.data;
 
-      value[level] = itemValue;
+      innerValue[level] = itemValue;
       this.getScrollIntoView('none');
-      this._trigger('change', { value, level: 1 });
+      this._trigger('change', { value: innerValue, level: 1 });
     },
 
     handleRadioChange(e) {
-      const { value } = this.data;
+      const { innerValue } = this.data;
       const { value: itemValue } = e.detail;
       const { level } = e.target.dataset;
 
-      value[level] = itemValue;
+      innerValue[level] = itemValue;
 
       this.getScrollIntoView('none');
-      this._trigger('change', { value, level });
+      this._trigger('change', { value: innerValue, level });
     },
   };
 }

src/tree-select/tree-select.wxml

@@ -11,7 +11,7 @@
   >
     <t-side-bar
       wx:if="{{level == 0}}"
-      value="{{value[level]}}"
+      value="{{innerValue[level]}}"
       bind:change="onRootChange"
       t-class="{{classPrefix}}-column {{prefix}}-class-left-column"
     >
@@ -32,7 +32,7 @@
         bind:tap="handleTreeClick"
         data-level="{{level}}"
         data-value="{{item.value}}"
-        class="{{_.cls(classPrefix + '__item', [['active', item.value === value[level]]])}} {{prefix}}-class-middle-item scroll-into-view "
+        class="{{_.cls(classPrefix + '__item', [['active', item.value === innerValue[level]]])}} {{prefix}}-class-middle-item scroll-into-view"
       >
         <view id="scroll-to-{{item.value}}"> {{item.label}} </view>
       </view>
@@ -41,7 +41,7 @@
       wx:elif="{{!multiple}}"
       class="{{classPrefix}}__radio {{prefix}}-class-right-column"
       data-level="{{level}}"
-      value="{{value[level]}}"
+      value="{{innerValue[level]}}"
       bind:change="handleRadioChange"
     >
       <t-radio
@@ -62,7 +62,7 @@
     <t-checkbox-group
       wx:else
       class="{{classPrefix}}__checkbox {{prefix}}-class-right-column"
-      value="{{value[level]}}"
+      value="{{innerValue[level]}}"
       bind:change="handleRadioChange"
       data-level="{{level}}"
     >