@trionesdev/antd-mobile-base-react 0.0.2-beta.2 → 0.0.2-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/dist/Alert/alert.js +1 -1
  2. package/dist/Alert/style.scss +17 -17
  3. package/dist/Avatar/avatar.d.ts +4 -1
  4. package/dist/Avatar/avatar.js +19 -6
  5. package/dist/Avatar/style.scss +3 -2
  6. package/dist/Card/style.scss +12 -12
  7. package/dist/CascaderView/cascader-column-item.js +1 -1
  8. package/dist/CascaderView/style.scss +2 -2
  9. package/dist/Cell/CellGroup.js +53 -14
  10. package/dist/Cell/cell.js +52 -15
  11. package/dist/Cell/context.d.ts +19 -0
  12. package/dist/Cell/context.js +2 -0
  13. package/dist/Cell/styles.scss +42 -13
  14. package/dist/Cell/types.d.ts +30 -7
  15. package/dist/Checkbox/checkbox-button.d.ts +6 -2
  16. package/dist/Checkbox/checkbox-button.js +6 -18
  17. package/dist/Checkbox/checkbox-group.js +19 -4
  18. package/dist/Checkbox/checkbox-round.d.ts +8 -0
  19. package/dist/Checkbox/checkbox-round.js +35 -0
  20. package/dist/Checkbox/checkbox.js +49 -34
  21. package/dist/Checkbox/index.d.ts +0 -2
  22. package/dist/Checkbox/index.js +0 -2
  23. package/dist/Checkbox/index.scss +48 -34
  24. package/dist/Checkbox/types.d.ts +11 -1
  25. package/dist/ConfigProvider/config-provider.d.ts +1 -0
  26. package/dist/Descriptions/style.scss +4 -4
  27. package/dist/Divider/divider.d.ts +1 -1
  28. package/dist/Divider/divider.js +5 -3
  29. package/dist/Divider/style.scss +7 -7
  30. package/dist/Form/ErrorList.d.ts +4 -0
  31. package/dist/Form/ErrorList.js +9 -0
  32. package/dist/Form/context.d.ts +5 -2
  33. package/dist/Form/context.js +2 -1
  34. package/dist/Form/form.d.ts +25 -12
  35. package/dist/Form/form.js +25 -13
  36. package/dist/Form/hooks/useForm.js +1 -8
  37. package/dist/Form/hooks/useFormContext.js +1 -2
  38. package/dist/Form/index.d.ts +8 -3
  39. package/dist/Form/index.js +7 -2
  40. package/dist/Form/styles.scss +11 -0
  41. package/dist/Form/types.d.ts +8 -0
  42. package/dist/FormCell/FormCell.d.ts +22 -0
  43. package/dist/FormCell/FormCell.js +57 -0
  44. package/dist/FormCell/index.d.ts +4 -0
  45. package/dist/FormCell/index.js +3 -0
  46. package/dist/FormCell/styles.scss +103 -0
  47. package/dist/IndexedStack/IndexedStack.d.ts +9 -0
  48. package/dist/IndexedStack/IndexedStack.js +27 -0
  49. package/dist/IndexedStack/index.d.ts +3 -0
  50. package/dist/IndexedStack/index.js +2 -0
  51. package/dist/InputNumber/input-number.d.ts +3 -2
  52. package/dist/InputNumber/input-number.js +48 -26
  53. package/dist/InputNumber/style.scss +79 -22
  54. package/dist/Loading/DotLoading.d.ts +7 -0
  55. package/dist/{Mask/mask-modal.js → Loading/DotLoading.js} +25 -25
  56. package/dist/{SpinLoading/spin-loading.d.ts → Loading/SpinLoading.d.ts} +0 -1
  57. package/dist/Loading/SpinLoading.js +69 -0
  58. package/dist/Loading/index.d.ts +6 -0
  59. package/dist/Loading/index.js +4 -0
  60. package/dist/Loading/style.scss +113 -0
  61. package/dist/NavBar/nav-bar.d.ts +1 -0
  62. package/dist/NavBar/nav-bar.js +3 -2
  63. package/dist/NavBar/style.scss +7 -3
  64. package/dist/Progress/Progress.d.ts +39 -0
  65. package/dist/Progress/Progress.js +56 -0
  66. package/dist/Progress/ProgressCircle.d.ts +15 -0
  67. package/dist/Progress/ProgressCircle.js +117 -0
  68. package/dist/Progress/ProgressLine.d.ts +15 -0
  69. package/dist/Progress/ProgressLine.js +87 -0
  70. package/dist/Progress/index.d.ts +3 -0
  71. package/dist/Progress/index.js +2 -0
  72. package/dist/Progress/style.scss +33 -0
  73. package/dist/Progress/types.d.ts +6 -0
  74. package/dist/Progress/types.js +2 -0
  75. package/dist/Radio/RadioGroup.js +3 -3
  76. package/dist/Radio/radio.js +1 -1
  77. package/dist/Radio/style.scss +40 -24
  78. package/dist/Radio/types.d.ts +6 -4
  79. package/dist/Rate/rate.js +1 -1
  80. package/dist/Result/use-result-icon.js +1 -1
  81. package/dist/SafeArea/style.scss +5 -3
  82. package/dist/Scaffold/style.scss +2 -1
  83. package/dist/Segmented/Segmented.d.ts +57 -0
  84. package/dist/Segmented/Segmented.js +82 -0
  85. package/dist/Segmented/index.d.ts +2 -0
  86. package/dist/Segmented/index.js +1 -0
  87. package/dist/Segmented/style.scss +75 -0
  88. package/dist/Skeleton/Skeleton.d.ts +86 -0
  89. package/dist/Skeleton/Skeleton.js +263 -0
  90. package/dist/Skeleton/index.d.ts +3 -0
  91. package/dist/Skeleton/index.js +2 -0
  92. package/dist/Skeleton/style.scss +215 -0
  93. package/dist/Space/space.d.ts +1 -0
  94. package/dist/Space/space.js +20 -6
  95. package/dist/Space/style.scss +27 -3
  96. package/dist/Stepper/index.d.ts +3 -0
  97. package/dist/Stepper/index.js +2 -0
  98. package/dist/Stepper/stepper.d.ts +14 -0
  99. package/dist/Stepper/stepper.js +92 -0
  100. package/dist/Stepper/style.scss +100 -0
  101. package/dist/Steps/HorizontalSteps.js +10 -3
  102. package/dist/Steps/VerticalSteps.js +5 -2
  103. package/dist/Steps/style.scss +7 -0
  104. package/dist/Steps/types.d.ts +2 -0
  105. package/dist/Switch/style.scss +6 -7
  106. package/dist/Switch/switch.d.ts +2 -0
  107. package/dist/Switch/switch.js +6 -5
  108. package/dist/TabBar/index.js +2 -1
  109. package/dist/TabBar/index.scss +3 -2
  110. package/dist/Tabs/style.scss +5 -5
  111. package/dist/Tag/style.scss +45 -21
  112. package/dist/Tag/tag.d.ts +4 -1
  113. package/dist/Tag/tag.js +8 -2
  114. package/dist/index.d.ts +17 -26
  115. package/dist/index.js +8 -13
  116. package/dist/style/css-variable.scss +6 -0
  117. package/dist/style/style.scss +2 -2
  118. package/dist/style/variable.scss +176 -164
  119. package/dist/types.d.ts +10 -1
  120. package/package.json +5 -8
  121. package/dist/ActionSheet/ActionSheet.d.ts +0 -25
  122. package/dist/ActionSheet/ActionSheet.js +0 -77
  123. package/dist/ActionSheet/index.d.ts +0 -3
  124. package/dist/ActionSheet/index.js +0 -2
  125. package/dist/ActionSheet/style.scss +0 -51
  126. package/dist/CascaderPicker/cascader-picker.d.ts +0 -27
  127. package/dist/CascaderPicker/cascader-picker.js +0 -88
  128. package/dist/CascaderPicker/index.d.ts +0 -3
  129. package/dist/CascaderPicker/index.js +0 -2
  130. package/dist/CascaderPicker/style.scss +0 -42
  131. package/dist/Form/FormItem/form-item-input.d.ts +0 -15
  132. package/dist/Form/FormItem/form-item-input.js +0 -39
  133. package/dist/Form/FormItem/form-item-label.d.ts +0 -13
  134. package/dist/Form/FormItem/form-item-label.js +0 -25
  135. package/dist/Form/FormItem/form-item.d.ts +0 -21
  136. package/dist/Form/FormItem/form-item.js +0 -70
  137. package/dist/Form/FormItem/index.d.ts +0 -5
  138. package/dist/Form/FormItem/index.js +0 -3
  139. package/dist/Form/style.scss +0 -45
  140. package/dist/Input/base-input.d.ts +0 -14
  141. package/dist/Input/base-input.js +0 -63
  142. package/dist/Input/index.d.ts +0 -12
  143. package/dist/Input/index.js +0 -9
  144. package/dist/Input/index.scss +0 -173
  145. package/dist/Input/input-affix-wrapper.d.ts +0 -8
  146. package/dist/Input/input-affix-wrapper.js +0 -50
  147. package/dist/Input/input-opt.d.ts +0 -16
  148. package/dist/Input/input-opt.js +0 -93
  149. package/dist/Input/input-password.d.ts +0 -7
  150. package/dist/Input/input-password.js +0 -47
  151. package/dist/Input/input.d.ts +0 -15
  152. package/dist/Input/input.js +0 -47
  153. package/dist/Input/textarea.d.ts +0 -13
  154. package/dist/Input/textarea.js +0 -45
  155. package/dist/Input/types.d.ts +0 -1
  156. package/dist/Input/types.js +0 -1
  157. package/dist/Mask/index.d.ts +0 -3
  158. package/dist/Mask/index.js +0 -2
  159. package/dist/Mask/mask-modal.d.ts +0 -45
  160. package/dist/Mask/mask.d.ts +0 -5
  161. package/dist/Mask/mask.js +0 -19
  162. package/dist/Mask/style.scss +0 -20
  163. package/dist/Picker/index.d.ts +0 -3
  164. package/dist/Picker/index.js +0 -2
  165. package/dist/Picker/picker.d.ts +0 -19
  166. package/dist/Picker/picker.js +0 -97
  167. package/dist/Picker/style.scss +0 -41
  168. package/dist/PickerView/index.d.ts +0 -4
  169. package/dist/PickerView/index.js +0 -2
  170. package/dist/PickerView/picker-view-column-item.d.ts +0 -7
  171. package/dist/PickerView/picker-view-column-item.js +0 -11
  172. package/dist/PickerView/picker-view-column.d.ts +0 -10
  173. package/dist/PickerView/picker-view-column.js +0 -117
  174. package/dist/PickerView/picker-view.d.ts +0 -12
  175. package/dist/PickerView/picker-view.js +0 -60
  176. package/dist/PickerView/style.scss +0 -72
  177. package/dist/PickerView/types.d.ts +0 -4
  178. package/dist/Popup/index.d.ts +0 -3
  179. package/dist/Popup/index.js +0 -2
  180. package/dist/Popup/popup-modal.d.ts +0 -52
  181. package/dist/Popup/popup-modal.js +0 -74
  182. package/dist/Popup/popup.d.ts +0 -4
  183. package/dist/Popup/popup.js +0 -56
  184. package/dist/Popup/style.scss +0 -53
  185. package/dist/ScrollView/index.d.ts +0 -4
  186. package/dist/ScrollView/index.js +0 -2
  187. package/dist/ScrollView/scroll-view.d.ts +0 -4
  188. package/dist/ScrollView/scroll-view.js +0 -55
  189. package/dist/ScrollView/style.scss +0 -19
  190. package/dist/ScrollView/types.d.ts +0 -26
  191. package/dist/ScrollView/types.js +0 -1
  192. package/dist/SideBar/SideBarContext.d.ts +0 -18
  193. package/dist/SideBar/SideBarContext.js +0 -2
  194. package/dist/SideBar/index.d.ts +0 -3
  195. package/dist/SideBar/index.js +0 -2
  196. package/dist/SideBar/side-bar.d.ts +0 -25
  197. package/dist/SideBar/side-bar.js +0 -351
  198. package/dist/SideBar/style.scss +0 -85
  199. package/dist/SideBar/types.d.ts +0 -7
  200. package/dist/SideBar/types.js +0 -1
  201. package/dist/SpinLoading/demo/base.d.ts +0 -3
  202. package/dist/SpinLoading/demo/base.js +0 -21
  203. package/dist/SpinLoading/index.d.ts +0 -3
  204. package/dist/SpinLoading/index.js +0 -2
  205. package/dist/SpinLoading/spin-loading.js +0 -59
  206. package/dist/SpinLoading/spin-loading.scss +0 -40
  207. package/dist/Tabs/demo/base.d.ts +0 -3
  208. package/dist/Tabs/demo/base.js +0 -59
  209. package/dist/Tag/demo/base.d.ts +0 -7
  210. package/dist/Tag/demo/base.js +0 -67
  211. package/dist/Tag/demo/style.scss +0 -8
  212. package/dist/Toast/index.d.ts +0 -5
  213. package/dist/Toast/index.js +0 -3
  214. package/dist/Toast/style.scss +0 -63
  215. package/dist/Toast/toast-modal.d.ts +0 -18
  216. package/dist/Toast/toast-modal.js +0 -112
  217. package/dist/Toast/toast.d.ts +0 -7
  218. package/dist/Toast/toast.js +0 -78
  219. package/dist/VerificationCodeInput/demo/base.d.ts +0 -3
  220. package/dist/VerificationCodeInput/demo/base.js +0 -11
  221. package/dist/VerificationCodeInput/index.d.ts +0 -3
  222. package/dist/VerificationCodeInput/index.js +0 -2
  223. package/dist/VerificationCodeInput/style.scss +0 -20
  224. package/dist/VerificationCodeInput/verification-code-input.d.ts +0 -24
  225. package/dist/VerificationCodeInput/verification-code-input.js +0 -99
  226. /package/dist/{PickerView → Form}/types.js +0 -0
@@ -0,0 +1,82 @@
1
+ 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); }
2
+ 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; }
3
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
4
+ 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); }
5
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
6
+ 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."); }
7
+ 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); }
8
+ 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; }
9
+ 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; } }
10
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
11
+ import React, { useEffect, useState } from 'react';
12
+ import "./style.scss";
13
+ import classNames from 'classnames';
14
+ var clsPrefix = 'triones-antm-segmented';
15
+ function firstEnabledValue(options) {
16
+ var _options$find;
17
+ return (_options$find = options.find(function (o) {
18
+ return !o.disabled;
19
+ })) === null || _options$find === void 0 ? void 0 : _options$find.value;
20
+ }
21
+ export var Segmented = function Segmented(_ref) {
22
+ var className = _ref.className,
23
+ style = _ref.style,
24
+ block = _ref.block,
25
+ defaultValue = _ref.defaultValue,
26
+ options = _ref.options,
27
+ value = _ref.value,
28
+ onChange = _ref.onChange,
29
+ rootDisabled = _ref.disabled;
30
+ var isControlled = value !== undefined;
31
+ var _useState = useState(function () {
32
+ if (defaultValue !== undefined) return defaultValue;
33
+ return firstEnabledValue(options);
34
+ }),
35
+ _useState2 = _slicedToArray(_useState, 2),
36
+ internalValue = _useState2[0],
37
+ setInternalValue = _useState2[1];
38
+ useEffect(function () {
39
+ if (!isControlled) {
40
+ setInternalValue(function (prev) {
41
+ if (defaultValue !== undefined) return defaultValue;
42
+ if (prev !== undefined && options.some(function (o) {
43
+ return o.value === prev && !o.disabled;
44
+ })) {
45
+ return prev;
46
+ }
47
+ return firstEnabledValue(options);
48
+ });
49
+ }
50
+ }, [defaultValue, isControlled, options]);
51
+ var selectedValue = isControlled ? value : internalValue;
52
+ var handleSelect = function handleSelect(itemValue, itemDisabled) {
53
+ if (rootDisabled || itemDisabled || itemValue === undefined) return;
54
+ if (!isControlled) {
55
+ setInternalValue(itemValue);
56
+ }
57
+ onChange === null || onChange === void 0 || onChange(itemValue);
58
+ };
59
+ return /*#__PURE__*/React.createElement("div", {
60
+ className: classNames(clsPrefix, className, _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-block"), block), "".concat(clsPrefix, "-disabled"), rootDisabled)),
61
+ style: style,
62
+ role: "radiogroup"
63
+ }, options.map(function (item, index) {
64
+ var _item$value;
65
+ var itemDisabled = !!(rootDisabled || item.disabled);
66
+ var active = item.value !== undefined && selectedValue === item.value;
67
+ return /*#__PURE__*/React.createElement("div", {
68
+ key: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : index,
69
+ role: "radio",
70
+ "aria-checked": active,
71
+ "aria-disabled": itemDisabled,
72
+ className: classNames("".concat(clsPrefix, "-item"), item.className, _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-item-active"), active), "".concat(clsPrefix, "-item-disabled"), itemDisabled)),
73
+ onClick: function onClick() {
74
+ return handleSelect(item.value, itemDisabled);
75
+ }
76
+ }, item.icon != null && /*#__PURE__*/React.createElement("span", {
77
+ className: "".concat(clsPrefix, "-item-icon")
78
+ }, item.icon), item.label != null && /*#__PURE__*/React.createElement("span", {
79
+ className: "".concat(clsPrefix, "-item-label")
80
+ }, item.label));
81
+ }));
82
+ };
@@ -0,0 +1,2 @@
1
+ export { Segmented } from './Segmented';
2
+ export type { SegmentedProps } from './Segmented';
@@ -0,0 +1 @@
1
+ export { Segmented } from "./Segmented";
@@ -0,0 +1,75 @@
1
+ @use "../style/variable" as variable;
2
+
3
+ $class-prefix-segmented: 'triones-antm-segmented';
4
+
5
+ .#{$class-prefix-segmented} {
6
+ display: inline-flex;
7
+ flex-direction: row;
8
+ align-items: stretch;
9
+ box-sizing: border-box;
10
+ padding: 2Px;
11
+ border-radius: variable.$trionesBorderRadius;
12
+ background: variable.$trionesColorFillTertiary;
13
+ gap: 0;
14
+
15
+ &-block {
16
+ display: flex;
17
+ width: 100%;
18
+ }
19
+
20
+ &-disabled {
21
+ opacity: 0.45;
22
+ pointer-events: none;
23
+ }
24
+
25
+ &-item {
26
+ position: relative;
27
+ z-index: 0;
28
+ display: inline-flex;
29
+ flex: 0 1 auto;
30
+ align-items: center;
31
+ justify-content: center;
32
+ min-height: 10Px;
33
+ padding: 0Px 11Px;
34
+ font-size: variable.$trionesFontSize;
35
+ line-height: variable.$trionesLineHeightSm;
36
+ color: variable.$trionesColorTextSecondary;
37
+ border-radius: variable.$trionesBorderRadiusXs;
38
+ cursor: pointer;
39
+ user-select: none;
40
+ transition:
41
+ color 0.2s,
42
+ background-color 0.2s,
43
+ box-shadow 0.2s;
44
+
45
+ &-icon {
46
+ display: inline-flex;
47
+ margin-inline-end: 4Px;
48
+ font-size: variable.$trionesFontSizeIcon;
49
+ line-height: 1;
50
+ }
51
+
52
+ &-label {
53
+ display: inline-flex;
54
+ align-items: center;
55
+ line-height: 28Px;
56
+ }
57
+
58
+ &-active {
59
+ z-index: 1;
60
+ color: variable.$trionesColorTextHeading;
61
+ background: variable.$trionesColorBgBase;
62
+ box-shadow: 0 1Px 2Px rgba(0, 0, 0, 0.06);
63
+ }
64
+
65
+ &-disabled {
66
+ cursor: not-allowed;
67
+ color: variable.$trionesColorTextDisabled;
68
+ }
69
+ }
70
+
71
+ &-block &-item {
72
+ flex: 1 1 0;
73
+ min-width: 0;
74
+ }
75
+ }
@@ -0,0 +1,86 @@
1
+ import type { CSSProperties, FC, ReactNode } from 'react';
2
+ import './style.scss';
3
+ export type SkeletonAvatarShape = 'circle' | 'square';
4
+ export type SkeletonAvatarSize = 'small' | 'medium' | 'large';
5
+ export interface SkeletonAvatarProps {
6
+ className?: string;
7
+ style?: CSSProperties;
8
+ shape?: SkeletonAvatarShape;
9
+ size?: SkeletonAvatarSize | number;
10
+ active?: boolean;
11
+ }
12
+ export interface SkeletonTitleProps {
13
+ className?: string;
14
+ style?: CSSProperties;
15
+ width?: number | string;
16
+ active?: boolean;
17
+ }
18
+ export interface SkeletonParagraphProps {
19
+ className?: string;
20
+ style?: CSSProperties;
21
+ rows?: number;
22
+ /** 单行宽度;数组时为每行宽度,与 antd 一致 */
23
+ width?: number | string | Array<number | string>;
24
+ active?: boolean;
25
+ }
26
+ export interface SkeletonInputProps {
27
+ className?: string;
28
+ style?: CSSProperties;
29
+ size?: 'small' | 'medium' | 'large';
30
+ active?: boolean;
31
+ }
32
+ export type SkeletonButtonShape = 'default' | 'square' | 'round' | 'circle';
33
+ export interface SkeletonButtonProps {
34
+ className?: string;
35
+ style?: CSSProperties;
36
+ size?: 'small' | 'medium' | 'large';
37
+ shape?: SkeletonButtonShape;
38
+ block?: boolean;
39
+ active?: boolean;
40
+ }
41
+ /** 简单块模式:与历史 API 兼容 */
42
+ export type SkeletonBlockType = 'text' | 'circle' | 'rect';
43
+ export type SkeletonProps = {
44
+ /** 为 true 时显示骨架,为 false 时渲染子节点 */
45
+ loading?: boolean;
46
+ /** 是否展示扫光动画,对应 antd `active` */
47
+ active?: boolean;
48
+ /** 同 `active`,兼容旧属性 */
49
+ animated?: boolean;
50
+ /** 标题占位 */
51
+ title?: boolean | SkeletonTitleProps;
52
+ /** 段落占位 */
53
+ paragraph?: boolean | SkeletonParagraphProps;
54
+ /** 左侧头像占位 */
55
+ avatar?: boolean | SkeletonAvatarProps;
56
+ /** 标题与段落是否使用大圆角 */
57
+ round?: boolean;
58
+ className?: string;
59
+ style?: CSSProperties;
60
+ children?: ReactNode;
61
+ /**
62
+ * `composed`:标题+段落组合(默认,对齐 [antd Skeleton](https://ant.design/components/skeleton-cn));可配合 `avatar`
63
+ * `block`:单行/单块占位(兼容历史 `type` + `rows`)
64
+ */
65
+ mode?: 'composed' | 'block';
66
+ /** 仅在 mode=block 时生效 */
67
+ type?: SkeletonBlockType;
68
+ width?: string | number;
69
+ height?: string | number;
70
+ radius?: string | number;
71
+ rows?: number;
72
+ };
73
+ export declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
74
+ export declare const SkeletonTitle: FC<SkeletonTitleProps>;
75
+ export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
76
+ export declare const SkeletonInput: FC<SkeletonInputProps>;
77
+ export declare const SkeletonButton: FC<SkeletonButtonProps>;
78
+ type CompoundedSkeleton = FC<SkeletonProps> & {
79
+ Avatar: typeof SkeletonAvatar;
80
+ Title: typeof SkeletonTitle;
81
+ Paragraph: typeof SkeletonParagraph;
82
+ Input: typeof SkeletonInput;
83
+ Button: typeof SkeletonButton;
84
+ };
85
+ export declare const Skeleton: CompoundedSkeleton;
86
+ export {};
@@ -0,0 +1,263 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ 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); }
3
+ 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; }
4
+ 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; }
5
+ 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; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
7
+ 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); }
8
+ import classNames from 'classnames';
9
+ import React from 'react';
10
+ import "./style.scss";
11
+ var prefixCls = 'triones-antm-skeleton';
12
+
13
+ /** 简单块模式:与历史 API 兼容 */
14
+
15
+ /** 使用 px,保证 H5 / 文档站点可渲染(浏览器不支持 rpx) */
16
+ var sizeToPx = {
17
+ small: 32,
18
+ medium: 44,
19
+ large: 56
20
+ };
21
+ var inputHeightPx = {
22
+ small: 24,
23
+ medium: 32,
24
+ large: 40
25
+ };
26
+ var buttonSizePx = {
27
+ small: 28,
28
+ medium: 32,
29
+ large: 36
30
+ };
31
+ function toCssSize(v) {
32
+ if (v === undefined) return undefined;
33
+ return typeof v === 'number' ? "".concat(v, "px") : v;
34
+ }
35
+ function normalizeActive(active, animated) {
36
+ if (active !== undefined) return active;
37
+ if (animated !== undefined) return animated;
38
+ return true;
39
+ }
40
+ export var SkeletonAvatar = function SkeletonAvatar(_ref) {
41
+ var className = _ref.className,
42
+ style = _ref.style,
43
+ _ref$shape = _ref.shape,
44
+ shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
45
+ _ref$size = _ref.size,
46
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
47
+ _ref$active = _ref.active,
48
+ active = _ref$active === void 0 ? true : _ref$active;
49
+ var dim = typeof size === 'number' ? "".concat(size, "px") : "".concat(sizeToPx[size], "px");
50
+ return /*#__PURE__*/React.createElement("div", {
51
+ className: classNames("".concat(prefixCls, "-avatar"), "".concat(prefixCls, "-avatar-").concat(shape), _defineProperty({}, "".concat(prefixCls, "-element-active"), active), className),
52
+ style: _objectSpread({
53
+ width: dim,
54
+ height: dim
55
+ }, style)
56
+ });
57
+ };
58
+ export var SkeletonTitle = function SkeletonTitle(_ref2) {
59
+ var className = _ref2.className,
60
+ style = _ref2.style,
61
+ width = _ref2.width,
62
+ _ref2$active = _ref2.active,
63
+ active = _ref2$active === void 0 ? true : _ref2$active;
64
+ return /*#__PURE__*/React.createElement("div", {
65
+ className: classNames("".concat(prefixCls, "-title"), _defineProperty({}, "".concat(prefixCls, "-element-active"), active), className),
66
+ style: _objectSpread({
67
+ width: width !== undefined ? toCssSize(width) : undefined
68
+ }, style)
69
+ });
70
+ };
71
+ export var SkeletonParagraph = function SkeletonParagraph(_ref3) {
72
+ var className = _ref3.className,
73
+ style = _ref3.style,
74
+ _ref3$rows = _ref3.rows,
75
+ rows = _ref3$rows === void 0 ? 3 : _ref3$rows,
76
+ width = _ref3.width,
77
+ _ref3$active = _ref3.active,
78
+ active = _ref3$active === void 0 ? true : _ref3$active;
79
+ var list = Array.from({
80
+ length: rows
81
+ }, function (_, i) {
82
+ var w;
83
+ if (Array.isArray(width)) {
84
+ var _width$i;
85
+ var raw = (_width$i = width[i]) !== null && _width$i !== void 0 ? _width$i : width[width.length - 1];
86
+ w = raw !== undefined ? toCssSize(raw) : undefined;
87
+ } else if (width !== undefined && i === rows - 1) {
88
+ w = toCssSize(width);
89
+ }
90
+ if (w === undefined && i === rows - 1) {
91
+ w = '62%';
92
+ }
93
+ return /*#__PURE__*/React.createElement("div", {
94
+ key: i,
95
+ className: classNames("".concat(prefixCls, "-paragraph-line"), _defineProperty({}, "".concat(prefixCls, "-element-active"), active)),
96
+ style: w ? {
97
+ width: w
98
+ } : undefined
99
+ });
100
+ });
101
+ return /*#__PURE__*/React.createElement("div", {
102
+ className: classNames("".concat(prefixCls, "-paragraph"), className),
103
+ style: style
104
+ }, list);
105
+ };
106
+ export var SkeletonInput = function SkeletonInput(_ref4) {
107
+ var className = _ref4.className,
108
+ style = _ref4.style,
109
+ _ref4$size = _ref4.size,
110
+ size = _ref4$size === void 0 ? 'medium' : _ref4$size,
111
+ _ref4$active = _ref4.active,
112
+ active = _ref4$active === void 0 ? true : _ref4$active;
113
+ return /*#__PURE__*/React.createElement("div", {
114
+ className: classNames("".concat(prefixCls, "-input"), _defineProperty({}, "".concat(prefixCls, "-element-active"), active), className),
115
+ style: _objectSpread({
116
+ height: "".concat(inputHeightPx[size], "px")
117
+ }, style)
118
+ });
119
+ };
120
+ export var SkeletonButton = function SkeletonButton(_ref5) {
121
+ var className = _ref5.className,
122
+ style = _ref5.style,
123
+ _ref5$size = _ref5.size,
124
+ size = _ref5$size === void 0 ? 'medium' : _ref5$size,
125
+ _ref5$shape = _ref5.shape,
126
+ shape = _ref5$shape === void 0 ? 'default' : _ref5$shape,
127
+ _ref5$block = _ref5.block,
128
+ block = _ref5$block === void 0 ? false : _ref5$block,
129
+ _ref5$active = _ref5.active,
130
+ active = _ref5$active === void 0 ? true : _ref5$active;
131
+ return /*#__PURE__*/React.createElement("div", {
132
+ className: classNames("".concat(prefixCls, "-button"), "".concat(prefixCls, "-button-").concat(shape), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-button-block"), block), "".concat(prefixCls, "-element-active"), active), className),
133
+ style: _objectSpread({
134
+ width: shape === 'circle' ? "".concat(buttonSizePx[size], "px") : undefined,
135
+ height: "".concat(buttonSizePx[size], "px")
136
+ }, style)
137
+ });
138
+ };
139
+ function renderComposed(props, showActive, round) {
140
+ var _props$avatar = props.avatar,
141
+ avatarProp = _props$avatar === void 0 ? false : _props$avatar,
142
+ _props$title = props.title,
143
+ titleProp = _props$title === void 0 ? true : _props$title,
144
+ _props$paragraph = props.paragraph,
145
+ paragraphProp = _props$paragraph === void 0 ? true : _props$paragraph,
146
+ className = props.className,
147
+ style = props.style;
148
+ var avatarCfg = avatarProp === true ? {} : avatarProp === false ? null : avatarProp;
149
+ var titleCfg = titleProp === true ? {} : titleProp === false ? null : titleProp;
150
+ var paragraphCfg = paragraphProp === true ? {
151
+ rows: 3
152
+ } : paragraphProp === false ? null : paragraphProp;
153
+ var hasAvatar = Boolean(avatarCfg);
154
+ var hasTitle = Boolean(titleCfg);
155
+ var hasParagraph = Boolean(paragraphCfg);
156
+ if (!hasAvatar && !hasTitle && !hasParagraph) {
157
+ return null;
158
+ }
159
+ var titleProps = titleCfg && _typeof(titleCfg) === 'object' ? titleCfg : {};
160
+ var paragraphProps = paragraphCfg && _typeof(paragraphCfg) === 'object' ? paragraphCfg : {};
161
+ var avatarProps = avatarCfg && _typeof(avatarCfg) === 'object' ? avatarCfg : {};
162
+ var titleActive = titleProps.active === false ? false : showActive;
163
+ var paragraphActive = paragraphProps.active === false ? false : showActive;
164
+ var avatarActive = avatarProps.active === false ? false : showActive;
165
+ var section = hasTitle || hasParagraph ? /*#__PURE__*/React.createElement("div", {
166
+ className: "".concat(prefixCls, "-section")
167
+ }, hasTitle && /*#__PURE__*/React.createElement(SkeletonTitle, _extends({}, titleProps, {
168
+ active: titleActive
169
+ })), hasParagraph && /*#__PURE__*/React.createElement(SkeletonParagraph, _extends({}, paragraphProps, {
170
+ active: paragraphActive
171
+ }))) : null;
172
+ if (hasAvatar) {
173
+ return /*#__PURE__*/React.createElement("div", {
174
+ className: classNames("".concat(prefixCls), "".concat(prefixCls, "-with-avatar"), _defineProperty({}, "".concat(prefixCls, "-round"), round), className),
175
+ style: style
176
+ }, /*#__PURE__*/React.createElement("div", {
177
+ className: "".concat(prefixCls, "-header")
178
+ }, /*#__PURE__*/React.createElement(SkeletonAvatar, _extends({}, avatarProps, {
179
+ active: avatarActive
180
+ }))), section);
181
+ }
182
+ return /*#__PURE__*/React.createElement("div", {
183
+ className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-round"), round), className),
184
+ style: style
185
+ }, section);
186
+ }
187
+ function renderBlock(props, showActive) {
188
+ var _props$type = props.type,
189
+ type = _props$type === void 0 ? 'text' : _props$type,
190
+ width = props.width,
191
+ height = props.height,
192
+ radius = props.radius,
193
+ _props$rows = props.rows,
194
+ rows = _props$rows === void 0 ? 1 : _props$rows,
195
+ round = props.round,
196
+ className = props.className,
197
+ style = props.style;
198
+ var baseStyle = {};
199
+ if (width !== undefined) baseStyle.width = toCssSize(width);
200
+ if (height !== undefined) baseStyle.height = toCssSize(height);
201
+ if (type === 'circle') {
202
+ var d = radius !== undefined ? toCssSize(radius) : undefined;
203
+ if (d) {
204
+ baseStyle.width = d;
205
+ baseStyle.height = d;
206
+ }
207
+ baseStyle.borderRadius = '50%';
208
+ } else if (round) {
209
+ baseStyle.borderRadius = '8px';
210
+ } else if (radius !== undefined) {
211
+ baseStyle.borderRadius = toCssSize(radius);
212
+ }
213
+ if (type === 'text') {
214
+ return /*#__PURE__*/React.createElement("div", {
215
+ className: classNames("".concat(prefixCls, "-block-root"), className),
216
+ style: style
217
+ }, Array.from({
218
+ length: rows
219
+ }).map(function (_, index) {
220
+ var _baseStyle$width;
221
+ return /*#__PURE__*/React.createElement("div", {
222
+ key: index,
223
+ className: classNames("".concat(prefixCls, "-block"), "".concat(prefixCls, "-block-text"), _defineProperty({}, "".concat(prefixCls, "-element-active"), showActive)),
224
+ style: _objectSpread(_objectSpread({}, baseStyle), index === rows - 1 ? {
225
+ width: (_baseStyle$width = baseStyle.width) !== null && _baseStyle$width !== void 0 ? _baseStyle$width : '70%'
226
+ } : {})
227
+ });
228
+ }));
229
+ }
230
+ return /*#__PURE__*/React.createElement("div", {
231
+ className: classNames("".concat(prefixCls, "-block-root"), className),
232
+ style: style
233
+ }, /*#__PURE__*/React.createElement("div", {
234
+ className: classNames("".concat(prefixCls, "-block"), "".concat(prefixCls, "-block-").concat(type), _defineProperty({}, "".concat(prefixCls, "-element-active"), showActive)),
235
+ style: baseStyle
236
+ }));
237
+ }
238
+ var SkeletonImpl = function SkeletonImpl(props) {
239
+ var _props$loading = props.loading,
240
+ loading = _props$loading === void 0 ? true : _props$loading,
241
+ children = props.children,
242
+ _props$mode = props.mode,
243
+ mode = _props$mode === void 0 ? 'composed' : _props$mode,
244
+ _props$round = props.round,
245
+ round = _props$round === void 0 ? false : _props$round,
246
+ active = props.active,
247
+ animated = props.animated;
248
+ if (!loading) {
249
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children);
250
+ }
251
+ var showActive = normalizeActive(active, animated);
252
+ if (mode === 'block') {
253
+ return renderBlock(props, showActive);
254
+ }
255
+ return renderComposed(props, showActive, round);
256
+ };
257
+ export var Skeleton = Object.assign(SkeletonImpl, {
258
+ Avatar: SkeletonAvatar,
259
+ Title: SkeletonTitle,
260
+ Paragraph: SkeletonParagraph,
261
+ Input: SkeletonInput,
262
+ Button: SkeletonButton
263
+ });
@@ -0,0 +1,3 @@
1
+ import { Skeleton } from './Skeleton';
2
+ export type { SkeletonProps, SkeletonAvatarProps, SkeletonTitleProps, SkeletonParagraphProps, SkeletonInputProps, SkeletonButtonProps, SkeletonBlockType, SkeletonAvatarShape, SkeletonAvatarSize, SkeletonButtonShape, } from './Skeleton';
3
+ export default Skeleton;
@@ -0,0 +1,2 @@
1
+ import { Skeleton } from "./Skeleton";
2
+ export default Skeleton;