@arco-design/mobile-react 2.21.2 → 2.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/ellipsis/components/js-ellipsis.js +7 -1
  5. package/cjs/image-picker/style/css/index.d.ts +1 -0
  6. package/cjs/image-picker/style/css/index.js +2 -0
  7. package/cjs/image-picker/style/index.d.ts +1 -0
  8. package/cjs/image-picker/style/index.js +2 -0
  9. package/cjs/tabs/index.d.ts +3 -463
  10. package/cjs/tabs/index.js +10 -0
  11. package/cjs/tabs/tab-cell-underline.d.ts +4 -0
  12. package/cjs/tabs/tab-cell-underline.js +234 -0
  13. package/cjs/tabs/tab-cell.d.ts +1 -85
  14. package/cjs/tabs/tab-cell.js +53 -198
  15. package/cjs/tabs/tab-pane.d.ts +2 -38
  16. package/cjs/tabs/type.d.ts +590 -0
  17. package/cjs/tabs/type.js +3 -0
  18. package/dist/index.js +272 -199
  19. package/dist/index.min.js +3 -3
  20. package/esm/ellipsis/components/js-ellipsis.js +7 -1
  21. package/esm/image-picker/style/css/index.d.ts +1 -0
  22. package/esm/image-picker/style/css/index.js +1 -0
  23. package/esm/image-picker/style/index.d.ts +1 -0
  24. package/esm/image-picker/style/index.js +1 -0
  25. package/esm/tabs/index.d.ts +3 -463
  26. package/esm/tabs/index.js +2 -1
  27. package/esm/tabs/tab-cell-underline.d.ts +4 -0
  28. package/esm/tabs/tab-cell-underline.js +218 -0
  29. package/esm/tabs/tab-cell.d.ts +1 -85
  30. package/esm/tabs/tab-cell.js +55 -201
  31. package/esm/tabs/tab-pane.d.ts +2 -38
  32. package/esm/tabs/type.d.ts +590 -0
  33. package/esm/tabs/type.js +1 -0
  34. package/package.json +3 -3
  35. package/umd/ellipsis/components/js-ellipsis.js +7 -1
  36. package/umd/image-picker/style/css/index.d.ts +1 -0
  37. package/umd/image-picker/style/css/index.js +4 -4
  38. package/umd/image-picker/style/index.d.ts +1 -0
  39. package/umd/image-picker/style/index.js +4 -4
  40. package/umd/tabs/index.d.ts +3 -463
  41. package/umd/tabs/index.js +11 -4
  42. package/umd/tabs/tab-cell-underline.d.ts +4 -0
  43. package/umd/tabs/tab-cell-underline.js +242 -0
  44. package/umd/tabs/tab-cell.d.ts +1 -85
  45. package/umd/tabs/tab-cell.js +56 -202
  46. package/umd/tabs/tab-pane.d.ts +2 -38
  47. package/umd/tabs/type.d.ts +590 -0
  48. package/umd/tabs/type.js +17 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.21.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.2...@arco-design/mobile-react@2.21.3) (2022-09-30)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * `Ellipsis` special case for truncateHTML ([fa9db03](https://github.com/arco-design/arco-design-mobile/commit/fa9db03baecbb378e38d2217eddb85dec59d27d4))
12
+ * `ImagePicker` import grid style ([e257ce0](https://github.com/arco-design/arco-design-mobile/commit/e257ce00dc3ecd4c61934149751fb817d3242159))
13
+ * `Tabs` tab bar underline optimize ([20c9621](https://github.com/arco-design/arco-design-mobile/commit/20c962113e8a0dc43995813dda328239a1807a50))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [2.21.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.1...@arco-design/mobile-react@2.21.2) (2022-09-07)
7
20
 
8
21
 
package/README.en-US.md CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
59
59
  React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
60
60
 
61
61
  ```
62
- <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
64
64
  ```
65
65
 
66
66
  ## Full import
package/README.md CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="
59
59
  React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
60
60
 
61
61
  ```
62
- <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
64
64
  ```
65
65
 
66
66
  ## 引入全部
@@ -127,7 +127,13 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
127
127
  _height = _container$getBoundin3.height;
128
128
 
129
129
  if (_height > max) {
130
- break;
130
+ if (nodes[i].childNodes && nodes[i].childNodes.length) {
131
+ break;
132
+ } else {
133
+ textContainer.removeChild(nodes[i]);
134
+ handleOnReflow(true, textContainer.innerHTML);
135
+ return;
136
+ }
131
137
  }
132
138
 
133
139
  i++;
@@ -1,2 +1,3 @@
1
1
  import '../../../../style/css/public.css';
2
+ import '../../../grid/style/css';
2
3
  import './index.css';
@@ -2,4 +2,6 @@
2
2
 
3
3
  require("../../../../style/css/public.css");
4
4
 
5
+ require("../../../grid/style/css");
6
+
5
7
  require("./index.css");
@@ -1,2 +1,3 @@
1
1
  import '../../../style/public.less';
2
+ import '../../grid/style';
2
3
  import './index.less';
@@ -2,4 +2,6 @@
2
2
 
3
3
  require("../../../style/public.less");
4
4
 
5
+ require("../../grid/style");
6
+
5
7
  require("./index.less");
@@ -1,466 +1,6 @@
1
- import React, { ReactNode } from 'react';
2
- import { TabCellRef, TabCellProps } from './tab-cell';
3
- import { TabPaneRef } from './tab-pane';
4
- export declare type TabData = string | {
5
- title: ReactNode;
6
- [x: string]: any;
7
- };
8
- export interface UnderlineStyle {
9
- /**
10
- * 下划线外层样式,控制线的相对位置
11
- * @en Underline outer style, controls the relative position of the line
12
- */
13
- outer?: React.CSSProperties;
14
- /**
15
- * 下划线内层样式,控制线本身的宽高及缩放效果
16
- * @en Underline inner layer style, control the width and height of the line itself and the zoom effect
17
- */
18
- inner?: React.CSSProperties;
19
- }
20
- export interface TabsProps {
21
- /**
22
- * 自定义类名
23
- * @en Custom classname
24
- */
25
- className?: string;
26
- /**
27
- * 自定义样式
28
- * @en Custom stylesheet
29
- */
30
- style?: React.CSSProperties;
31
- /**
32
- * TabBar内容数组,除必填项外也可附加其他数据
33
- * @en Array of TabBar content, additional data can be appended in addition to the required fields
34
- */
35
- tabs: TabData[];
36
- /**
37
- * TabPane内容
38
- * @en TabPane content
39
- */
40
- children?: ReactNode;
41
- /**
42
- * 当前活动tab index,传入则为受控
43
- * @en Currently active tab index, controlled if inputting value
44
- */
45
- activeTab?: number;
46
- /**
47
- * 初始tab index值
48
- * @en initial tab index value
49
- * @default 0
50
- */
51
- defaultActiveTab?: number;
52
- /**
53
- * 是否禁用切换,包括点击TabBar切换和滑动切换
54
- * @en Whether to disable switching, including clicking TabBar switching and sliding switching
55
- */
56
- disabled?: boolean;
57
- /**
58
- * TabBar位置
59
- * @en Tabbar position
60
- * @default "top"
61
- */
62
- tabBarPosition?: 'top' | 'bottom' | 'left' | 'right';
63
- /**
64
- * TabBar排列方式,tabBar在top或bottom位置时有效,start为靠左,center为居中,end为靠右
65
- * @en Tabbar arrangement, tabBar is valid when it is in the top or bottom position, start is left, center is centered, and end is right
66
- * @default "center"
67
- */
68
- tabBarArrange?: 'start' | 'center' | 'end';
69
- /**
70
- * 是否TabBar超出屏幕时靠左滚动排列
71
- * @en Whether to scroll to the left when the TabBar exceeds the screen
72
- * @default true
73
- */
74
- tabBarScroll?: boolean;
75
- /**
76
- * TabBar是否顶部固定
77
- * @en Whether the TabBar is fixed on the top
78
- */
79
- tabBarFixed?: boolean;
80
- /**
81
- * tabBar额外渲染内容
82
- * @en TabBar extra render content
83
- */
84
- tabBarExtra?: ReactNode;
85
- /**
86
- * tabBar滚动时变化的bezier曲线值
87
- * @en The bezier curve value that changes when the tabBar is scrolled
88
- * @default [0.34, 0.69, 0.1, 1]
89
- */
90
- tabBarScrollBezier?: [number, number, number, number];
91
- /**
92
- * tabBar滚动过渡时长,单位ms
93
- * @en TabBar scrolling transition duration, in ms
94
- * @default 300
95
- */
96
- tabBarScrollDuration?: number;
97
- /**
98
- * tabBar滚动时机,`jump`表示在跳转tab时,`after-jump`表示跳转动画执行后,`none`表示切换tab后不自动滚动
99
- * @en TabBar scrolling timing, `jump` means when the tab is jumped, `after-jump` means after the jump animation is executed, `none` means do not scroll automatically after switching tabs
100
- * @default "jump"
101
- */
102
- tabBarScrollChance?: 'jump' | 'after-jump' | 'none';
103
- /**
104
- * tabBar是否有分割线
105
- * @en Whether the tabBar has a dividing line
106
- */
107
- tabBarHasDivider?: boolean;
108
- /**
109
- * 在竖向滚动tabPane时,自动重设tabBar滚动位置的时机
110
- * @en When scrolling the tabPane vertically, the timing of automatically resetting the scroll position of the tabBar
111
- * @default "touchmove"
112
- */
113
- tabBarResetWhenScroll?: 'none' | 'touchmove' | 'touchend';
114
- /**
115
- * 页签的样式,line为顺次排布,line-divide为等分间距排布,card为分段器式排布
116
- * @en The style of the tabs, line is arranged in sequence, line-divide is arranged at equal intervals, and card is arranged by segmenter
117
- * @default line
118
- */
119
- type?: 'line' | 'line-divide' | 'card' | 'tag' | 'tag-divide';
120
- /**
121
- * 是否允许滑动
122
- * @en Whether to allow sliding
123
- * @default true
124
- */
125
- swipeable?: boolean;
126
- /**
127
- * TabBar下划线滑动动画切换时间,单位ms
128
- * @en The time of the TabBar underline sliding animation switching, in ms
129
- * @default 240
130
- */
131
- duration?: number;
132
- /**
133
- * 是否为全屏(100%)布局
134
- * @en Whether the layout is full screen (100%)
135
- * @default false
136
- */
137
- fullScreen?: boolean;
138
- /**
139
- * 容器高度自适应,仅在mode=swipe且是垂直布局时生效
140
- * @en Whether the container height is adaptive, it only takes effect when mode=swipe and vertical layout
141
- * @default false
142
- */
143
- autoHeight?: boolean;
144
- /**
145
- * swipe模式下表示手指抬起后到动画结束时间,scroll模式下表示点击tab后滚动过渡时间,单位ms
146
- * @en In swipe mode, it means the time from when the finger is lifted to the end of the animation. In scroll mode, it means the scroll transition time after clicking the tab, in ms
147
- * @default 300
148
- */
149
- transitionDuration?: number;
150
- /**
151
- * 是否使用毛毛虫效果
152
- * @en Whether to use the caterpillar effect
153
- * @default false
154
- */
155
- useCaterpillar?: boolean;
156
- /**
157
- * 使用毛毛虫效果时,执行动画更改的属性,`scale`表示更改 transform: scale 值,`size`表示更改宽高值。一般在避免border-radius被scale拉伸的情况会使用`size`,但需注意其性能不如`scale`
158
- * @en When using the caterpillar effect, the properties that perform animation changes, `scale` means changing the transform: scale value, `size` means changing the width and height values. Generally, `size` is used to avoid border-radius being stretched by scale, but it should be noted that its performance is not as good as `scale`
159
- * @default "scale"
160
- */
161
- caterpillarProperty?: 'scale' | 'size';
162
- /**
163
- * 毛毛虫效果开启时,TabBar下划线最长延展倍数(相对于自身长度)
164
- * @en When the caterpillar effect is enabled, the longest extension multiple of the TabBar underline (relative to its own length)
165
- * @default 2
166
- */
167
- caterpillarMaxScale?: number;
168
- /**
169
- * 滑动切换距离阈值(宽度比例),范围为[0, 1],如果该属性和`distanceToChangeTab`属性均设置,则实际计算结果更大的生效
170
- * @en Sliding switching distance threshold (width ratio), the range is [0, 1]. If this property and the `distanceToChangeTab` property are both set, the larger actual calculation result will take effect
171
- * @default 0.3
172
- */
173
- percentToChangeTab?: number;
174
- /**
175
- * 滑动切换距离阈值(固定px宽度),如果该属性和`percentToChangeTab`属性均设置,则实际计算结果更大的生效
176
- * @en The sliding switching distance threshold (fixed px width), if both this property and the `percentToChangeTab` property are set, the actual calculation result will take effect with a larger one
177
- * @default 10
178
- */
179
- distanceToChangeTab?: number;
180
- /**
181
- * 滑动切换速度阈值(手指从按下到抬起之间的滑动速度,单位为px/s),与滑动切换距离阈值同时设置时,满足其中一个即生效
182
- * @en The sliding switching speed threshold (the sliding speed of the finger from pressing to lifting, in px/s), when it is set at the same time as the sliding switching distance threshold, it will take effect if one of them is satisfied.
183
- * @default 200
184
- */
185
- speedToChangeTab?: number;
186
- /**
187
- * 点击tab切换时禁用动画
188
- * @en Disable animation when tab switch is clicked
189
- * @default true
190
- */
191
- disableClickTransition?: boolean;
192
- /**
193
- * 只加载当前页相邻的n个内容,为0时会隐藏/销毁所有相邻内容,不传则加载所有内容,在mode=swipe时生效
194
- * @en Only load the n content adjacent to the current page. When it is 0, all adjacent content will be hidden/destroyed. If not input, all content will be loaded. It will take effect when mode=swipe
195
- */
196
- lazyloadCount?: number;
197
- /**
198
- * 当开启懒加载时,针对不在懒加载范围内的内容设置样式,传入null则销毁内容
199
- * @en When lazy loading is enabled, set the style for the content that is not within the scope of lazy loading, and pass in null to destroy the content
200
- * @default null
201
- */
202
- hideContentStyle?: React.CSSProperties | null;
203
- /**
204
- * 自行渲染不在懒加载范围内的pane,其中参数pane代表第index个tab原本要渲染的内容
205
- * @en Render the pane that is not within the scope of lazy loading by itself, where the parameter pane represents the content to be rendered by the index-th tab
206
- */
207
- renderHideContent?: (index: number, pane: ReactNode) => ReactNode;
208
- /**
209
- * 在组件加载完成前是否隐藏TabBar,防止溢出时多余的滚动效果
210
- * @en Whether to hide the TabBar before the component is loaded to prevent redundant scrolling effects when overflowing
211
- */
212
- hideTabBarBeforeMounted?: boolean;
213
- /**
214
- * TabBar个数大于等于多少时认为会溢出,用于dom加载完成之前的ssr首屏渲染优化
215
- * @en When the number of TabBars is greater than or equal to the number of TabBars, it is considered to overflow, which is used for ssr first screen rendering optimization before dom loading is completed
216
- * @default 5
217
- */
218
- overflowThreshold?: number;
219
- /**
220
- * 是否展示下划线
221
- * @en Whether to display underline
222
- * @default true
223
- */
224
- showUnderline?: boolean;
225
- /**
226
- * 触发onTouchStopped的最小阈值
227
- * @en Minimum threshold to trigger onTouchStopped
228
- * @default 0
229
- */
230
- stopTouchThreshold?: number;
231
- /**
232
- * 距离屏幕边缘多远开始向右滑动时禁用tabs滑动事件
233
- * @en The distance from the edge of the screen to disable the tabs swipe event when you start swiping right
234
- * @default 0
235
- */
236
- touchSideDisableThreshold?: number;
237
- /**
238
- * swipe 模式下,触摸事件是否需要 stopPropagation
239
- * @en In swipe mode, whether the touch event need stopPropagation
240
- * @default true
241
- */
242
- stopPropagation?: boolean;
243
- /**
244
- * swipe 模式下,组件内部的滚动容器,用于豁免滑动事件响应
245
- * @en In swipe mode, the scroll container inside the component is used to exempt the swipe event response
246
- */
247
- getInnerScrollContainer?: () => (HTMLElement | null)[] | HTMLElement | null;
248
- /**
249
- * tabs切换模式,swipe为滑动模式,scroll为滚动监听模式
250
- * @en Tabs switching mode, swipe is sliding mode, scroll is scroll listening mode
251
- * @default "swipe"
252
- */
253
- mode?: 'swipe' | 'scroll';
254
- /**
255
- * 滚动模式下的滚动容器,用于监听滚动事件,mode=scroll 时有效
256
- * @en The scroll container in scroll mode, used to listen to scroll events, valid when mode=scroll
257
- */
258
- getScrollContainer?: () => HTMLElement | Window | null;
259
- /**
260
- * 滚动模式下的节流粒度,mode=scroll 时有效
261
- * @en Throttling granularity in scroll mode, valid when mode=scroll
262
- * @default 300
263
- */
264
- scrollThrottle?: number;
265
- /**
266
- * 滚动模式下判断tab切换的偏移量,正数为向下偏移,负数为向上偏移,mode=scroll 时有效
267
- * @en Determine the offset of tab switching in scroll mode, a positive number is a downward offset, a negative number is an upward offset, valid when mode=scroll
268
- * @default 0
269
- */
270
- scrollOffset?: number;
271
- /**
272
- * 滚动模式下,在组件初始加载时是否需要自动滚动到当前所选位置,mode=scroll 时有效
273
- * @en In scroll mode, whether to automatically scroll to the currently selected position when the component is initially loaded, valid when mode=scroll
274
- * @default 当初始index不为0时会自动滚动,为0时则不会自动滚动
275
- * @default_en When the initial index is not 0, it will scroll automatically, when it is 0, it will not scroll automatically
276
- */
277
- scrollWhenMounted?: boolean;
278
- /**
279
- * 当滚动到最底部时,如果最后一个pane尚未到达底部,是否强行选中,mode=scroll 时有效
280
- * @en When scrolling to the bottom, if the last pane has not reached the bottom, whether to force the selection, valid when mode=scroll
281
- * @default true
282
- */
283
- goLastWhenScrollBottom?: boolean;
284
- /**
285
- * 是否监听垂直方向的滚动,否则监听水平方向滚动
286
- * @en Whether to monitor vertical scrolling, otherwise monitor horizontal scrolling
287
- * @default true
288
- */
289
- scrollVertical?: boolean;
290
- /**
291
- * TabBar外层容器自定义类名
292
- * @en Custom classname of TabBar outer container
293
- */
294
- tabBarClass?: string;
295
- /**
296
- * TabPane外层容器自定义类名
297
- * @en Custom classname of TabPane outer container
298
- */
299
- tabPaneClass?: string;
300
- /**
301
- * TabBar外层容器自定义样式
302
- * @en Custom style of TabBar outer container
303
- */
304
- tabBarStyle?: React.CSSProperties;
305
- /**
306
- * TabPane外层容器自定义样式
307
- * @en Custom style of TabPane outer container
308
- */
309
- tabPaneStyle?: React.CSSProperties;
310
- /**
311
- * TabPane额外渲染元素,需绝对定位
312
- * @en Extra rendering elements of TabPane, which shoule be absolute positioning
313
- */
314
- tabPaneExtra?: ReactNode;
315
- /**
316
- * TabPane和TabBar开启translateZ
317
- * @en Whether TabPane and TabBar open translateZ
318
- * @default true
319
- */
320
- translateZ?: boolean;
321
- /**
322
- * 当滑到第一页或最后一页,还想再滑动时触发
323
- * @en Triggered when swiping to the first or last page and want to swipe again
324
- */
325
- onTouchStopped?: (direction: -1 | 1) => void;
326
- /**
327
- * tab变化回调
328
- * @en Callback when tab changes
329
- */
330
- onChange?: (tab: TabData, index: number, from?: string) => void;
331
- /**
332
- * tab变化且动画执行完毕后回调
333
- * @en Callback when the tab changes and the animation is completed
334
- */
335
- onAfterChange?: (tab: TabData, index: number, from?: string) => void;
336
- /**
337
- * TabBar点击的事件
338
- * @en Callback when TabBar is clicked
339
- */
340
- onTabClick?: (tab: TabData, index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
341
- /**
342
- * TabBar超出屏幕状态切换回调
343
- * @en Calllback when TabBar is out of screen
344
- */
345
- onTabBarOverflowChange?: (overflow: boolean) => void;
346
- /**
347
- * TabPane touchstart事件
348
- * @en Touchstart event of TabPane
349
- */
350
- onTouchStart?: (e: TouchEvent, index: number) => void | boolean;
351
- /**
352
- * TabPane touchmove事件
353
- * @en Touchmove event of TabPane
354
- */
355
- onTouchMove?: (e: TouchEvent, index: number) => void | boolean;
356
- /**
357
- * TabPane touchend / touchcancel事件
358
- * @en Touchend / touchcancel event of TabPane
359
- */
360
- onTouchEnd?: (e: TouchEvent, index: number) => void | boolean;
361
- /**
362
- * TabBar在溢出滚动时回调
363
- * @en Callback when TabBar is on overflow scrolling
364
- */
365
- onTabBarScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
366
- /**
367
- * tabs 左右滑动时回调,用于监听滑动距离以做滑动同步交互
368
- * @en Callback when tabs slides left and right, used to monitor the sliding distance for sliding synchronization interaction
369
- */
370
- onDistanceChange?: (distance: number, wrapWidth: number, activeIndex: number) => void;
371
- /**
372
- * mode=scroll 时,触发滚动容器滚动回调
373
- * @en When mode=scroll, trigger the scroll container scroll callback
374
- */
375
- onScroll?: () => void;
376
- /**
377
- * 自行渲染TabBar的下划线
378
- * @en Render the underline of the TabBar
379
- */
380
- renderUnderline?: (underlineStyle: UnderlineStyle, showLine: boolean, lineRef: React.MutableRefObject<HTMLElement | null>) => ReactNode;
381
- /**
382
- * 自行渲染TabBar,常用于与Sticky配合使用
383
- * @en Render the TabBar custom, often used in conjunction with Sticky
384
- */
385
- renderTabBar?: (TabBar: ReactNode, TabBarProps: TabCellProps) => ReactNode;
386
- /**
387
- * 自行渲染TabBar的每一个item
388
- * @en Render each item of the TabBar custom
389
- */
390
- renderTabBarItem?: (tab: TabData, index: number, extra: {
391
- active: boolean;
392
- }) => ReactNode;
393
- /**
394
- * 自行渲染TabBar内部内容,当需要给 .@{prefix}-tab-cell 外层再嵌套一层dom时使用
395
- * @en Render the inner content of the TabBar custom, used when need to nest another layer of DOM outside the .@{prefix}-tab-cell
396
- */
397
- renderTabBarInner?: (Inner: ReactNode) => ReactNode;
398
- /**
399
- * tabBar间隙,type=line时有效
400
- * @en TabBar gutter, valid when type=line
401
- */
402
- tabBarGutter?: number | string;
403
- /**
404
- * TabBar两侧留白宽度,type=line时有效
405
- * @en The width of the blank space on both sides of the TabBar, valid when type=line
406
- */
407
- tabBarPadding?: number | string | {
408
- left?: number | string;
409
- right?: number | string;
410
- };
411
- /**
412
- * TabBar下划线长度
413
- * @en TabBar underline length
414
- */
415
- underlineSize?: number | string;
416
- /**
417
- * TabBar下划线厚度
418
- * @en TabBar underline thickness
419
- */
420
- underlineThick?: number | string;
421
- /**
422
- * TabBar下划线内部样式,作用于 tab-cell-underline-inner
423
- * @en Tabbar underline inner style, applied to tab-cell-underline-inner
424
- */
425
- underlineInnerStyle?: React.CSSProperties;
426
- }
427
- export interface TabsRef {
428
- /**
429
- * 最外层元素 DOM
430
- * @en The outermost element DOM
431
- */
432
- dom: HTMLDivElement | null;
433
- /**
434
- * TabBar 内部子组件 Ref
435
- * @en Ref of TabBar inner component
436
- */
437
- bar: TabCellRef | null;
438
- /**
439
- * Tab Pane 内部子组件 Ref
440
- * @en Ref of TabPane inner component
441
- */
442
- pane: TabPaneRef | null;
443
- /**
444
- * 当前 TabBar 宽度是否已溢出
445
- * @en Whether the current TabBar width has overflowed
446
- */
447
- barOverflow: boolean;
448
- /**
449
- * 手动更新 Tabs 布局
450
- * @en Manually update the Tabs layout
451
- */
452
- updateLayout: () => void;
453
- /**
454
- * 非受控模式下手动切换 tab
455
- * @en Manually switch tabs in uncontrolled mode
456
- */
457
- changeIndex: (index: number, rightNow?: boolean) => void;
458
- /**
459
- * 滚动到指定 Tab,仅滚动监听模式下可用
460
- * @en Scroll to the specified Tab, only available in scroll monitor mode
461
- */
462
- scrollToIndex: (index: number, rightNow?: boolean) => void;
463
- }
1
+ import React from 'react';
2
+ import { TabsProps, TabsRef } from './type';
3
+ export * from './type';
464
4
  /**
465
5
  * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能,如有替换DOM、发请求更新数据等操作,请在`onAfterChange`而非`onChange`回调中进行。
466
6
  * @en Used to let the user switch between different views. In order to optimize the rendering performance of the mobile terminal, if you need to replace the DOM, send a request to update data, etc., please do it in the `onAfterChange` instead of the `onChange` callback.
package/cjs/tabs/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
+ var _exportNames = {};
6
7
  exports.default = void 0;
7
8
 
8
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,6 +20,15 @@ var _tabPane = _interopRequireDefault(require("./tab-pane"));
19
20
 
20
21
  var _helpers = require("../_helpers");
21
22
 
23
+ var _type = require("./type");
24
+
25
+ Object.keys(_type).forEach(function (key) {
26
+ if (key === "default" || key === "__esModule") return;
27
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
28
+ if (key in exports && exports[key] === _type[key]) return;
29
+ exports[key] = _type[key];
30
+ });
31
+
22
32
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
33
 
24
34
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { TabCellUnderlineProps, TabCellUnderlineRef } from './type';
3
+ declare const TabCellUnderline: React.ForwardRefExoticComponent<TabCellUnderlineProps & React.RefAttributes<TabCellUnderlineRef>>;
4
+ export default TabCellUnderline;