@arco-design/mobile-react 2.28.1 → 2.29.0

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 (97) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.d.ts +7 -1
  5. package/cjs/_helpers/hooks.js +9 -5
  6. package/cjs/form/form-item.js +109 -108
  7. package/cjs/grid/style/css/index.css +4 -0
  8. package/cjs/grid/style/index.less +6 -0
  9. package/cjs/index.d.ts +1 -0
  10. package/cjs/index.js +5 -1
  11. package/cjs/nav-bar/index.d.ts +3 -3
  12. package/cjs/picker-view/components/picker-cell.js +20 -6
  13. package/cjs/skeleton/demo/style/css/mobile.css +7 -0
  14. package/cjs/skeleton/demo/style/mobile.less +13 -0
  15. package/cjs/skeleton/elements.d.ts +7 -0
  16. package/cjs/skeleton/elements.js +302 -0
  17. package/cjs/skeleton/index.d.ts +18 -0
  18. package/cjs/skeleton/index.js +100 -0
  19. package/cjs/skeleton/skeleton-context.d.ts +3 -0
  20. package/cjs/skeleton/skeleton-context.js +15 -0
  21. package/cjs/skeleton/style/css/index.css +180 -0
  22. package/cjs/skeleton/style/css/index.d.ts +3 -0
  23. package/cjs/skeleton/style/css/index.js +7 -0
  24. package/cjs/skeleton/style/index.d.ts +3 -0
  25. package/cjs/skeleton/style/index.js +7 -0
  26. package/cjs/skeleton/style/index.less +147 -0
  27. package/cjs/skeleton/type.d.ts +104 -0
  28. package/cjs/skeleton/type.js +3 -0
  29. package/cjs/style.d.ts +1 -0
  30. package/cjs/style.js +2 -0
  31. package/cjs/tabs/index.js +8 -2
  32. package/dist/index.js +532 -147
  33. package/dist/index.min.js +5 -5
  34. package/dist/style.css +123 -0
  35. package/dist/style.min.css +1 -1
  36. package/esm/_helpers/hooks.d.ts +7 -1
  37. package/esm/_helpers/hooks.js +8 -2
  38. package/esm/form/form-item.js +109 -108
  39. package/esm/grid/style/css/index.css +4 -0
  40. package/esm/grid/style/index.less +6 -0
  41. package/esm/index.d.ts +1 -0
  42. package/esm/index.js +1 -0
  43. package/esm/nav-bar/index.d.ts +3 -3
  44. package/esm/picker-view/components/picker-cell.js +20 -6
  45. package/esm/skeleton/demo/style/css/mobile.css +7 -0
  46. package/esm/skeleton/demo/style/mobile.less +13 -0
  47. package/esm/skeleton/elements.d.ts +7 -0
  48. package/esm/skeleton/elements.js +281 -0
  49. package/esm/skeleton/index.d.ts +18 -0
  50. package/esm/skeleton/index.js +82 -0
  51. package/esm/skeleton/skeleton-context.d.ts +3 -0
  52. package/esm/skeleton/skeleton-context.js +5 -0
  53. package/esm/skeleton/style/css/index.css +180 -0
  54. package/esm/skeleton/style/css/index.d.ts +3 -0
  55. package/esm/skeleton/style/css/index.js +3 -0
  56. package/esm/skeleton/style/index.d.ts +3 -0
  57. package/esm/skeleton/style/index.js +3 -0
  58. package/esm/skeleton/style/index.less +147 -0
  59. package/esm/skeleton/type.d.ts +104 -0
  60. package/esm/skeleton/type.js +1 -0
  61. package/esm/style.d.ts +1 -0
  62. package/esm/style.js +1 -0
  63. package/esm/tabs/index.js +9 -3
  64. package/package.json +3 -3
  65. package/tokens/app/arcodesign/default/css-variables.less +16 -0
  66. package/tokens/app/arcodesign/default/index.d.ts +16 -0
  67. package/tokens/app/arcodesign/default/index.js +17 -1
  68. package/tokens/app/arcodesign/default/index.json +190 -0
  69. package/tokens/app/arcodesign/default/index.less +16 -0
  70. package/umd/_helpers/hooks.d.ts +7 -1
  71. package/umd/_helpers/hooks.js +9 -5
  72. package/umd/form/form-item.js +109 -108
  73. package/umd/grid/style/css/index.css +4 -0
  74. package/umd/grid/style/index.less +6 -0
  75. package/umd/index.d.ts +1 -0
  76. package/umd/index.js +7 -5
  77. package/umd/nav-bar/index.d.ts +3 -3
  78. package/umd/picker-view/components/picker-cell.js +20 -6
  79. package/umd/skeleton/demo/style/css/mobile.css +7 -0
  80. package/umd/skeleton/demo/style/mobile.less +13 -0
  81. package/umd/skeleton/elements.d.ts +7 -0
  82. package/umd/skeleton/elements.js +306 -0
  83. package/umd/skeleton/index.d.ts +18 -0
  84. package/umd/skeleton/index.js +104 -0
  85. package/umd/skeleton/skeleton-context.d.ts +3 -0
  86. package/umd/skeleton/skeleton-context.js +28 -0
  87. package/umd/skeleton/style/css/index.css +180 -0
  88. package/umd/skeleton/style/css/index.d.ts +3 -0
  89. package/umd/skeleton/style/css/index.js +15 -0
  90. package/umd/skeleton/style/index.d.ts +3 -0
  91. package/umd/skeleton/style/index.js +15 -0
  92. package/umd/skeleton/style/index.less +147 -0
  93. package/umd/skeleton/type.d.ts +104 -0
  94. package/umd/skeleton/type.js +17 -0
  95. package/umd/style.d.ts +1 -0
  96. package/umd/style.js +4 -4
  97. package/umd/tabs/index.js +8 -2
@@ -0,0 +1,180 @@
1
+ .arco-skeleton {
2
+ position: relative;
3
+ color: rgba(255, 255, 255, 0.6) ;
4
+ }
5
+ .arco-skeleton-title {
6
+ height: 0.32rem ;
7
+ }
8
+ .arco-skeleton-paragraph-line {
9
+ width: 100%;
10
+ height: 0.32rem ;
11
+ }
12
+ .arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
13
+ margin-top: 0.24rem ;
14
+ }
15
+ .arco-skeleton-avatar.arco-skeleton-item {
16
+ width: 0.64rem ;
17
+ height: 0.64rem ;
18
+ border-radius: 100%;
19
+ -webkit-transform: translateZ(0);
20
+ transform: translateZ(0);
21
+ }
22
+ .arco-skeleton-content {
23
+ width: 100%;
24
+ }
25
+ .arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
26
+ margin-top: 0.4rem ;
27
+ }
28
+ .arco-skeleton-with-avatar {
29
+ display: -webkit-box;
30
+ display: -webkit-flex;
31
+ display: flex;
32
+ -webkit-box-align: start;
33
+ -webkit-align-items: flex-start;
34
+ align-items: flex-start;
35
+ }
36
+ .arco-skeleton-with-avatar .arco-skeleton-avatar {
37
+ -webkit-box-flex: 0;
38
+ -webkit-flex: none;
39
+ flex: none;
40
+ }
41
+ .arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
42
+ margin-top: 0.16rem ;
43
+ }
44
+ .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
45
+ margin-left: 0.16rem ;
46
+ }
47
+ [dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
48
+ margin-left: initial;
49
+ margin-right: 0.16rem ;
50
+ }
51
+ .arco-skeleton-grid {
52
+ display: -webkit-box;
53
+ display: -webkit-flex;
54
+ display: flex;
55
+ -webkit-box-pack: justify;
56
+ -webkit-justify-content: space-between;
57
+ justify-content: space-between;
58
+ width: 100%;
59
+ }
60
+ .arco-skeleton-grid-item {
61
+ display: -webkit-box;
62
+ display: -webkit-flex;
63
+ display: flex;
64
+ -webkit-box-orient: vertical;
65
+ -webkit-box-direction: normal;
66
+ -webkit-flex-direction: column;
67
+ flex-direction: column;
68
+ -webkit-box-align: center;
69
+ -webkit-align-items: center;
70
+ align-items: center;
71
+ }
72
+ .arco-skeleton-grid-icon {
73
+ width: 0.64rem ;
74
+ height: 0.64rem ;
75
+ }
76
+ .arco-skeleton-grid-text {
77
+ margin-top: 0.16rem ;
78
+ width: 1.28rem ;
79
+ height: 0.32rem ;
80
+ }
81
+ .arco-skeleton-node {
82
+ display: inline-block;
83
+ }
84
+ .arco-skeleton-item {
85
+ position: relative;
86
+ overflow: hidden;
87
+ border-radius: 0 ;
88
+ background-color: #F2F3F5 ;
89
+ }
90
+ .arco-skeleton-animation-item {
91
+ position: absolute;
92
+ width: 100vw;
93
+ height: 100%;
94
+ top: 0;
95
+ left: 0;
96
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
97
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
98
+ -webkit-transform-origin: top left;
99
+ transform-origin: top left;
100
+ -webkit-animation-name: skeleton-gradient;
101
+ animation-name: skeleton-gradient;
102
+ -webkit-animation-iteration-count: infinite;
103
+ animation-iteration-count: infinite;
104
+ -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) ;
105
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) ;
106
+ -webkit-animation-duration: 1.5s ;
107
+ animation-duration: 1.5s ;
108
+ }
109
+ [dir="rtl"] .arco-skeleton-animation-item {
110
+ -webkit-animation-name: skeleton-gradient-reverse;
111
+ animation-name: skeleton-gradient-reverse;
112
+ }
113
+ .arco-skeleton-animation-breath {
114
+ -webkit-animation: skeleton-breath linear infinite;
115
+ animation: skeleton-breath linear infinite;
116
+ -webkit-animation-duration: 1.5s ;
117
+ animation-duration: 1.5s ;
118
+ }
119
+ @-webkit-keyframes skeleton-gradient {
120
+ 0% {
121
+ -webkit-transform: translateX(-65%) skewX(-45deg);
122
+ transform: translateX(-65%) skewX(-45deg);
123
+ }
124
+ 100% {
125
+ -webkit-transform: translateX(135%) skewX(-45deg);
126
+ transform: translateX(135%) skewX(-45deg);
127
+ }
128
+ }
129
+ @keyframes skeleton-gradient {
130
+ 0% {
131
+ -webkit-transform: translateX(-65%) skewX(-45deg);
132
+ transform: translateX(-65%) skewX(-45deg);
133
+ }
134
+ 100% {
135
+ -webkit-transform: translateX(135%) skewX(-45deg);
136
+ transform: translateX(135%) skewX(-45deg);
137
+ }
138
+ }
139
+ @-webkit-keyframes skeleton-gradient-reverse {
140
+ 0% {
141
+ -webkit-transform: translateX(65%) skewX(45deg);
142
+ transform: translateX(65%) skewX(45deg);
143
+ }
144
+ 100% {
145
+ -webkit-transform: translateX(-135%) skewX(45deg);
146
+ transform: translateX(-135%) skewX(45deg);
147
+ }
148
+ }
149
+ @keyframes skeleton-gradient-reverse {
150
+ 0% {
151
+ -webkit-transform: translateX(65%) skewX(45deg);
152
+ transform: translateX(65%) skewX(45deg);
153
+ }
154
+ 100% {
155
+ -webkit-transform: translateX(-135%) skewX(45deg);
156
+ transform: translateX(-135%) skewX(45deg);
157
+ }
158
+ }
159
+ @-webkit-keyframes skeleton-breath {
160
+ 0% {
161
+ opacity: 1;
162
+ }
163
+ 50% {
164
+ opacity: 0.4 ;
165
+ }
166
+ 100% {
167
+ opacity: 1;
168
+ }
169
+ }
170
+ @keyframes skeleton-breath {
171
+ 0% {
172
+ opacity: 1;
173
+ }
174
+ 50% {
175
+ opacity: 0.4 ;
176
+ }
177
+ 100% {
178
+ opacity: 1;
179
+ }
180
+ }
@@ -0,0 +1,3 @@
1
+ import '../../../../style/css/public.css';
2
+ import '../../../avatar/style/css';
3
+ import './index.css';
@@ -0,0 +1,15 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["../../../../style/css/public.css", "../../../avatar/style/css", "./index.css"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(require("../../../../style/css/public.css"), require("../../../avatar/style/css"), require("./index.css"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(global._public, global.style, global.index);
11
+ global.index = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _index) {
14
+ "use strict";
15
+ });
@@ -0,0 +1,3 @@
1
+ import '../../../style/public.less';
2
+ import '../../avatar/style';
3
+ import './index.less';
@@ -0,0 +1,15 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["../../../style/public.less", "../../avatar/style", "./index.less"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(require("../../../style/public.less"), require("../../avatar/style"), require("./index.less"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(global._public, global.style, global.index);
11
+ global.index = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _index) {
14
+ "use strict";
15
+ });
@@ -0,0 +1,147 @@
1
+ @import '../../../style/mixin.less';
2
+
3
+ .@{prefix}-skeleton {
4
+ position: relative;
5
+ .use-var(color, skeleton-gradient-animation-color);
6
+ }
7
+
8
+ .@{prefix}-skeleton-title {
9
+ .use-var(height, skeleton-title-height);
10
+ }
11
+
12
+ .@{prefix}-skeleton-paragraph {
13
+ &-line {
14
+ width: 100%;
15
+ .use-var(height, skeleton-paragraph-height);
16
+ }
17
+
18
+ &-line + &-line {
19
+ .use-var(margin-top, skeleton-paragraph-margin-top);
20
+ }
21
+ }
22
+
23
+ .@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
24
+ .use-var(width, skeleton-avatar-size);
25
+ .use-var(height, skeleton-avatar-size);
26
+ border-radius: 100%;
27
+ transform: translateZ(0);
28
+ }
29
+
30
+ .@{prefix}-skeleton-content {
31
+ width: 100%;
32
+
33
+ .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
34
+ .use-var(margin-top, skeleton-large-gutter);
35
+ }
36
+ }
37
+
38
+ .@{prefix}-skeleton-with-avatar {
39
+ display: flex;
40
+ align-items: flex-start;
41
+
42
+ .@{prefix}-skeleton-avatar {
43
+ flex: none;
44
+ }
45
+
46
+ .@{prefix}-skeleton-content {
47
+ .@{prefix}-skeleton-title {
48
+ .use-var(margin-top, skeleton-medium-gutter);
49
+ }
50
+ }
51
+
52
+ .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
53
+ .use-var-with-rtl(margin-left, skeleton-medium-gutter);
54
+ }
55
+ }
56
+
57
+ .@{prefix}-skeleton-grid {
58
+ display: flex;
59
+ justify-content: space-between;
60
+ width: 100%;
61
+
62
+ &-item {
63
+ display: flex;
64
+ flex-direction: column;
65
+ align-items: center;
66
+ }
67
+ &-icon {
68
+ .use-var(width, skeleton-grid-icon-size);
69
+ .use-var(height, skeleton-grid-icon-size);
70
+ }
71
+ &-text {
72
+ .use-var(margin-top, skeleton-medium-gutter);
73
+ .use-var(width, skeleton-grid-text-width);
74
+ .use-var(height, skeleton-grid-text-height);
75
+ }
76
+ }
77
+
78
+ .@{prefix}-skeleton-node {
79
+ display: inline-block;
80
+ }
81
+
82
+ .@{prefix}-skeleton-item {
83
+ position: relative;
84
+ overflow: hidden;
85
+ .use-var(border-radius, skeleton-border-radius);
86
+ .use-var(background-color, skeleton-background-color);
87
+ }
88
+
89
+ .@{prefix}-skeleton-animation-item {
90
+ position: absolute;
91
+ width: 100vw;
92
+ height: 100%;
93
+ top: 0;
94
+ left: 0;
95
+ background-image: linear-gradient(
96
+ 90deg,
97
+ rgba(255, 255, 255, 0) 35%,
98
+ currentColor 50%,
99
+ rgba(255, 255, 255, 0) 65%
100
+ );
101
+ transform-origin: top left;
102
+ animation-name: skeleton-gradient;
103
+ animation-iteration-count: infinite;
104
+ .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
105
+ .use-var(animation-duration, skeleton-gradient-animation-duration);
106
+ [dir="rtl"] & {
107
+ animation-name: skeleton-gradient-reverse;
108
+ }
109
+ }
110
+ .@{prefix}-skeleton-animation-breath {
111
+ animation: skeleton-breath linear infinite;
112
+ .use-var(animation-duration, skeleton-breath-animation-duration);
113
+ }
114
+
115
+ @keyframes skeleton-gradient {
116
+ 0% {
117
+ transform: translateX(-65%) skewX(-45deg);
118
+ }
119
+
120
+ 100% {
121
+ transform: translateX(135%) skewX(-45deg);
122
+ }
123
+ }
124
+
125
+ @keyframes skeleton-gradient-reverse {
126
+ 0% {
127
+ transform: translateX(65%) skewX(45deg);
128
+ }
129
+
130
+ 100% {
131
+ transform: translateX(-135%) skewX(45deg);
132
+ }
133
+ }
134
+
135
+ @keyframes skeleton-breath {
136
+ 0% {
137
+ opacity: 1;
138
+ }
139
+
140
+ 50% {
141
+ .use-var(opacity, skeleton-breath-opacity);
142
+ }
143
+
144
+ 100% {
145
+ opacity: 1;
146
+ }
147
+ }
@@ -0,0 +1,104 @@
1
+ /// <reference types="react" />
2
+ import { BaseProps, SimpleBaseProps } from '../_helpers';
3
+ export interface SkeletonProps extends SimpleBaseProps {
4
+ /**
5
+ * 是否显示标题占位图
6
+ * @en Show title placeholder
7
+ * @default true
8
+ */
9
+ title?: boolean | SkeletonTitleProps;
10
+ /**
11
+ * 是否显示段落占位图
12
+ * @en Show paragraph placeholder
13
+ * @default true
14
+ */
15
+ paragraph?: boolean | SkeletonParagraphProps;
16
+ /**
17
+ * 是否显示头像占位图
18
+ * @en Show Avatar placeholder
19
+ * @default false
20
+ */
21
+ avatar?: boolean | SkeletonAvatarProps;
22
+ /**
23
+ * 是否显示金刚位占位图(如该参数非空时,默认展示四列金刚位,且不展示标题/段落/头像占位符)
24
+ * @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
25
+ * @default false
26
+ */
27
+ grid?: boolean | SkeletonGridProps;
28
+ /**
29
+ * 是否展示动画效果
30
+ * @en Show loading effect
31
+ * @default true
32
+ */
33
+ showAnimation?: boolean;
34
+ /**
35
+ * 加载动画效果,可选“扫光”、“呼吸”两种效果
36
+ * @en Animation of loading effect, 'gradient' and 'breath' effects are optional
37
+ * @default "gradient"
38
+ */
39
+ animation?: 'gradient' | 'breath';
40
+ /**
41
+ * 扫光动效高光颜色
42
+ * @en Highlight color of gradient animation
43
+ * @default "rgba(0, 0, 0, 0.04)"
44
+ */
45
+ animationGradientColor?: string;
46
+ /**
47
+ * 占位块背景色
48
+ * @en Background color of skeleton item
49
+ * @default "#F7F8FA"
50
+ */
51
+ backgroundColor?: string;
52
+ /**
53
+ * 子元素
54
+ * @en Children element
55
+ * @default null
56
+ */
57
+ children?: React.ReactNode;
58
+ }
59
+ export interface SkeletonTitleProps extends SimpleBaseProps {
60
+ /**
61
+ * 标题占位图宽度
62
+ * @en The width of title
63
+ * @default "40%"
64
+ */
65
+ width?: number | string;
66
+ }
67
+ export interface SkeletonParagraphProps extends SimpleBaseProps {
68
+ /**
69
+ * 段落占位图的行数
70
+ * @en Number of lines for paragraph
71
+ * @default 3
72
+ */
73
+ rows?: number;
74
+ /**
75
+ * 段落占位图宽度,若为数组格式对应每行宽度,否则表示最后一行的宽度
76
+ * @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
77
+ * @default "60%"
78
+ */
79
+ width?: number | string | Array<number | string>;
80
+ }
81
+ export interface SkeletonAvatarProps extends SimpleBaseProps {
82
+ }
83
+ export interface SkeletonGridProps extends SimpleBaseProps {
84
+ /**
85
+ * 金刚位列数
86
+ * @en columns of grid
87
+ * @default 4
88
+ */
89
+ columns?: number;
90
+ }
91
+ export interface SkeletonNodeProps extends BaseProps {
92
+ }
93
+ export interface SkeletonRef {
94
+ /**
95
+ * 最外层 DOM 元素
96
+ * @en The outer DOM element of the component
97
+ */
98
+ dom: HTMLDivElement | null;
99
+ }
100
+ export interface SkeletonContextParams {
101
+ backgroundColor?: string;
102
+ showAnimation: boolean;
103
+ animation: SkeletonProps['animation'];
104
+ }
@@ -0,0 +1,17 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports);
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports);
11
+ global.type = mod.exports;
12
+ }
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
14
+ "use strict";
15
+
16
+ _exports.__esModule = true;
17
+ });
package/umd/style.d.ts CHANGED
@@ -44,6 +44,7 @@ import './pull-refresh/style';
44
44
  import './radio/style';
45
45
  import './rate/style';
46
46
  import './search-bar/style';
47
+ import './skeleton/style';
47
48
  import './show-monitor/style';
48
49
  import './slider/style';
49
50
  import './stepper/style';
package/umd/style.js CHANGED
@@ -1,15 +1,15 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
3
+ define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./skeleton/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
5
+ factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./skeleton/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
10
+ factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
11
11
  global.style = mod.exports;
12
12
  }
13
- })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57) {
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57, _style58) {
14
14
  "use strict";
15
15
  });
package/umd/tabs/index.js CHANGED
@@ -427,9 +427,15 @@
427
427
  }
428
428
 
429
429
  function updateLayout() {
430
+ var _domRef$current, _domRef$current2;
431
+
432
+ var _getOffset = (0, _mobileUtils.getOffset)(domRef.current),
433
+ width = _getOffset.width,
434
+ height = _getOffset.height;
435
+
430
436
  cellRef.current && cellRef.current.resetUnderlineStyle();
431
- setWrapWidth(domRef.current ? domRef.current.offsetWidth : 0);
432
- setWrapHeight(domRef.current ? domRef.current.offsetHeight : 0);
437
+ setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
438
+ setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
433
439
  paneRef.current && paneRef.current.setCurrentHeight();
434
440
  }
435
441