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.
- package/2x/bundle/antd-mobile.cjs.js +12 -12
- package/2x/bundle/antd-mobile.compatible.umd.js +6882 -6786
- package/2x/bundle/antd-mobile.es.js +3779 -3709
- package/2x/bundle/antd-mobile.umd.js +12 -12
- package/2x/bundle/style.css +131 -0
- package/2x/cjs/components/form/form-item.d.ts +1 -1
- package/2x/cjs/components/picker-view/wheel.js +2 -0
- package/2x/cjs/components/rate/rate.css +3 -0
- package/2x/cjs/components/rate/rate.js +15 -14
- package/2x/cjs/components/result-page/index.d.ts +7 -0
- package/2x/cjs/components/result-page/index.js +20 -0
- package/2x/cjs/components/result-page/result-page-card.d.ts +6 -0
- package/2x/cjs/components/result-page/result-page-card.js +24 -0
- package/2x/cjs/components/result-page/result-page.css +130 -0
- package/2x/cjs/components/result-page/result-page.d.ts +23 -0
- package/2x/cjs/components/result-page/result-page.js +108 -0
- package/2x/cjs/components/swiper/swiper.js +1 -1
- package/2x/cjs/index.d.ts +1 -0
- package/2x/cjs/index.js +8 -0
- package/2x/es/components/form/form-item.d.ts +1 -1
- package/2x/es/components/picker-view/wheel.js +2 -0
- package/2x/es/components/rate/rate.css +3 -0
- package/2x/es/components/rate/rate.js +15 -14
- package/2x/es/components/result-page/index.d.ts +7 -0
- package/2x/es/components/result-page/index.js +7 -0
- package/2x/es/components/result-page/result-page-card.d.ts +6 -0
- package/2x/es/components/result-page/result-page-card.js +9 -0
- package/2x/es/components/result-page/result-page.css +130 -0
- package/2x/es/components/result-page/result-page.d.ts +23 -0
- package/2x/es/components/result-page/result-page.js +83 -0
- package/2x/es/components/swiper/swiper.js +1 -1
- package/2x/es/index.d.ts +1 -0
- package/2x/es/index.js +1 -0
- package/2x/package.json +3 -3
- package/2x/umd/antd-mobile.js +6882 -6786
- package/bundle/antd-mobile.cjs.js +12 -12
- package/bundle/antd-mobile.compatible.umd.js +6882 -6786
- package/bundle/antd-mobile.es.js +3779 -3709
- package/bundle/antd-mobile.umd.js +12 -12
- package/bundle/style.css +1 -1
- package/cjs/components/form/form-item.d.ts +1 -1
- package/cjs/components/picker-view/wheel.js +2 -0
- package/cjs/components/rate/rate.css +3 -0
- package/cjs/components/rate/rate.js +15 -14
- package/cjs/components/result-page/index.d.ts +7 -0
- package/cjs/components/result-page/index.js +20 -0
- package/cjs/components/result-page/result-page-card.d.ts +6 -0
- package/cjs/components/result-page/result-page-card.js +24 -0
- package/cjs/components/result-page/result-page.css +113 -0
- package/cjs/components/result-page/result-page.d.ts +23 -0
- package/cjs/components/result-page/result-page.js +108 -0
- package/cjs/components/swiper/swiper.js +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +8 -0
- package/es/components/form/form-item.d.ts +1 -1
- package/es/components/picker-view/wheel.js +2 -0
- package/es/components/rate/rate.css +3 -0
- package/es/components/rate/rate.js +15 -14
- package/es/components/result-page/index.d.ts +7 -0
- package/es/components/result-page/index.js +7 -0
- package/es/components/result-page/result-page-card.d.ts +6 -0
- package/es/components/result-page/result-page-card.js +9 -0
- package/es/components/result-page/result-page.css +113 -0
- package/es/components/result-page/result-page.d.ts +23 -0
- package/es/components/result-page/result-page.js +83 -0
- package/es/components/swiper/swiper.js +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/package.json +3 -3
- 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
|
|
56
|
-
|
|
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,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.
|
|
3
|
+
"version": "5.21.0",
|
|
4
4
|
"dependencies": {
|
|
5
|
-
"@floating-ui/dom": "^0.
|
|
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.
|
|
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",
|