@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.
- package/CHANGELOG.md +29 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/_helpers/hooks.d.ts +7 -1
- package/cjs/_helpers/hooks.js +9 -5
- package/cjs/form/form-item.js +109 -108
- package/cjs/grid/style/css/index.css +4 -0
- package/cjs/grid/style/index.less +6 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +5 -1
- package/cjs/nav-bar/index.d.ts +3 -3
- package/cjs/picker-view/components/picker-cell.js +20 -6
- package/cjs/skeleton/demo/style/css/mobile.css +7 -0
- package/cjs/skeleton/demo/style/mobile.less +13 -0
- package/cjs/skeleton/elements.d.ts +7 -0
- package/cjs/skeleton/elements.js +302 -0
- package/cjs/skeleton/index.d.ts +18 -0
- package/cjs/skeleton/index.js +100 -0
- package/cjs/skeleton/skeleton-context.d.ts +3 -0
- package/cjs/skeleton/skeleton-context.js +15 -0
- package/cjs/skeleton/style/css/index.css +180 -0
- package/cjs/skeleton/style/css/index.d.ts +3 -0
- package/cjs/skeleton/style/css/index.js +7 -0
- package/cjs/skeleton/style/index.d.ts +3 -0
- package/cjs/skeleton/style/index.js +7 -0
- package/cjs/skeleton/style/index.less +147 -0
- package/cjs/skeleton/type.d.ts +104 -0
- package/cjs/skeleton/type.js +3 -0
- package/cjs/style.d.ts +1 -0
- package/cjs/style.js +2 -0
- package/cjs/tabs/index.js +8 -2
- package/dist/index.js +532 -147
- package/dist/index.min.js +5 -5
- package/dist/style.css +123 -0
- package/dist/style.min.css +1 -1
- package/esm/_helpers/hooks.d.ts +7 -1
- package/esm/_helpers/hooks.js +8 -2
- package/esm/form/form-item.js +109 -108
- package/esm/grid/style/css/index.css +4 -0
- package/esm/grid/style/index.less +6 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/nav-bar/index.d.ts +3 -3
- package/esm/picker-view/components/picker-cell.js +20 -6
- package/esm/skeleton/demo/style/css/mobile.css +7 -0
- package/esm/skeleton/demo/style/mobile.less +13 -0
- package/esm/skeleton/elements.d.ts +7 -0
- package/esm/skeleton/elements.js +281 -0
- package/esm/skeleton/index.d.ts +18 -0
- package/esm/skeleton/index.js +82 -0
- package/esm/skeleton/skeleton-context.d.ts +3 -0
- package/esm/skeleton/skeleton-context.js +5 -0
- package/esm/skeleton/style/css/index.css +180 -0
- package/esm/skeleton/style/css/index.d.ts +3 -0
- package/esm/skeleton/style/css/index.js +3 -0
- package/esm/skeleton/style/index.d.ts +3 -0
- package/esm/skeleton/style/index.js +3 -0
- package/esm/skeleton/style/index.less +147 -0
- package/esm/skeleton/type.d.ts +104 -0
- package/esm/skeleton/type.js +1 -0
- package/esm/style.d.ts +1 -0
- package/esm/style.js +1 -0
- package/esm/tabs/index.js +9 -3
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +16 -0
- package/tokens/app/arcodesign/default/index.d.ts +16 -0
- package/tokens/app/arcodesign/default/index.js +17 -1
- package/tokens/app/arcodesign/default/index.json +190 -0
- package/tokens/app/arcodesign/default/index.less +16 -0
- package/umd/_helpers/hooks.d.ts +7 -1
- package/umd/_helpers/hooks.js +9 -5
- package/umd/form/form-item.js +109 -108
- package/umd/grid/style/css/index.css +4 -0
- package/umd/grid/style/index.less +6 -0
- package/umd/index.d.ts +1 -0
- package/umd/index.js +7 -5
- package/umd/nav-bar/index.d.ts +3 -3
- package/umd/picker-view/components/picker-cell.js +20 -6
- package/umd/skeleton/demo/style/css/mobile.css +7 -0
- package/umd/skeleton/demo/style/mobile.less +13 -0
- package/umd/skeleton/elements.d.ts +7 -0
- package/umd/skeleton/elements.js +306 -0
- package/umd/skeleton/index.d.ts +18 -0
- package/umd/skeleton/index.js +104 -0
- package/umd/skeleton/skeleton-context.d.ts +3 -0
- package/umd/skeleton/skeleton-context.js +28 -0
- package/umd/skeleton/style/css/index.css +180 -0
- package/umd/skeleton/style/css/index.d.ts +3 -0
- package/umd/skeleton/style/css/index.js +15 -0
- package/umd/skeleton/style/index.d.ts +3 -0
- package/umd/skeleton/style/index.js +15 -0
- package/umd/skeleton/style/index.less +147 -0
- package/umd/skeleton/type.d.ts +104 -0
- package/umd/skeleton/type.js +17 -0
- package/umd/style.d.ts +1 -0
- package/umd/style.js +4 -4
- 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,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
|
+
}
|