feat(Indexes): support current prop

src/indexes/README.en-US.md

@@ -8,7 +8,9 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
-index-list | Array | - | `0.32.0`。Typescript：`string [] \| number[]` | N
+current | String / Number | - | `1.9.7` | N
+default-current | String / Number | undefined | `1.9.7`。uncontrolled property | N
+index-list | Array | - | `0.32.0`。Typescript：`Array<string \| number>` | N
 list | Array | [] | `deprecated`。Typescript：`ListItem[] ` `interface ListItem { title: string;  index: string;  children: { title: string; [key: string]: any} [] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N
 sticky | Boolean | true | Typescript：`Boolean` | N
 sticky-offset | Number | 0 | `1.0.0` | N

src/indexes/README.md

@@ -51,7 +51,9 @@ isComponent: true
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
-index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
+current | String / Number | - | `1.9.7`。索引列表的激活项，默认首项 | N
+default-current | String / Number | undefined | `1.9.7`。索引列表的激活项，默认首项。非受控属性 | N
+index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`Array<string \| number>` | N
 list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。TS 类型：`ListItem[] ` `interface ListItem { title: string;  index: string;  children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N
 sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
 sticky-offset | Number | 0 | `1.0.0`。锚点吸顶时与顶部的距离	 | N

src/indexes/__test__/__snapshots__/demo.test.js.snap

@@ -11,8 +11,10 @@ exports[`Indexes Indexes base demo works fine 1`] = `
     />
   </wx-view>
   <t-indexes
+    current="B"
     indexList="{{Array []}}"
     stickyOffset="{{0}}"
+    bind:change="onChange"
     bind:select="onSelect"
   >
     <t-indexes-anchor

src/indexes/_example/base/index.js

@@ -1,5 +1,6 @@
 Page({
   data: {
+    defaultCurrent: 'B',
     indexList: [],
     list: [
       {
@@ -101,10 +102,16 @@ Page({
     });
   },
 
+  onChange(e) {
+    const { index } = e.detail;
+
+    console.log('change:', index);
+  },
+
   onSelect(e) {
     const { index } = e.detail;
 
-    console.log(index);
+    console.log('select:', index);
   },
 
   getCustomNavbarHeight() {

src/indexes/_example/base/index.wxml

@@ -1,7 +1,13 @@
 <view class="custom-navbar">
   <t-navbar title="TDesign" leftArrow />
 </view>
-<t-indexes bind:select="onSelect" index-list="{{indexList}}" sticky-offset="{{stickyOffset}}">
+<t-indexes
+  current="{{defaultCurrent}}"
+  index-list="{{indexList}}"
+  sticky-offset="{{stickyOffset}}"
+  bind:select="onSelect"
+  bind:change="onChange"
+>
   <block wx:for="{{list}}" wx:key="index">
     <t-indexes-anchor index="{{item.index}}" />
     <t-cell-group>

src/indexes/indexes.ts

@@ -13,6 +13,13 @@ export default class Indexes extends SuperComponent {
 
   properties = props;
 
+  controlledProps = [
+    {
+      key: 'current',
+      event: 'change',
+    },
+  ];
+
   data = {
     prefix,
     classPrefix: name,
@@ -37,8 +44,6 @@ export default class Indexes extends SuperComponent {
 
   sidebar = null;
 
-  currentTouchAnchor = null;
-
   observers = {
     indexList(v) {
       this.setIndexList(v);
@@ -47,6 +52,12 @@ export default class Indexes extends SuperComponent {
     height(v) {
       this.setHeight(v);
     },
+
+    current(current: string | number) {
+      if (current && this.data.activeAnchor && current !== this.data.activeAnchor) {
+        this.setAnchorByCurrent(current, 'update');
+      }
+    },
   };
 
   lifetimes = {
@@ -100,7 +111,9 @@ export default class Indexes extends SuperComponent {
           const next = this.groupTop[index + 1];
           item.totalHeight = (next?.top || Infinity) - item.top;
         });
-        this.setAnchorOnScroll(0);
+
+        const current = this.data.current || this.data._indexList[0];
+        this.setAnchorByCurrent(current, 'init');
       });
       this.getSidebarRect();
     },
@@ -147,31 +160,36 @@ export default class Indexes extends SuperComponent {
       }
     },
 
-    setAnchorByIndex(index) {
-      const { _indexList, stickyOffset } = this.data;
-      const activeAnchor = _indexList[index];
+    setAnchorByCurrent(current: string | number, source: 'init' | 'click' | 'touch' | 'update') {
+      const { stickyOffset } = this.data;
 
-      if (this.data.activeAnchor !== null && this.data.activeAnchor === activeAnchor) return;
+      if (this.data.activeAnchor !== null && this.data.activeAnchor === current) return;
 
-      const target = this.groupTop.find((item) => item.anchor === activeAnchor);
+      const target = this.groupTop.find((item) => item.anchor === current);
 
       if (target) {
-        this.currentTouchAnchor = activeAnchor;
         const scrollTop = target.top - stickyOffset;
-        wx.pageScrollTo({
-          scrollTop,
-          duration: 0,
-        });
-        this.toggleTips(true);
-        this.triggerEvent('select', { index: activeAnchor });
-        this.setData({ activeAnchor });
+
+        if (scrollTop === 0 && source === 'init') {
+          this.setAnchorOnScroll(scrollTop);
+        } else {
+          wx.pageScrollTo({
+            scrollTop,
+            duration: 0,
+          });
+        }
+
+        if (['click', 'touch'].includes(source)) {
+          this.toggleTips(true);
+          this.triggerEvent('select', { index: current });
+        }
       }
     },
 
     onClick(e) {
-      const { index } = e.currentTarget.dataset;
+      const { current } = e.currentTarget.dataset;
 
-      this.setAnchorByIndex(index);
+      this.setAnchorByCurrent(current, 'click');
     },
 
     onTouchMove(e) {
@@ -203,15 +221,15 @@ export default class Indexes extends SuperComponent {
       };
       const index = getAnchorIndex(e.changedTouches[0].clientY);
 
-      this.setAnchorByIndex(index);
+      this.setAnchorByCurrent(this.data._indexList[index], 'touch');
     }, 1000 / 30), // 30 frame
 
     setAnchorOnScroll(scrollTop: number) {
       if (!this.groupTop) {
         return;
       }
 
-      const { sticky, stickyOffset, activeAnchor } = this.data;
+      const { sticky, stickyOffset } = this.data;
 
       scrollTop += stickyOffset;
 
@@ -222,13 +240,10 @@ export default class Indexes extends SuperComponent {
       if (curIndex === -1) return;
 
       const curGroup = this.groupTop[curIndex];
-      if (this.currentTouchAnchor !== null) {
-        this.triggerEvent('change', { index: curGroup.anchor });
-        this.currentTouchAnchor = null;
-      } else if (activeAnchor !== curGroup.anchor) {
-        this.triggerEvent('change', { index: curGroup.anchor });
-        this.setData({ activeAnchor: curGroup.anchor });
-      }
+
+      this.setData({ activeAnchor: curGroup.anchor }, () => {
+        this._trigger('change', { index: curGroup.anchor, current: curGroup.anchor });
+      });
 
       if (sticky) {
         const offset = curGroup.top - scrollTop;

src/indexes/indexes.wxml

@@ -10,18 +10,16 @@
     catch:touchend="onTouchEnd"
   >
     <view
-      class="{{_.cls(classPrefix + '__sidebar-item', [['active', activeAnchor === item]])}} {{prefix}}-class-sidebar-item"
+      class="{{_.cls(classPrefix + '__sidebar-item', [['active', current === item]])}} {{prefix}}-class-sidebar-item"
       wx:for="{{ _indexList }}"
       wx:key="*this"
+      data-current="{{item}}"
       bind:tap="onClick"
-      data-index="{{index}}"
     >
-      <view aria-role="button" aria-label="{{ activeAnchor === item ? '已选中' + item : ''}}">
+      <view aria-role="button" aria-label="{{ current === item ? '已选中' + item : ''}}">
         {{ _this.getFirstCharacter(item) }}
       </view>
-      <view class="{{classPrefix}}__sidebar-tips" wx:if="{{ showTips && activeAnchor === item }}">
-        {{ activeAnchor }}
-      </view>
+      <view class="{{classPrefix}}__sidebar-tips" wx:if="{{ showTips && current === item }}"> {{ item }} </view>
     </view>
   </view>
   <slot />

src/indexes/props.ts

@@ -6,9 +6,18 @@
 
 import { TdIndexesProps } from './type';
 const props: TdIndexesProps = {
+  /** 索引列表的激活项，默认首项 */
+  current: {
+    type: null,
+    value: null,
+  },
+  /** 索引列表的激活项，默认首项，非受控属性 */
+  defaultCurrent: {
+    type: null,
+  },
   /** 索引字符列表。不传默认 `A-Z` */
   indexList: {
-    type: null,
+    type: Array,
   },
   /** 索引是否吸顶，默认为true */
   sticky: {

src/indexes/type.ts

@@ -5,12 +5,26 @@
  * */
 
 export interface TdIndexesProps {
+  /**
+   * 索引列表的激活项，默认首项
+   */
+  current?: {
+    type: null;
+    value?: string | number;
+  };
+  /**
+   * 索引列表的激活项，默认首项，非受控属性
+   */
+  defaultCurrent?: {
+    type: null;
+    value?: string | number;
+  };
   /**
    * 索引字符列表。不传默认 `A-Z`
    */
   indexList?: {
-    type: null;
-    value?: string[] | number[];
+    type: ArrayConstructor;
+    value?: Array<string | number>;
   };
   /**
    * 索引是否吸顶，默认为true