antd-mobile 5.20.0 → 5.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/2x/bundle/antd-mobile.cjs.js +12 -12
  2. package/2x/bundle/antd-mobile.compatible.umd.js +6882 -6786
  3. package/2x/bundle/antd-mobile.es.js +3779 -3709
  4. package/2x/bundle/antd-mobile.umd.js +12 -12
  5. package/2x/bundle/style.css +131 -0
  6. package/2x/cjs/components/form/form-item.d.ts +1 -1
  7. package/2x/cjs/components/picker-view/wheel.js +2 -0
  8. package/2x/cjs/components/rate/rate.css +3 -0
  9. package/2x/cjs/components/rate/rate.js +15 -14
  10. package/2x/cjs/components/result-page/index.d.ts +7 -0
  11. package/2x/cjs/components/result-page/index.js +20 -0
  12. package/2x/cjs/components/result-page/result-page-card.d.ts +6 -0
  13. package/2x/cjs/components/result-page/result-page-card.js +24 -0
  14. package/2x/cjs/components/result-page/result-page.css +130 -0
  15. package/2x/cjs/components/result-page/result-page.d.ts +23 -0
  16. package/2x/cjs/components/result-page/result-page.js +108 -0
  17. package/2x/cjs/components/swiper/swiper.js +1 -1
  18. package/2x/cjs/index.d.ts +1 -0
  19. package/2x/cjs/index.js +8 -0
  20. package/2x/es/components/form/form-item.d.ts +1 -1
  21. package/2x/es/components/picker-view/wheel.js +2 -0
  22. package/2x/es/components/rate/rate.css +3 -0
  23. package/2x/es/components/rate/rate.js +15 -14
  24. package/2x/es/components/result-page/index.d.ts +7 -0
  25. package/2x/es/components/result-page/index.js +7 -0
  26. package/2x/es/components/result-page/result-page-card.d.ts +6 -0
  27. package/2x/es/components/result-page/result-page-card.js +9 -0
  28. package/2x/es/components/result-page/result-page.css +130 -0
  29. package/2x/es/components/result-page/result-page.d.ts +23 -0
  30. package/2x/es/components/result-page/result-page.js +83 -0
  31. package/2x/es/components/swiper/swiper.js +1 -1
  32. package/2x/es/index.d.ts +1 -0
  33. package/2x/es/index.js +1 -0
  34. package/2x/package.json +3 -3
  35. package/2x/umd/antd-mobile.js +6882 -6786
  36. package/bundle/antd-mobile.cjs.js +12 -12
  37. package/bundle/antd-mobile.compatible.umd.js +6882 -6786
  38. package/bundle/antd-mobile.es.js +3779 -3709
  39. package/bundle/antd-mobile.umd.js +12 -12
  40. package/bundle/style.css +1 -1
  41. package/cjs/components/form/form-item.d.ts +1 -1
  42. package/cjs/components/picker-view/wheel.js +2 -0
  43. package/cjs/components/rate/rate.css +3 -0
  44. package/cjs/components/rate/rate.js +15 -14
  45. package/cjs/components/result-page/index.d.ts +7 -0
  46. package/cjs/components/result-page/index.js +20 -0
  47. package/cjs/components/result-page/result-page-card.d.ts +6 -0
  48. package/cjs/components/result-page/result-page-card.js +24 -0
  49. package/cjs/components/result-page/result-page.css +113 -0
  50. package/cjs/components/result-page/result-page.d.ts +23 -0
  51. package/cjs/components/result-page/result-page.js +108 -0
  52. package/cjs/components/swiper/swiper.js +1 -1
  53. package/cjs/index.d.ts +1 -0
  54. package/cjs/index.js +8 -0
  55. package/es/components/form/form-item.d.ts +1 -1
  56. package/es/components/picker-view/wheel.js +2 -0
  57. package/es/components/rate/rate.css +3 -0
  58. package/es/components/rate/rate.js +15 -14
  59. package/es/components/result-page/index.d.ts +7 -0
  60. package/es/components/result-page/index.js +7 -0
  61. package/es/components/result-page/result-page-card.d.ts +6 -0
  62. package/es/components/result-page/result-page-card.js +9 -0
  63. package/es/components/result-page/result-page.css +113 -0
  64. package/es/components/result-page/result-page.d.ts +23 -0
  65. package/es/components/result-page/result-page.js +83 -0
  66. package/es/components/swiper/swiper.js +1 -1
  67. package/es/index.d.ts +1 -0
  68. package/es/index.js +1 -0
  69. package/package.json +3 -3
  70. package/umd/antd-mobile.js +1 -1
@@ -0,0 +1,113 @@
1
+ .adm-result-page {
2
+ --background-color: var(--adm-color-primary);
3
+ position: relative;
4
+ background-color: var(--adm-color-box);
5
+ min-height: 100vh;
6
+ width: 100%;
7
+ }
8
+ .adm-result-page-header {
9
+ display: flex;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ background-color: transparent;
13
+ position: relative;
14
+ padding: 20px;
15
+ padding-bottom: 100px;
16
+ z-index: 1;
17
+ overflow: hidden;
18
+ }
19
+ .adm-result-page-icon {
20
+ color: var(--adm-color-background);
21
+ box-sizing: border-box;
22
+ padding: 2px;
23
+ margin-bottom: 8px;
24
+ }
25
+ .adm-result-page-icon .antd-mobile-icon {
26
+ font-size: 32px;
27
+ }
28
+ .adm-result-page-title {
29
+ font-size: var(--adm-font-size-10);
30
+ color: var(--adm-color-background);
31
+ line-height: 1.4;
32
+ text-align: center;
33
+ }
34
+ .adm-result-page-description {
35
+ margin-top: 8px;
36
+ margin-bottom: 24px;
37
+ font-size: var(--adm-font-size-6);
38
+ color: rgba(255, 255, 255, 0.6);
39
+ line-height: 1.4;
40
+ text-align: center;
41
+ }
42
+ .adm-result-page-details {
43
+ width: 100%;
44
+ }
45
+ .adm-result-page-detail {
46
+ width: 100%;
47
+ display: flex;
48
+ flex-direction: row;
49
+ justify-content: space-between;
50
+ margin-bottom: 5px;
51
+ color: var(--adm-color-background);
52
+ font-size: var(--adm-font-size-6);
53
+ }
54
+ .adm-result-page-detail-bold {
55
+ font-weight: 600;
56
+ }
57
+ .adm-result-page-collapse {
58
+ opacity: 0.6;
59
+ width: 10px;
60
+ height: 10px;
61
+ margin: auto;
62
+ margin-bottom: 5px;
63
+ border-top: 2px solid var(--adm-color-background);
64
+ border-right: 2px solid var(--adm-color-background);
65
+ transform: rotate(135deg);
66
+ }
67
+ .adm-result-page-collapse-active {
68
+ transform: rotate(-45deg);
69
+ }
70
+ .adm-result-page-bgWrapper {
71
+ position: relative;
72
+ align-self: flex-start;
73
+ top: 54px;
74
+ }
75
+ .adm-result-page-bg {
76
+ --width: 440vw;
77
+ position: absolute;
78
+ height: var(--width);
79
+ width: var(--width);
80
+ left: calc((var(--width) - 100vw) * -1 / 2 - 20px);
81
+ top: calc(var(--width) * -1 + 1vw);
82
+ border-radius: 50%;
83
+ background-color: var(--background-color);
84
+ z-index: -1;
85
+ }
86
+ .adm-result-page-content {
87
+ position: relative;
88
+ padding: 12px;
89
+ top: -104px;
90
+ z-index: 2;
91
+ }
92
+ .adm-result-page-footer {
93
+ position: fixed;
94
+ bottom: 0;
95
+ width: 100%;
96
+ padding: 12px;
97
+ padding-bottom: 24px;
98
+ display: flex;
99
+ justify-content: center;
100
+ background-color: var(--adm-color-box);
101
+ z-index: 3;
102
+ }
103
+ .adm-result-page-footer-btn {
104
+ flex: 1;
105
+ max-width: calc((100vw - 36px) / 2);
106
+ }
107
+ .adm-result-page-footer-space {
108
+ width: 12px;
109
+ }
110
+ .adm-result-page-card {
111
+ border-radius: 8px;
112
+ background-color: var(--adm-color-background);
113
+ }
@@ -0,0 +1,23 @@
1
+ import React, { FC, ReactNode } from 'react';
2
+ import { NativeProps } from '../../utils/native-props';
3
+ interface ResultPageDetail {
4
+ label: ReactNode;
5
+ value: ReactNode;
6
+ bold?: boolean;
7
+ }
8
+ declare type ResultPageDetails = ResultPageDetail[];
9
+ declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
10
+ export declare type ResultPageProps = {
11
+ status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
12
+ title: ReactNode;
13
+ description?: ReactNode;
14
+ icon?: ReactNode;
15
+ details?: ResultPageDetails;
16
+ children?: ReactNode;
17
+ primaryButtonText?: ReactNode;
18
+ secondaryButtonText?: ReactNode;
19
+ onPrimaryButtonClick?: OnClick;
20
+ onSecondaryButtonClick?: OnClick;
21
+ } & NativeProps<'--background-color'>;
22
+ export declare const ResultPage: FC<ResultPageProps>;
23
+ export {};
@@ -0,0 +1,108 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ResultPage = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _antdMobileIcons = require("antd-mobile-icons");
11
+
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+
14
+ var _nativeProps = require("../../utils/native-props");
15
+
16
+ var _withDefaultProps = require("../../utils/with-default-props");
17
+
18
+ var _isNodeWithContent = require("../../utils/is-node-with-content");
19
+
20
+ var _button = _interopRequireDefault(require("../button"));
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
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
+
28
+ const classPrefix = `adm-result-page`;
29
+ const iconRecord = {
30
+ success: _antdMobileIcons.CheckCircleFill,
31
+ error: _antdMobileIcons.CloseCircleFill,
32
+ info: _antdMobileIcons.InformationCircleFill,
33
+ waiting: _antdMobileIcons.ClockCircleFill,
34
+ warning: _antdMobileIcons.ExclamationCircleFill
35
+ };
36
+ const defaultProps = {
37
+ status: 'info',
38
+ details: []
39
+ };
40
+
41
+ const ResultPage = p => {
42
+ const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
43
+ const {
44
+ status,
45
+ title,
46
+ description,
47
+ details,
48
+ icon,
49
+ primaryButtonText,
50
+ secondaryButtonText,
51
+ onPrimaryButtonClick,
52
+ onSecondaryButtonClick
53
+ } = props;
54
+
55
+ const resultIcon = icon || _react.default.createElement(iconRecord[status]);
56
+
57
+ const [collapse, setCollapse] = (0, _react.useState)(true);
58
+ const showSecondaryButton = (0, _isNodeWithContent.isNodeWithContent)(secondaryButtonText);
59
+ const showPrimaryButton = (0, _isNodeWithContent.isNodeWithContent)(primaryButtonText);
60
+ return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
61
+ className: classPrefix
62
+ }, _react.default.createElement("div", {
63
+ className: `${classPrefix}-header`
64
+ }, _react.default.createElement("div", {
65
+ className: `${classPrefix}-icon`
66
+ }, resultIcon), _react.default.createElement("div", {
67
+ className: `${classPrefix}-title`
68
+ }, title), (0, _isNodeWithContent.isNodeWithContent)(description) ? _react.default.createElement("div", {
69
+ className: `${classPrefix}-description`
70
+ }, description) : null, details.length ? _react.default.createElement("div", {
71
+ className: `${classPrefix}-details`
72
+ }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
73
+ return _react.default.createElement("div", {
74
+ className: (0, _classnames.default)(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
75
+ key: index
76
+ }, _react.default.createElement("span", null, detail.label), _react.default.createElement("span", null, detail.value));
77
+ }), details.length > 3 && _react.default.createElement("div", {
78
+ onClick: () => setCollapse(prev => !prev)
79
+ }, _react.default.createElement("div", {
80
+ className: (0, _classnames.default)(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
81
+ }))) : null, _react.default.createElement("div", {
82
+ className: `${classPrefix}-bgWrapper`
83
+ }, _react.default.createElement("div", {
84
+ className: `${classPrefix}-bg`
85
+ }))), _react.default.createElement("div", {
86
+ className: `${classPrefix}-content`
87
+ }, props.children), _react.default.createElement("div", {
88
+ className: `${classPrefix}-footer`
89
+ }, showSecondaryButton && _react.default.createElement(_button.default, {
90
+ block: true,
91
+ color: 'default',
92
+ fill: 'solid',
93
+ size: 'large',
94
+ onClick: onSecondaryButtonClick,
95
+ className: `${classPrefix}-footer-btn`
96
+ }, secondaryButtonText), showPrimaryButton && showSecondaryButton && _react.default.createElement("div", {
97
+ className: `${classPrefix}-footer-space`
98
+ }), showPrimaryButton && _react.default.createElement(_button.default, {
99
+ block: true,
100
+ color: 'primary',
101
+ fill: 'solid',
102
+ size: 'large',
103
+ onClick: onPrimaryButtonClick,
104
+ className: `${classPrefix}-footer-btn`
105
+ }, primaryButtonText))));
106
+ };
107
+
108
+ exports.ResultPage = ResultPage;
@@ -245,7 +245,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
245
245
  return () => {
246
246
  window.clearInterval(interval);
247
247
  };
248
- }, [autoplay, autoplayInterval, dragging]);
248
+ }, [autoplay, autoplayInterval, dragging, count]);
249
249
 
250
250
  function renderTrackInner() {
251
251
  if (loop) {
package/cjs/index.d.ts CHANGED
@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
56
56
  export { default as Radio } from './components/radio';
57
57
  export { default as Rate } from './components/rate';
58
58
  export { default as Result } from './components/result';
59
+ export { default as ResultPage } from './components/result-page';
59
60
  export { default as SafeArea } from './components/safe-area';
60
61
  export { default as ScrollMask } from './components/scroll-mask';
61
62
  export { default as SearchBar } from './components/search-bar';
package/cjs/index.js CHANGED
@@ -339,6 +339,12 @@ Object.defineProperty(exports, "Result", {
339
339
  return _result.default;
340
340
  }
341
341
  });
342
+ Object.defineProperty(exports, "ResultPage", {
343
+ enumerable: true,
344
+ get: function () {
345
+ return _resultPage.default;
346
+ }
347
+ });
342
348
  Object.defineProperty(exports, "SafeArea", {
343
349
  enumerable: true,
344
350
  get: function () {
@@ -610,6 +616,8 @@ var _rate = _interopRequireDefault(require("./components/rate"));
610
616
 
611
617
  var _result = _interopRequireDefault(require("./components/result"));
612
618
 
619
+ var _resultPage = _interopRequireDefault(require("./components/result-page"));
620
+
613
621
  var _safeArea = _interopRequireDefault(require("./components/safe-area"));
614
622
 
615
623
  var _scrollMask = _interopRequireDefault(require("./components/scroll-mask"));
@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
7
7
  declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
8
8
  declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
9
9
  declare type RcFieldProps = Omit<FieldProps, 'children'>;
10
- export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
10
+ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue' | 'getValueFromEvent' | 'getValueProps' | 'normalize' | 'preserve' | 'validateFirst'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
11
11
  label?: React.ReactNode;
12
12
  help?: React.ReactNode;
13
13
  hasFeedback?: boolean;
@@ -186,6 +186,8 @@ export const Wheel = memo(props => {
186
186
  if (prev.index !== next.index) return false;
187
187
  if (prev.value !== next.value) return false;
188
188
  if (prev.onSelect !== next.onSelect) return false;
189
+ if (prev.renderLabel !== next.renderLabel) return false;
190
+ if (prev.mouseWheel !== next.mouseWheel) return false;
189
191
 
190
192
  if (!isEqual(prev.column, next.column)) {
191
193
  return false;
@@ -4,6 +4,8 @@
4
4
  --inactive-color: var(--adm-color-border);
5
5
  display: inline-flex;
6
6
  touch-action: pan-y;
7
+ -webkit-user-select: none;
8
+ user-select: none;
7
9
  }
8
10
  .adm-rate-box {
9
11
  position: relative;
@@ -17,6 +19,7 @@
17
19
  overflow: hidden;
18
20
  cursor: pointer;
19
21
  box-sizing: border-box;
22
+ transition: all 0.3s;
20
23
  }
21
24
  .adm-rate-star-half {
22
25
  padding-right: 0;
@@ -28,15 +28,6 @@ export const Rate = p => {
28
28
  [`${classPrefix}-star-half`]: half,
29
29
  [`${classPrefix}-star-readonly`]: props.readOnly
30
30
  }),
31
- onClick: () => {
32
- if (props.readOnly) return;
33
-
34
- if (props.allowClear && value === v) {
35
- setValue(0);
36
- } else {
37
- setValue(v);
38
- }
39
- },
40
31
  role: 'radio',
41
32
  "aria-checked": value >= v,
42
33
  "aria-label": '' + v
@@ -46,20 +37,30 @@ export const Rate = p => {
46
37
  const bind = useDrag(state => {
47
38
  if (props.readOnly) return;
48
39
  const {
49
- xy: [clientX]
40
+ xy: [clientX],
41
+ tap
50
42
  } = state;
51
43
  const container = containerRef.current;
52
44
  if (!container) return;
53
45
  const rect = container.getBoundingClientRect();
54
46
  const rawValue = (clientX - rect.left) / rect.width * props.count;
55
- const roundedValue = props.allowHalf ? Math.round(rawValue * 2) / 2 : Math.round(rawValue);
56
- setValue(bound(roundedValue, 0, props.count));
47
+ const ceiledValue = props.allowHalf ? Math.ceil(rawValue * 2) / 2 : Math.ceil(rawValue);
48
+ const boundValue = bound(ceiledValue, 0, props.count);
49
+
50
+ if (tap) {
51
+ if (props.allowClear && boundValue === value) {
52
+ setValue(0);
53
+ return;
54
+ }
55
+ }
56
+
57
+ setValue(boundValue);
57
58
  }, {
58
59
  axis: 'x',
59
- preventScroll: true,
60
60
  pointer: {
61
61
  touch: true
62
- }
62
+ },
63
+ filterTaps: true
63
64
  });
64
65
  return withNativeProps(props, React.createElement("div", Object.assign({
65
66
  className: classPrefix,
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import './result-page.less';
3
+ export type { ResultPageProps } from './result-page';
4
+ declare const _default: import("react").FC<import("./result-page").ResultPageProps> & {
5
+ Card: import("react").FC<import("./result-page-card").ResultPageCardProps>;
6
+ };
7
+ export default _default;
@@ -0,0 +1,7 @@
1
+ import "./result-page.css";
2
+ import { ResultPage } from './result-page';
3
+ import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
4
+ import { ResultPageCard } from './result-page-card';
5
+ export default attachPropertiesToComponent(ResultPage, {
6
+ Card: ResultPageCard
7
+ });
@@ -0,0 +1,6 @@
1
+ import { FC, ReactNode } from 'react';
2
+ import { NativeProps } from '../../utils/native-props';
3
+ export declare type ResultPageCardProps = {
4
+ children?: ReactNode;
5
+ } & NativeProps;
6
+ export declare const ResultPageCard: FC<ResultPageCardProps>;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { withNativeProps } from '../../utils/native-props';
3
+ import classNames from 'classnames';
4
+ const classPrefix = `adm-result-page-card`;
5
+ export const ResultPageCard = props => {
6
+ return withNativeProps(props, React.createElement('div', {
7
+ className: classNames(`${classPrefix}`)
8
+ }, props.children));
9
+ };
@@ -0,0 +1,113 @@
1
+ .adm-result-page {
2
+ --background-color: var(--adm-color-primary);
3
+ position: relative;
4
+ background-color: var(--adm-color-box);
5
+ min-height: 100vh;
6
+ width: 100%;
7
+ }
8
+ .adm-result-page-header {
9
+ display: flex;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ background-color: transparent;
13
+ position: relative;
14
+ padding: 20px;
15
+ padding-bottom: 100px;
16
+ z-index: 1;
17
+ overflow: hidden;
18
+ }
19
+ .adm-result-page-icon {
20
+ color: var(--adm-color-background);
21
+ box-sizing: border-box;
22
+ padding: 2px;
23
+ margin-bottom: 8px;
24
+ }
25
+ .adm-result-page-icon .antd-mobile-icon {
26
+ font-size: 32px;
27
+ }
28
+ .adm-result-page-title {
29
+ font-size: var(--adm-font-size-10);
30
+ color: var(--adm-color-background);
31
+ line-height: 1.4;
32
+ text-align: center;
33
+ }
34
+ .adm-result-page-description {
35
+ margin-top: 8px;
36
+ margin-bottom: 24px;
37
+ font-size: var(--adm-font-size-6);
38
+ color: rgba(255, 255, 255, 0.6);
39
+ line-height: 1.4;
40
+ text-align: center;
41
+ }
42
+ .adm-result-page-details {
43
+ width: 100%;
44
+ }
45
+ .adm-result-page-detail {
46
+ width: 100%;
47
+ display: flex;
48
+ flex-direction: row;
49
+ justify-content: space-between;
50
+ margin-bottom: 5px;
51
+ color: var(--adm-color-background);
52
+ font-size: var(--adm-font-size-6);
53
+ }
54
+ .adm-result-page-detail-bold {
55
+ font-weight: 600;
56
+ }
57
+ .adm-result-page-collapse {
58
+ opacity: 0.6;
59
+ width: 10px;
60
+ height: 10px;
61
+ margin: auto;
62
+ margin-bottom: 5px;
63
+ border-top: 2px solid var(--adm-color-background);
64
+ border-right: 2px solid var(--adm-color-background);
65
+ transform: rotate(135deg);
66
+ }
67
+ .adm-result-page-collapse-active {
68
+ transform: rotate(-45deg);
69
+ }
70
+ .adm-result-page-bgWrapper {
71
+ position: relative;
72
+ align-self: flex-start;
73
+ top: 54px;
74
+ }
75
+ .adm-result-page-bg {
76
+ --width: 440vw;
77
+ position: absolute;
78
+ height: var(--width);
79
+ width: var(--width);
80
+ left: calc((var(--width) - 100vw) * -1 / 2 - 20px);
81
+ top: calc(var(--width) * -1 + 1vw);
82
+ border-radius: 50%;
83
+ background-color: var(--background-color);
84
+ z-index: -1;
85
+ }
86
+ .adm-result-page-content {
87
+ position: relative;
88
+ padding: 12px;
89
+ top: -104px;
90
+ z-index: 2;
91
+ }
92
+ .adm-result-page-footer {
93
+ position: fixed;
94
+ bottom: 0;
95
+ width: 100%;
96
+ padding: 12px;
97
+ padding-bottom: 24px;
98
+ display: flex;
99
+ justify-content: center;
100
+ background-color: var(--adm-color-box);
101
+ z-index: 3;
102
+ }
103
+ .adm-result-page-footer-btn {
104
+ flex: 1;
105
+ max-width: calc((100vw - 36px) / 2);
106
+ }
107
+ .adm-result-page-footer-space {
108
+ width: 12px;
109
+ }
110
+ .adm-result-page-card {
111
+ border-radius: 8px;
112
+ background-color: var(--adm-color-background);
113
+ }
@@ -0,0 +1,23 @@
1
+ import React, { FC, ReactNode } from 'react';
2
+ import { NativeProps } from '../../utils/native-props';
3
+ interface ResultPageDetail {
4
+ label: ReactNode;
5
+ value: ReactNode;
6
+ bold?: boolean;
7
+ }
8
+ declare type ResultPageDetails = ResultPageDetail[];
9
+ declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
10
+ export declare type ResultPageProps = {
11
+ status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
12
+ title: ReactNode;
13
+ description?: ReactNode;
14
+ icon?: ReactNode;
15
+ details?: ResultPageDetails;
16
+ children?: ReactNode;
17
+ primaryButtonText?: ReactNode;
18
+ secondaryButtonText?: ReactNode;
19
+ onPrimaryButtonClick?: OnClick;
20
+ onSecondaryButtonClick?: OnClick;
21
+ } & NativeProps<'--background-color'>;
22
+ export declare const ResultPage: FC<ResultPageProps>;
23
+ export {};
@@ -0,0 +1,83 @@
1
+ import React, { useState } from 'react';
2
+ import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
3
+ import classNames from 'classnames';
4
+ import { withNativeProps } from '../../utils/native-props';
5
+ import { mergeProps } from '../../utils/with-default-props';
6
+ import { isNodeWithContent } from '../../utils/is-node-with-content';
7
+ import Button from '../button';
8
+ const classPrefix = `adm-result-page`;
9
+ const iconRecord = {
10
+ success: CheckCircleFill,
11
+ error: CloseCircleFill,
12
+ info: InformationCircleFill,
13
+ waiting: ClockCircleFill,
14
+ warning: ExclamationCircleFill
15
+ };
16
+ const defaultProps = {
17
+ status: 'info',
18
+ details: []
19
+ };
20
+ export const ResultPage = p => {
21
+ const props = mergeProps(defaultProps, p);
22
+ const {
23
+ status,
24
+ title,
25
+ description,
26
+ details,
27
+ icon,
28
+ primaryButtonText,
29
+ secondaryButtonText,
30
+ onPrimaryButtonClick,
31
+ onSecondaryButtonClick
32
+ } = props;
33
+ const resultIcon = icon || React.createElement(iconRecord[status]);
34
+ const [collapse, setCollapse] = useState(true);
35
+ const showSecondaryButton = isNodeWithContent(secondaryButtonText);
36
+ const showPrimaryButton = isNodeWithContent(primaryButtonText);
37
+ return withNativeProps(props, React.createElement("div", {
38
+ className: classPrefix
39
+ }, React.createElement("div", {
40
+ className: `${classPrefix}-header`
41
+ }, React.createElement("div", {
42
+ className: `${classPrefix}-icon`
43
+ }, resultIcon), React.createElement("div", {
44
+ className: `${classPrefix}-title`
45
+ }, title), isNodeWithContent(description) ? React.createElement("div", {
46
+ className: `${classPrefix}-description`
47
+ }, description) : null, details.length ? React.createElement("div", {
48
+ className: `${classPrefix}-details`
49
+ }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
50
+ return React.createElement("div", {
51
+ className: classNames(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
52
+ key: index
53
+ }, React.createElement("span", null, detail.label), React.createElement("span", null, detail.value));
54
+ }), details.length > 3 && React.createElement("div", {
55
+ onClick: () => setCollapse(prev => !prev)
56
+ }, React.createElement("div", {
57
+ className: classNames(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
58
+ }))) : null, React.createElement("div", {
59
+ className: `${classPrefix}-bgWrapper`
60
+ }, React.createElement("div", {
61
+ className: `${classPrefix}-bg`
62
+ }))), React.createElement("div", {
63
+ className: `${classPrefix}-content`
64
+ }, props.children), React.createElement("div", {
65
+ className: `${classPrefix}-footer`
66
+ }, showSecondaryButton && React.createElement(Button, {
67
+ block: true,
68
+ color: 'default',
69
+ fill: 'solid',
70
+ size: 'large',
71
+ onClick: onSecondaryButtonClick,
72
+ className: `${classPrefix}-footer-btn`
73
+ }, secondaryButtonText), showPrimaryButton && showSecondaryButton && React.createElement("div", {
74
+ className: `${classPrefix}-footer-space`
75
+ }), showPrimaryButton && React.createElement(Button, {
76
+ block: true,
77
+ color: 'primary',
78
+ fill: 'solid',
79
+ size: 'large',
80
+ onClick: onPrimaryButtonClick,
81
+ className: `${classPrefix}-footer-btn`
82
+ }, primaryButtonText))));
83
+ };
@@ -217,7 +217,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
217
217
  return () => {
218
218
  window.clearInterval(interval);
219
219
  };
220
- }, [autoplay, autoplayInterval, dragging]);
220
+ }, [autoplay, autoplayInterval, dragging, count]);
221
221
 
222
222
  function renderTrackInner() {
223
223
  if (loop) {
package/es/index.d.ts CHANGED
@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
56
56
  export { default as Radio } from './components/radio';
57
57
  export { default as Rate } from './components/rate';
58
58
  export { default as Result } from './components/result';
59
+ export { default as ResultPage } from './components/result-page';
59
60
  export { default as SafeArea } from './components/safe-area';
60
61
  export { default as ScrollMask } from './components/scroll-mask';
61
62
  export { default as SearchBar } from './components/search-bar';
package/es/index.js CHANGED
@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
56
56
  export { default as Radio } from './components/radio';
57
57
  export { default as Rate } from './components/rate';
58
58
  export { default as Result } from './components/result';
59
+ export { default as ResultPage } from './components/result-page';
59
60
  export { default as SafeArea } from './components/safe-area';
60
61
  export { default as ScrollMask } from './components/scroll-mask';
61
62
  export { default as SearchBar } from './components/search-bar';
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "antd-mobile",
3
- "version": "5.20.0",
3
+ "version": "5.21.0",
4
4
  "dependencies": {
5
- "@floating-ui/dom": "^0.5.2",
5
+ "@floating-ui/dom": "^1.0.0",
6
6
  "@react-spring/web": "^9.4.5",
7
7
  "@use-gesture/react": "10.2.17",
8
- "ahooks": "^3.5.2",
8
+ "ahooks": "^3.7.0",
9
9
  "antd-mobile-icons": "^0.3.0",
10
10
  "antd-mobile-v5-count": "^1.0.1",
11
11
  "big.js": "^6.2.1",