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.
Files changed (98) hide show
  1. package/2x/bundle/antd-mobile.cjs.development.js +188 -121
  2. package/2x/bundle/antd-mobile.cjs.js +8 -8
  3. package/2x/bundle/antd-mobile.es.development.js +188 -121
  4. package/2x/bundle/antd-mobile.es.js +3936 -3910
  5. package/2x/bundle/antd-mobile.umd.development.js +188 -121
  6. package/2x/bundle/antd-mobile.umd.js +8 -8
  7. package/2x/bundle/style.css +29 -5
  8. package/2x/cjs/components/calendar/calendar.js +9 -1
  9. package/2x/cjs/components/floating-bubble/floating-bubble.d.ts +8 -0
  10. package/2x/cjs/components/floating-bubble/floating-bubble.js +25 -5
  11. package/2x/cjs/components/form/form.d.ts +1 -1
  12. package/2x/cjs/components/image-uploader/image-uploader.css +16 -1
  13. package/2x/cjs/components/image-uploader/image-uploader.d.ts +4 -1
  14. package/2x/cjs/components/image-uploader/image-uploader.js +46 -9
  15. package/2x/cjs/components/image-uploader/preview-item.d.ts +2 -1
  16. package/2x/cjs/components/image-uploader/preview-item.js +5 -7
  17. package/2x/cjs/components/mask/mask.d.ts +1 -1
  18. package/2x/cjs/components/mask/mask.js +6 -2
  19. package/2x/cjs/components/notice-bar/notice-bar.css +13 -4
  20. package/2x/cjs/components/notice-bar/notice-bar.d.ts +10 -8
  21. package/2x/cjs/components/notice-bar/notice-bar.js +5 -2
  22. package/2x/cjs/components/stepper/stepper.d.ts +2 -0
  23. package/2x/cjs/components/stepper/stepper.js +55 -32
  24. package/2x/cjs/components/water-mark/water-mark.d.ts +1 -1
  25. package/2x/cjs/components/water-mark/water-mark.js +5 -1
  26. package/2x/es/components/calendar/calendar.js +9 -1
  27. package/2x/es/components/floating-bubble/floating-bubble.d.ts +8 -0
  28. package/2x/es/components/floating-bubble/floating-bubble.js +26 -6
  29. package/2x/es/components/form/form.d.ts +1 -1
  30. package/2x/es/components/image-uploader/image-uploader.css +16 -1
  31. package/2x/es/components/image-uploader/image-uploader.d.ts +4 -1
  32. package/2x/es/components/image-uploader/image-uploader.js +48 -11
  33. package/2x/es/components/image-uploader/preview-item.d.ts +2 -1
  34. package/2x/es/components/image-uploader/preview-item.js +6 -8
  35. package/2x/es/components/mask/mask.d.ts +1 -1
  36. package/2x/es/components/mask/mask.js +6 -2
  37. package/2x/es/components/notice-bar/notice-bar.css +13 -4
  38. package/2x/es/components/notice-bar/notice-bar.d.ts +10 -8
  39. package/2x/es/components/notice-bar/notice-bar.js +5 -2
  40. package/2x/es/components/stepper/stepper.d.ts +2 -0
  41. package/2x/es/components/stepper/stepper.js +55 -32
  42. package/2x/es/components/water-mark/water-mark.d.ts +1 -1
  43. package/2x/es/components/water-mark/water-mark.js +5 -1
  44. package/2x/package.json +9 -9
  45. package/bundle/antd-mobile.cjs.development.js +188 -121
  46. package/bundle/antd-mobile.cjs.js +8 -8
  47. package/bundle/antd-mobile.compatible.umd.js +1 -1
  48. package/bundle/antd-mobile.es.development.js +188 -121
  49. package/bundle/antd-mobile.es.js +3936 -3910
  50. package/bundle/antd-mobile.umd.development.js +188 -121
  51. package/bundle/antd-mobile.umd.js +8 -8
  52. package/bundle/style.css +1 -1
  53. package/cjs/components/calendar/calendar.js +9 -1
  54. package/cjs/components/floating-bubble/floating-bubble.d.ts +8 -0
  55. package/cjs/components/floating-bubble/floating-bubble.js +25 -5
  56. package/cjs/components/form/form.d.ts +1 -1
  57. package/cjs/components/image-uploader/image-uploader.css +15 -1
  58. package/cjs/components/image-uploader/image-uploader.d.ts +4 -1
  59. package/cjs/components/image-uploader/image-uploader.js +46 -9
  60. package/cjs/components/image-uploader/preview-item.d.ts +2 -1
  61. package/cjs/components/image-uploader/preview-item.js +5 -7
  62. package/cjs/components/mask/mask.d.ts +1 -1
  63. package/cjs/components/mask/mask.js +6 -2
  64. package/cjs/components/notice-bar/notice-bar.css +11 -4
  65. package/cjs/components/notice-bar/notice-bar.d.ts +10 -8
  66. package/cjs/components/notice-bar/notice-bar.js +5 -2
  67. package/cjs/components/stepper/stepper.d.ts +2 -0
  68. package/cjs/components/stepper/stepper.js +55 -32
  69. package/cjs/components/water-mark/water-mark.d.ts +1 -1
  70. package/cjs/components/water-mark/water-mark.js +5 -1
  71. package/es/components/calendar/calendar.js +9 -1
  72. package/es/components/floating-bubble/floating-bubble.d.ts +8 -0
  73. package/es/components/floating-bubble/floating-bubble.js +26 -6
  74. package/es/components/form/form.d.ts +1 -1
  75. package/es/components/image-uploader/image-uploader.css +15 -1
  76. package/es/components/image-uploader/image-uploader.d.ts +4 -1
  77. package/es/components/image-uploader/image-uploader.js +48 -11
  78. package/es/components/image-uploader/preview-item.d.ts +2 -1
  79. package/es/components/image-uploader/preview-item.js +6 -8
  80. package/es/components/mask/mask.d.ts +1 -1
  81. package/es/components/mask/mask.js +6 -2
  82. package/es/components/notice-bar/notice-bar.css +11 -4
  83. package/es/components/notice-bar/notice-bar.d.ts +10 -8
  84. package/es/components/notice-bar/notice-bar.js +5 -2
  85. package/es/components/stepper/stepper.d.ts +2 -0
  86. package/es/components/stepper/stepper.js +55 -32
  87. package/es/components/water-mark/water-mark.d.ts +1 -1
  88. package/es/components/water-mark/water-mark.js +5 -1
  89. package/package.json +9 -9
  90. package/umd/antd-mobile.js +1 -1
  91. package/2x/cjs/components/image/test/image.test.d.ts +0 -1
  92. package/2x/cjs/components/image/test/image.test.js +0 -73
  93. package/2x/es/components/image/test/image.test.d.ts +0 -1
  94. package/2x/es/components/image/test/image.test.js +0 -70
  95. package/cjs/components/image/test/image.test.d.ts +0 -1
  96. package/cjs/components/image/test/image.test.js +0 -73
  97. package/es/components/image/test/image.test.d.ts +0 -1
  98. package/es/components/image/test/image.test.js +0 -70
@@ -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: 24px;
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: 76px;
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: 0,
33
- y: 0,
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
- api.start({
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: 24px;
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
- return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
182
- className: classPrefix
183
- }, _react.default.createElement(_space.default, {
184
- className: `${classPrefix}-space`,
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(prev => prev.filter(x => x.id !== task.id));
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.useLayoutEffect)(() => {
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
- }, _react.default.createElement(_antdMobileIcons.CloseOutline, {
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?: 'black' | 'white';
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 === 'white' ? '255, 255, 255' : '0, 0, 0';
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: 76px;
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
- /** 开始滚动的延迟,单位 ms */
6
+ /** TDelay to start scrolling, unit ms */
7
7
  delay?: number;
8
- /** 滚动速度,单位 px/s */
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 {};