@lobehub/ui 2.23.1 → 2.24.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/es/Accordion/AccordionItem.js +2 -2
- package/es/Accordion/style.js +2 -2
- package/es/Alert/Alert.js +38 -61
- package/es/Alert/style.d.ts +0 -1
- package/es/Alert/style.js +7 -8
- package/es/Alert/type.d.ts +7 -1
- package/es/Empty/Empty.d.ts +4 -0
- package/es/Empty/Empty.js +97 -0
- package/es/Empty/index.d.ts +2 -0
- package/es/Empty/index.js +1 -0
- package/es/Empty/type.d.ts +20 -0
- package/es/Empty/type.js +1 -0
- package/es/Skeleton/Skeleton.d.ts +4 -0
- package/es/Skeleton/Skeleton.js +83 -0
- package/es/Skeleton/SkeletonAvatar.d.ts +4 -0
- package/es/Skeleton/SkeletonAvatar.js +46 -0
- package/es/Skeleton/SkeletonBlock.d.ts +4 -0
- package/es/Skeleton/SkeletonBlock.js +27 -0
- package/es/Skeleton/SkeletonButton.d.ts +4 -0
- package/es/Skeleton/SkeletonButton.js +57 -0
- package/es/Skeleton/SkeletonParagraph.d.ts +4 -0
- package/es/Skeleton/SkeletonParagraph.js +64 -0
- package/es/Skeleton/SkeletonTags.d.ts +4 -0
- package/es/Skeleton/SkeletonTags.js +81 -0
- package/es/Skeleton/SkeletonTitle.d.ts +4 -0
- package/es/Skeleton/SkeletonTitle.js +45 -0
- package/es/Skeleton/index.d.ts +26 -0
- package/es/Skeleton/index.js +21 -0
- package/es/Skeleton/style.d.ts +6 -0
- package/es/Skeleton/style.js +16 -0
- package/es/Skeleton/type.d.ts +55 -0
- package/es/Skeleton/type.js +1 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -0
- package/package.json +1 -1
|
@@ -215,13 +215,13 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
215
215
|
paddingBlock: paddingBlock,
|
|
216
216
|
paddingInline: paddingInline,
|
|
217
217
|
ref: ref,
|
|
218
|
-
style: {
|
|
218
|
+
style: _objectSpread({
|
|
219
219
|
alignItems: 'center',
|
|
220
220
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
221
221
|
opacity: disabled ? 0.5 : undefined,
|
|
222
222
|
overflow: 'hidden',
|
|
223
223
|
width: '100%'
|
|
224
|
-
},
|
|
224
|
+
}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.header),
|
|
225
225
|
variant: customVariant || variant,
|
|
226
226
|
children: indicatorPlacementFinal === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
227
227
|
children: [/*#__PURE__*/_jsxs(Flexbox, {
|
package/es/Accordion/style.js
CHANGED
|
@@ -11,9 +11,9 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
11
11
|
contentInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* Content wrapper for animation */\n "]))),
|
|
12
12
|
divider: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-block: 0;\n "]))),
|
|
13
13
|
header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n &:hover .accordion-action {\n width: auto;\n opacity: 1;\n }\n\n &:focus-visible {\n border-radius: ", "px;\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), token.borderRadiusLG, token.colorPrimary),
|
|
14
|
-
icon: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n
|
|
14
|
+
icon: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n transition: transform 200ms ", ";\n "])), token.motionEaseOut),
|
|
15
15
|
iconRotate: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n transform: rotate(90deg);\n "]))),
|
|
16
|
-
indicator: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: 18px;\n\n transition: transform 200ms ", ";\n "])), token.motionEaseOut),
|
|
16
|
+
indicator: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: 18px;\n color: ", ";\n\n transition: transform 200ms ", ";\n "])), token.colorTextDescription, token.motionEaseOut),
|
|
17
17
|
item: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n "])))
|
|
18
18
|
};
|
|
19
19
|
});
|
package/es/Alert/Alert.js
CHANGED
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
|
|
4
|
+
var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "styles", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
8
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
9
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
13
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
14
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
15
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
16
10
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
17
11
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
|
-
import { Alert as AntdAlert
|
|
12
|
+
import { Alert as AntdAlert } from 'antd';
|
|
19
13
|
import { cva } from 'class-variance-authority';
|
|
20
14
|
import { camelCase } from 'lodash-es';
|
|
21
|
-
import { AlertTriangle, CheckCircle,
|
|
22
|
-
import { memo, useMemo
|
|
15
|
+
import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';
|
|
16
|
+
import { memo, useMemo } from 'react';
|
|
23
17
|
import { Flexbox } from 'react-layout-kit';
|
|
18
|
+
import { Accordion, AccordionItem } from "../Accordion";
|
|
24
19
|
import ActionIcon from "../ActionIcon";
|
|
25
20
|
import Icon from "../Icon";
|
|
26
21
|
import { useStyles } from "./style";
|
|
@@ -58,6 +53,7 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
58
53
|
style = _ref.style,
|
|
59
54
|
extra = _ref.extra,
|
|
60
55
|
classNames = _ref.classNames,
|
|
56
|
+
customStyles = _ref.styles,
|
|
61
57
|
text = _ref.text,
|
|
62
58
|
_ref$extraDefaultExpa = _ref.extraDefaultExpand,
|
|
63
59
|
extraDefaultExpand = _ref$extraDefaultExpa === void 0 ? false : _ref$extraDefaultExpa,
|
|
@@ -67,10 +63,6 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
67
63
|
variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
|
|
68
64
|
ref = _ref.ref,
|
|
69
65
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
70
|
-
var _useState = useState(extraDefaultExpand),
|
|
71
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
-
expand = _useState2[0],
|
|
73
|
-
setExpand = _useState2[1];
|
|
74
66
|
var _useStyles = useStyles({
|
|
75
67
|
closable: !!closable,
|
|
76
68
|
hasTitle: !!description,
|
|
@@ -145,22 +137,6 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
145
137
|
/* eslint-enable sort-keys-fix/sort-keys-fix */
|
|
146
138
|
});
|
|
147
139
|
}, [styles]);
|
|
148
|
-
var extraBodyVariants = useMemo(function () {
|
|
149
|
-
return cva(styles.extraBody, {
|
|
150
|
-
defaultVariants: {
|
|
151
|
-
variant: 'filled'
|
|
152
|
-
},
|
|
153
|
-
/* eslint-disable sort-keys-fix/sort-keys-fix */
|
|
154
|
-
variants: {
|
|
155
|
-
variant: {
|
|
156
|
-
filled: null,
|
|
157
|
-
outlined: null,
|
|
158
|
-
borderless: styles.borderless
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
/* eslint-enable sort-keys-fix/sort-keys-fix */
|
|
162
|
-
});
|
|
163
|
-
}, [styles]);
|
|
164
140
|
var isInsideExtra = Boolean(!extraIsolate && !!extra);
|
|
165
141
|
var alert = /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
|
|
166
142
|
banner: banner,
|
|
@@ -184,11 +160,11 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
184
160
|
}, iconProps)),
|
|
185
161
|
ref: ref,
|
|
186
162
|
showIcon: showIcon,
|
|
187
|
-
style: _objectSpread({
|
|
163
|
+
style: _objectSpread(_objectSpread({
|
|
188
164
|
background: colors(theme, type, 'fillTertiary'),
|
|
189
165
|
borderColor: colors(theme, type, 'fillSecondary'),
|
|
190
166
|
color: colorfulText ? colors(theme, type) : undefined
|
|
191
|
-
}, style),
|
|
167
|
+
}, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.alert),
|
|
192
168
|
type: type === 'secondary' ? 'info' : type
|
|
193
169
|
}, rest));
|
|
194
170
|
if (!extra) return alert;
|
|
@@ -199,7 +175,8 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
199
175
|
});
|
|
200
176
|
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
201
177
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
|
|
202
|
-
|
|
178
|
+
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
|
|
179
|
+
children: [alert, /*#__PURE__*/_jsx(Flexbox, {
|
|
203
180
|
className: extraVariants({
|
|
204
181
|
banner: banner,
|
|
205
182
|
variant: variant
|
|
@@ -210,36 +187,36 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
|
|
|
210
187
|
color: colors(theme, type),
|
|
211
188
|
fontSize: description ? 14 : 12
|
|
212
189
|
},
|
|
213
|
-
children:
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
borderColor: colors(theme, type, 'fillSecondary')
|
|
222
|
-
},
|
|
223
|
-
children: [/*#__PURE__*/_jsx(ActionIcon, {
|
|
224
|
-
color: colors(theme, type),
|
|
225
|
-
icon: expand ? ChevronDown : ChevronRight,
|
|
226
|
-
onClick: function onClick() {
|
|
227
|
-
return setExpand(!expand);
|
|
190
|
+
children: /*#__PURE__*/_jsx(Accordion, {
|
|
191
|
+
defaultExpandedKeys: extraDefaultExpand ? ['extra'] : [],
|
|
192
|
+
children: /*#__PURE__*/_jsx(AccordionItem, {
|
|
193
|
+
classNames: {
|
|
194
|
+
content: classNames === null || classNames === void 0 ? void 0 : classNames.extraContent,
|
|
195
|
+
header: extraHeaderVariants({
|
|
196
|
+
variant: variant
|
|
197
|
+
})
|
|
228
198
|
},
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
199
|
+
itemKey: 'extra',
|
|
200
|
+
styles: {
|
|
201
|
+
content: _objectSpread({
|
|
202
|
+
fontSize: 12,
|
|
203
|
+
padding: 8
|
|
204
|
+
}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.extraContent),
|
|
205
|
+
header: {
|
|
206
|
+
borderColor: colors(theme, type, 'fillSecondary')
|
|
207
|
+
},
|
|
208
|
+
indicator: {
|
|
209
|
+
color: colors(theme, type)
|
|
210
|
+
},
|
|
211
|
+
title: {
|
|
212
|
+
color: colors(theme, type),
|
|
213
|
+
fontSize: 12
|
|
214
|
+
}
|
|
234
215
|
},
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
variant: variant
|
|
240
|
-
}),
|
|
241
|
-
children: extra
|
|
242
|
-
})]
|
|
216
|
+
title: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details',
|
|
217
|
+
children: extra
|
|
218
|
+
})
|
|
219
|
+
})
|
|
243
220
|
})]
|
|
244
221
|
});
|
|
245
222
|
});
|
package/es/Alert/style.d.ts
CHANGED
|
@@ -9,7 +9,6 @@ export declare const useStyles: (props?: {
|
|
|
9
9
|
colorfulText: import("antd-style").SerializedStyles;
|
|
10
10
|
expandText: import("antd-style").SerializedStyles;
|
|
11
11
|
extra: import("antd-style").SerializedStyles;
|
|
12
|
-
extraBody: import("antd-style").SerializedStyles;
|
|
13
12
|
extraHeader: import("antd-style").SerializedStyles;
|
|
14
13
|
filled: import("antd-style").SerializedStyles;
|
|
15
14
|
glass: string;
|
package/es/Alert/style.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
@@ -15,16 +15,15 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
15
15
|
return {
|
|
16
16
|
banner: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none !important;\n border-radius: 0 !important;\n "]))),
|
|
17
17
|
borderless: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 0 !important;\n border: none !important;\n background: transparent !important;\n "]))),
|
|
18
|
-
borderlessExtraHeader: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-block-start: ", "px;\n
|
|
18
|
+
borderlessExtraHeader: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-block-start: ", "px;\n padding-inline: 0;\n "])), baseBlockPadding),
|
|
19
19
|
colorfulText: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", "-alert-message,.", "-alert-description {\n color: inherit;\n }\n "])), prefixCls, prefixCls),
|
|
20
20
|
expandText: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-inline-end: 12px;\n\n &:hover {\n cursor: pointer;\n }\n "]))),
|
|
21
21
|
extra: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n border: 1px solid;\n border-block-start: none;\n border-end-start-radius: ", "px;\n border-end-end-radius: ", "px;\n "])), token.borderRadiusLG, token.borderRadiusLG),
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
filled: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))),
|
|
22
|
+
extraHeader: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-block-start: 1px dashed;\n border-radius: 0;\n background: transparent !important;\n "]))),
|
|
23
|
+
filled: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""]))),
|
|
25
24
|
glass: stylish.blur,
|
|
26
|
-
hasExtra: css(
|
|
27
|
-
outlined: css(
|
|
28
|
-
root: cx(css(
|
|
25
|
+
hasExtra: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n border-block-end: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n "]))),
|
|
26
|
+
outlined: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background: transparent !important;\n "]))),
|
|
27
|
+
root: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: row;\n gap: ", "px;\n align-items: flex-start;\n\n max-width: 100%;\n padding-block: ", "px;\n padding-inline: ", "px\n ", "px;\n\n .", "-alert-message {\n font-weight: ", ";\n line-height: 24px;\n word-break: normal;\n }\n .", "-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .", "-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n "])), hasTitle ? 12 : 8, baseBlockPadding, showIcon ? baseInlinePadding * 0.75 : baseInlinePadding, closable ? baseInlinePadding * 0.75 : baseInlinePadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", "-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n "])), prefixCls))
|
|
29
28
|
};
|
|
30
29
|
});
|
package/es/Alert/type.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { AlertProps as AntAlertProps } from 'antd';
|
|
2
2
|
import type { AlertRef } from 'antd/lib/alert/Alert';
|
|
3
|
-
import type { ReactNode, Ref } from 'react';
|
|
3
|
+
import type { CSSProperties, ReactNode, Ref } from 'react';
|
|
4
4
|
import type { IconProps } from "../Icon";
|
|
5
5
|
export interface AlertProps extends Omit<AntAlertProps, 'icon' | 'type'> {
|
|
6
6
|
classNames?: {
|
|
7
7
|
alert?: string;
|
|
8
8
|
container?: string;
|
|
9
|
+
extraContent?: string;
|
|
9
10
|
};
|
|
10
11
|
colorfulText?: boolean;
|
|
11
12
|
extra?: ReactNode;
|
|
@@ -15,6 +16,11 @@ export interface AlertProps extends Omit<AntAlertProps, 'icon' | 'type'> {
|
|
|
15
16
|
icon?: IconProps['icon'];
|
|
16
17
|
iconProps?: Omit<IconProps, 'icon'>;
|
|
17
18
|
ref?: Ref<AlertRef>;
|
|
19
|
+
styles?: {
|
|
20
|
+
alert?: CSSProperties;
|
|
21
|
+
container?: CSSProperties;
|
|
22
|
+
extraContent?: CSSProperties;
|
|
23
|
+
};
|
|
18
24
|
text?: {
|
|
19
25
|
detail?: string;
|
|
20
26
|
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["title", "description", "icon", "image", "emoji", "imageSize", "iconColor", "action", "children", "imageProps", "align", "actionProps", "type", "titleProps", "descriptionProps"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { Empty as AntEmpty } from 'antd';
|
|
13
|
+
import { useTheme } from 'antd-style';
|
|
14
|
+
import { memo } from 'react';
|
|
15
|
+
import { Flexbox } from 'react-layout-kit';
|
|
16
|
+
import Block from "../Block";
|
|
17
|
+
import FluentEmoji from "../FluentEmoji";
|
|
18
|
+
import Icon from "../Icon";
|
|
19
|
+
import Text from "../Text";
|
|
20
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
var Empty = /*#__PURE__*/memo(function (_ref) {
|
|
23
|
+
var title = _ref.title,
|
|
24
|
+
description = _ref.description,
|
|
25
|
+
icon = _ref.icon,
|
|
26
|
+
image = _ref.image,
|
|
27
|
+
emoji = _ref.emoji,
|
|
28
|
+
_ref$imageSize = _ref.imageSize,
|
|
29
|
+
imageSize = _ref$imageSize === void 0 ? 48 : _ref$imageSize,
|
|
30
|
+
iconColor = _ref.iconColor,
|
|
31
|
+
action = _ref.action,
|
|
32
|
+
children = _ref.children,
|
|
33
|
+
imageProps = _ref.imageProps,
|
|
34
|
+
align = _ref.align,
|
|
35
|
+
actionProps = _ref.actionProps,
|
|
36
|
+
_ref$type = _ref.type,
|
|
37
|
+
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
38
|
+
titleProps = _ref.titleProps,
|
|
39
|
+
descriptionProps = _ref.descriptionProps,
|
|
40
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
+
var theme = useTheme();
|
|
42
|
+
var isPage = type === 'page';
|
|
43
|
+
var alignValue = align || (isPage ? 'flex-start' : 'center');
|
|
44
|
+
var isCenter = alignValue === 'center';
|
|
45
|
+
var fallbackImage = AntEmpty.PRESENTED_IMAGE_SIMPLE;
|
|
46
|
+
var hasImage = image || emoji || icon;
|
|
47
|
+
var cover = hasImage ? image ? image : /*#__PURE__*/_jsxs(Block, _objectSpread(_objectSpread({
|
|
48
|
+
align: 'center',
|
|
49
|
+
flex: 'none',
|
|
50
|
+
height: imageSize,
|
|
51
|
+
justify: "center",
|
|
52
|
+
variant: 'outlined',
|
|
53
|
+
width: imageSize
|
|
54
|
+
}, imageProps), {}, {
|
|
55
|
+
style: _objectSpread({
|
|
56
|
+
marginBottom: 4
|
|
57
|
+
}, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style),
|
|
58
|
+
children: [icon && /*#__PURE__*/_jsx(Icon, {
|
|
59
|
+
color: iconColor || (theme.isDarkMode ? theme.colorTextQuaternary : theme.colorTextSecondary),
|
|
60
|
+
icon: icon,
|
|
61
|
+
size: imageSize * 0.66
|
|
62
|
+
}), emoji && /*#__PURE__*/_jsx(FluentEmoji, {
|
|
63
|
+
emoji: emoji,
|
|
64
|
+
size: imageSize * 0.75,
|
|
65
|
+
type: 'anim'
|
|
66
|
+
})]
|
|
67
|
+
})) : fallbackImage;
|
|
68
|
+
return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
|
|
69
|
+
align: alignValue,
|
|
70
|
+
gap: 8,
|
|
71
|
+
padding: 16
|
|
72
|
+
}, rest), {}, {
|
|
73
|
+
children: [cover, /*#__PURE__*/_jsxs(Flexbox, {
|
|
74
|
+
align: alignValue,
|
|
75
|
+
gap: isPage ? 4 : 1,
|
|
76
|
+
children: [title && /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
|
|
77
|
+
align: isCenter ? 'center' : undefined,
|
|
78
|
+
fontSize: isPage ? 24 : 16,
|
|
79
|
+
weight: 'bold'
|
|
80
|
+
}, titleProps), {}, {
|
|
81
|
+
children: title
|
|
82
|
+
})), description && /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
|
|
83
|
+
align: isCenter ? 'center' : undefined,
|
|
84
|
+
color: isPage ? theme.colorTextSecondary : theme.colorTextDescription,
|
|
85
|
+
fontSize: isPage ? 16 : 14
|
|
86
|
+
}, descriptionProps), {}, {
|
|
87
|
+
children: description
|
|
88
|
+
}))]
|
|
89
|
+
}), children, action && /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
90
|
+
gap: 4
|
|
91
|
+
}, actionProps), {}, {
|
|
92
|
+
children: action
|
|
93
|
+
}))]
|
|
94
|
+
}));
|
|
95
|
+
});
|
|
96
|
+
Empty.displayName = 'Empty';
|
|
97
|
+
export default Empty;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Empty";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { FlexboxProps } from 'react-layout-kit';
|
|
3
|
+
import { BlockProps } from "../Block";
|
|
4
|
+
import { IconProps } from "../Icon";
|
|
5
|
+
import { TextProps } from "../Text";
|
|
6
|
+
export interface EmptyProps extends Omit<FlexboxProps, 'title'> {
|
|
7
|
+
action?: ReactNode;
|
|
8
|
+
actionProps?: Omit<FlexboxProps, 'children'>;
|
|
9
|
+
description?: ReactNode;
|
|
10
|
+
descriptionProps?: Omit<TextProps, 'children'>;
|
|
11
|
+
emoji?: string;
|
|
12
|
+
icon?: IconProps['icon'];
|
|
13
|
+
iconColor?: IconProps['color'];
|
|
14
|
+
image?: ReactNode;
|
|
15
|
+
imageProps?: Omit<BlockProps, 'children'>;
|
|
16
|
+
imageSize?: number;
|
|
17
|
+
title?: ReactNode;
|
|
18
|
+
titleProps?: Omit<TextProps, 'children'>;
|
|
19
|
+
type?: 'default' | 'page';
|
|
20
|
+
}
|
package/es/Empty/type.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
var _excluded = ["active", "avatar", "title", "paragraph", "className", "classNames", "styles", "style", "width", "height", "gap"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
7
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
8
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import { Flexbox } from 'react-layout-kit';
|
|
14
|
+
import SkeletonAvatar from "./SkeletonAvatar";
|
|
15
|
+
import SkeletonParagraph from "./SkeletonParagraph";
|
|
16
|
+
import SkeletonTitle from "./SkeletonTitle";
|
|
17
|
+
import { useStyles } from "./style";
|
|
18
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
var Skeleton = /*#__PURE__*/memo(function (_ref) {
|
|
21
|
+
var _avatarProps$active, _titleProps$active, _paragraphProps$activ;
|
|
22
|
+
var active = _ref.active,
|
|
23
|
+
_ref$avatar = _ref.avatar,
|
|
24
|
+
avatar = _ref$avatar === void 0 ? false : _ref$avatar,
|
|
25
|
+
_ref$title = _ref.title,
|
|
26
|
+
title = _ref$title === void 0 ? true : _ref$title,
|
|
27
|
+
_ref$paragraph = _ref.paragraph,
|
|
28
|
+
paragraph = _ref$paragraph === void 0 ? true : _ref$paragraph,
|
|
29
|
+
className = _ref.className,
|
|
30
|
+
classNames = _ref.classNames,
|
|
31
|
+
customStyles = _ref.styles,
|
|
32
|
+
style = _ref.style,
|
|
33
|
+
width = _ref.width,
|
|
34
|
+
height = _ref.height,
|
|
35
|
+
_ref$gap = _ref.gap,
|
|
36
|
+
gap = _ref$gap === void 0 ? 16 : _ref$gap,
|
|
37
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
+
var _useStyles = useStyles(),
|
|
39
|
+
cx = _useStyles.cx,
|
|
40
|
+
styles = _useStyles.styles;
|
|
41
|
+
var showAvatar = Boolean(avatar);
|
|
42
|
+
var showTitle = Boolean(title);
|
|
43
|
+
var showParagraph = Boolean(paragraph);
|
|
44
|
+
var avatarProps = _typeof(avatar) === 'object' ? avatar : undefined;
|
|
45
|
+
var titleProps = _typeof(title) === 'object' ? title : undefined;
|
|
46
|
+
var paragraphProps = _typeof(paragraph) === 'object' ? paragraph : undefined;
|
|
47
|
+
var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.root), width !== undefined ? {
|
|
48
|
+
width: width
|
|
49
|
+
} : {}), height !== undefined ? {
|
|
50
|
+
height: height
|
|
51
|
+
} : {});
|
|
52
|
+
var avatarActive = (_avatarProps$active = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.active) !== null && _avatarProps$active !== void 0 ? _avatarProps$active : active;
|
|
53
|
+
var titleActive = (_titleProps$active = titleProps === null || titleProps === void 0 ? void 0 : titleProps.active) !== null && _titleProps$active !== void 0 ? _titleProps$active : active;
|
|
54
|
+
var paragraphActive = (_paragraphProps$activ = paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.active) !== null && _paragraphProps$activ !== void 0 ? _paragraphProps$activ : active;
|
|
55
|
+
return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
|
|
56
|
+
align: showParagraph ? 'flex-start' : 'center',
|
|
57
|
+
className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
|
|
58
|
+
gap: gap,
|
|
59
|
+
horizontal: true,
|
|
60
|
+
style: rootStyle,
|
|
61
|
+
width: '100%'
|
|
62
|
+
}, rest), {}, {
|
|
63
|
+
children: [showAvatar && /*#__PURE__*/_jsx(SkeletonAvatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
|
|
64
|
+
active: avatarActive,
|
|
65
|
+
className: cx(styles.avatar, classNames === null || classNames === void 0 ? void 0 : classNames.avatar, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className),
|
|
66
|
+
style: _objectSpread(_objectSpread({}, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.avatar)
|
|
67
|
+
})), /*#__PURE__*/_jsxs(Flexbox, {
|
|
68
|
+
gap: gap,
|
|
69
|
+
width: '100%',
|
|
70
|
+
children: [showTitle && /*#__PURE__*/_jsx(SkeletonTitle, _objectSpread(_objectSpread({}, titleProps), {}, {
|
|
71
|
+
active: titleActive,
|
|
72
|
+
className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.title, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className),
|
|
73
|
+
style: _objectSpread(_objectSpread({}, titleProps === null || titleProps === void 0 ? void 0 : titleProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.title)
|
|
74
|
+
})), showParagraph && /*#__PURE__*/_jsx(SkeletonParagraph, _objectSpread(_objectSpread({}, paragraphProps), {}, {
|
|
75
|
+
active: paragraphActive,
|
|
76
|
+
className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.paragraph, paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.className),
|
|
77
|
+
style: _objectSpread(_objectSpread({}, paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph)
|
|
78
|
+
}))]
|
|
79
|
+
})]
|
|
80
|
+
}));
|
|
81
|
+
});
|
|
82
|
+
Skeleton.displayName = 'Skeleton';
|
|
83
|
+
export default Skeleton;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["active", "shape", "size", "width", "height", "style", "className"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
14
|
+
import { useStyles } from "./style";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
var DEFAULT_SIZE = 40;
|
|
17
|
+
var SkeletonAvatar = /*#__PURE__*/memo(function (_ref) {
|
|
18
|
+
var active = _ref.active,
|
|
19
|
+
_ref$shape = _ref.shape,
|
|
20
|
+
shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
|
|
21
|
+
size = _ref.size,
|
|
22
|
+
width = _ref.width,
|
|
23
|
+
height = _ref.height,
|
|
24
|
+
style = _ref.style,
|
|
25
|
+
className = _ref.className,
|
|
26
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
+
var _useStyles = useStyles(),
|
|
28
|
+
cx = _useStyles.cx,
|
|
29
|
+
styles = _useStyles.styles,
|
|
30
|
+
theme = _useStyles.theme;
|
|
31
|
+
var defaultSize = size !== null && size !== void 0 ? size : DEFAULT_SIZE;
|
|
32
|
+
var finalWidth = width !== null && width !== void 0 ? width : defaultSize;
|
|
33
|
+
var finalHeight = height !== null && height !== void 0 ? height : defaultSize;
|
|
34
|
+
var borderRadius = shape === 'circle' ? '50%' : "".concat(theme.borderRadius, "px");
|
|
35
|
+
return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
|
|
36
|
+
active: active,
|
|
37
|
+
className: cx(styles.avatar, className),
|
|
38
|
+
height: finalHeight,
|
|
39
|
+
style: _objectSpread({
|
|
40
|
+
borderRadius: borderRadius
|
|
41
|
+
}, style),
|
|
42
|
+
width: finalWidth
|
|
43
|
+
}, rest));
|
|
44
|
+
});
|
|
45
|
+
SkeletonAvatar.displayName = 'SkeletonAvatar';
|
|
46
|
+
export default SkeletonAvatar;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { memo } from 'react';
|
|
4
|
+
import Block from "../Block";
|
|
5
|
+
import { useStyles } from "./style";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
var SkeletonBlock = /*#__PURE__*/memo(function (_ref) {
|
|
8
|
+
var _ref$width = _ref.width,
|
|
9
|
+
width = _ref$width === void 0 ? '100%' : _ref$width,
|
|
10
|
+
_ref$height = _ref.height,
|
|
11
|
+
height = _ref$height === void 0 ? '1em' : _ref$height,
|
|
12
|
+
active = _ref.active,
|
|
13
|
+
style = _ref.style,
|
|
14
|
+
className = _ref.className;
|
|
15
|
+
var _useStyles = useStyles(),
|
|
16
|
+
cx = _useStyles.cx,
|
|
17
|
+
styles = _useStyles.styles;
|
|
18
|
+
return /*#__PURE__*/_jsx(Block, {
|
|
19
|
+
className: cx(styles.base, active && styles.active, className),
|
|
20
|
+
height: height,
|
|
21
|
+
style: style,
|
|
22
|
+
variant: 'filled',
|
|
23
|
+
width: width
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
SkeletonBlock.displayName = 'SkeletonBlock';
|
|
27
|
+
export default SkeletonBlock;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["active", "block", "shape", "size", "width", "height", "style", "className"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
14
|
+
import { useStyles } from "./style";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
var HEIGHT_MAP = {
|
|
17
|
+
default: 36,
|
|
18
|
+
large: 46,
|
|
19
|
+
small: 28
|
|
20
|
+
};
|
|
21
|
+
var SkeletonButton = /*#__PURE__*/memo(function (_ref) {
|
|
22
|
+
var active = _ref.active,
|
|
23
|
+
_ref$block = _ref.block,
|
|
24
|
+
block = _ref$block === void 0 ? false : _ref$block,
|
|
25
|
+
_ref$shape = _ref.shape,
|
|
26
|
+
shape = _ref$shape === void 0 ? 'default' : _ref$shape,
|
|
27
|
+
_ref$size = _ref.size,
|
|
28
|
+
size = _ref$size === void 0 ? 'default' : _ref$size,
|
|
29
|
+
width = _ref.width,
|
|
30
|
+
height = _ref.height,
|
|
31
|
+
style = _ref.style,
|
|
32
|
+
className = _ref.className,
|
|
33
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
34
|
+
var _useStyles = useStyles(),
|
|
35
|
+
theme = _useStyles.theme;
|
|
36
|
+
var resolvedSize = size !== null && size !== void 0 ? size : 'default';
|
|
37
|
+
var baseHeight = height !== null && height !== void 0 ? height : HEIGHT_MAP[resolvedSize];
|
|
38
|
+
var defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;
|
|
39
|
+
var finalWidth = width !== null && width !== void 0 ? width : defaultWidth;
|
|
40
|
+
var RADIUS_MAP = {
|
|
41
|
+
default: theme.borderRadius,
|
|
42
|
+
large: theme.borderRadiusLG,
|
|
43
|
+
small: theme.borderRadiusSM
|
|
44
|
+
};
|
|
45
|
+
var borderRadius = shape === 'circle' ? '50%' : shape === 'round' ? "".concat(theme.borderRadius * 2, "px") : RADIUS_MAP[resolvedSize];
|
|
46
|
+
return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
|
|
47
|
+
active: active,
|
|
48
|
+
className: className,
|
|
49
|
+
height: baseHeight,
|
|
50
|
+
style: _objectSpread({
|
|
51
|
+
borderRadius: borderRadius
|
|
52
|
+
}, style),
|
|
53
|
+
width: finalWidth
|
|
54
|
+
}, rest));
|
|
55
|
+
});
|
|
56
|
+
SkeletonButton.displayName = 'SkeletonButton';
|
|
57
|
+
export default SkeletonButton;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["active", "rows", "gap", "width", "height", "fontSize", "lineHeight", "style", "className"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import { Flexbox } from 'react-layout-kit';
|
|
14
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
var DEFAULT_ROWS = 3;
|
|
17
|
+
var SkeletonParagraph = /*#__PURE__*/memo(function (_ref) {
|
|
18
|
+
var active = _ref.active,
|
|
19
|
+
_ref$rows = _ref.rows,
|
|
20
|
+
rows = _ref$rows === void 0 ? DEFAULT_ROWS : _ref$rows,
|
|
21
|
+
gap = _ref.gap,
|
|
22
|
+
width = _ref.width,
|
|
23
|
+
height = _ref.height,
|
|
24
|
+
fontSize = _ref.fontSize,
|
|
25
|
+
lineHeight = _ref.lineHeight,
|
|
26
|
+
style = _ref.style,
|
|
27
|
+
className = _ref.className,
|
|
28
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
29
|
+
var rowGap = gap;
|
|
30
|
+
var rowCount = Math.max(rows, 1);
|
|
31
|
+
var baseFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : 14;
|
|
32
|
+
var resolvedLineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1.6;
|
|
33
|
+
var computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);
|
|
34
|
+
var marginBlock = computedHeight - baseFontSize;
|
|
35
|
+
var widthList = Array.isArray(width) ? width : null;
|
|
36
|
+
var getRowWidth = function getRowWidth(index) {
|
|
37
|
+
var _ref2, _widthList$index;
|
|
38
|
+
if (widthList) return (_ref2 = (_widthList$index = widthList[index]) !== null && _widthList$index !== void 0 ? _widthList$index : widthList.at(-1)) !== null && _ref2 !== void 0 ? _ref2 : '100%';
|
|
39
|
+
if (width !== undefined) return width;
|
|
40
|
+
if (index === rowCount - 1) return '66%';
|
|
41
|
+
return '100%';
|
|
42
|
+
};
|
|
43
|
+
var containerStyle = _objectSpread({
|
|
44
|
+
gap: rowGap
|
|
45
|
+
}, style);
|
|
46
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
47
|
+
className: className,
|
|
48
|
+
gap: gap || marginBlock,
|
|
49
|
+
style: containerStyle,
|
|
50
|
+
width: '100%'
|
|
51
|
+
}, rest), {}, {
|
|
52
|
+
children: Array.from({
|
|
53
|
+
length: rowCount
|
|
54
|
+
}).map(function (_, index) {
|
|
55
|
+
return /*#__PURE__*/_jsx(SkeletonBlock, {
|
|
56
|
+
active: active,
|
|
57
|
+
height: baseFontSize,
|
|
58
|
+
width: getRowWidth(index)
|
|
59
|
+
}, index);
|
|
60
|
+
})
|
|
61
|
+
}));
|
|
62
|
+
});
|
|
63
|
+
SkeletonParagraph.displayName = 'SkeletonParagraph';
|
|
64
|
+
export default SkeletonParagraph;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["active", "className", "count", "gap", "height", "size", "style", "width"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import { Flexbox } from 'react-layout-kit';
|
|
14
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
15
|
+
import { useStyles } from "./style";
|
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
+
var DEFAULT_COUNT = 1;
|
|
18
|
+
var HEIGHT_MAP = {
|
|
19
|
+
large: 28,
|
|
20
|
+
middle: 22,
|
|
21
|
+
small: 20
|
|
22
|
+
};
|
|
23
|
+
var DEFAULT_WIDTH_MAP = {
|
|
24
|
+
large: 64,
|
|
25
|
+
middle: 48,
|
|
26
|
+
small: 36
|
|
27
|
+
};
|
|
28
|
+
var SkeletonTags = /*#__PURE__*/memo(function (_ref) {
|
|
29
|
+
var _ref2;
|
|
30
|
+
var active = _ref.active,
|
|
31
|
+
className = _ref.className,
|
|
32
|
+
_ref$count = _ref.count,
|
|
33
|
+
count = _ref$count === void 0 ? DEFAULT_COUNT : _ref$count,
|
|
34
|
+
gap = _ref.gap,
|
|
35
|
+
height = _ref.height,
|
|
36
|
+
_ref$size = _ref.size,
|
|
37
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size,
|
|
38
|
+
style = _ref.style,
|
|
39
|
+
width = _ref.width,
|
|
40
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
+
var _useStyles = useStyles(),
|
|
42
|
+
theme = _useStyles.theme;
|
|
43
|
+
var resolvedGap = (_ref2 = gap !== null && gap !== void 0 ? gap : theme.paddingXS) !== null && _ref2 !== void 0 ? _ref2 : 4;
|
|
44
|
+
var resolvedCount = Math.max(count, 1);
|
|
45
|
+
var resolvedHeight = height !== null && height !== void 0 ? height : HEIGHT_MAP[size];
|
|
46
|
+
var widthList = Array.isArray(width) ? width : null;
|
|
47
|
+
var defaultWidth = DEFAULT_WIDTH_MAP[size];
|
|
48
|
+
var RADIUS_MAP = {
|
|
49
|
+
large: theme.borderRadius,
|
|
50
|
+
middle: theme.borderRadiusSM,
|
|
51
|
+
small: theme.borderRadiusXS
|
|
52
|
+
};
|
|
53
|
+
var getWidth = function getWidth(index) {
|
|
54
|
+
var _ref3, _widthList$index;
|
|
55
|
+
if (widthList) return (_ref3 = (_widthList$index = widthList[index]) !== null && _widthList$index !== void 0 ? _widthList$index : widthList.at(-1)) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
|
|
56
|
+
if (width !== undefined) return width;
|
|
57
|
+
return defaultWidth;
|
|
58
|
+
};
|
|
59
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
60
|
+
className: className,
|
|
61
|
+
horizontal: true,
|
|
62
|
+
style: _objectSpread({
|
|
63
|
+
gap: resolvedGap
|
|
64
|
+
}, style)
|
|
65
|
+
}, rest), {}, {
|
|
66
|
+
children: Array.from({
|
|
67
|
+
length: resolvedCount
|
|
68
|
+
}).map(function (_, index) {
|
|
69
|
+
return /*#__PURE__*/_jsx(SkeletonBlock, {
|
|
70
|
+
active: active,
|
|
71
|
+
height: resolvedHeight,
|
|
72
|
+
style: {
|
|
73
|
+
borderRadius: RADIUS_MAP[size]
|
|
74
|
+
},
|
|
75
|
+
width: getWidth(index)
|
|
76
|
+
}, index);
|
|
77
|
+
})
|
|
78
|
+
}));
|
|
79
|
+
});
|
|
80
|
+
SkeletonTags.displayName = 'SkeletonTags';
|
|
81
|
+
export default SkeletonTags;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["active", "fontSize", "lineHeight", "height", "width", "style", "className"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { memo } from 'react';
|
|
13
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
14
|
+
import { useStyles } from "./style";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
var DEFAULT_FONT_SIZE = 18;
|
|
17
|
+
var SkeletonTitle = /*#__PURE__*/memo(function (_ref) {
|
|
18
|
+
var _ref2;
|
|
19
|
+
var active = _ref.active,
|
|
20
|
+
fontSize = _ref.fontSize,
|
|
21
|
+
lineHeight = _ref.lineHeight,
|
|
22
|
+
height = _ref.height,
|
|
23
|
+
_ref$width = _ref.width,
|
|
24
|
+
width = _ref$width === void 0 ? '60%' : _ref$width,
|
|
25
|
+
style = _ref.style,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
+
var _useStyles = useStyles(),
|
|
29
|
+
theme = _useStyles.theme;
|
|
30
|
+
var baseFontSize = (_ref2 = fontSize !== null && fontSize !== void 0 ? fontSize : theme.fontSize) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_FONT_SIZE;
|
|
31
|
+
var resolvedLineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1.6;
|
|
32
|
+
var computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);
|
|
33
|
+
var marginBlock = computedHeight - baseFontSize;
|
|
34
|
+
return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
|
|
35
|
+
active: active,
|
|
36
|
+
className: className,
|
|
37
|
+
height: Math.round(baseFontSize + marginBlock * 0.5),
|
|
38
|
+
style: _objectSpread({
|
|
39
|
+
marginBlock: Math.round(marginBlock * 0.5 / 2)
|
|
40
|
+
}, style),
|
|
41
|
+
width: width
|
|
42
|
+
}, rest));
|
|
43
|
+
});
|
|
44
|
+
SkeletonTitle.displayName = 'SkeletonTitle';
|
|
45
|
+
export default SkeletonTitle;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { SkeletonProps } from "./type";
|
|
3
|
+
import SkeletonAvatar from './SkeletonAvatar';
|
|
4
|
+
import SkeletonBlock from './SkeletonBlock';
|
|
5
|
+
import SkeletonButton from './SkeletonButton';
|
|
6
|
+
import SkeletonParagraph from './SkeletonParagraph';
|
|
7
|
+
import SkeletonTags from './SkeletonTags';
|
|
8
|
+
import SkeletonTitle from './SkeletonTitle';
|
|
9
|
+
interface ISkeleton {
|
|
10
|
+
(props: SkeletonProps): ReactNode;
|
|
11
|
+
Avatar: typeof SkeletonAvatar;
|
|
12
|
+
Block: typeof SkeletonBlock;
|
|
13
|
+
Button: typeof SkeletonButton;
|
|
14
|
+
Paragraph: typeof SkeletonParagraph;
|
|
15
|
+
Tags: typeof SkeletonTags;
|
|
16
|
+
Title: typeof SkeletonTitle;
|
|
17
|
+
}
|
|
18
|
+
declare const Skeleton: ISkeleton;
|
|
19
|
+
export default Skeleton;
|
|
20
|
+
export { default as SkeletonAvatar } from './SkeletonAvatar';
|
|
21
|
+
export { default as SkeletonBlock } from './SkeletonBlock';
|
|
22
|
+
export { default as SkeletonButton } from './SkeletonButton';
|
|
23
|
+
export { default as SkeletonParagraph } from './SkeletonParagraph';
|
|
24
|
+
export { default as SkeletonTags } from './SkeletonTags';
|
|
25
|
+
export { default as SkeletonTitle } from './SkeletonTitle';
|
|
26
|
+
export type * from './type';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import SkeletonParent from "./Skeleton";
|
|
2
|
+
import SkeletonAvatar from "./SkeletonAvatar";
|
|
3
|
+
import SkeletonBlock from "./SkeletonBlock";
|
|
4
|
+
import SkeletonButton from "./SkeletonButton";
|
|
5
|
+
import SkeletonParagraph from "./SkeletonParagraph";
|
|
6
|
+
import SkeletonTags from "./SkeletonTags";
|
|
7
|
+
import SkeletonTitle from "./SkeletonTitle";
|
|
8
|
+
var Skeleton = SkeletonParent;
|
|
9
|
+
Skeleton.Block = SkeletonBlock;
|
|
10
|
+
Skeleton.Avatar = SkeletonAvatar;
|
|
11
|
+
Skeleton.Title = SkeletonTitle;
|
|
12
|
+
Skeleton.Paragraph = SkeletonParagraph;
|
|
13
|
+
Skeleton.Button = SkeletonButton;
|
|
14
|
+
Skeleton.Tags = SkeletonTags;
|
|
15
|
+
export default Skeleton;
|
|
16
|
+
export { default as SkeletonAvatar } from "./SkeletonAvatar";
|
|
17
|
+
export { default as SkeletonBlock } from "./SkeletonBlock";
|
|
18
|
+
export { default as SkeletonButton } from "./SkeletonButton";
|
|
19
|
+
export { default as SkeletonParagraph } from "./SkeletonParagraph";
|
|
20
|
+
export { default as SkeletonTags } from "./SkeletonTags";
|
|
21
|
+
export { default as SkeletonTitle } from "./SkeletonTitle";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
active: import("antd-style").SerializedStyles;
|
|
3
|
+
avatar: import("antd-style").SerializedStyles;
|
|
4
|
+
base: import("antd-style").SerializedStyles;
|
|
5
|
+
text: import("antd-style").SerializedStyles;
|
|
6
|
+
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles, keyframes } from 'antd-style';
|
|
4
|
+
var shimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n 100% {\n opacity: 1;\n }\n"])));
|
|
5
|
+
export var useStyles = createStyles(function (_ref) {
|
|
6
|
+
var _token$paddingXS;
|
|
7
|
+
var css = _ref.css,
|
|
8
|
+
token = _ref.token;
|
|
9
|
+
var spacing = (_token$paddingXS = token.paddingXS) !== null && _token$paddingXS !== void 0 ? _token$paddingXS : 8;
|
|
10
|
+
return {
|
|
11
|
+
active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n animation: ", " 2s linear infinite;\n "])), token.colorFillSecondary, shimmer),
|
|
12
|
+
avatar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n "]))),
|
|
13
|
+
base: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n\n border-radius: ", "px;\n\n background: ", ";\n "])), token.borderRadius, token.colorFillTertiary),
|
|
14
|
+
text: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: ", "px;\n\n width: 100%;\n "])), spacing)
|
|
15
|
+
};
|
|
16
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export interface SkeletonBlockProps {
|
|
3
|
+
active?: boolean;
|
|
4
|
+
className?: string;
|
|
5
|
+
height?: number | string;
|
|
6
|
+
style?: CSSProperties;
|
|
7
|
+
width?: number | string;
|
|
8
|
+
}
|
|
9
|
+
export interface SkeletonTitleProps extends Omit<SkeletonBlockProps, 'height'> {
|
|
10
|
+
fontSize?: number;
|
|
11
|
+
height?: number;
|
|
12
|
+
lineHeight?: number;
|
|
13
|
+
width?: number | string;
|
|
14
|
+
}
|
|
15
|
+
export interface SkeletonParagraphProps extends Omit<SkeletonBlockProps, 'width' | 'height'> {
|
|
16
|
+
fontSize?: number;
|
|
17
|
+
gap?: number;
|
|
18
|
+
height?: number;
|
|
19
|
+
lineHeight?: number;
|
|
20
|
+
rows?: number;
|
|
21
|
+
width?: number | string | (number | string)[];
|
|
22
|
+
}
|
|
23
|
+
export interface SkeletonTagsProps extends Omit<SkeletonBlockProps, 'width'> {
|
|
24
|
+
count?: number;
|
|
25
|
+
gap?: number;
|
|
26
|
+
size?: 'small' | 'middle' | 'large';
|
|
27
|
+
width?: number | string | (number | string)[];
|
|
28
|
+
}
|
|
29
|
+
export interface SkeletonAvatarProps extends SkeletonBlockProps {
|
|
30
|
+
shape?: 'circle' | 'square';
|
|
31
|
+
size?: number | string;
|
|
32
|
+
}
|
|
33
|
+
export interface SkeletonButtonProps extends SkeletonBlockProps {
|
|
34
|
+
block?: boolean;
|
|
35
|
+
shape?: 'circle' | 'round' | 'default';
|
|
36
|
+
size?: 'large' | 'small' | 'default';
|
|
37
|
+
}
|
|
38
|
+
export interface SkeletonProps extends SkeletonBlockProps {
|
|
39
|
+
avatar?: SkeletonAvatarProps | boolean;
|
|
40
|
+
classNames?: {
|
|
41
|
+
avatar?: string;
|
|
42
|
+
paragraph?: string;
|
|
43
|
+
root?: string;
|
|
44
|
+
title?: string;
|
|
45
|
+
};
|
|
46
|
+
gap?: number;
|
|
47
|
+
paragraph?: SkeletonParagraphProps | boolean;
|
|
48
|
+
styles?: {
|
|
49
|
+
avatar?: CSSProperties;
|
|
50
|
+
paragraph?: CSSProperties;
|
|
51
|
+
root?: CSSProperties;
|
|
52
|
+
title?: CSSProperties;
|
|
53
|
+
};
|
|
54
|
+
title?: SkeletonTitleProps | boolean;
|
|
55
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/es/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export { default as Drawer, type DrawerProps } from './Drawer';
|
|
|
20
20
|
export { default as Dropdown, type DropdownMenuItemType, type DropdownProps } from './Dropdown';
|
|
21
21
|
export { default as EditableText, type EditableTextProps } from './EditableText';
|
|
22
22
|
export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
|
|
23
|
+
export { default as Empty, type EmptyProps } from './Empty';
|
|
23
24
|
export { default as FileTypeIcon, type FileTypeIconProps } from './FileTypeIcon';
|
|
24
25
|
export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
|
|
25
26
|
export { default as FontLoader, type FontLoaderProps } from './FontLoader';
|
|
@@ -60,6 +61,7 @@ export { default as SearchBar, type SearchBarProps } from './SearchBar';
|
|
|
60
61
|
export { default as Segmented, type SegmentedProps } from './Segmented';
|
|
61
62
|
export { default as Select, type SelectProps } from './Select';
|
|
62
63
|
export { default as SideNav, type SideNavProps } from './SideNav';
|
|
64
|
+
export { default as Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, } from './Skeleton';
|
|
63
65
|
export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
|
|
64
66
|
export { default as Snippet, type SnippetProps } from './Snippet';
|
|
65
67
|
export { default as SortableList, type SortableListProps } from './SortableList';
|
package/es/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export { default as Drawer } from "./Drawer";
|
|
|
20
20
|
export { default as Dropdown } from "./Dropdown";
|
|
21
21
|
export { default as EditableText } from "./EditableText";
|
|
22
22
|
export { default as EmojiPicker } from "./EmojiPicker";
|
|
23
|
+
export { default as Empty } from "./Empty";
|
|
23
24
|
export { default as FileTypeIcon } from "./FileTypeIcon";
|
|
24
25
|
export { default as FluentEmoji } from "./FluentEmoji";
|
|
25
26
|
export { default as FontLoader } from "./FontLoader";
|
|
@@ -60,6 +61,7 @@ export { default as SearchBar } from "./SearchBar";
|
|
|
60
61
|
export { default as Segmented } from "./Segmented";
|
|
61
62
|
export { default as Select } from "./Select";
|
|
62
63
|
export { default as SideNav } from "./SideNav";
|
|
64
|
+
export { default as Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle } from "./Skeleton";
|
|
63
65
|
export { default as SliderWithInput } from "./SliderWithInput";
|
|
64
66
|
export { default as Snippet } from "./Snippet";
|
|
65
67
|
export { default as SortableList } from "./SortableList";
|