@arco-design/mobile-react 2.19.1 → 2.19.2-ee92494.5

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 (99) hide show
  1. package/README.en-US.md +2 -2
  2. package/README.md +2 -2
  3. package/cjs/_helpers/type.d.ts +1 -1
  4. package/cjs/button/demo/style/mobile.less +4 -0
  5. package/cjs/button/index.d.ts +6 -0
  6. package/cjs/button/index.js +12 -2
  7. package/cjs/count-down/demo/style/mobile.less +1 -1
  8. package/cjs/grid/index.js +13 -12
  9. package/cjs/image/index.d.ts +0 -1
  10. package/cjs/image/index.js +9 -7
  11. package/cjs/image-picker/add-icon.d.ts +2 -0
  12. package/cjs/image-picker/add-icon.js +22 -0
  13. package/cjs/image-picker/demo/style/css/mobile.css +40 -0
  14. package/cjs/image-picker/demo/style/mobile.less +42 -0
  15. package/cjs/image-picker/index.d.ts +184 -0
  16. package/cjs/image-picker/index.js +307 -0
  17. package/cjs/image-picker/style/css/index.css +147 -0
  18. package/cjs/image-picker/style/css/index.d.ts +2 -0
  19. package/cjs/image-picker/style/css/index.js +5 -0
  20. package/cjs/image-picker/style/index.d.ts +2 -0
  21. package/cjs/image-picker/style/index.js +5 -0
  22. package/cjs/image-picker/style/index.less +116 -0
  23. package/cjs/image-preview/index.d.ts +2 -2
  24. package/cjs/index.d.ts +1 -0
  25. package/cjs/index.js +5 -1
  26. package/cjs/steps/demo/style/css/mobile.css +1 -1
  27. package/cjs/steps/demo/style/mobile.less +1 -1
  28. package/cjs/steps/style/css/index.css +5 -15
  29. package/cjs/steps/style/index.less +6 -10
  30. package/cjs/style.d.ts +1 -0
  31. package/cjs/style.js +2 -0
  32. package/dist/index.js +534 -218
  33. package/dist/index.min.js +3 -4
  34. package/dist/style.css +120 -9
  35. package/dist/style.min.css +1 -1
  36. package/esm/_helpers/type.d.ts +1 -1
  37. package/esm/button/demo/style/mobile.less +4 -0
  38. package/esm/button/index.d.ts +6 -0
  39. package/esm/button/index.js +12 -2
  40. package/esm/count-down/demo/style/mobile.less +1 -1
  41. package/esm/grid/index.js +13 -12
  42. package/esm/image/index.d.ts +0 -1
  43. package/esm/image/index.js +10 -8
  44. package/esm/image-picker/add-icon.d.ts +2 -0
  45. package/esm/image-picker/add-icon.js +14 -0
  46. package/esm/image-picker/demo/style/css/mobile.css +40 -0
  47. package/esm/image-picker/demo/style/mobile.less +42 -0
  48. package/esm/image-picker/index.d.ts +184 -0
  49. package/esm/image-picker/index.js +288 -0
  50. package/esm/image-picker/style/css/index.css +147 -0
  51. package/esm/image-picker/style/css/index.d.ts +2 -0
  52. package/esm/image-picker/style/css/index.js +2 -0
  53. package/esm/image-picker/style/index.d.ts +2 -0
  54. package/esm/image-picker/style/index.js +2 -0
  55. package/esm/image-picker/style/index.less +116 -0
  56. package/esm/image-preview/index.d.ts +2 -2
  57. package/esm/index.d.ts +1 -0
  58. package/esm/index.js +1 -0
  59. package/esm/steps/demo/style/css/mobile.css +1 -1
  60. package/esm/steps/demo/style/mobile.less +1 -1
  61. package/esm/steps/style/css/index.css +5 -15
  62. package/esm/steps/style/index.less +6 -10
  63. package/esm/style.d.ts +1 -0
  64. package/esm/style.js +1 -0
  65. package/package.json +2 -2
  66. package/tokens/app/arcodesign/default/css-variables.less +17 -2
  67. package/tokens/app/arcodesign/default/index.d.ts +17 -2
  68. package/tokens/app/arcodesign/default/index.js +18 -3
  69. package/tokens/app/arcodesign/default/index.json +204 -24
  70. package/tokens/app/arcodesign/default/index.less +17 -2
  71. package/umd/_helpers/type.d.ts +1 -1
  72. package/umd/button/demo/style/mobile.less +4 -0
  73. package/umd/button/index.d.ts +6 -0
  74. package/umd/button/index.js +12 -2
  75. package/umd/count-down/demo/style/mobile.less +1 -1
  76. package/umd/grid/index.js +13 -12
  77. package/umd/image/index.d.ts +0 -1
  78. package/umd/image/index.js +9 -7
  79. package/umd/image-picker/add-icon.d.ts +2 -0
  80. package/umd/image-picker/add-icon.js +35 -0
  81. package/umd/image-picker/demo/style/css/mobile.css +40 -0
  82. package/umd/image-picker/demo/style/mobile.less +42 -0
  83. package/umd/image-picker/index.d.ts +184 -0
  84. package/umd/image-picker/index.js +310 -0
  85. package/umd/image-picker/style/css/index.css +147 -0
  86. package/umd/image-picker/style/css/index.d.ts +2 -0
  87. package/umd/image-picker/style/css/index.js +15 -0
  88. package/umd/image-picker/style/index.d.ts +2 -0
  89. package/umd/image-picker/style/index.js +15 -0
  90. package/umd/image-picker/style/index.less +116 -0
  91. package/umd/image-preview/index.d.ts +2 -2
  92. package/umd/index.d.ts +1 -0
  93. package/umd/index.js +7 -5
  94. package/umd/steps/demo/style/css/mobile.css +1 -1
  95. package/umd/steps/demo/style/mobile.less +1 -1
  96. package/umd/steps/style/css/index.css +5 -15
  97. package/umd/steps/style/index.less +6 -10
  98. package/umd/style.d.ts +1 -0
  99. package/umd/style.js +4 -4
@@ -0,0 +1,288 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
3
+ import { cls, defaultLocale } from '@arco-design/mobile-utils';
4
+ import { ContextLayout } from '../context-provider';
5
+ import { IconClose } from '../icon';
6
+ import Image from '../image';
7
+ import Grid from '../grid';
8
+ import AddIcon from './add-icon';
9
+
10
+ /**
11
+ * 图片选择器组件
12
+ * @en ImagePicker Component
13
+ * @type 数据输入
14
+ * @type_en Data Entry
15
+ * @name 图片选择器
16
+ * @name_en ImagePicker
17
+ */
18
+ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
19
+ var _props$className = props.className,
20
+ className = _props$className === void 0 ? '' : _props$className,
21
+ style = props.style,
22
+ _props$accept = props.accept,
23
+ accept = _props$accept === void 0 ? 'image/*' : _props$accept,
24
+ _props$multiple = props.multiple,
25
+ multiple = _props$multiple === void 0 ? false : _props$multiple,
26
+ capture = props.capture,
27
+ _props$columns = props.columns,
28
+ columns = _props$columns === void 0 ? 3 : _props$columns,
29
+ _props$gutter = props.gutter,
30
+ gutter = _props$gutter === void 0 ? 8 : _props$gutter,
31
+ _props$limit = props.limit,
32
+ limit = _props$limit === void 0 ? 0 : _props$limit,
33
+ _props$images = props.images,
34
+ images = _props$images === void 0 ? [] : _props$images,
35
+ maxSize = props.maxSize,
36
+ disabled = props.disabled,
37
+ deleteIcon = props.deleteIcon,
38
+ selectIcon = props.selectIcon,
39
+ _props$hideDelete = props.hideDelete,
40
+ hideDelete = _props$hideDelete === void 0 ? false : _props$hideDelete,
41
+ _props$hideSelect = props.hideSelect,
42
+ hideSelect = _props$hideSelect === void 0 ? false : _props$hideSelect,
43
+ _props$alwaysShowSele = props.alwaysShowSelect,
44
+ alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
45
+ imageProps = props.imageProps,
46
+ renderLoading = props.renderLoading,
47
+ renderError = props.renderError,
48
+ onLongPress = props.onLongPress,
49
+ onClick = props.onClick,
50
+ _props$onChange = props.onChange,
51
+ onChange = _props$onChange === void 0 ? function () {
52
+ return null;
53
+ } : _props$onChange,
54
+ onMaxSizeExceed = props.onMaxSizeExceed,
55
+ onLimitExceed = props.onLimitExceed,
56
+ upload = props.upload,
57
+ selectAdapter = props.selectAdapter;
58
+ var domRef = useRef(null);
59
+ var fileRef = useRef(null);
60
+ useImperativeHandle(ref, function () {
61
+ return {
62
+ dom: domRef.current
63
+ };
64
+ });
65
+
66
+ var parseFile = function parseFile(file) {
67
+ return new Promise(function (resolve, reject) {
68
+ if (file.url) {
69
+ resolve(file.url);
70
+ } else {
71
+ var reader = new FileReader();
72
+
73
+ reader.onload = function (e) {
74
+ var _e$target;
75
+
76
+ var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
77
+
78
+ if (!dataURL) {
79
+ reject(new Error('file parse error'));
80
+ }
81
+
82
+ resolve(dataURL);
83
+ };
84
+
85
+ reader.onerror = function () {
86
+ reject(new Error('file parse error'));
87
+ };
88
+
89
+ reader.readAsDataURL(file);
90
+ }
91
+ });
92
+ };
93
+
94
+ var handleChange = function handleChange(event, fromAdapter) {
95
+ var files = [].concat(event.target.files || []).filter(function (file) {
96
+ // 过滤maxSize
97
+ if (maxSize && file.size > maxSize * 1024) {
98
+ onMaxSizeExceed && onMaxSizeExceed(file);
99
+ return false;
100
+ }
101
+
102
+ return true;
103
+ }) || [];
104
+
105
+ if (!fromAdapter) {
106
+ event.target.value = '';
107
+ } // 截断limit
108
+
109
+
110
+ if (limit !== 0 && files.length + images.length > limit) {
111
+ onLimitExceed && onLimitExceed(files);
112
+ files.length = limit - images.length;
113
+ } // 解析文件生成预览
114
+
115
+
116
+ Promise.all(files.map(function (file) {
117
+ return parseFile(file);
118
+ })).then(function (parseFiles) {
119
+ var res = parseFiles.map(function (url, index) {
120
+ return {
121
+ url: url,
122
+ status: upload ? 'loading' : 'loaded',
123
+ file: files[index]
124
+ };
125
+ });
126
+ var cacheRes = [].concat(images, res);
127
+ onChange(cacheRes); // 执行upload
128
+
129
+ if (typeof upload === 'function') {
130
+ var propsImageLength = images.length;
131
+ files.forEach(function (_file, index) {
132
+ upload(cacheRes[propsImageLength + index]).then(function (data) {
133
+ cacheRes[propsImageLength + index] = _extends({}, cacheRes[propsImageLength + index], data);
134
+ }).catch(function () {
135
+ cacheRes[propsImageLength + index].status = 'error';
136
+ }).finally(function () {
137
+ cacheRes[propsImageLength + index].status = 'loaded';
138
+ onChange([].concat(cacheRes));
139
+ });
140
+ });
141
+ }
142
+ });
143
+ };
144
+
145
+ var handleDelete = function handleDelete(index) {
146
+ onChange(images.filter(function (_i, j) {
147
+ return j !== index;
148
+ }));
149
+ }; // click && longPress
150
+
151
+
152
+ var timeOutEvent;
153
+
154
+ var handleTouchStart = function handleTouchStart(e, image, index) {
155
+ e.preventDefault();
156
+ timeOutEvent = setTimeout(function () {
157
+ timeOutEvent = 0;
158
+ onLongPress == null ? void 0 : onLongPress(e, image, index);
159
+ }, 750);
160
+ };
161
+
162
+ var handleClick = function handleClick(e, image, index) {
163
+ clearTimeout(timeOutEvent);
164
+
165
+ if (timeOutEvent !== 0) {
166
+ onClick == null ? void 0 : onClick(e, image, index);
167
+ }
168
+ };
169
+
170
+ var handleSelect = function handleSelect() {
171
+ var _fileRef$current;
172
+
173
+ selectAdapter ? selectAdapter().then(function (_ref) {
174
+ var files = _ref.files;
175
+ return handleChange({
176
+ target: {
177
+ files: files
178
+ }
179
+ }, true);
180
+ }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
181
+ };
182
+
183
+ var getGridData = function getGridData(prefixCls, locale) {
184
+ var errorNode = function errorNode(index) {
185
+ if (renderError) {
186
+ return typeof renderError === 'function' ? renderError(index) : renderError;
187
+ }
188
+
189
+ return /*#__PURE__*/React.createElement("div", {
190
+ className: prefixCls + "-image-picker-error"
191
+ }, /*#__PURE__*/React.createElement("p", null, locale.ImagePicker.loadError));
192
+ };
193
+
194
+ var loadingNode = function loadingNode(index) {
195
+ if (renderLoading) {
196
+ return typeof renderLoading === 'function' ? renderLoading(index) : renderLoading;
197
+ }
198
+
199
+ return null;
200
+ };
201
+
202
+ var data = (limit && limit < images.length ? images.slice(0, limit) : images).map(function (image, index) {
203
+ var url = image.url,
204
+ status = image.status;
205
+ return {
206
+ img: /*#__PURE__*/React.createElement("div", {
207
+ key: index + "-" + url,
208
+ className: prefixCls + "-image-picker-image"
209
+ }, /*#__PURE__*/React.createElement("div", {
210
+ onTouchStart: function onTouchStart(e) {
211
+ return handleTouchStart(e, image, index);
212
+ },
213
+ onClick: function onClick(e) {
214
+ return handleClick(e, image, index);
215
+ },
216
+ className: prefixCls + "-image-picker-image-container"
217
+ }, /*#__PURE__*/React.createElement(Image, _extends({
218
+ showLoading: true,
219
+ showError: true
220
+ }, imageProps || {}, {
221
+ src: url,
222
+ errorArea: errorNode(index),
223
+ loadingArea: loadingNode(index),
224
+ status: status || (imageProps == null ? void 0 : imageProps.status)
225
+ })), /*#__PURE__*/React.createElement("div", {
226
+ className: prefixCls + "-image-picker-image-mask"
227
+ })), !hideDelete && /*#__PURE__*/React.createElement("div", {
228
+ className: prefixCls + "-image-picker-close",
229
+ onClick: function onClick() {
230
+ return handleDelete(index);
231
+ }
232
+ }, deleteIcon || /*#__PURE__*/React.createElement("div", {
233
+ className: prefixCls + "-image-picker-close-icon"
234
+ }, /*#__PURE__*/React.createElement(IconClose, null)))),
235
+ title: ''
236
+ };
237
+ });
238
+ var showSelect = !hideSelect && images.length < (limit || Infinity);
239
+ var disableSelect = disabled || alwaysShowSelect && !showSelect;
240
+
241
+ if (showSelect || alwaysShowSelect) {
242
+ var _cls;
243
+
244
+ data.push({
245
+ img: /*#__PURE__*/React.createElement("div", {
246
+ className: cls(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
247
+ onClick: handleSelect
248
+ }, /*#__PURE__*/React.createElement("div", {
249
+ className: prefixCls + "-image-picker-add-container"
250
+ }, selectIcon || /*#__PURE__*/React.createElement("div", {
251
+ className: prefixCls + "-image-picker-add-icon"
252
+ }, /*#__PURE__*/React.createElement(AddIcon, null)), !selectAdapter ? /*#__PURE__*/React.createElement("input", {
253
+ capture: capture,
254
+ accept: accept,
255
+ multiple: multiple,
256
+ type: "file",
257
+ onChange: function onChange(e) {
258
+ return handleChange(e);
259
+ },
260
+ ref: fileRef
261
+ }) : null)),
262
+ title: ''
263
+ });
264
+ }
265
+
266
+ return data;
267
+ };
268
+
269
+ return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
270
+ var _cls2;
271
+
272
+ var prefixCls = _ref2.prefixCls,
273
+ _ref2$locale = _ref2.locale,
274
+ locale = _ref2$locale === void 0 ? defaultLocale : _ref2$locale;
275
+ return /*#__PURE__*/React.createElement("div", {
276
+ className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
277
+ style: style,
278
+ ref: domRef
279
+ }, /*#__PURE__*/React.createElement("div", {
280
+ className: prefixCls + "-image-picker-container"
281
+ }, /*#__PURE__*/React.createElement(Grid, {
282
+ data: getGridData(prefixCls, locale),
283
+ gutter: gutter,
284
+ columns: columns
285
+ })));
286
+ });
287
+ });
288
+ export default ImagePicker;
@@ -0,0 +1,147 @@
1
+ .arco-image-picker {
2
+ font-size: 0.28rem ;
3
+ }
4
+ .arco-image-picker-container {
5
+ display: -webkit-box;
6
+ display: -webkit-flex;
7
+ display: flex;
8
+ -webkit-flex-wrap: wrap;
9
+ flex-wrap: wrap;
10
+ }
11
+ .arco-image-picker-image {
12
+ position: relative;
13
+ width: 100%;
14
+ display: -webkit-box;
15
+ display: -webkit-flex;
16
+ display: flex;
17
+ -webkit-box-align: center;
18
+ -webkit-align-items: center;
19
+ align-items: center;
20
+ -webkit-box-pack: center;
21
+ -webkit-justify-content: center;
22
+ justify-content: center;
23
+ padding-top: 100%;
24
+ border-radius: 0.04rem ;
25
+ overflow: hidden;
26
+ }
27
+ .arco-image-picker-image-container {
28
+ position: absolute;
29
+ top: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ left: 0;
33
+ }
34
+ .arco-image-picker-image .arco-image {
35
+ height: 100%;
36
+ width: 100%;
37
+ }
38
+ .arco-image-picker-image-mask {
39
+ position: absolute;
40
+ left: 0;
41
+ top: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ z-index: 2;
45
+ }
46
+ .arco-image-picker-add {
47
+ background-color: #f7f8fa ;
48
+ border-radius: 0.04rem ;
49
+ position: relative;
50
+ width: 100%;
51
+ height: 100%;
52
+ padding-top: 100%;
53
+ }
54
+ .arco-image-picker-add-container {
55
+ position: absolute;
56
+ top: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ left: 0;
60
+ display: -webkit-box;
61
+ display: -webkit-flex;
62
+ display: flex;
63
+ -webkit-box-orient: vertical;
64
+ -webkit-box-direction: normal;
65
+ -webkit-flex-direction: column;
66
+ flex-direction: column;
67
+ -webkit-box-pack: center;
68
+ -webkit-justify-content: center;
69
+ justify-content: center;
70
+ -webkit-box-align: center;
71
+ -webkit-align-items: center;
72
+ align-items: center;
73
+ text-align: center;
74
+ font-size: 0.24rem ;
75
+ color: #86909c ;
76
+ }
77
+ .arco-image-picker-add-icon {
78
+ font-size: 0.6rem ;
79
+ color: #d8d8d8 ;
80
+ }
81
+ .arco-image-picker-add-icon svg {
82
+ display: block;
83
+ }
84
+ .arco-image-picker-add-disabled {
85
+ pointer-events: none;
86
+ }
87
+ .arco-image-picker-add-disabled .arco-image-picker-add-icon {
88
+ opacity: 0.7 ;
89
+ }
90
+ .arco-image-picker-add input {
91
+ position: absolute;
92
+ opacity: 0;
93
+ left: 0;
94
+ top: 0;
95
+ width: 100%;
96
+ height: 100%;
97
+ display: none;
98
+ }
99
+ .arco-image-picker-close {
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ z-index: 2;
104
+ }
105
+ .arco-image-picker-close-icon {
106
+ display: -webkit-box;
107
+ display: -webkit-flex;
108
+ display: flex;
109
+ -webkit-box-align: center;
110
+ -webkit-align-items: center;
111
+ align-items: center;
112
+ -webkit-box-pack: center;
113
+ -webkit-justify-content: center;
114
+ justify-content: center;
115
+ font-size: 0.24rem ;
116
+ width: 0.36rem ;
117
+ height: 0.36rem ;
118
+ color: #ffffff ;
119
+ background: rgba(0, 0, 0, 0.3) ;
120
+ border-radius: 0 0.04rem ;
121
+ }
122
+ .arco-image-picker-error {
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 100%;
128
+ display: -webkit-box;
129
+ display: -webkit-flex;
130
+ display: flex;
131
+ -webkit-box-orient: vertical;
132
+ -webkit-box-direction: normal;
133
+ -webkit-flex-direction: column;
134
+ flex-direction: column;
135
+ -webkit-box-pack: center;
136
+ -webkit-justify-content: center;
137
+ justify-content: center;
138
+ -webkit-box-align: center;
139
+ -webkit-align-items: center;
140
+ align-items: center;
141
+ background: rgba(0, 0, 0, 0.5) ;
142
+ color: #ffffff ;
143
+ font-size: 0.28rem ;
144
+ }
145
+ .arco-image-picker-disabled {
146
+ pointer-events: none;
147
+ }
@@ -0,0 +1,2 @@
1
+ import '../../../../style/css/public.css';
2
+ import './index.css';
@@ -0,0 +1,2 @@
1
+ import '../../../../style/css/public.css';
2
+ import './index.css';
@@ -0,0 +1,2 @@
1
+ import '../../../style/public.less';
2
+ import './index.less';
@@ -0,0 +1,2 @@
1
+ import '../../../style/public.less';
2
+ import './index.less';
@@ -0,0 +1,116 @@
1
+ @import '../../../style/mixin.less';
2
+
3
+ .@{prefix}-image-picker {
4
+ .use-var(font-size, image-picker-font-size);
5
+ &-container {
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+ }
9
+ .container() {
10
+ position: absolute;
11
+ top: 0;
12
+ width: 100%;
13
+ height: 100%;
14
+ left: 0;
15
+ }
16
+ &-image {
17
+ position: relative;
18
+ width: 100%;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ padding-top: 100%;
23
+ .use-var(border-radius, image-picker-border-radius);
24
+ overflow: hidden;
25
+ &-container {
26
+ .container()
27
+ }
28
+ .@{prefix}-image {
29
+ height: 100%;
30
+ width: 100%;
31
+ }
32
+ &-mask {
33
+ position: absolute;
34
+ left: 0;
35
+ top: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ z-index: 2;
39
+ }
40
+ }
41
+ &-add {
42
+ .use-var(background-color, image-picker-add-background);
43
+ .use-var(border-radius, image-picker-border-radius);
44
+ position: relative;
45
+ width: 100%;
46
+ height: 100%;
47
+ padding-top: 100%;
48
+ &-container {
49
+ .container();
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: center;
53
+ align-items: center;
54
+ text-align: center;
55
+ .use-var(font-size, image-picker-add-text-font-size);
56
+ .use-var(color, image-picker-add-text-color);
57
+ }
58
+ &-icon {
59
+ .use-var(font-size, image-picker-add-icon-font-size);
60
+ .use-var(color, image-picker-add-icon-color);
61
+ svg {
62
+ display: block;
63
+ }
64
+ }
65
+ &-disabled {
66
+ pointer-events: none;
67
+ }
68
+ &-disabled &-icon {
69
+ .use-var(opacity, image-picker-disabled-opacity);
70
+ }
71
+ input {
72
+ position: absolute;
73
+ opacity: 0;
74
+ left: 0;
75
+ top: 0;
76
+ width: 100%;
77
+ height: 100%;
78
+ display: none;
79
+ }
80
+ }
81
+ &-close {
82
+ position: absolute;
83
+ top: 0;
84
+ right: 0;
85
+ z-index: 2;
86
+ &-icon {
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ .use-var(font-size, image-picker-close-font-size);
91
+ .use-var(width, image-picker-close-width);
92
+ .use-var(height, image-picker-close-height);
93
+ .use-var(color, image-picker-close-color);
94
+ .use-var(background, image-picker-close-background);
95
+ .use-var(border-radius, image-picker-close-border-radius);
96
+ }
97
+ }
98
+ &-error {
99
+ position: absolute;
100
+ top: 0;
101
+ left: 0;
102
+ width: 100%;
103
+ height: 100%;
104
+ display: flex;
105
+ flex-direction: column;
106
+ justify-content: center;
107
+ align-items: center;
108
+ .use-var(background, image-picker-error-background);
109
+ .use-var(color, image-picker-error-color);
110
+ .use-var(font-size, image-picker-font-size);
111
+ }
112
+ }
113
+
114
+ .@{prefix}-image-picker-disabled {
115
+ pointer-events: none;
116
+ }
@@ -268,9 +268,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
268
268
  * @param {ImagePreviewProps} config configuration
269
269
  * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
270
270
  */
271
- open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
271
+ open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
272
272
  close: () => void;
273
- update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
273
+ update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
274
274
  * 是否可循环滑动
275
275
  * @en Whether it can be swiped circularly
276
276
  * @default false
package/esm/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export { default as Ellipsis } from './ellipsis';
21
21
  export { default as Grid } from './grid';
22
22
  export { default as Image } from './image';
23
23
  export { default as ShowMonitor } from './show-monitor';
24
+ export { default as ImagePicker } from './image-picker';
24
25
  export { default as ImagePreview } from './image-preview';
25
26
  export { default as Input } from './input';
26
27
  export { default as LoadMore } from './load-more';
package/esm/index.js CHANGED
@@ -21,6 +21,7 @@ export { default as Ellipsis } from './ellipsis';
21
21
  export { default as Grid } from './grid';
22
22
  export { default as Image } from './image';
23
23
  export { default as ShowMonitor } from './show-monitor';
24
+ export { default as ImagePicker } from './image-picker';
24
25
  export { default as ImagePreview } from './image-preview';
25
26
  export { default as Input } from './input';
26
27
  export { default as LoadMore } from './load-more';
@@ -61,5 +61,5 @@
61
61
  background: #165DFF;
62
62
  }
63
63
  #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
64
- font-size: 12PX;
64
+ font-size: 11PX;
65
65
  }
@@ -30,7 +30,7 @@
30
30
  }
31
31
  .set-steps-color(#165DFF);
32
32
  .@{prefix}-steps-item-custom-icon {
33
- font-size: 12PX;
33
+ font-size: 11PX;
34
34
  }
35
35
  }
36
36
  }
@@ -59,7 +59,7 @@
59
59
  .vertical .arco-steps-item-tail {
60
60
  height: 100%;
61
61
  width: 18PX ;
62
- top: 0.18rem;
62
+ top: 0.18rem ;
63
63
  padding: 0.28rem 0 ;
64
64
  }
65
65
  .vertical .arco-steps-item-tail:after {
@@ -73,19 +73,7 @@
73
73
  .finish .arco-steps-item-tail:after {
74
74
  background: #165dff ;
75
75
  }
76
- .arco-steps-item-custom-icon {
77
- display: -webkit-box;
78
- display: -webkit-flex;
79
- display: flex;
80
- -webkit-box-align: center;
81
- -webkit-align-items: center;
82
- align-items: center;
83
- -webkit-box-pack: center;
84
- -webkit-justify-content: center;
85
- justify-content: center;
86
- width: 20PX ;
87
- height: 20PX ;
88
- }
76
+ .arco-steps-item-custom-icon,
89
77
  .arco-steps-item-icon {
90
78
  display: -webkit-inline-box;
91
79
  display: -webkit-inline-flex;
@@ -96,10 +84,12 @@
96
84
  -webkit-box-pack: center;
97
85
  -webkit-justify-content: center;
98
86
  justify-content: center;
99
- border-radius: 50%;
100
87
  width: 18PX ;
101
88
  height: 18PX ;
102
89
  }
90
+ .arco-steps-item-icon {
91
+ border-radius: 50%;
92
+ }
103
93
  .number.finish .arco-steps-item-icon {
104
94
  background: #E8F3FF ;
105
95
  }