antd-mobile 5.0.0-rc.7 → 5.0.0-rc.8

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 (121) hide show
  1. package/2x/README.md +4 -0
  2. package/2x/cjs/components/checkbox/checkbox.css +1 -1
  3. package/2x/cjs/components/date-picker/date-picker.js +1 -1
  4. package/2x/cjs/components/image/lazy-detector.js +4 -1
  5. package/2x/cjs/components/image-uploader/image-uploader.js +9 -3
  6. package/2x/cjs/components/image-viewer/slide.js +0 -5
  7. package/2x/cjs/components/index-bar/index-bar.css +1 -1
  8. package/2x/cjs/components/infinite-scroll/infinite-scroll.js +1 -1
  9. package/2x/cjs/components/mask/mask.js +3 -2
  10. package/2x/cjs/components/number-keyboard/number-keyboard.js +1 -1
  11. package/2x/cjs/components/picker/picker.js +1 -1
  12. package/2x/cjs/components/picker-view/picker-view.js +2 -2
  13. package/2x/cjs/components/picker-view/{column.d.ts → wheel.d.ts} +1 -1
  14. package/{cjs/components/picker-view/column.js → 2x/cjs/components/picker-view/wheel.js} +9 -6
  15. package/2x/cjs/components/radio/radio.css +1 -1
  16. package/2x/cjs/components/skeleton/index.d.ts +8 -0
  17. package/2x/cjs/components/skeleton/index.js +19 -0
  18. package/2x/cjs/components/skeleton/skeleton.css +45 -0
  19. package/2x/cjs/components/skeleton/skeleton.d.ts +15 -0
  20. package/2x/cjs/components/skeleton/skeleton.js +61 -0
  21. package/2x/cjs/components/stepper/stepper.d.ts +1 -0
  22. package/2x/cjs/components/stepper/stepper.js +4 -2
  23. package/2x/cjs/components/tab-bar/tab-bar.css +1 -1
  24. package/2x/cjs/components/tab-bar/tab-bar.d.ts +1 -0
  25. package/2x/cjs/components/tab-bar/tab-bar.js +24 -11
  26. package/2x/cjs/index.d.ts +2 -1
  27. package/2x/cjs/index.js +10 -2
  28. package/2x/cjs/utils/use-mutation-effect.js +1 -1
  29. package/2x/cjs/utils/use-props-value.js +1 -1
  30. package/2x/cjs/utils/use-resize-effect.js +1 -1
  31. package/2x/es/components/checkbox/checkbox.css +1 -1
  32. package/2x/es/components/date-picker/date-picker.js +2 -2
  33. package/2x/es/components/image/lazy-detector.js +4 -1
  34. package/2x/es/components/image-uploader/image-uploader.js +10 -4
  35. package/2x/es/components/image-viewer/slide.js +0 -5
  36. package/2x/es/components/index-bar/index-bar.css +1 -1
  37. package/2x/es/components/infinite-scroll/infinite-scroll.js +2 -2
  38. package/2x/es/components/mask/mask.js +3 -2
  39. package/2x/es/components/number-keyboard/number-keyboard.js +2 -2
  40. package/2x/es/components/picker/picker.js +2 -2
  41. package/2x/es/components/picker-view/picker-view.js +2 -2
  42. package/{cjs/components/picker-view/column.d.ts → 2x/es/components/picker-view/wheel.d.ts} +1 -1
  43. package/{es/components/picker-view/column.js → 2x/es/components/picker-view/wheel.js} +7 -4
  44. package/2x/es/components/radio/radio.css +1 -1
  45. package/2x/es/components/skeleton/index.d.ts +8 -0
  46. package/2x/es/components/skeleton/index.js +7 -0
  47. package/2x/es/components/skeleton/skeleton.css +45 -0
  48. package/2x/es/components/skeleton/skeleton.d.ts +15 -0
  49. package/2x/es/components/skeleton/skeleton.js +36 -0
  50. package/2x/es/components/stepper/stepper.d.ts +1 -0
  51. package/2x/es/components/stepper/stepper.js +4 -2
  52. package/2x/es/components/tab-bar/tab-bar.css +1 -1
  53. package/2x/es/components/tab-bar/tab-bar.d.ts +1 -0
  54. package/2x/es/components/tab-bar/tab-bar.js +22 -11
  55. package/2x/es/index.d.ts +2 -1
  56. package/2x/es/index.js +3 -2
  57. package/2x/es/utils/use-mutation-effect.js +2 -2
  58. package/2x/es/utils/use-props-value.js +2 -2
  59. package/2x/es/utils/use-resize-effect.js +2 -2
  60. package/2x/package.json +3 -3
  61. package/README.md +4 -0
  62. package/cjs/components/checkbox/checkbox.css +1 -1
  63. package/cjs/components/date-picker/date-picker.js +1 -1
  64. package/cjs/components/image/lazy-detector.js +4 -1
  65. package/cjs/components/image-uploader/image-uploader.js +9 -3
  66. package/cjs/components/image-viewer/slide.js +0 -5
  67. package/cjs/components/index-bar/index-bar.css +1 -1
  68. package/cjs/components/infinite-scroll/infinite-scroll.js +1 -1
  69. package/cjs/components/mask/mask.js +3 -2
  70. package/cjs/components/number-keyboard/number-keyboard.js +1 -1
  71. package/cjs/components/picker/picker.js +1 -1
  72. package/cjs/components/picker-view/picker-view.js +2 -2
  73. package/{2x/es/components/picker-view/column.d.ts → cjs/components/picker-view/wheel.d.ts} +1 -1
  74. package/{2x/cjs/components/picker-view/column.js → cjs/components/picker-view/wheel.js} +9 -6
  75. package/cjs/components/radio/radio.css +1 -1
  76. package/cjs/components/skeleton/index.d.ts +8 -0
  77. package/cjs/components/skeleton/index.js +19 -0
  78. package/cjs/components/skeleton/skeleton.css +39 -0
  79. package/cjs/components/skeleton/skeleton.d.ts +15 -0
  80. package/cjs/components/skeleton/skeleton.js +61 -0
  81. package/cjs/components/stepper/stepper.d.ts +1 -0
  82. package/cjs/components/stepper/stepper.js +4 -2
  83. package/cjs/components/tab-bar/tab-bar.css +1 -1
  84. package/cjs/components/tab-bar/tab-bar.d.ts +1 -0
  85. package/cjs/components/tab-bar/tab-bar.js +24 -11
  86. package/cjs/index.d.ts +2 -1
  87. package/cjs/index.js +10 -2
  88. package/cjs/utils/use-mutation-effect.js +1 -1
  89. package/cjs/utils/use-props-value.js +1 -1
  90. package/cjs/utils/use-resize-effect.js +1 -1
  91. package/es/components/checkbox/checkbox.css +1 -1
  92. package/es/components/date-picker/date-picker.js +2 -2
  93. package/es/components/image/lazy-detector.js +4 -1
  94. package/es/components/image-uploader/image-uploader.js +10 -4
  95. package/es/components/image-viewer/slide.js +0 -5
  96. package/es/components/index-bar/index-bar.css +1 -1
  97. package/es/components/infinite-scroll/infinite-scroll.js +2 -2
  98. package/es/components/mask/mask.js +3 -2
  99. package/es/components/number-keyboard/number-keyboard.js +2 -2
  100. package/es/components/picker/picker.js +2 -2
  101. package/es/components/picker-view/picker-view.js +2 -2
  102. package/es/components/picker-view/{column.d.ts → wheel.d.ts} +1 -1
  103. package/{2x/es/components/picker-view/column.js → es/components/picker-view/wheel.js} +7 -4
  104. package/es/components/radio/radio.css +1 -1
  105. package/es/components/skeleton/index.d.ts +8 -0
  106. package/es/components/skeleton/index.js +7 -0
  107. package/es/components/skeleton/skeleton.css +39 -0
  108. package/es/components/skeleton/skeleton.d.ts +15 -0
  109. package/es/components/skeleton/skeleton.js +36 -0
  110. package/es/components/stepper/stepper.d.ts +1 -0
  111. package/es/components/stepper/stepper.js +4 -2
  112. package/es/components/tab-bar/tab-bar.css +1 -1
  113. package/es/components/tab-bar/tab-bar.d.ts +1 -0
  114. package/es/components/tab-bar/tab-bar.js +22 -11
  115. package/es/index.d.ts +2 -1
  116. package/es/index.js +3 -2
  117. package/es/utils/use-mutation-effect.js +2 -2
  118. package/es/utils/use-props-value.js +2 -2
  119. package/es/utils/use-resize-effect.js +2 -2
  120. package/package.json +3 -3
  121. package/umd/antd-mobile.js +1 -1
package/2x/README.md CHANGED
@@ -28,6 +28,10 @@ If you found bugs or would like to request some new features, please consider op
28
28
 
29
29
  If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
30
30
 
31
+ Feel free to join our DingDing group:
32
+
33
+ <img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*fo-tQ5wRk5QAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" />
34
+
31
35
  ---
32
36
 
33
37
  Thanks to all the contributors of antd-mobile:
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  .adm-checkbox-content {
84
- flex: none;
84
+ flex: 0 1 auto;
85
85
  font-size: var(--font-size);
86
86
  padding-left: var(--gap);
87
87
  }
@@ -52,7 +52,7 @@ var DatePicker = function DatePicker(p) {
52
52
  var onConfirm = (0, _react.useCallback)(function (val) {
53
53
  setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
54
54
  }, [setValue, props.precision]);
55
- var onSelect = (0, _ahooks.usePersistFn)(function (val) {
55
+ var onSelect = (0, _ahooks.useMemoizedFn)(function (val) {
56
56
  var _a;
57
57
 
58
58
  var date = (0, _datePickerUtils.convertStringArrayToDate)(val, props.precision);
@@ -15,7 +15,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
15
15
 
16
16
  var LazyDetector = function LazyDetector(props) {
17
17
  var ref = (0, _react.useRef)(null);
18
- var inViewport = (0, _ahooks.useInViewport)(ref);
18
+
19
+ var _useInViewport = (0, _ahooks.useInViewport)(ref),
20
+ inViewport = _useInViewport[0];
21
+
19
22
  (0, _react.useEffect)(function () {
20
23
  if (inViewport) {
21
24
  props.onActive();
@@ -79,7 +79,7 @@ var ImageUploader = function ImageUploader(p) {
79
79
  value = _usePropsValue[0],
80
80
  setValue = _usePropsValue[1];
81
81
 
82
- var updateValue = (0, _ahooks.usePersistFn)(function (updater) {
82
+ var updateValue = (0, _ahooks.useMemoizedFn)(function (updater) {
83
83
  setValue(updater(value));
84
84
  });
85
85
 
@@ -190,9 +190,15 @@ var ImageUploader = function ImageUploader(p) {
190
190
  });
191
191
  });
192
192
  updateValue(function (prev) {
193
- return [].concat(prev, [{
193
+ var newVal = {
194
194
  url: result.url
195
- }]);
195
+ };
196
+
197
+ if (result.extra !== undefined) {
198
+ newVal.extra = result.extra;
199
+ }
200
+
201
+ return [].concat(prev, [newVal]);
196
202
  });
197
203
  _context.next = 12;
198
204
  break;
@@ -107,11 +107,6 @@ var Slide = function Slide(props) {
107
107
  }
108
108
  },
109
109
  pinch: {
110
- transform: function transform(_ref) {
111
- var d = _ref[0],
112
- a = _ref[1];
113
- return [d < 0 ? d * 0.5 : d * 2, 0];
114
- },
115
110
  from: function from() {
116
111
  return [zoom.get(), 0];
117
112
  }
@@ -58,7 +58,7 @@
58
58
 
59
59
  .adm-index-bar-sidebar-row {
60
60
  cursor: pointer;
61
- width: 100%;
61
+ width: auto;
62
62
  text-align: right;
63
63
  position: relative;
64
64
  padding: 0 24px;
@@ -43,7 +43,7 @@ var InfiniteScroll = function InfiniteScroll(p) {
43
43
  });
44
44
  var elementRef = (0, _react.useRef)(null);
45
45
  var checkTimeoutRef = (0, _react.useRef)();
46
- var check = (0, _ahooks.usePersistFn)(function () {
46
+ var check = (0, _ahooks.useMemoizedFn)(function () {
47
47
  window.clearTimeout(checkTimeoutRef.current);
48
48
  checkTimeoutRef.current = window.setTimeout(function () {
49
49
  if (!props.hasMore) return;
@@ -99,9 +99,10 @@ var Mask = function Mask(p) {
99
99
  var node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
100
100
  className: classPrefix,
101
101
  ref: ref,
102
- style: Object.assign(Object.assign({}, props.style), {
102
+ style: Object.assign(Object.assign({
103
103
  background: background,
104
- opacity: opacity,
104
+ opacity: opacity
105
+ }, props.style), {
105
106
  display: active ? 'unset' : 'none'
106
107
  })
107
108
  }, props.onMaskClick && /*#__PURE__*/_react["default"].createElement("div", {
@@ -66,7 +66,7 @@ var NumberKeyboard = function NumberKeyboard(p) {
66
66
  }, [customKey, confirmText, randomOrder, randomOrder && visible]);
67
67
  var timeoutRef = (0, _react.useRef)(-1);
68
68
  var intervalRef = (0, _react.useRef)(-1);
69
- var onDelete = (0, _ahooks.usePersistFn)(function () {
69
+ var onDelete = (0, _ahooks.useMemoizedFn)(function () {
70
70
  var _a;
71
71
 
72
72
  (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -74,7 +74,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
74
74
  setInnerValue(value);
75
75
  }
76
76
  }, [value]);
77
- var onChange = (0, _ahooks.usePersistFn)(function (val, ext) {
77
+ var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
78
78
  var _a;
79
79
 
80
80
  setInnerValue(val);
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _withDefaultProps = require("../../utils/with-default-props");
11
11
 
12
- var _column = require("./column");
12
+ var _wheel = require("./wheel");
13
13
 
14
14
  var _useColumns = require("./use-columns");
15
15
 
@@ -74,7 +74,7 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
74
74
  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
75
75
  className: "" + classPrefix
76
76
  }, columns.map(function (column, index) {
77
- return /*#__PURE__*/_react["default"].createElement(_column.Column, {
77
+ return /*#__PURE__*/_react["default"].createElement(_wheel.Wheel, {
78
78
  key: index,
79
79
  index: index,
80
80
  column: column,
@@ -6,5 +6,5 @@ interface Props {
6
6
  value: PickerValue;
7
7
  onSelect: (value: PickerValue, index: number) => void;
8
8
  }
9
- export declare const Column: React.NamedExoticComponent<Props>;
9
+ export declare const Wheel: React.NamedExoticComponent<Props>;
10
10
  export {};
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Column = void 0;
6
+ exports.Wheel = void 0;
7
7
 
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
 
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
27
 
28
28
  var classPrefix = "adm-picker-view";
29
- var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
29
+ var Wheel = /*#__PURE__*/(0, _react.memo)(function (props) {
30
30
  var itemHeight = (0, _convertPx.convertPx)(34);
31
31
  var value = props.value,
32
32
  column = props.column;
@@ -83,7 +83,9 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
83
83
  api.start({
84
84
  y: finalPosition
85
85
  });
86
- onSelect(column[index].value);
86
+ var item = column[index];
87
+ if (!item) return;
88
+ onSelect(item.value);
87
89
  }
88
90
 
89
91
  var bind = (0, _react2.useDrag)(function (state) {
@@ -94,7 +96,7 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
94
96
  if (state.last) {
95
97
  draggingRef.current = false;
96
98
  var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
97
- var targetIndex = -Math.round((0, _bound.bound)(position, min, max) / itemHeight);
99
+ var targetIndex = min < max ? -Math.round((0, _bound.bound)(position, min, max) / itemHeight) : 0;
98
100
  scrollSelect(targetIndex);
99
101
  } else {
100
102
  var _position = state.offset[1];
@@ -176,6 +178,7 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
176
178
  }, item.label));
177
179
  })), renderAccessible());
178
180
  }, function (prev, next) {
181
+ if (prev.index !== next.index) return false;
179
182
  if (prev.value !== next.value) return false;
180
183
  if (prev.onSelect !== next.onSelect) return false;
181
184
 
@@ -185,5 +188,5 @@ var Column = /*#__PURE__*/(0, _react.memo)(function (props) {
185
188
 
186
189
  return true;
187
190
  });
188
- exports.Column = Column;
189
- Column.displayName = 'Column';
191
+ exports.Wheel = Wheel;
192
+ Wheel.displayName = 'Wheel';
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .adm-radio-content {
63
- flex: none;
63
+ flex: 0 1 auto;
64
64
  font-size: var(--font-size);
65
65
  padding-left: var(--gap);
66
66
  }
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import './skeleton.less';
3
+ export type { SkeletonProps, SkeletonTitleProps } from './skeleton';
4
+ declare const _default: import("react").FC<import("./skeleton").SkeletonProps> & {
5
+ Title: import("react").FC<import("./skeleton").SkeletonTitleProps>;
6
+ Paragraph: import("react").FC<import("./skeleton").SkeletonParagraphProps>;
7
+ };
8
+ export default _default;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ require("./skeleton.css");
9
+
10
+ var _skeleton2 = require("./skeleton");
11
+
12
+ var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
13
+
14
+ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_skeleton2.Skeleton, {
15
+ Title: _skeleton2.SkeletonTitle,
16
+ Paragraph: _skeleton2.SkeletonParagraph
17
+ });
18
+
19
+ exports["default"] = _default;
@@ -0,0 +1,45 @@
1
+ .adm-skeleton {
2
+ --width: 100%;
3
+ --height: 0;
4
+ --border-radius: 0;
5
+ background-color: rgba(190, 190, 190, 0.2);
6
+ border-radius: var(--border-radius);
7
+ width: var(--width);
8
+ height: var(--height);
9
+ display: block;
10
+ }
11
+
12
+ .adm-skeleton.adm-skeleton-animated {
13
+ background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
14
+ background-size: 400% 100%;
15
+ animation: adm-skeleton-loading 1.4s ease infinite;
16
+ }
17
+
18
+ .adm-skeleton.adm-skeleton-title {
19
+ --width: 45%;
20
+ --height: 64px;
21
+ --border-radius: 4px;
22
+ margin-bottom: 32px;
23
+ margin-top: 32px;
24
+ }
25
+
26
+ .adm-skeleton.adm-skeleton-paragraph-line {
27
+ --height: 36px;
28
+ --border-radius: 4px;
29
+ margin-top: 24px;
30
+ margin-bottom: 24px;
31
+ }
32
+
33
+ .adm-skeleton.adm-skeleton-paragraph-line:last-child {
34
+ --width: 65%;
35
+ }
36
+
37
+ @keyframes adm-skeleton-loading {
38
+ 0% {
39
+ background-position: 100% 50%;
40
+ }
41
+
42
+ 100% {
43
+ background-position: 0 50%;
44
+ }
45
+ }
@@ -0,0 +1,15 @@
1
+ import { FC } from 'react';
2
+ import { NativeProps } from '../../utils/native-props';
3
+ export declare type SkeletonProps = {
4
+ animated?: boolean;
5
+ } & NativeProps<'--width' | '--height' | '--border-radius'>;
6
+ export declare const Skeleton: FC<SkeletonProps>;
7
+ export declare type SkeletonTitleProps = {
8
+ animated?: boolean;
9
+ } & NativeProps;
10
+ export declare const SkeletonTitle: FC<SkeletonTitleProps>;
11
+ export declare type SkeletonParagraphProps = {
12
+ animated?: boolean;
13
+ lineCount?: number;
14
+ } & NativeProps;
15
+ export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SkeletonTitle = exports.SkeletonParagraph = exports.Skeleton = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _nativeProps = require("../../utils/native-props");
11
+
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+
14
+ var _generateIntArray = require("../../utils/generate-int-array");
15
+
16
+ var _withDefaultProps = require("../../utils/with-default-props");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
+
20
+ var classPrefix = 'adm-skeleton';
21
+
22
+ var Skeleton = function Skeleton(props) {
23
+ var _classNames;
24
+
25
+ return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
26
+ className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-animated"] = props.animated, _classNames))
27
+ }));
28
+ };
29
+
30
+ exports.Skeleton = Skeleton;
31
+
32
+ var SkeletonTitle = function SkeletonTitle(props) {
33
+ return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(Skeleton, {
34
+ animated: props.animated,
35
+ className: classPrefix + "-title"
36
+ }));
37
+ };
38
+
39
+ exports.SkeletonTitle = SkeletonTitle;
40
+ var defaultSkeletonParagraphProps = {
41
+ lineCount: 3
42
+ };
43
+
44
+ var SkeletonParagraph = function SkeletonParagraph(p) {
45
+ var props = (0, _withDefaultProps.mergeProps)(defaultSkeletonParagraphProps, p);
46
+ var keys = (0, _generateIntArray.generateIntArray)(1, props.lineCount);
47
+
48
+ var node = /*#__PURE__*/_react["default"].createElement("div", {
49
+ className: classPrefix + "-paragraph"
50
+ }, keys.map(function (key) {
51
+ return /*#__PURE__*/_react["default"].createElement(Skeleton, {
52
+ key: key,
53
+ animated: props.animated,
54
+ className: classPrefix + "-paragraph-line"
55
+ });
56
+ }));
57
+
58
+ return (0, _nativeProps.withNativeProps)(props, node);
59
+ };
60
+
61
+ exports.SkeletonParagraph = SkeletonParagraph;
@@ -9,6 +9,7 @@ export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
9
9
  step?: number;
10
10
  digits?: number;
11
11
  disabled?: boolean;
12
+ inputReadOnly?: boolean;
12
13
  onChange?: (value: number) => void;
13
14
  } & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
14
15
  export declare const Stepper: FC<StepperProps>;
@@ -43,7 +43,8 @@ var Stepper = function Stepper(p) {
43
43
  var disabled = props.disabled,
44
44
  step = props.step,
45
45
  max = props.max,
46
- min = props.min;
46
+ min = props.min,
47
+ inputReadOnly = props.inputReadOnly;
47
48
 
48
49
  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
49
50
  value = _usePropsValue[0],
@@ -136,7 +137,8 @@ var Stepper = function Stepper(p) {
136
137
 
137
138
  setHasFocus(false);
138
139
  (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
139
- }
140
+ },
141
+ readOnly: inputReadOnly
140
142
  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
141
143
  className: classPrefix + "-plus",
142
144
  onClick: handlePlus,
@@ -1,4 +1,4 @@
1
- .adm-tab-bar {
1
+ .adm-tab-bar-wrap {
2
2
  display: flex;
3
3
  flex-wrap: nowrap;
4
4
  justify-content: flex-start;
@@ -11,5 +11,6 @@ export declare type TabBarProps = {
11
11
  activeKey?: string | null;
12
12
  defaultActiveKey?: string | null;
13
13
  onChange?: (key: string) => void;
14
+ safeArea?: boolean;
14
15
  } & NativeProps;
15
16
  export declare const TabBar: FC<TabBarProps>;
@@ -11,8 +11,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _nativeProps = require("../../utils/native-props");
13
13
 
14
+ var _withDefaultProps = require("../../utils/with-default-props");
15
+
14
16
  var _badge = _interopRequireDefault(require("../badge"));
15
17
 
18
+ var _safeArea = _interopRequireDefault(require("../safe-area"));
19
+
16
20
  var _usePropsValue2 = require("../../utils/use-props-value");
17
21
 
18
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,10 +26,15 @@ var TabBarItem = function TabBarItem() {
22
26
  };
23
27
 
24
28
  exports.TabBarItem = TabBarItem;
29
+ var classPrefix = "adm-tab-bar";
30
+ var defaultProps = {
31
+ safeArea: false
32
+ };
25
33
 
26
- var TabBar = function TabBar(props) {
34
+ var TabBar = function TabBar(p) {
27
35
  var _a;
28
36
 
37
+ var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
29
38
  var firstActiveKey = null;
30
39
  var items = [];
31
40
 
@@ -50,29 +59,33 @@ var TabBar = function TabBar(props) {
50
59
  setActiveKey = _usePropsValue[1];
51
60
 
52
61
  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
53
- className: 'adm-tab-bar'
62
+ className: classPrefix
63
+ }, /*#__PURE__*/_react["default"].createElement("div", {
64
+ className: classPrefix + "-wrap"
54
65
  }, items.map(function (item) {
66
+ var _classNames;
67
+
55
68
  var active = item.key === activeKey;
56
69
 
57
70
  function renderContent() {
58
71
  var iconElement = item.props.icon && /*#__PURE__*/_react["default"].createElement("div", {
59
- className: 'adm-tab-bar-item-icon'
72
+ className: classPrefix + "-item-icon"
60
73
  }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
61
74
 
62
75
  var titleElement = item.props.title && /*#__PURE__*/_react["default"].createElement("div", {
63
- className: 'adm-tab-bar-item-title'
76
+ className: classPrefix + "-item-title"
64
77
  }, item.props.title);
65
78
 
66
79
  if (iconElement) {
67
80
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
68
81
  content: item.props.badge,
69
- className: 'adm-tab-bar-icon-badge'
82
+ className: classPrefix + "-icon-badge"
70
83
  }, iconElement), titleElement);
71
84
  } else if (titleElement) {
72
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
85
+ return /*#__PURE__*/_react["default"].createElement(_badge["default"], {
73
86
  content: item.props.badge,
74
- className: 'adm-tab-bar-title-badge'
75
- }, titleElement));
87
+ className: classPrefix + "-title-badge"
88
+ }, titleElement);
76
89
  }
77
90
 
78
91
  return null;
@@ -85,10 +98,10 @@ var TabBar = function TabBar(props) {
85
98
  if (key === undefined || key === null) return;
86
99
  setActiveKey(key.toString());
87
100
  },
88
- className: (0, _classnames["default"])('adm-tab-bar-item', {
89
- 'adm-tab-bar-item-active': active
90
- })
101
+ className: (0, _classnames["default"])(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames))
91
102
  }, renderContent()));
103
+ })), props.safeArea && /*#__PURE__*/_react["default"].createElement(_safeArea["default"], {
104
+ position: 'bottom'
92
105
  })));
93
106
  };
94
107
 
package/2x/cjs/index.d.ts CHANGED
@@ -41,6 +41,7 @@ export { default as NavBar } from './components/nav-bar';
41
41
  export { default as NoticeBar } from './components/notice-bar';
42
42
  export { default as NumberKeyboard } from './components/number-keyboard';
43
43
  export { default as PageIndicator } from './components/page-indicator';
44
+ export { default as PasscodeInput } from './components/passcode-input';
44
45
  export { default as Picker } from './components/picker';
45
46
  export { default as PickerView } from './components/picker-view';
46
47
  export { default as Popover } from './components/popover';
@@ -57,6 +58,7 @@ export { default as Search } from './components/search-bar';
57
58
  export { default as SearchBar } from './components/search-bar';
58
59
  export { default as Selector } from './components/selector';
59
60
  export { default as SideBar } from './components/side-bar';
61
+ export { default as Skeleton } from './components/skeleton';
60
62
  export { default as Slider } from './components/slider';
61
63
  export { default as Space } from './components/space';
62
64
  export { default as Stepper } from './components//stepper';
@@ -72,4 +74,3 @@ export { default as Toast } from './components/toast';
72
74
  export { default as TreeSelect } from './components/tree-select';
73
75
  export { default as VirtualInput } from './components/virtual-input';
74
76
  export { default as WaterMark } from './components/water-mark';
75
- export { default as PasscodeInput } from './components/passcode-input';
package/2x/cjs/index.js CHANGED
@@ -351,6 +351,12 @@ Object.defineProperty(exports, "SideBar", {
351
351
  return _sideBar["default"];
352
352
  }
353
353
  });
354
+ Object.defineProperty(exports, "Skeleton", {
355
+ enumerable: true,
356
+ get: function get() {
357
+ return _skeleton["default"];
358
+ }
359
+ });
354
360
  Object.defineProperty(exports, "Slider", {
355
361
  enumerable: true,
356
362
  get: function get() {
@@ -532,6 +538,8 @@ var _numberKeyboard = _interopRequireDefault(require("./components/number-keyboa
532
538
 
533
539
  var _pageIndicator = _interopRequireDefault(require("./components/page-indicator"));
534
540
 
541
+ var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
542
+
535
543
  var _picker = _interopRequireDefault(require("./components/picker"));
536
544
 
537
545
  var _pickerView = _interopRequireDefault(require("./components/picker-view"));
@@ -562,6 +570,8 @@ var _selector = _interopRequireDefault(require("./components/selector"));
562
570
 
563
571
  var _sideBar = _interopRequireDefault(require("./components/side-bar"));
564
572
 
573
+ var _skeleton = _interopRequireDefault(require("./components/skeleton"));
574
+
565
575
  var _slider = _interopRequireDefault(require("./components/slider"));
566
576
 
567
577
  var _space = _interopRequireDefault(require("./components/space"));
@@ -592,8 +602,6 @@ var _virtualInput = _interopRequireDefault(require("./components/virtual-input")
592
602
 
593
603
  var _waterMark = _interopRequireDefault(require("./components/water-mark"));
594
604
 
595
- var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
596
-
597
605
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
598
606
 
599
607
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -10,7 +10,7 @@ var _react = require("react");
10
10
  var _ahooks = require("ahooks");
11
11
 
12
12
  function useMutationEffect(effect, targetRef, options) {
13
- var fn = (0, _ahooks.usePersistFn)(effect);
13
+ var fn = (0, _ahooks.useMemoizedFn)(effect);
14
14
  (0, _react.useEffect)(function () {
15
15
  var observer = new MutationObserver(function () {
16
16
  fn();
@@ -20,7 +20,7 @@ function usePropsValue(options) {
20
20
  stateRef.current = value;
21
21
  }
22
22
 
23
- var setState = (0, _ahooks.usePersistFn)(function (v) {
23
+ var setState = (0, _ahooks.useMemoizedFn)(function (v) {
24
24
  if (value === undefined) {
25
25
  stateRef.current = v;
26
26
  update();
@@ -10,7 +10,7 @@ var _react = require("react");
10
10
  var _ahooks = require("ahooks");
11
11
 
12
12
  function useResizeEffect(effect, targetRef) {
13
- var fn = (0, _ahooks.usePersistFn)(effect);
13
+ var fn = (0, _ahooks.useMemoizedFn)(effect);
14
14
  (0, _react.useLayoutEffect)(function () {
15
15
  var target = targetRef.current;
16
16
  if (!target) return;
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  .adm-checkbox-content {
84
- flex: none;
84
+ flex: 0 1 auto;
85
85
  font-size: var(--font-size);
86
86
  padding-left: var(--gap);
87
87
  }
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useMemo } from 'react';
2
- import { usePersistFn } from 'ahooks';
2
+ import { useMemoizedFn } from 'ahooks';
3
3
  import Picker from '../picker';
4
4
  import { withNativeProps } from '../../utils/native-props';
5
5
  import { mergeProps } from '../../utils/with-default-props';
@@ -31,7 +31,7 @@ export var DatePicker = function DatePicker(p) {
31
31
  var onConfirm = useCallback(function (val) {
32
32
  setValue(convertStringArrayToDate(val, props.precision));
33
33
  }, [setValue, props.precision]);
34
- var onSelect = usePersistFn(function (val) {
34
+ var onSelect = useMemoizedFn(function (val) {
35
35
  var _a;
36
36
 
37
37
  var date = convertStringArrayToDate(val, props.precision);
@@ -2,7 +2,10 @@ import React, { useEffect, useRef } from 'react';
2
2
  import { useInViewport } from 'ahooks';
3
3
  export var LazyDetector = function LazyDetector(props) {
4
4
  var ref = useRef(null);
5
- var inViewport = useInViewport(ref);
5
+
6
+ var _useInViewport = useInViewport(ref),
7
+ inViewport = _useInViewport[0];
8
+
6
9
  useEffect(function () {
7
10
  if (inViewport) {
8
11
  props.onActive();