antd-mobile 5.25.1 → 5.26.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.development.js +188 -121
- package/2x/bundle/antd-mobile.cjs.js +8 -8
- package/2x/bundle/antd-mobile.es.development.js +188 -121
- package/2x/bundle/antd-mobile.es.js +3936 -3910
- package/2x/bundle/antd-mobile.umd.development.js +188 -121
- package/2x/bundle/antd-mobile.umd.js +8 -8
- package/2x/bundle/style.css +29 -5
- package/2x/cjs/components/calendar/calendar.js +9 -1
- package/2x/cjs/components/floating-bubble/floating-bubble.d.ts +8 -0
- package/2x/cjs/components/floating-bubble/floating-bubble.js +25 -5
- package/2x/cjs/components/form/form.d.ts +1 -1
- package/2x/cjs/components/image-uploader/image-uploader.css +16 -1
- package/2x/cjs/components/image-uploader/image-uploader.d.ts +4 -1
- package/2x/cjs/components/image-uploader/image-uploader.js +46 -9
- package/2x/cjs/components/image-uploader/preview-item.d.ts +2 -1
- package/2x/cjs/components/image-uploader/preview-item.js +5 -7
- package/2x/cjs/components/mask/mask.d.ts +1 -1
- package/2x/cjs/components/mask/mask.js +6 -2
- package/2x/cjs/components/notice-bar/notice-bar.css +13 -4
- package/2x/cjs/components/notice-bar/notice-bar.d.ts +10 -8
- package/2x/cjs/components/notice-bar/notice-bar.js +5 -2
- package/2x/cjs/components/stepper/stepper.d.ts +2 -0
- package/2x/cjs/components/stepper/stepper.js +55 -32
- package/2x/cjs/components/water-mark/water-mark.d.ts +1 -1
- package/2x/cjs/components/water-mark/water-mark.js +5 -1
- package/2x/es/components/calendar/calendar.js +9 -1
- package/2x/es/components/floating-bubble/floating-bubble.d.ts +8 -0
- package/2x/es/components/floating-bubble/floating-bubble.js +26 -6
- package/2x/es/components/form/form.d.ts +1 -1
- package/2x/es/components/image-uploader/image-uploader.css +16 -1
- package/2x/es/components/image-uploader/image-uploader.d.ts +4 -1
- package/2x/es/components/image-uploader/image-uploader.js +48 -11
- package/2x/es/components/image-uploader/preview-item.d.ts +2 -1
- package/2x/es/components/image-uploader/preview-item.js +6 -8
- package/2x/es/components/mask/mask.d.ts +1 -1
- package/2x/es/components/mask/mask.js +6 -2
- package/2x/es/components/notice-bar/notice-bar.css +13 -4
- package/2x/es/components/notice-bar/notice-bar.d.ts +10 -8
- package/2x/es/components/notice-bar/notice-bar.js +5 -2
- package/2x/es/components/stepper/stepper.d.ts +2 -0
- package/2x/es/components/stepper/stepper.js +55 -32
- package/2x/es/components/water-mark/water-mark.d.ts +1 -1
- package/2x/es/components/water-mark/water-mark.js +5 -1
- package/2x/package.json +9 -9
- package/bundle/antd-mobile.cjs.development.js +188 -121
- package/bundle/antd-mobile.cjs.js +8 -8
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +188 -121
- package/bundle/antd-mobile.es.js +3936 -3910
- package/bundle/antd-mobile.umd.development.js +188 -121
- package/bundle/antd-mobile.umd.js +8 -8
- package/bundle/style.css +1 -1
- package/cjs/components/calendar/calendar.js +9 -1
- package/cjs/components/floating-bubble/floating-bubble.d.ts +8 -0
- package/cjs/components/floating-bubble/floating-bubble.js +25 -5
- package/cjs/components/form/form.d.ts +1 -1
- package/cjs/components/image-uploader/image-uploader.css +15 -1
- package/cjs/components/image-uploader/image-uploader.d.ts +4 -1
- package/cjs/components/image-uploader/image-uploader.js +46 -9
- package/cjs/components/image-uploader/preview-item.d.ts +2 -1
- package/cjs/components/image-uploader/preview-item.js +5 -7
- package/cjs/components/mask/mask.d.ts +1 -1
- package/cjs/components/mask/mask.js +6 -2
- package/cjs/components/notice-bar/notice-bar.css +11 -4
- package/cjs/components/notice-bar/notice-bar.d.ts +10 -8
- package/cjs/components/notice-bar/notice-bar.js +5 -2
- package/cjs/components/stepper/stepper.d.ts +2 -0
- package/cjs/components/stepper/stepper.js +55 -32
- package/cjs/components/water-mark/water-mark.d.ts +1 -1
- package/cjs/components/water-mark/water-mark.js +5 -1
- package/es/components/calendar/calendar.js +9 -1
- package/es/components/floating-bubble/floating-bubble.d.ts +8 -0
- package/es/components/floating-bubble/floating-bubble.js +26 -6
- package/es/components/form/form.d.ts +1 -1
- package/es/components/image-uploader/image-uploader.css +15 -1
- package/es/components/image-uploader/image-uploader.d.ts +4 -1
- package/es/components/image-uploader/image-uploader.js +48 -11
- package/es/components/image-uploader/preview-item.d.ts +2 -1
- package/es/components/image-uploader/preview-item.js +6 -8
- package/es/components/mask/mask.d.ts +1 -1
- package/es/components/mask/mask.js +6 -2
- package/es/components/notice-bar/notice-bar.css +11 -4
- package/es/components/notice-bar/notice-bar.d.ts +10 -8
- package/es/components/notice-bar/notice-bar.js +5 -2
- package/es/components/stepper/stepper.d.ts +2 -0
- package/es/components/stepper/stepper.js +55 -32
- package/es/components/water-mark/water-mark.d.ts +1 -1
- package/es/components/water-mark/water-mark.js +5 -1
- package/package.json +9 -9
- package/umd/antd-mobile.js +1 -1
- package/2x/cjs/components/image/test/image.test.d.ts +0 -1
- package/2x/cjs/components/image/test/image.test.js +0 -73
- package/2x/es/components/image/test/image.test.d.ts +0 -1
- package/2x/es/components/image/test/image.test.js +0 -70
- package/cjs/components/image/test/image.test.d.ts +0 -1
- package/cjs/components/image/test/image.test.js +0 -73
- package/es/components/image/test/image.test.d.ts +0 -1
- package/es/components/image/test/image.test.js +0 -70
package/2x/bundle/style.css
CHANGED
|
@@ -2360,10 +2360,17 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2360
2360
|
|
|
2361
2361
|
.adm-image-uploader {
|
|
2362
2362
|
--cell-size: 160px;
|
|
2363
|
+
--gap: 24px;
|
|
2364
|
+
---gap: var(--gap);
|
|
2365
|
+
---gap-horizontal: var(--gap-horizontal, var(--gap));
|
|
2366
|
+
---gap-vertical: var(--gap-vertical, var(--gap));
|
|
2363
2367
|
}
|
|
2364
2368
|
|
|
2369
|
+
.adm-image-uploader-grid,
|
|
2365
2370
|
.adm-image-uploader-space {
|
|
2366
|
-
--gap:
|
|
2371
|
+
--gap: var(---gap);
|
|
2372
|
+
--gap-horizontal: var(---gap-horizontal);
|
|
2373
|
+
--gap-vertical: var(---gap-vertical);
|
|
2367
2374
|
}
|
|
2368
2375
|
|
|
2369
2376
|
.adm-image-uploader-cell {
|
|
@@ -2456,6 +2463,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2456
2463
|
border-radius: 8px;
|
|
2457
2464
|
}
|
|
2458
2465
|
|
|
2466
|
+
.adm-image-uploader .adm-image-uploader-gap-measure {
|
|
2467
|
+
position: absolute;
|
|
2468
|
+
left: 0;
|
|
2469
|
+
top: 0;
|
|
2470
|
+
height: var(--gap-horizontal);
|
|
2471
|
+
width: 0;
|
|
2472
|
+
}
|
|
2473
|
+
|
|
2459
2474
|
.adm-index-bar {
|
|
2460
2475
|
--color: var(--adm-color-text);
|
|
2461
2476
|
overflow: hidden;
|
|
@@ -2915,11 +2930,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2915
2930
|
--text-color: var(--adm-color-white);
|
|
2916
2931
|
--font-size: var(--adm-font-size-7);
|
|
2917
2932
|
--icon-font-size: var(--adm-font-size-10);
|
|
2918
|
-
--height:
|
|
2933
|
+
--height: 80px;
|
|
2919
2934
|
height: var(--height);
|
|
2920
2935
|
box-sizing: border-box;
|
|
2921
2936
|
font-size: var(--font-size);
|
|
2922
|
-
line-height: var(--height);
|
|
2923
2937
|
padding: 0 24px;
|
|
2924
2938
|
display: flex;
|
|
2925
2939
|
align-items: center;
|
|
@@ -2957,7 +2971,6 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2957
2971
|
flex-shrink: 0;
|
|
2958
2972
|
margin-right: 16px;
|
|
2959
2973
|
font-size: var(--icon-font-size);
|
|
2960
|
-
line-height: var(--height);
|
|
2961
2974
|
}
|
|
2962
2975
|
|
|
2963
2976
|
.adm-notice-bar .adm-notice-bar-content {
|
|
@@ -2972,10 +2985,13 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2972
2985
|
.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
|
|
2973
2986
|
width: auto;
|
|
2974
2987
|
transition-timing-function: linear;
|
|
2975
|
-
position: absolute;
|
|
2976
2988
|
white-space: nowrap;
|
|
2977
2989
|
}
|
|
2978
2990
|
|
|
2991
|
+
.adm-notice-bar-wrap.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
|
|
2992
|
+
white-space: normal;
|
|
2993
|
+
}
|
|
2994
|
+
|
|
2979
2995
|
.adm-notice-bar .adm-notice-bar-right {
|
|
2980
2996
|
flex-shrink: 0;
|
|
2981
2997
|
margin-left: 24px;
|
|
@@ -2994,6 +3010,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
|
|
|
2994
3010
|
font-size: var(--adm-font-size-10);
|
|
2995
3011
|
}
|
|
2996
3012
|
|
|
3013
|
+
.adm-notice-bar-wrap {
|
|
3014
|
+
height: auto;
|
|
3015
|
+
align-items: flex-start;
|
|
3016
|
+
padding-top: 16px;
|
|
3017
|
+
padding-bottom: 16px;
|
|
3018
|
+
line-height: 44px;
|
|
3019
|
+
}
|
|
3020
|
+
|
|
2997
3021
|
.adm-number-keyboard-main {
|
|
2998
3022
|
display: flex;
|
|
2999
3023
|
flex-wrap: wrap;
|
|
@@ -131,11 +131,17 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
|
|
|
131
131
|
let isSelect = false;
|
|
132
132
|
let isBegin = false;
|
|
133
133
|
let isEnd = false;
|
|
134
|
+
let isSelectRowBegin = false;
|
|
135
|
+
let isSelectRowEnd = false;
|
|
134
136
|
if (dateRange) {
|
|
135
137
|
const [begin, end] = dateRange;
|
|
136
138
|
isBegin = d.isSame(begin, 'day');
|
|
137
139
|
isEnd = d.isSame(end, 'day');
|
|
138
140
|
isSelect = isBegin || isEnd || d.isAfter(begin, 'day') && d.isBefore(end, 'day');
|
|
141
|
+
if (isSelect) {
|
|
142
|
+
isSelectRowBegin = (cells.length % 7 === 0 || d.isSame(d.startOf('month'), 'day')) && !isBegin;
|
|
143
|
+
isSelectRowEnd = (cells.length % 7 === 6 || d.isSame(d.endOf('month'), 'day')) && !isEnd;
|
|
144
|
+
}
|
|
139
145
|
}
|
|
140
146
|
const inThisMonth = d.month() === current.month();
|
|
141
147
|
const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
|
|
@@ -145,7 +151,9 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
|
|
|
145
151
|
[`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
|
|
146
152
|
[`${classPrefix}-cell-selected`]: isSelect,
|
|
147
153
|
[`${classPrefix}-cell-selected-begin`]: isBegin,
|
|
148
|
-
[`${classPrefix}-cell-selected-end`]: isEnd
|
|
154
|
+
[`${classPrefix}-cell-selected-end`]: isEnd,
|
|
155
|
+
[`${classPrefix}-cell-selected-row-begin`]: isSelectRowBegin,
|
|
156
|
+
[`${classPrefix}-cell-selected-row-end`]: isSelectRowEnd
|
|
149
157
|
}),
|
|
150
158
|
onClick: () => {
|
|
151
159
|
if (!props.selectionMode) return;
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { NativeProps } from '../../utils/native-props';
|
|
3
|
+
declare type Offset = {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
};
|
|
3
7
|
export declare type FloatingBubbleProps = {
|
|
4
8
|
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
5
9
|
axis?: 'x' | 'y' | 'xy' | 'lock';
|
|
6
10
|
magnetic?: 'x' | 'y';
|
|
7
11
|
children?: React.ReactNode;
|
|
12
|
+
offset?: Offset;
|
|
13
|
+
defaultOffset?: Offset;
|
|
14
|
+
onOffsetChange?: (offset: Offset) => void;
|
|
8
15
|
} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius' | '--background'>;
|
|
9
16
|
export declare const FloatingBubble: FC<FloatingBubbleProps>;
|
|
17
|
+
export {};
|
|
@@ -13,12 +13,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
13
13
|
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; }
|
|
14
14
|
const classPrefix = `adm-floating-bubble`;
|
|
15
15
|
const defaultProps = {
|
|
16
|
-
axis: 'y'
|
|
16
|
+
axis: 'y',
|
|
17
|
+
defaultOffset: {
|
|
18
|
+
x: 0,
|
|
19
|
+
y: 0
|
|
20
|
+
}
|
|
17
21
|
};
|
|
18
22
|
const FloatingBubble = p => {
|
|
19
23
|
const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
|
|
20
24
|
const boundaryRef = (0, _react.useRef)(null);
|
|
21
25
|
const buttonRef = (0, _react.useRef)(null);
|
|
26
|
+
const [innerValue, setInnerValue] = (0, _react.useState)(props.offset === undefined ? props.defaultOffset : props.offset);
|
|
27
|
+
(0, _react.useEffect)(() => {
|
|
28
|
+
if (props.offset === undefined) return;
|
|
29
|
+
api.start({
|
|
30
|
+
x: props.offset.x,
|
|
31
|
+
y: props.offset.y
|
|
32
|
+
});
|
|
33
|
+
}, [props.offset]);
|
|
22
34
|
/**
|
|
23
35
|
* memoize the `to` function
|
|
24
36
|
* inside a component that renders frequently
|
|
@@ -29,11 +41,12 @@ const FloatingBubble = p => {
|
|
|
29
41
|
y,
|
|
30
42
|
opacity
|
|
31
43
|
}, api] = (0, _web.useSpring)(() => ({
|
|
32
|
-
x:
|
|
33
|
-
y:
|
|
44
|
+
x: innerValue.x,
|
|
45
|
+
y: innerValue.y,
|
|
34
46
|
opacity: 1
|
|
35
47
|
}));
|
|
36
48
|
const bind = (0, _react2.useDrag)(state => {
|
|
49
|
+
var _a;
|
|
37
50
|
let nextX = state.offset[0];
|
|
38
51
|
let nextY = state.offset[1];
|
|
39
52
|
if (state.last && props.magnetic) {
|
|
@@ -62,10 +75,17 @@ const FloatingBubble = p => {
|
|
|
62
75
|
}
|
|
63
76
|
}
|
|
64
77
|
}
|
|
65
|
-
|
|
78
|
+
const nextOffest = {
|
|
66
79
|
x: nextX,
|
|
67
80
|
y: nextY
|
|
68
|
-
}
|
|
81
|
+
};
|
|
82
|
+
if (props.offset === undefined) {
|
|
83
|
+
// Uncontrolled mode
|
|
84
|
+
api.start(nextOffest);
|
|
85
|
+
} else {
|
|
86
|
+
setInnerValue(nextOffest);
|
|
87
|
+
}
|
|
88
|
+
(_a = props.onOffsetChange) === null || _a === void 0 ? void 0 : _a.call(props, nextOffest);
|
|
69
89
|
// active status
|
|
70
90
|
api.start({
|
|
71
91
|
opacity: state.active ? 0.8 : 1
|
|
@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
|
|
|
3
3
|
import { ListProps } from '../list';
|
|
4
4
|
import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
|
|
5
5
|
import { FormContextType } from './context';
|
|
6
|
-
export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
|
|
6
|
+
export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldValue' | 'setFieldsValue' | 'submit' | 'validateFields'>;
|
|
7
7
|
export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'> & Partial<FormContextType> & {
|
|
8
8
|
footer?: ReactNode;
|
|
9
9
|
mode?: ListProps['mode'];
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
.adm-image-uploader {
|
|
2
2
|
--cell-size: 160px;
|
|
3
|
+
--gap: 24px;
|
|
4
|
+
---gap: var(--gap);
|
|
5
|
+
---gap-horizontal: var(--gap-horizontal, var(--gap));
|
|
6
|
+
---gap-vertical: var(--gap-vertical, var(--gap));
|
|
3
7
|
}
|
|
4
8
|
|
|
9
|
+
.adm-image-uploader-grid,
|
|
5
10
|
.adm-image-uploader-space {
|
|
6
|
-
--gap:
|
|
11
|
+
--gap: var(---gap);
|
|
12
|
+
--gap-horizontal: var(---gap-horizontal);
|
|
13
|
+
--gap-vertical: var(---gap-vertical);
|
|
7
14
|
}
|
|
8
15
|
|
|
9
16
|
.adm-image-uploader-cell {
|
|
@@ -94,4 +101,12 @@
|
|
|
94
101
|
width: 100%;
|
|
95
102
|
height: 100%;
|
|
96
103
|
border-radius: 8px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.adm-image-uploader .adm-image-uploader-gap-measure {
|
|
107
|
+
position: absolute;
|
|
108
|
+
left: 0;
|
|
109
|
+
top: 0;
|
|
110
|
+
height: var(--gap-horizontal);
|
|
111
|
+
width: 0;
|
|
97
112
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { FC, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { NativeProps } from '../../utils/native-props';
|
|
3
3
|
import type { ImageProps } from '../image';
|
|
4
|
+
import { GridProps } from '../grid';
|
|
4
5
|
export declare type TaskStatus = 'pending' | 'fail' | 'success';
|
|
5
6
|
export interface ImageUploadItem {
|
|
6
7
|
key?: string | number;
|
|
@@ -18,6 +19,7 @@ export declare type UploadTask = Pick<Task, 'id' | 'status'>;
|
|
|
18
19
|
export declare type ImageUploaderProps = {
|
|
19
20
|
defaultValue?: ImageUploadItem[];
|
|
20
21
|
value?: ImageUploadItem[];
|
|
22
|
+
columns?: GridProps['columns'];
|
|
21
23
|
onChange?: (items: ImageUploadItem[]) => void;
|
|
22
24
|
onUploadQueueChange?: (tasks: UploadTask[]) => void;
|
|
23
25
|
accept?: string;
|
|
@@ -27,6 +29,7 @@ export declare type ImageUploaderProps = {
|
|
|
27
29
|
disableUpload?: boolean;
|
|
28
30
|
showUpload?: boolean;
|
|
29
31
|
deletable?: boolean;
|
|
32
|
+
deleteIcon?: React.ReactNode;
|
|
30
33
|
capture?: InputHTMLAttributes<unknown>['capture'];
|
|
31
34
|
onPreview?: (index: number, item: ImageUploadItem) => void;
|
|
32
35
|
beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
|
|
@@ -37,6 +40,6 @@ export declare type ImageUploaderProps = {
|
|
|
37
40
|
imageFit?: ImageProps['fit'];
|
|
38
41
|
children?: React.ReactNode;
|
|
39
42
|
renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
|
|
40
|
-
} & NativeProps<'--cell-size'>;
|
|
43
|
+
} & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
|
|
41
44
|
export declare const ImageUploader: FC<ImageUploaderProps>;
|
|
42
45
|
export {};
|
|
@@ -14,7 +14,9 @@ var _usePropsValue = require("../../utils/use-props-value");
|
|
|
14
14
|
var _ahooks = require("ahooks");
|
|
15
15
|
var _space = _interopRequireDefault(require("../space"));
|
|
16
16
|
var _nativeProps = require("../../utils/native-props");
|
|
17
|
+
var _measureCssLength = require("../../utils/measure-css-length");
|
|
17
18
|
var _configProvider = require("../config-provider");
|
|
19
|
+
var _grid = _interopRequireDefault(require("../grid"));
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
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); }
|
|
20
22
|
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; }
|
|
@@ -22,6 +24,9 @@ const classPrefix = `adm-image-uploader`;
|
|
|
22
24
|
const defaultProps = {
|
|
23
25
|
disableUpload: false,
|
|
24
26
|
deletable: true,
|
|
27
|
+
deleteIcon: _react.default.createElement(_antdMobileIcons.CloseOutline, {
|
|
28
|
+
className: `${classPrefix}-cell-delete-icon`
|
|
29
|
+
}),
|
|
25
30
|
showUpload: true,
|
|
26
31
|
multiple: false,
|
|
27
32
|
maxCount: 0,
|
|
@@ -36,8 +41,26 @@ const ImageUploader = p => {
|
|
|
36
41
|
locale
|
|
37
42
|
} = (0, _configProvider.useConfig)();
|
|
38
43
|
const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
|
|
44
|
+
const {
|
|
45
|
+
columns
|
|
46
|
+
} = props;
|
|
39
47
|
const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
|
|
40
48
|
const [tasks, setTasks] = (0, _react.useState)([]);
|
|
49
|
+
const containerRef = (0, _react.useRef)(null);
|
|
50
|
+
const containerSize = (0, _ahooks.useSize)(containerRef);
|
|
51
|
+
const gapMeasureRef = (0, _react.useRef)(null);
|
|
52
|
+
const [cellSize, setCellSize] = (0, _react.useState)(80);
|
|
53
|
+
(0, _ahooks.useIsomorphicLayoutEffect)(() => {
|
|
54
|
+
const gapMeasure = gapMeasureRef.current;
|
|
55
|
+
if (columns && containerSize && gapMeasure) {
|
|
56
|
+
const width = containerSize.width;
|
|
57
|
+
const gap = (0, _measureCssLength.measureCSSLength)(window.getComputedStyle(gapMeasure).getPropertyValue('height'));
|
|
58
|
+
setCellSize((width - gap * (columns - 1)) / columns);
|
|
59
|
+
}
|
|
60
|
+
}, [containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
|
|
61
|
+
const style = {
|
|
62
|
+
'--cell-size': cellSize + 'px'
|
|
63
|
+
};
|
|
41
64
|
(0, _ahooks.useIsomorphicLayoutEffect)(() => {
|
|
42
65
|
setTasks(prev => prev.filter(task => {
|
|
43
66
|
if (task.url === undefined) return true;
|
|
@@ -161,6 +184,7 @@ const ImageUploader = p => {
|
|
|
161
184
|
key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
|
|
162
185
|
url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
|
|
163
186
|
deletable: props.deletable,
|
|
187
|
+
deleteIcon: props.deleteIcon,
|
|
164
188
|
imageFit: props.imageFit,
|
|
165
189
|
onClick: () => {
|
|
166
190
|
if (props.preview) {
|
|
@@ -178,21 +202,19 @@ const ImageUploader = p => {
|
|
|
178
202
|
return renderItem ? renderItem(originNode, fileItem, value) : originNode;
|
|
179
203
|
});
|
|
180
204
|
};
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
wrap: true,
|
|
186
|
-
block: true
|
|
187
|
-
}, renderImages(), finalTasks.map(task => {
|
|
205
|
+
const contentNode = _react.default.createElement(_react.default.Fragment, null, renderImages(), tasks.map(task => {
|
|
206
|
+
if (!props.showFailed && task.status === 'fail') {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
188
209
|
return _react.default.createElement(_previewItem.default, {
|
|
189
210
|
key: task.id,
|
|
190
211
|
file: task.file,
|
|
191
212
|
deletable: task.status !== 'pending',
|
|
213
|
+
deleteIcon: props.deleteIcon,
|
|
192
214
|
status: task.status,
|
|
193
215
|
imageFit: props.imageFit,
|
|
194
216
|
onDelete: () => {
|
|
195
|
-
setTasks(
|
|
217
|
+
setTasks(tasks.filter(x => x.id !== task.id));
|
|
196
218
|
}
|
|
197
219
|
});
|
|
198
220
|
}), showUpload && _react.default.createElement("div", {
|
|
@@ -211,6 +233,21 @@ const ImageUploader = p => {
|
|
|
211
233
|
className: `${classPrefix}-input`,
|
|
212
234
|
onChange: onChange,
|
|
213
235
|
"aria-hidden": true
|
|
214
|
-
})))
|
|
236
|
+
})));
|
|
237
|
+
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
238
|
+
className: classPrefix,
|
|
239
|
+
ref: containerRef
|
|
240
|
+
}, columns ? _react.default.createElement(_grid.default, {
|
|
241
|
+
className: `${classPrefix}-grid`,
|
|
242
|
+
columns: columns,
|
|
243
|
+
style: style
|
|
244
|
+
}, _react.default.createElement("div", {
|
|
245
|
+
className: `${classPrefix}-gap-measure`,
|
|
246
|
+
ref: gapMeasureRef
|
|
247
|
+
}), contentNode.props.children) : _react.default.createElement(_space.default, {
|
|
248
|
+
className: `${classPrefix}-space`,
|
|
249
|
+
wrap: true,
|
|
250
|
+
block: true
|
|
251
|
+
}, contentNode.props.children)));
|
|
215
252
|
};
|
|
216
253
|
exports.ImageUploader = ImageUploader;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
2
|
import { TaskStatus } from './image-uploader';
|
|
3
3
|
import type { ImageProps } from '../image';
|
|
4
4
|
declare type Props = {
|
|
5
5
|
onClick?: () => void;
|
|
6
6
|
onDelete?: () => void;
|
|
7
7
|
deletable: boolean;
|
|
8
|
+
deleteIcon: React.ReactNode;
|
|
8
9
|
url?: string;
|
|
9
10
|
file?: File;
|
|
10
11
|
status?: TaskStatus;
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _antdMobileIcons = require("antd-mobile-icons");
|
|
9
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
9
|
var _image = _interopRequireDefault(require("../image"));
|
|
11
10
|
var _spinLoading = _interopRequireDefault(require("../spin-loading"));
|
|
@@ -22,6 +21,7 @@ const PreviewItem = props => {
|
|
|
22
21
|
url,
|
|
23
22
|
file,
|
|
24
23
|
deletable,
|
|
24
|
+
deleteIcon,
|
|
25
25
|
onDelete,
|
|
26
26
|
imageFit
|
|
27
27
|
} = props;
|
|
@@ -34,11 +34,11 @@ const PreviewItem = props => {
|
|
|
34
34
|
}
|
|
35
35
|
return '';
|
|
36
36
|
}, [url, file]);
|
|
37
|
-
(0, _react.
|
|
37
|
+
(0, _react.useEffect)(() => {
|
|
38
38
|
return () => {
|
|
39
|
-
URL.revokeObjectURL(src);
|
|
39
|
+
if (file) URL.revokeObjectURL(src);
|
|
40
40
|
};
|
|
41
|
-
}, [src]);
|
|
41
|
+
}, [src, file]);
|
|
42
42
|
function renderLoading() {
|
|
43
43
|
return props.status === 'pending' && _react.default.createElement("div", {
|
|
44
44
|
className: `${classPrefix}-cell-mask`
|
|
@@ -54,9 +54,7 @@ const PreviewItem = props => {
|
|
|
54
54
|
return deletable && _react.default.createElement("span", {
|
|
55
55
|
className: `${classPrefix}-cell-delete`,
|
|
56
56
|
onClick: onDelete
|
|
57
|
-
},
|
|
58
|
-
className: `${classPrefix}-cell-delete-icon`
|
|
59
|
-
}));
|
|
57
|
+
}, deleteIcon);
|
|
60
58
|
}
|
|
61
59
|
return _react.default.createElement("div", {
|
|
62
60
|
className: (0, _classnames.default)(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
|
|
@@ -8,7 +8,7 @@ export declare type MaskProps = {
|
|
|
8
8
|
destroyOnClose?: boolean;
|
|
9
9
|
forceRender?: boolean;
|
|
10
10
|
disableBodyScroll?: boolean;
|
|
11
|
-
color?: '
|
|
11
|
+
color?: 'white' | 'black' | (string & {});
|
|
12
12
|
opacity?: 'default' | 'thin' | 'thick' | number;
|
|
13
13
|
getContainer?: GetContainer;
|
|
14
14
|
afterShow?: () => void;
|
|
@@ -22,6 +22,10 @@ const opacityRecord = {
|
|
|
22
22
|
thin: 0.35,
|
|
23
23
|
thick: 0.75
|
|
24
24
|
};
|
|
25
|
+
const colorRecord = {
|
|
26
|
+
black: '0, 0, 0',
|
|
27
|
+
white: '255, 255, 255'
|
|
28
|
+
};
|
|
25
29
|
const defaultProps = {
|
|
26
30
|
visible: true,
|
|
27
31
|
destroyOnClose: false,
|
|
@@ -42,8 +46,8 @@ const Mask = p => {
|
|
|
42
46
|
const background = (0, _react.useMemo)(() => {
|
|
43
47
|
var _a;
|
|
44
48
|
const opacity = (_a = opacityRecord[props.opacity]) !== null && _a !== void 0 ? _a : props.opacity;
|
|
45
|
-
const rgb = props.color
|
|
46
|
-
return `rgba(${rgb}, ${opacity})
|
|
49
|
+
const rgb = colorRecord[props.color];
|
|
50
|
+
return rgb ? `rgba(${rgb}, ${opacity})` : props.color;
|
|
47
51
|
}, [props.color, props.opacity]);
|
|
48
52
|
const [active, setActive] = (0, _react.useState)(props.visible);
|
|
49
53
|
const unmountedRef = (0, _ahooks.useUnmountedRef)();
|
|
@@ -4,11 +4,10 @@
|
|
|
4
4
|
--text-color: var(--adm-color-white);
|
|
5
5
|
--font-size: var(--adm-font-size-7);
|
|
6
6
|
--icon-font-size: var(--adm-font-size-10);
|
|
7
|
-
--height:
|
|
7
|
+
--height: 80px;
|
|
8
8
|
height: var(--height);
|
|
9
9
|
box-sizing: border-box;
|
|
10
10
|
font-size: var(--font-size);
|
|
11
|
-
line-height: var(--height);
|
|
12
11
|
padding: 0 24px;
|
|
13
12
|
display: flex;
|
|
14
13
|
align-items: center;
|
|
@@ -46,7 +45,6 @@
|
|
|
46
45
|
flex-shrink: 0;
|
|
47
46
|
margin-right: 16px;
|
|
48
47
|
font-size: var(--icon-font-size);
|
|
49
|
-
line-height: var(--height);
|
|
50
48
|
}
|
|
51
49
|
|
|
52
50
|
.adm-notice-bar .adm-notice-bar-content {
|
|
@@ -61,10 +59,13 @@
|
|
|
61
59
|
.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
|
|
62
60
|
width: auto;
|
|
63
61
|
transition-timing-function: linear;
|
|
64
|
-
position: absolute;
|
|
65
62
|
white-space: nowrap;
|
|
66
63
|
}
|
|
67
64
|
|
|
65
|
+
.adm-notice-bar-wrap.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
|
|
66
|
+
white-space: normal;
|
|
67
|
+
}
|
|
68
|
+
|
|
68
69
|
.adm-notice-bar .adm-notice-bar-right {
|
|
69
70
|
flex-shrink: 0;
|
|
70
71
|
margin-left: 24px;
|
|
@@ -81,4 +82,12 @@
|
|
|
81
82
|
|
|
82
83
|
.adm-notice-bar-close-icon {
|
|
83
84
|
font-size: var(--adm-font-size-10);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.adm-notice-bar-wrap {
|
|
88
|
+
height: auto;
|
|
89
|
+
align-items: flex-start;
|
|
90
|
+
padding-top: 16px;
|
|
91
|
+
padding-bottom: 16px;
|
|
92
|
+
line-height: 44px;
|
|
84
93
|
}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { NativeProps } from '../../utils/native-props';
|
|
3
3
|
export declare type NoticeBarProps = {
|
|
4
|
-
/**
|
|
4
|
+
/** The type of the NoticeBar */
|
|
5
5
|
color?: 'default' | 'alert' | 'error' | 'info';
|
|
6
|
-
/**
|
|
6
|
+
/** TDelay to start scrolling, unit ms */
|
|
7
7
|
delay?: number;
|
|
8
|
-
/**
|
|
8
|
+
/** Scroll speed, unit px/s */
|
|
9
9
|
speed?: number;
|
|
10
|
-
/**
|
|
10
|
+
/** The content of the NoticeBar */
|
|
11
11
|
content: React.ReactNode;
|
|
12
|
-
/**
|
|
12
|
+
/** Whether it can be closed */
|
|
13
13
|
closeable?: boolean;
|
|
14
|
-
/**
|
|
14
|
+
/** Callback when closed */
|
|
15
15
|
onClose?: () => void;
|
|
16
|
-
/**
|
|
16
|
+
/** Additional operating area, displayed to the left of the close button */
|
|
17
17
|
extra?: React.ReactNode;
|
|
18
|
-
/**
|
|
18
|
+
/** Radio icon on the left */
|
|
19
19
|
icon?: React.ReactNode;
|
|
20
|
+
/** Whether to display multiple lines */
|
|
21
|
+
wrap?: boolean;
|
|
20
22
|
} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
|
|
21
23
|
export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;
|
|
@@ -20,6 +20,7 @@ const defaultProps = {
|
|
|
20
20
|
color: 'default',
|
|
21
21
|
delay: 2000,
|
|
22
22
|
speed: 50,
|
|
23
|
+
wrap: false,
|
|
23
24
|
icon: _react.default.createElement(_antdMobileIcons.SoundOutline, null)
|
|
24
25
|
};
|
|
25
26
|
const NoticeBar = (0, _react.memo)(p => {
|
|
@@ -31,7 +32,7 @@ const NoticeBar = (0, _react.memo)(p => {
|
|
|
31
32
|
const delayLockRef = (0, _react.useRef)(true);
|
|
32
33
|
const animatingRef = (0, _react.useRef)(false);
|
|
33
34
|
function start() {
|
|
34
|
-
if (delayLockRef.current) return;
|
|
35
|
+
if (delayLockRef.current || props.wrap) return;
|
|
35
36
|
const container = containerRef.current;
|
|
36
37
|
const text = textRef.current;
|
|
37
38
|
if (!container || !text) return;
|
|
@@ -70,7 +71,9 @@ const NoticeBar = (0, _react.memo)(p => {
|
|
|
70
71
|
});
|
|
71
72
|
if (!visible) return null;
|
|
72
73
|
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
73
|
-
className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.color}
|
|
74
|
+
className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.color}`, {
|
|
75
|
+
[`${classPrefix}-wrap`]: props.wrap
|
|
76
|
+
})
|
|
74
77
|
}, props.icon && _react.default.createElement("span", {
|
|
75
78
|
className: `${classPrefix}-left`
|
|
76
79
|
}, props.icon), _react.default.createElement("span", {
|
|
@@ -20,6 +20,8 @@ export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & (Val
|
|
|
20
20
|
digits?: number;
|
|
21
21
|
disabled?: boolean;
|
|
22
22
|
inputReadOnly?: boolean;
|
|
23
|
+
parser?: (text: string) => number;
|
|
24
|
+
formatter?: (value?: number) => string;
|
|
23
25
|
} & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
|
|
24
26
|
export declare const Stepper: FC<StepperProps>;
|
|
25
27
|
export {};
|