Skip to content

Commit 871e751

Browse files
anlyyaoanlyyao
authored
feat(Indexes): support current prop (#3761)
* feat(Indexes): support current prop * feat: update demo * test: update snapshots * fix: fix cr
1 parent 84374a7 commit 871e751

File tree

9 files changed

+95
-40
lines changed

9 files changed

+95
-40
lines changed

‎src/indexes/README.en-US.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ name | type | default | description | required
88
-- | -- | -- | -- | --
99
style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
11-
index-list | Array | - | `0.32.0`。Typescript：`string [] \| number[]` | N
11+
current | String / Number | - | `1.9.7` | N
12+
default-current | String / Number | undefined | `1.9.7`。uncontrolled property | N
13+
index-list | Array | - | `0.32.0`。Typescript：`Array<string \| number>` | N
1214
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
1315
sticky | Boolean | true | Typescript：`Boolean` | N
1416
sticky-offset | Number | 0 | `1.0.0` | N

‎src/indexes/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ isComponent: true
5757
-- | -- | -- | -- | --
5858
style | Object | - | 样式 | N
5959
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
60-
index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
60+
current | String / Number | - | `1.9.7`。索引列表的激活项，默认首项 | N
61+
default-current | String / Number | undefined | `1.9.7`。索引列表的激活项，默认首项。非受控属性 | N
62+
index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`Array<string \| number>` | N
6163
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
6264
sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
6365
sticky-offset | Number | 0 | `1.0.0`。锚点吸顶时与顶部的距离 | N

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ exports[`Indexes Indexes base demo works fine 1`] = `
1111
/>
1212
</wx-view>
1313
<t-indexes
14+
current="B"
1415
indexList="{{Array []}}"
1516
stickyOffset="{{0}}"
17+
bind:change="onChange"
1618
bind:select="onSelect"
1719
>
1820
<t-indexes-anchor

‎src/indexes/_example/base/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
Page({
22
data: {
3+
defaultCurrent: 'B',
34
indexList: [],
45
list: [
56
{
@@ -101,10 +102,16 @@ Page({
101102
});
102103
},
103104

105+
onChange(e) {
106+
const { index } = e.detail;
107+
108+
console.log('change:', index);
109+
},
110+
104111
onSelect(e) {
105112
const { index } = e.detail;
106113

107-
console.log(index);
114+
console.log('select:', index);
108115
},
109116

110117
getCustomNavbarHeight() {

‎src/indexes/_example/base/index.wxml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<view class="custom-navbar">
22
<t-navbar title="TDesign" leftArrow />
33
</view>
4-
<t-indexes bind:select="onSelect" index-list="{{indexList}}" sticky-offset="{{stickyOffset}}">
4+
<t-indexes
5+
current="{{defaultCurrent}}"
6+
index-list="{{indexList}}"
7+
sticky-offset="{{stickyOffset}}"
8+
bind:select="onSelect"
9+
bind:change="onChange"
10+
>
511
<block wx:for="{{list}}" wx:key="index">
612
<t-indexes-anchor index="{{item.index}}" />
713
<t-cell-group>

‎src/indexes/indexes.ts‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@ export default class Indexes extends SuperComponent {
1313

1414
properties = props;
1515

16+
controlledProps = [
17+
{
18+
key: 'current',
19+
event: 'change',
20+
},
21+
];
22+
1623
data = {
1724
prefix,
1825
classPrefix: name,
@@ -37,8 +44,6 @@ export default class Indexes extends SuperComponent {
3744

3845
sidebar = null;
3946

40-
currentTouchAnchor = null;
41-
4247
observers = {
4348
indexList(v) {
4449
this.setIndexList(v);
@@ -47,6 +52,12 @@ export default class Indexes extends SuperComponent {
4752
height(v) {
4853
this.setHeight(v);
4954
},
55+
56+
current(current: string | number) {
57+
if (current && this.data.activeAnchor && current !== this.data.activeAnchor) {
58+
this.setAnchorByCurrent(current, 'update');
59+
}
60+
},
5061
};
5162

5263
lifetimes = {
@@ -100,7 +111,9 @@ export default class Indexes extends SuperComponent {
100111
const next = this.groupTop[index + 1];
101112
item.totalHeight = (next?.top || Infinity) - item.top;
102113
});
103-
this.setAnchorOnScroll(0);
114+
115+
const current = this.data.current || this.data._indexList[0];
116+
this.setAnchorByCurrent(current, 'init');
104117
});
105118
this.getSidebarRect();
106119
},
@@ -147,31 +160,36 @@ export default class Indexes extends SuperComponent {
147160
}
148161
},
149162

150-
setAnchorByIndex(index) {
151-
const { _indexList, stickyOffset } = this.data;
152-
const activeAnchor = _indexList[index];
163+
setAnchorByCurrent(current: string | number, source: 'init' | 'click' | 'touch' | 'update') {
164+
const { stickyOffset } = this.data;
153165

154-
if (this.data.activeAnchor !== null && this.data.activeAnchor === activeAnchor) return;
166+
if (this.data.activeAnchor !== null && this.data.activeAnchor === current) return;
155167

156-
const target = this.groupTop.find((item) => item.anchor === activeAnchor);
168+
const target = this.groupTop.find((item) => item.anchor === current);
157169

158170
if (target) {
159-
this.currentTouchAnchor = activeAnchor;
160171
const scrollTop = target.top - stickyOffset;
161-
wx.pageScrollTo({
162-
scrollTop,
163-
duration: 0,
164-
});
165-
this.toggleTips(true);
166-
this.triggerEvent('select', { index: activeAnchor });
167-
this.setData({ activeAnchor });
172+
173+
if (scrollTop === 0 && source === 'init') {
174+
this.setAnchorOnScroll(scrollTop);
175+
} else {
176+
wx.pageScrollTo({
177+
scrollTop,
178+
duration: 0,
179+
});
180+
}
181+
182+
if (['click', 'touch'].includes(source)) {
183+
this.toggleTips(true);
184+
this.triggerEvent('select', { index: current });
185+
}
168186
}
169187
},
170188

171189
onClick(e) {
172-
const { index } = e.currentTarget.dataset;
190+
const { current } = e.currentTarget.dataset;
173191

174-
this.setAnchorByIndex(index);
192+
this.setAnchorByCurrent(current, 'click');
175193
},
176194

177195
onTouchMove(e) {
@@ -203,15 +221,15 @@ export default class Indexes extends SuperComponent {
203221
};
204222
const index = getAnchorIndex(e.changedTouches[0].clientY);
205223

206-
this.setAnchorByIndex(index);
224+
this.setAnchorByCurrent(this.data._indexList[index], 'touch');
207225
}, 1000 / 30), // 30 frame
208226

209227
setAnchorOnScroll(scrollTop: number) {
210228
if (!this.groupTop) {
211229
return;
212230
}
213231

214-
const { sticky, stickyOffset, activeAnchor } = this.data;
232+
const { sticky, stickyOffset } = this.data;
215233

216234
scrollTop += stickyOffset;
217235

@@ -222,13 +240,10 @@ export default class Indexes extends SuperComponent {
222240
if (curIndex === -1) return;
223241

224242
const curGroup = this.groupTop[curIndex];
225-
if (this.currentTouchAnchor !== null) {
226-
this.triggerEvent('change', { index: curGroup.anchor });
227-
this.currentTouchAnchor = null;
228-
} else if (activeAnchor !== curGroup.anchor) {
229-
this.triggerEvent('change', { index: curGroup.anchor });
230-
this.setData({ activeAnchor: curGroup.anchor });
231-
}
243+
244+
this.setData({ activeAnchor: curGroup.anchor }, () => {
245+
this._trigger('change', { index: curGroup.anchor, current: curGroup.anchor });
246+
});
232247

233248
if (sticky) {
234249
const offset = curGroup.top - scrollTop;

‎src/indexes/indexes.wxml‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,16 @@
1010
catch:touchend="onTouchEnd"
1111
>
1212
<view
13-
class="{{_.cls(classPrefix + '__sidebar-item', [['active', activeAnchor === item]])}} {{prefix}}-class-sidebar-item"
13+
class="{{_.cls(classPrefix + '__sidebar-item', [['active', current === item]])}} {{prefix}}-class-sidebar-item"
1414
wx:for="{{ _indexList }}"
1515
wx:key="*this"
16+
data-current="{{item}}"
1617
bind:tap="onClick"
17-
data-index="{{index}}"
1818
>
19-
<view aria-role="button" aria-label="{{ activeAnchor === item ? '已选中' + item : ''}}">
19+
<view aria-role="button" aria-label="{{ current === item ? '已选中' + item : ''}}">
2020
{{ _this.getFirstCharacter(item) }}
2121
</view>
22-
<view class="{{classPrefix}}__sidebar-tips" wx:if="{{ showTips && activeAnchor === item }}">
23-
{{ activeAnchor }}
24-
</view>
22+
<view class="{{classPrefix}}__sidebar-tips" wx:if="{{ showTips && current === item }}"> {{ item }} </view>
2523
</view>
2624
</view>
2725
<slot />

‎src/indexes/props.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,18 @@
66

77
import { TdIndexesProps } from './type';
88
const props: TdIndexesProps = {
9+
/** 索引列表的激活项，默认首项 */
10+
current: {
11+
type: null,
12+
value: null,
13+
},
14+
/** 索引列表的激活项，默认首项，非受控属性 */
15+
defaultCurrent: {
16+
type: null,
17+
},
918
/** 索引字符列表。不传默认 `A-Z` */
1019
indexList: {
11-
type: null,
20+
type: Array,
1221
},
1322
/** 索引是否吸顶，默认为true */
1423
sticky: {

‎src/indexes/type.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,26 @@
55
* */
66

77
export interface TdIndexesProps {
8+
/**
9+
* 索引列表的激活项，默认首项
10+
*/
11+
current?: {
12+
type: null;
13+
value?: string | number;
14+
};
15+
/**
16+
* 索引列表的激活项，默认首项，非受控属性
17+
*/
18+
defaultCurrent?: {
19+
type: null;
20+
value?: string | number;
21+
};
822
/**
923
* 索引字符列表。不传默认 `A-Z`
1024
*/
1125
indexList?: {
12-
type: null;
13-
value?: string[] | number[];
26+
type: ArrayConstructor;
27+
value?: Array<string | number>;
1428
};
1529
/**
1630
* 索引是否吸顶，默认为true

0 commit comments

Comments
 (0)