@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,302 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ exports.SkeletonTitle = exports.SkeletonParagraph = exports.SkeletonNode = exports.SkeletonGrid = exports.SkeletonAvatar = void 0;
7
+
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _mobileUtils = require("@arco-design/mobile-utils");
13
+
14
+ var _helpers = require("../_helpers");
15
+
16
+ var _contextProvider = require("../context-provider");
17
+
18
+ var _skeletonContext = require("./skeleton-context");
19
+
20
+ 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); }
21
+
22
+ 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; }
23
+
24
+ var calcOffset = function calcOffset(dom, useRtl) {
25
+ if (!dom) {
26
+ return 0;
27
+ }
28
+
29
+ if (useRtl) {
30
+ return dom.offsetLeft - dom.offsetTop;
31
+ }
32
+
33
+ return dom.offsetLeft + dom.offsetTop;
34
+ };
35
+
36
+ function useOffset(dom, useRtl) {
37
+ var _useState = (0, _react.useState)(),
38
+ offset = _useState[0],
39
+ setOffset = _useState[1];
40
+
41
+ var calcLayout = function calcLayout() {
42
+ var isList = Array.isArray(dom);
43
+
44
+ if (!(isList ? dom.length > 0 : dom == null ? void 0 : dom.current)) {
45
+ return;
46
+ }
47
+
48
+ setOffset(isList ? dom.map(function (item) {
49
+ return calcOffset(item, useRtl);
50
+ }) : calcOffset(dom.current, useRtl));
51
+ };
52
+
53
+ (0, _react.useEffect)(function () {
54
+ (0, _mobileUtils.nextTick)(function () {
55
+ calcLayout();
56
+ });
57
+ }, [dom, useRtl]);
58
+ (0, _helpers.useListenResize)(calcLayout);
59
+ return offset;
60
+ }
61
+
62
+ var SkeletonNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
63
+ var _props$className = props.className,
64
+ className = _props$className === void 0 ? '' : _props$className,
65
+ style = props.style,
66
+ children = props.children;
67
+
68
+ var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
69
+ useRtl = _useContext.useRtl,
70
+ prefixCls = _useContext.prefixCls;
71
+
72
+ var _useContext2 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
73
+ backgroundColor = _useContext2.backgroundColor,
74
+ showAnimation = _useContext2.showAnimation,
75
+ animation = _useContext2.animation;
76
+
77
+ var domRef = (0, _react.useRef)(null);
78
+ var isGradientAnimation = showAnimation && animation === 'gradient';
79
+ var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
80
+ (0, _react.useImperativeHandle)(ref, function () {
81
+ return {
82
+ dom: domRef.current
83
+ };
84
+ });
85
+ return /*#__PURE__*/_react.default.createElement("div", {
86
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
87
+ style: (0, _extends2.default)({
88
+ backgroundColor: backgroundColor
89
+ }, style),
90
+ ref: domRef
91
+ }, children, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
92
+ className: prefixCls + "-skeleton-animation-item",
93
+ style: {
94
+ left: 0 - offset
95
+ }
96
+ }));
97
+ });
98
+ exports.SkeletonNode = SkeletonNode;
99
+ var SkeletonTitle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
100
+ var _props$className2 = props.className,
101
+ className = _props$className2 === void 0 ? '' : _props$className2,
102
+ style = props.style,
103
+ _props$width = props.width,
104
+ width = _props$width === void 0 ? '40%' : _props$width;
105
+
106
+ var _useContext3 = (0, _react.useContext)(_contextProvider.GlobalContext),
107
+ useRtl = _useContext3.useRtl,
108
+ prefixCls = _useContext3.prefixCls;
109
+
110
+ var _useContext4 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
111
+ backgroundColor = _useContext4.backgroundColor,
112
+ showAnimation = _useContext4.showAnimation,
113
+ animation = _useContext4.animation;
114
+
115
+ var domRef = (0, _react.useRef)(null);
116
+ var isGradientAnimation = showAnimation && animation === 'gradient';
117
+ var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
118
+ (0, _react.useImperativeHandle)(ref, function () {
119
+ return {
120
+ dom: domRef.current
121
+ };
122
+ });
123
+ return /*#__PURE__*/_react.default.createElement("div", {
124
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
125
+ style: (0, _extends2.default)({
126
+ width: width,
127
+ backgroundColor: backgroundColor
128
+ }, style),
129
+ ref: domRef
130
+ }, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
131
+ className: prefixCls + "-skeleton-animation-item",
132
+ style: {
133
+ left: 0 - offset
134
+ }
135
+ }));
136
+ });
137
+ exports.SkeletonTitle = SkeletonTitle;
138
+ var SkeletonParagraph = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
139
+ var _props$className3 = props.className,
140
+ className = _props$className3 === void 0 ? '' : _props$className3,
141
+ style = props.style,
142
+ _props$rows = props.rows,
143
+ rows = _props$rows === void 0 ? 3 : _props$rows,
144
+ _props$width2 = props.width,
145
+ width = _props$width2 === void 0 ? '60%' : _props$width2;
146
+
147
+ var _useContext5 = (0, _react.useContext)(_contextProvider.GlobalContext),
148
+ useRtl = _useContext5.useRtl,
149
+ prefixCls = _useContext5.prefixCls;
150
+
151
+ var _useContext6 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
152
+ backgroundColor = _useContext6.backgroundColor,
153
+ showAnimation = _useContext6.showAnimation,
154
+ animation = _useContext6.animation;
155
+
156
+ var domRef = (0, _react.useRef)(null);
157
+ var lineDomRefs = (0, _react.useRef)([]);
158
+ var isGradientAnimation = showAnimation && animation === 'gradient';
159
+ var offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
160
+ (0, _react.useImperativeHandle)(ref, function () {
161
+ return {
162
+ dom: domRef.current
163
+ };
164
+ });
165
+
166
+ var getWidth = function getWidth(idx) {
167
+ if ((0, _mobileUtils.isArray)(width)) {
168
+ return width[idx];
169
+ }
170
+
171
+ if (rows - 1 === idx) {
172
+ return width;
173
+ }
174
+
175
+ return undefined;
176
+ };
177
+
178
+ return /*#__PURE__*/_react.default.createElement("div", {
179
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-paragraph", className),
180
+ style: style,
181
+ ref: domRef
182
+ }, Array.from(new Array(rows)).map(function (_, idx) {
183
+ return /*#__PURE__*/_react.default.createElement("div", {
184
+ key: idx,
185
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-paragraph-line", showAnimation && prefixCls + "-skeleton-animation-" + animation),
186
+ style: {
187
+ width: getWidth(idx),
188
+ backgroundColor: backgroundColor
189
+ },
190
+ ref: function ref(el) {
191
+ return el && (lineDomRefs.current[idx] = el);
192
+ }
193
+ }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
194
+ className: prefixCls + "-skeleton-animation-item",
195
+ style: {
196
+ left: 0 - (offsets[idx] || 0)
197
+ }
198
+ }));
199
+ }));
200
+ });
201
+ exports.SkeletonParagraph = SkeletonParagraph;
202
+ var SkeletonAvatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
203
+ var _props$className4 = props.className,
204
+ className = _props$className4 === void 0 ? '' : _props$className4,
205
+ style = props.style;
206
+
207
+ var _useContext7 = (0, _react.useContext)(_contextProvider.GlobalContext),
208
+ useRtl = _useContext7.useRtl,
209
+ prefixCls = _useContext7.prefixCls;
210
+
211
+ var _useContext8 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
212
+ backgroundColor = _useContext8.backgroundColor,
213
+ showAnimation = _useContext8.showAnimation,
214
+ animation = _useContext8.animation;
215
+
216
+ var domRef = (0, _react.useRef)(null);
217
+ var isGradientAnimation = showAnimation && animation === 'gradient';
218
+ var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
219
+ (0, _react.useImperativeHandle)(ref, function () {
220
+ return {
221
+ dom: domRef.current
222
+ };
223
+ });
224
+ return /*#__PURE__*/_react.default.createElement("div", {
225
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
226
+ style: (0, _extends2.default)({
227
+ backgroundColor: backgroundColor
228
+ }, style),
229
+ ref: domRef
230
+ }, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
231
+ className: prefixCls + "-skeleton-animation-item",
232
+ style: {
233
+ left: 0 - offset
234
+ }
235
+ }));
236
+ });
237
+ exports.SkeletonAvatar = SkeletonAvatar;
238
+ var SkeletonGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
239
+ var _props$className5 = props.className,
240
+ className = _props$className5 === void 0 ? '' : _props$className5,
241
+ style = props.style,
242
+ _props$columns = props.columns,
243
+ columns = _props$columns === void 0 ? 4 : _props$columns;
244
+
245
+ var _useContext9 = (0, _react.useContext)(_contextProvider.GlobalContext),
246
+ useRtl = _useContext9.useRtl,
247
+ prefixCls = _useContext9.prefixCls;
248
+
249
+ var _useContext10 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
250
+ backgroundColor = _useContext10.backgroundColor,
251
+ showAnimation = _useContext10.showAnimation,
252
+ animation = _useContext10.animation;
253
+
254
+ var domRef = (0, _react.useRef)(null);
255
+ var iconDomRefs = (0, _react.useRef)([]);
256
+ var textDomRefs = (0, _react.useRef)([]);
257
+ var isGradientAnimation = showAnimation && animation === 'gradient';
258
+ var iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
259
+ var textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
260
+ (0, _react.useImperativeHandle)(ref, function () {
261
+ return {
262
+ dom: domRef.current
263
+ };
264
+ });
265
+ return /*#__PURE__*/_react.default.createElement("div", {
266
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-grid", className),
267
+ style: style,
268
+ ref: domRef
269
+ }, Array.from(new Array(columns)).map(function (_, idx) {
270
+ return /*#__PURE__*/_react.default.createElement("div", {
271
+ key: idx,
272
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-grid-item")
273
+ }, /*#__PURE__*/_react.default.createElement("div", {
274
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-icon", showAnimation && prefixCls + "-skeleton-animation-" + animation),
275
+ style: {
276
+ backgroundColor: backgroundColor
277
+ },
278
+ ref: function ref(el) {
279
+ return el && (iconDomRefs.current[idx] = el);
280
+ }
281
+ }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
282
+ className: prefixCls + "-skeleton-animation-item",
283
+ style: {
284
+ left: 0 - ((iconOffsets == null ? void 0 : iconOffsets[idx]) || 0)
285
+ }
286
+ })), /*#__PURE__*/_react.default.createElement("div", {
287
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-text", showAnimation && prefixCls + "-skeleton-animation-" + animation),
288
+ style: {
289
+ backgroundColor: backgroundColor
290
+ },
291
+ ref: function ref(el) {
292
+ return el && (textDomRefs.current[idx] = el);
293
+ }
294
+ }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
295
+ className: prefixCls + "-skeleton-animation-item",
296
+ style: {
297
+ left: 0 - ((textOffsets == null ? void 0 : textOffsets[idx]) || 0)
298
+ }
299
+ })));
300
+ }));
301
+ });
302
+ exports.SkeletonGrid = SkeletonGrid;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { SkeletonProps, SkeletonRef } from './type';
3
+ declare const _default: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<SkeletonRef>> & {
4
+ Node: React.ForwardRefExoticComponent<import("./type").SkeletonNodeProps & React.RefAttributes<SkeletonRef>>;
5
+ Title: React.ForwardRefExoticComponent<import("./type").SkeletonTitleProps & React.RefAttributes<SkeletonRef>>;
6
+ Paragraph: React.ForwardRefExoticComponent<import("./type").SkeletonParagraphProps & React.RefAttributes<SkeletonRef>>;
7
+ Avatar: React.ForwardRefExoticComponent<import("./type").SkeletonAvatarProps & React.RefAttributes<SkeletonRef>>;
8
+ Grid: React.ForwardRefExoticComponent<import("./type").SkeletonGridProps & React.RefAttributes<SkeletonRef>>;
9
+ };
10
+ /**
11
+ * 在内容加载过程中展示一组占位图形。
12
+ * @en Display a set of placeholder graphics during content loading
13
+ * @type 信息展示
14
+ * @type_en Data Display
15
+ * @name 骨架屏
16
+ * @name_en Skeleton
17
+ */
18
+ export default _default;
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _mobileUtils = require("@arco-design/mobile-utils");
13
+
14
+ var _contextProvider = require("../context-provider");
15
+
16
+ var _elements = require("./elements");
17
+
18
+ var _skeletonContext = require("./skeleton-context");
19
+
20
+ 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); }
21
+
22
+ 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; }
23
+
24
+ function getComponentProps(prop) {
25
+ if (prop && typeof prop === 'object') {
26
+ return prop;
27
+ }
28
+
29
+ return {};
30
+ }
31
+
32
+ var Skeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
33
+ var _cls;
34
+
35
+ var _props$className = props.className,
36
+ className = _props$className === void 0 ? '' : _props$className,
37
+ style = props.style,
38
+ children = props.children,
39
+ _props$title = props.title,
40
+ title = _props$title === void 0 ? true : _props$title,
41
+ _props$paragraph = props.paragraph,
42
+ paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
43
+ _props$avatar = props.avatar,
44
+ avatar = _props$avatar === void 0 ? false : _props$avatar,
45
+ grid = props.grid,
46
+ _props$showAnimation = props.showAnimation,
47
+ showAnimation = _props$showAnimation === void 0 ? true : _props$showAnimation,
48
+ _props$animation = props.animation,
49
+ animation = _props$animation === void 0 ? 'gradient' : _props$animation,
50
+ animationGradientColor = props.animationGradientColor,
51
+ backgroundColor = props.backgroundColor;
52
+ var domRef = (0, _react.useRef)(null);
53
+
54
+ var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
55
+ prefixCls = _useContext.prefixCls;
56
+
57
+ (0, _react.useImperativeHandle)(ref, function () {
58
+ return {
59
+ dom: domRef.current
60
+ };
61
+ });
62
+ var isGrid = !!grid;
63
+ var hasTitle = !!title;
64
+ var hasParagraph = !!paragraph;
65
+ var hasAvatar = !!avatar;
66
+ var content = isGrid ? /*#__PURE__*/_react.default.createElement(_elements.SkeletonGrid, getComponentProps(grid)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasAvatar && /*#__PURE__*/_react.default.createElement(_elements.SkeletonAvatar, getComponentProps(avatar)), (hasTitle || hasParagraph) && /*#__PURE__*/_react.default.createElement("div", {
67
+ className: prefixCls + "-skeleton-content"
68
+ }, hasTitle && /*#__PURE__*/_react.default.createElement(_elements.SkeletonTitle, getComponentProps(title)), hasParagraph && /*#__PURE__*/_react.default.createElement(_elements.SkeletonParagraph, getComponentProps(paragraph))));
69
+ return /*#__PURE__*/_react.default.createElement("div", {
70
+ className: (0, _mobileUtils.cls)(prefixCls + "-skeleton", (_cls = {}, _cls[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _cls), className),
71
+ style: (0, _extends2.default)({
72
+ color: animationGradientColor
73
+ }, style),
74
+ ref: domRef
75
+ }, /*#__PURE__*/_react.default.createElement(_skeletonContext.SkeletonContext.Provider, {
76
+ value: {
77
+ showAnimation: showAnimation,
78
+ animation: animation,
79
+ backgroundColor: backgroundColor
80
+ }
81
+ }, content, children));
82
+ });
83
+ /**
84
+ * 在内容加载过程中展示一组占位图形。
85
+ * @en Display a set of placeholder graphics during content loading
86
+ * @type 信息展示
87
+ * @type_en Data Display
88
+ * @name 骨架屏
89
+ * @name_en Skeleton
90
+ */
91
+
92
+ var _default = (0, _mobileUtils.componentWrapper)(Skeleton, {
93
+ Node: _elements.SkeletonNode,
94
+ Title: _elements.SkeletonTitle,
95
+ Paragraph: _elements.SkeletonParagraph,
96
+ Avatar: _elements.SkeletonAvatar,
97
+ Grid: _elements.SkeletonGrid
98
+ });
99
+
100
+ exports.default = _default;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { SkeletonContextParams } from './type';
3
+ export declare const SkeletonContext: React.Context<SkeletonContextParams>;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ exports.SkeletonContext = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var SkeletonContext = /*#__PURE__*/_react.default.createContext({
11
+ showAnimation: true,
12
+ animation: 'gradient'
13
+ });
14
+
15
+ exports.SkeletonContext = SkeletonContext;
@@ -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,7 @@
1
+ "use strict";
2
+
3
+ require("../../../../style/css/public.css");
4
+
5
+ require("../../../avatar/style/css");
6
+
7
+ require("./index.css");
@@ -0,0 +1,3 @@
1
+ import '../../../style/public.less';
2
+ import '../../avatar/style';
3
+ import './index.less';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ require("../../../style/public.less");
4
+
5
+ require("../../avatar/style");
6
+
7
+ require("./index.less");