@arco-design/mobile-react 2.30.10 → 2.31.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 (142) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/form/form-item.d.ts +3 -0
  5. package/cjs/form/form-item.js +38 -10
  6. package/cjs/form/style/css/index.css +13 -0
  7. package/cjs/form/style/index.less +18 -0
  8. package/cjs/icon/IconCheck/index.js +1 -2
  9. package/cjs/icon/IconDownload/index.d.ts +7 -0
  10. package/cjs/icon/IconDownload/index.js +41 -0
  11. package/cjs/icon/IconFile/index.d.ts +7 -0
  12. package/cjs/icon/IconFile/index.js +41 -0
  13. package/cjs/icon/IconKeyboard/index.js +1 -0
  14. package/cjs/icon/IconQuestionCircle/index.js +1 -2
  15. package/cjs/icon/IconUpload/index.js +6 -4
  16. package/cjs/icon/IconUserFill/index.js +1 -2
  17. package/cjs/icon/index.d.ts +3 -1
  18. package/cjs/icon/index.js +17 -7
  19. package/cjs/icon/type.d.ts +3 -1
  20. package/cjs/image-picker/index.js +15 -161
  21. package/cjs/image-picker/type.d.ts +4 -73
  22. package/cjs/index.d.ts +1 -0
  23. package/cjs/index.js +6 -2
  24. package/cjs/input/hooks.js +2 -2
  25. package/cjs/input/props.d.ts +2 -2
  26. package/cjs/picker/index.js +59 -19
  27. package/cjs/picker/type.d.ts +6 -1
  28. package/cjs/style.d.ts +1 -0
  29. package/cjs/style.js +3 -1
  30. package/cjs/tabs/tab-cell.js +1 -1
  31. package/cjs/uploader/index.d.ts +16 -0
  32. package/cjs/uploader/index.js +180 -0
  33. package/cjs/uploader/style/css/index.css +650 -0
  34. package/cjs/uploader/style/css/index.d.ts +4 -0
  35. package/cjs/uploader/style/css/index.js +9 -0
  36. package/cjs/uploader/style/index.d.ts +4 -0
  37. package/cjs/uploader/style/index.js +9 -0
  38. package/cjs/uploader/style/index.less +161 -0
  39. package/cjs/uploader/type.d.ts +108 -0
  40. package/cjs/uploader/type.js +3 -0
  41. package/cjs/uploader/upload/index.d.ts +2 -0
  42. package/cjs/uploader/upload/index.js +19 -0
  43. package/cjs/uploader/upload/type.d.ts +107 -0
  44. package/cjs/uploader/upload/type.js +3 -0
  45. package/cjs/uploader/upload/upload.d.ts +20 -0
  46. package/cjs/uploader/upload/upload.js +189 -0
  47. package/dist/index.js +580 -265
  48. package/dist/index.min.js +4 -4
  49. package/dist/style.css +593 -0
  50. package/dist/style.min.css +1 -1
  51. package/esm/form/form-item.d.ts +3 -0
  52. package/esm/form/form-item.js +36 -10
  53. package/esm/form/style/css/index.css +13 -0
  54. package/esm/form/style/index.less +18 -0
  55. package/esm/icon/IconCheck/index.js +1 -2
  56. package/esm/icon/IconDownload/index.d.ts +7 -0
  57. package/esm/icon/IconDownload/index.js +30 -0
  58. package/esm/icon/IconFile/index.d.ts +7 -0
  59. package/esm/icon/IconFile/index.js +30 -0
  60. package/esm/icon/IconKeyboard/index.js +1 -0
  61. package/esm/icon/IconQuestionCircle/index.js +1 -2
  62. package/esm/icon/IconUpload/index.js +6 -4
  63. package/esm/icon/IconUserFill/index.js +1 -2
  64. package/esm/icon/index.d.ts +3 -1
  65. package/esm/icon/index.js +3 -1
  66. package/esm/icon/type.d.ts +3 -1
  67. package/esm/image-picker/index.js +14 -160
  68. package/esm/image-picker/type.d.ts +4 -73
  69. package/esm/index.d.ts +1 -0
  70. package/esm/index.js +2 -1
  71. package/esm/input/hooks.js +2 -2
  72. package/esm/input/props.d.ts +2 -2
  73. package/esm/picker/index.js +60 -20
  74. package/esm/picker/type.d.ts +6 -1
  75. package/esm/style.d.ts +1 -0
  76. package/esm/style.js +2 -1
  77. package/esm/tabs/tab-cell.js +2 -2
  78. package/esm/uploader/index.d.ts +16 -0
  79. package/esm/uploader/index.js +150 -0
  80. package/esm/uploader/style/css/index.css +650 -0
  81. package/esm/uploader/style/css/index.d.ts +4 -0
  82. package/esm/uploader/style/css/index.js +4 -0
  83. package/esm/uploader/style/index.d.ts +4 -0
  84. package/esm/uploader/style/index.js +4 -0
  85. package/esm/uploader/style/index.less +161 -0
  86. package/esm/uploader/type.d.ts +108 -0
  87. package/esm/uploader/type.js +1 -0
  88. package/esm/uploader/upload/index.d.ts +2 -0
  89. package/esm/uploader/upload/index.js +2 -0
  90. package/esm/uploader/upload/type.d.ts +107 -0
  91. package/esm/uploader/upload/type.js +1 -0
  92. package/esm/uploader/upload/upload.d.ts +20 -0
  93. package/esm/uploader/upload/upload.js +175 -0
  94. package/package.json +3 -3
  95. package/tokens/app/arcodesign/default/css-variables.less +27 -0
  96. package/tokens/app/arcodesign/default/index.d.ts +27 -0
  97. package/tokens/app/arcodesign/default/index.js +28 -1
  98. package/tokens/app/arcodesign/default/index.json +292 -0
  99. package/tokens/app/arcodesign/default/index.less +27 -0
  100. package/umd/form/form-item.d.ts +3 -0
  101. package/umd/form/form-item.js +38 -10
  102. package/umd/form/style/css/index.css +13 -0
  103. package/umd/form/style/index.less +18 -0
  104. package/umd/icon/IconCheck/index.js +1 -2
  105. package/umd/icon/IconDownload/index.d.ts +7 -0
  106. package/umd/icon/IconDownload/index.js +49 -0
  107. package/umd/icon/IconFile/index.d.ts +7 -0
  108. package/umd/icon/IconFile/index.js +49 -0
  109. package/umd/icon/IconKeyboard/index.js +1 -0
  110. package/umd/icon/IconQuestionCircle/index.js +1 -2
  111. package/umd/icon/IconUpload/index.js +6 -4
  112. package/umd/icon/IconUserFill/index.js +1 -2
  113. package/umd/icon/index.d.ts +3 -1
  114. package/umd/icon/index.js +15 -9
  115. package/umd/icon/type.d.ts +3 -1
  116. package/umd/image-picker/index.js +17 -163
  117. package/umd/image-picker/type.d.ts +4 -73
  118. package/umd/index.d.ts +1 -0
  119. package/umd/index.js +7 -5
  120. package/umd/input/hooks.js +2 -2
  121. package/umd/input/props.d.ts +2 -2
  122. package/umd/picker/index.js +59 -19
  123. package/umd/picker/type.d.ts +6 -1
  124. package/umd/style.d.ts +1 -0
  125. package/umd/style.js +4 -4
  126. package/umd/tabs/tab-cell.js +1 -1
  127. package/umd/uploader/index.d.ts +16 -0
  128. package/umd/uploader/index.js +178 -0
  129. package/umd/uploader/style/css/index.css +650 -0
  130. package/umd/uploader/style/css/index.d.ts +4 -0
  131. package/umd/uploader/style/css/index.js +15 -0
  132. package/umd/uploader/style/index.d.ts +4 -0
  133. package/umd/uploader/style/index.js +15 -0
  134. package/umd/uploader/style/index.less +161 -0
  135. package/umd/uploader/type.d.ts +108 -0
  136. package/umd/uploader/type.js +17 -0
  137. package/umd/uploader/upload/index.d.ts +2 -0
  138. package/umd/uploader/upload/index.js +27 -0
  139. package/umd/uploader/upload/type.d.ts +107 -0
  140. package/umd/uploader/upload/type.js +17 -0
  141. package/umd/uploader/upload/upload.d.ts +20 -0
  142. package/umd/uploader/upload/upload.js +200 -0
@@ -10,8 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
 
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
 
13
- var _es6Promise = require("es6-promise");
14
-
15
13
  var _mobileUtils = require("@arco-design/mobile-utils");
16
14
 
17
15
  var _contextProvider = require("../context-provider");
@@ -26,6 +24,8 @@ var _addIcon = _interopRequireDefault(require("./add-icon"));
26
24
 
27
25
  var _helpers = require("../_helpers");
28
26
 
27
+ var _upload = require("../uploader/upload");
28
+
29
29
  var _type = require("./type");
30
30
 
31
31
  Object.keys(_type).forEach(function (key) {
@@ -56,7 +56,6 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
56
56
  limit = _props$limit === void 0 ? 0 : _props$limit,
57
57
  _props$images = props.images,
58
58
  images = _props$images === void 0 ? [] : _props$images,
59
- maxSize = props.maxSize,
60
59
  disabled = props.disabled,
61
60
  deleteIcon = props.deleteIcon,
62
61
  selectIcon = props.selectIcon,
@@ -69,18 +68,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
69
68
  imageProps = props.imageProps,
70
69
  renderLoading = props.renderLoading,
71
70
  renderError = props.renderError,
72
- onLongPress = props.onLongPress,
73
- onClick = props.onClick,
74
- _props$onChange = props.onChange,
75
- onChange = _props$onChange === void 0 ? function () {
76
- return null;
77
- } : _props$onChange,
78
- onMaxSizeExceed = props.onMaxSizeExceed,
79
- onLimitExceed = props.onLimitExceed,
80
- upload = props.upload,
81
- selectAdapter = props.selectAdapter,
82
- onSelectClick = props.onSelectClick,
83
- onDeleteClick = props.onDeleteClick;
71
+ selectAdapter = props.selectAdapter;
84
72
  var domRef = (0, _react.useRef)(null);
85
73
  var fileRef = (0, _react.useRef)(null);
86
74
  var cacheRef = (0, _helpers.useLatestRef)(images);
@@ -89,143 +77,9 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
89
77
  dom: domRef.current
90
78
  };
91
79
  });
92
-
93
- var parseFile = function parseFile(file) {
94
- return new _es6Promise.Promise(function (resolve, reject) {
95
- if (file.url) {
96
- resolve(file.url);
97
- } else {
98
- var reader = new FileReader();
99
-
100
- reader.onload = function (e) {
101
- var _e$target;
102
-
103
- var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
104
-
105
- if (!dataURL) {
106
- reject(new Error('file parse error'));
107
- }
108
-
109
- resolve(dataURL);
110
- };
111
-
112
- reader.onerror = function () {
113
- reject(new Error('file parse error'));
114
- };
115
-
116
- reader.readAsDataURL(file);
117
- }
118
- });
119
- };
120
-
121
- var handleChange = function handleChange(event, fromAdapter) {
122
- var files = Array.prototype.filter.call(event.target.files || [], function (file) {
123
- // 过滤maxSize
124
- if (maxSize && file.size > maxSize * 1024) {
125
- onMaxSizeExceed && onMaxSizeExceed(file);
126
- return false;
127
- }
128
-
129
- return true;
130
- }) || [];
131
-
132
- if (!fromAdapter) {
133
- event.target.value = '';
134
- } // 截断limit
135
-
136
-
137
- if (limit !== 0 && files.length + images.length > limit) {
138
- onLimitExceed && onLimitExceed(files);
139
- files.length = limit - images.length;
140
- } // 解析文件生成预览
141
-
142
-
143
- _es6Promise.Promise.all(files.map(function (file) {
144
- return parseFile(file);
145
- })).then(function (parseFiles) {
146
- var res = parseFiles.map(function (url, index) {
147
- return {
148
- url: url,
149
- status: typeof upload === 'function' ? 'loading' : 'loaded',
150
- file: files[index]
151
- };
152
- });
153
- cacheRef.current = [].concat(cacheRef.current, res);
154
- onChange([].concat(cacheRef.current)); // 执行upload
155
-
156
- if (typeof upload === 'function') {
157
- files.forEach(function (_file) {
158
- upload(cacheRef.current.find(function (_ref) {
159
- var file = _ref.file;
160
- return file === _file;
161
- })).then(function (data) {
162
- var index = cacheRef.current.findIndex(function (_ref2) {
163
- var file = _ref2.file;
164
- return file === _file;
165
- });
166
-
167
- if (index !== -1) {
168
- cacheRef.current[index] = (0, _extends2.default)({}, cacheRef.current[index], data, {
169
- status: undefined
170
- });
171
- }
172
- }).catch(function () {
173
- var index = cacheRef.current.findIndex(function (_ref3) {
174
- var file = _ref3.file;
175
- return file === _file;
176
- });
177
-
178
- if (index !== -1) {
179
- cacheRef.current[index].status = 'error';
180
- }
181
- }).finally(function () {
182
- onChange([].concat(cacheRef.current));
183
- });
184
- });
185
- }
186
- });
187
- };
188
-
189
- var handleDelete = function handleDelete(index) {
190
- onDeleteClick && onDeleteClick(index);
191
- onChange(images.filter(function (_i, j) {
192
- return j !== index;
193
- }));
194
- }; // click && longPress
195
-
196
-
197
- var timeOutEvent;
198
-
199
- var handleTouchStart = function handleTouchStart(e, image, index) {
200
- timeOutEvent = setTimeout(function () {
201
- timeOutEvent = 0;
202
- onLongPress == null ? void 0 : onLongPress(e, image, index);
203
- }, 750);
204
- };
205
-
206
- var handleClick = function handleClick(e, image, index) {
207
- clearTimeout(timeOutEvent);
208
-
209
- if (timeOutEvent !== 0) {
210
- onClick == null ? void 0 : onClick(e, image, index);
211
- }
212
- };
213
-
214
- var handleSelect = function handleSelect(e) {
215
- if (e.target !== fileRef.current) {
216
- var _fileRef$current;
217
-
218
- onSelectClick && onSelectClick();
219
- selectAdapter ? selectAdapter().then(function (_ref4) {
220
- var files = _ref4.files;
221
- return handleChange({
222
- target: {
223
- files: files
224
- }
225
- }, true);
226
- }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
227
- }
228
- };
80
+ var uploadFunc = new _upload.Upload((0, _extends2.default)({}, props, {
81
+ files: images
82
+ }), fileRef, cacheRef);
229
83
 
230
84
  var getGridData = function getGridData(prefixCls, locale) {
231
85
  var errorNode = function errorNode(index) {
@@ -255,10 +109,10 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
255
109
  className: prefixCls + "-image-picker-image"
256
110
  }, /*#__PURE__*/_react.default.createElement("div", {
257
111
  onTouchStart: function onTouchStart(e) {
258
- return handleTouchStart(e, image, index);
112
+ return uploadFunc.handleTouchStart(e, image, index);
259
113
  },
260
114
  onClick: function onClick(e) {
261
- return handleClick(e, image, index);
115
+ return uploadFunc.handleClick(e, image, index);
262
116
  },
263
117
  className: prefixCls + "-image-picker-image-container"
264
118
  }, /*#__PURE__*/_react.default.createElement(_image.default, (0, _extends2.default)({
@@ -274,7 +128,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
274
128
  })), !hideDelete && /*#__PURE__*/_react.default.createElement("div", {
275
129
  className: prefixCls + "-image-picker-close",
276
130
  onClick: function onClick() {
277
- return handleDelete(index);
131
+ return uploadFunc.deleteFile(index);
278
132
  }
279
133
  }, deleteIcon || /*#__PURE__*/_react.default.createElement("div", {
280
134
  className: prefixCls + "-image-picker-close-icon"
@@ -291,7 +145,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
291
145
  data.push({
292
146
  img: /*#__PURE__*/_react.default.createElement("div", {
293
147
  className: (0, _mobileUtils.cls)(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
294
- onClick: handleSelect
148
+ onClick: uploadFunc.handleSelect
295
149
  }, /*#__PURE__*/_react.default.createElement("div", {
296
150
  className: prefixCls + "-image-picker-add-container"
297
151
  }, selectIcon || /*#__PURE__*/_react.default.createElement("div", {
@@ -302,7 +156,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
302
156
  multiple: multiple,
303
157
  type: "file",
304
158
  onChange: function onChange(e) {
305
- return handleChange(e);
159
+ return uploadFunc.handleChange(e);
306
160
  },
307
161
  ref: fileRef
308
162
  }) : null)),
@@ -313,12 +167,12 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
313
167
  return data;
314
168
  };
315
169
 
316
- return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref5) {
170
+ return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
317
171
  var _cls2;
318
172
 
319
- var prefixCls = _ref5.prefixCls,
320
- _ref5$locale = _ref5.locale,
321
- locale = _ref5$locale === void 0 ? _mobileUtils.defaultLocale : _ref5$locale;
173
+ var prefixCls = _ref.prefixCls,
174
+ _ref$locale = _ref.locale,
175
+ locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
322
176
  return /*#__PURE__*/_react.default.createElement("div", {
323
177
  className: (0, _mobileUtils.cls)(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
324
178
  style: style,
@@ -1,33 +1,14 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  import { ImageProps } from '../image';
3
- export interface ImagePickItem {
3
+ import { UploadCommonProps, CommonFileItem } from '../uploader/upload/type';
4
+ export interface ImagePickItem extends CommonFileItem {
4
5
  /**
5
6
  * 图片地址
6
7
  * @en Image Url
7
8
  */
8
9
  url: string;
9
- /**
10
- * 图片文件
11
- * @en Image File
12
- */
13
- file?: File;
14
- /**
15
- * 图片状态
16
- * @en Image Status
17
- * @default 以图片自身加载状态而定
18
- * @default_en According to inner status of the image
19
- */
20
- status?: 'loaded' | 'loading' | 'error';
21
10
  }
22
- export interface AdapterFile {
23
- url?: string;
24
- size: number;
25
- name: string;
26
- }
27
- export interface SelectCallback {
28
- files: AdapterFile[];
29
- }
30
- export interface ImagePickerProps {
11
+ export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>, 'files'> {
31
12
  /**
32
13
  * 自定义类名
33
14
  * @en Custom className
@@ -71,16 +52,6 @@ export interface ImagePickerProps {
71
52
  * @default 8
72
53
  */
73
54
  gutter?: number;
74
- /**
75
- * 最多选择图片张数,超出数量自动隐藏上传按钮,0表示不做限制
76
- * @en max Pictures Can Choose
77
- */
78
- limit?: number;
79
- /**
80
- * 文件大小限制,单位为K
81
- * @en File size limit, in K
82
- */
83
- maxSize?: number;
84
55
  /**
85
56
  * 是否隐藏删除Icon
86
57
  * @en Whether to hide delete Icon
@@ -129,51 +100,11 @@ export interface ImagePickerProps {
129
100
  * @en Defined uploading display
130
101
  */
131
102
  renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
132
- /**
133
- * 上传方法
134
- * @en upload function
135
- */
136
- upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
137
- /**
138
- * 已选图片列表发生变化
139
- * @en The list of selected images changes
140
- */
141
- onChange?: (fileList: ImagePickItem[]) => void;
142
- /**
143
- * 图片超过限制大小
144
- * @en Image exceeds size limit
145
- */
146
- onMaxSizeExceed?: (file: File) => void;
147
- /**
148
- * 选择张数超过限制
149
- * @en The number of pictures exceeds the limit
150
- */
151
- onLimitExceed?: (files: File[]) => void;
152
- /**
153
- * 图片点击
154
- * @en click event
155
- */
156
- onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
157
- /**
158
- * 图片长按事件
159
- * @en long press event
160
- */
161
- onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
162
- /**
163
- * 图片选择适配器
164
- * @en Select Adaptor
165
- */
166
- selectAdapter?: () => Promise<SelectCallback>;
167
103
  /**
168
104
  * 选图点击事件
169
- * @en Select Icon Click Event
105
+ * @en Select icon click event
170
106
  */
171
107
  onSelectClick?: () => void;
172
- /**
173
- * 删除点击事件
174
- * @en Delete Icon Click Event
175
- */
176
- onDeleteClick?: (index: number) => void;
177
108
  }
178
109
  export interface ImagePickerRef {
179
110
  /**
package/cjs/index.d.ts CHANGED
@@ -56,3 +56,4 @@ export { default as Tag } from './tag';
56
56
  export { default as Textarea } from './textarea';
57
57
  export { default as Toast } from './toast';
58
58
  export { default as Transition } from './transition';
59
+ export { default as Uploader } from './uploader';
package/cjs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
- exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Stepper = exports.Slider = exports.Skeleton = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Keyboard = exports.Input = exports.IndexBar = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Form = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Divider = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
6
+ exports.Uploader = exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Stepper = exports.Slider = exports.Skeleton = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Keyboard = exports.Input = exports.IndexBar = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Form = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Divider = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
7
7
 
8
8
  var _tabs = _interopRequireDefault(require("./tabs"));
9
9
 
@@ -235,4 +235,8 @@ exports.Toast = _toast.default;
235
235
 
236
236
  var _transition = _interopRequireDefault(require("./transition"));
237
237
 
238
- exports.Transition = _transition.default;
238
+ exports.Transition = _transition.default;
239
+
240
+ var _uploader = _interopRequireDefault(require("./uploader"));
241
+
242
+ exports.Uploader = _uploader.default;
@@ -77,8 +77,8 @@ function useInputLogic(props, inputRef) {
77
77
  (0, _react.useEffect)(function () {
78
78
  if (autoFocus) {
79
79
  setTimeout(function () {
80
- inputRef.current && inputRef.current.focus();
81
- }, 200);
80
+ inputRef.current && inputRef.current.click();
81
+ }, 100);
82
82
  }
83
83
  }, []);
84
84
  (0, _react.useEffect)(function () {
@@ -57,8 +57,8 @@ export interface BasicInputProps<T = HTMLInputElement> {
57
57
  */
58
58
  readOnly?: boolean;
59
59
  /**
60
- * 是否自动获取焦点
61
- * @en Whether to automatically get the focus
60
+ * 是否自动获取焦点,开启后会触发一次onClick事件
61
+ * @en Whether to automatically get the focus, it will trigger an onClick event once after being enabled
62
62
  */
63
63
  autoFocus?: boolean;
64
64
  /**
@@ -38,7 +38,7 @@ Object.keys(_type).forEach(function (key) {
38
38
  if (key in exports && exports[key] === _type[key]) return;
39
39
  exports[key] = _type[key];
40
40
  });
41
- var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl"];
41
+ var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
42
42
 
43
43
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
44
44
 
@@ -64,8 +64,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
64
64
  hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
65
65
  _props$title = props.title,
66
66
  title = _props$title === void 0 ? '' : _props$title,
67
- _props$visible = props.visible,
68
- visible = _props$visible === void 0 ? false : _props$visible,
67
+ userSetVisible = props.visible,
69
68
  value = props.value,
70
69
  _props$needBottomOffs = props.needBottomOffset,
71
70
  needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
@@ -79,10 +78,25 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
79
78
  touchToStop = props.touchToStop,
80
79
  _props$gestureOutOfCo = props.gestureOutOfControl,
81
80
  gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
81
+ renderLinkedContainer = props.renderLinkedContainer,
82
82
  otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
83
83
  var scrollValueRef = (0, _helpers.useLatestRef)(value);
84
84
  var domRef = (0, _react.useRef)(null);
85
85
  var pickerViewRef = (0, _react.useRef)(null);
86
+
87
+ var _useState = (0, _react.useState)(false),
88
+ linkVisible = _useState[0],
89
+ setLinkVisible = _useState[1];
90
+
91
+ var _useState2 = (0, _react.useState)(function () {
92
+ return getCurrentValueData();
93
+ }),
94
+ linkArgs = _useState2[0],
95
+ setLinkArgs = _useState2[1]; // 来自linkedContainer的visible变化,优先级高于受控值
96
+ // @en Visible changes from linkedContainer which have priority over controlled values
97
+
98
+
99
+ var visible = linkVisible || userSetVisible || false;
86
100
  (0, _react.useImperativeHandle)(ref, function () {
87
101
  return {
88
102
  dom: domRef.current,
@@ -113,26 +127,49 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
113
127
  }
114
128
  };
115
129
  });
130
+ (0, _react.useEffect)(function () {
131
+ (0, _mobileUtils.nextTick)(function () {
132
+ setLinkArgs(getCurrentValueData());
133
+ });
134
+ }, []);
135
+
136
+ function hidePicker(scene) {
137
+ setLinkVisible(false);
138
+ onHide == null ? void 0 : onHide(scene);
139
+ }
116
140
 
117
141
  function handleDismiss() {
118
142
  if (onDismiss) {
119
143
  onDismiss();
120
144
  }
121
145
 
122
- if (onHide) {
123
- onHide('dismiss');
124
- }
146
+ hidePicker('dismiss');
125
147
  }
126
148
 
127
- var handleConfirm = function handleConfirm() {
128
- var _pickerViewRef$curren6;
149
+ function getCurrentValueData() {
150
+ var _pickerViewRef$curren6, _pickerViewRef$curren7;
151
+
152
+ var val = ((_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.getAllColumnValues()) || scrollValueRef.current || [];
153
+ var selectedData = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnData()) || [];
154
+ return {
155
+ value: val,
156
+ data: selectedData
157
+ };
158
+ }
129
159
 
130
- (_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.scrollToCurrentIndex();
160
+ function handleConfirm() {
161
+ var _pickerViewRef$curren8;
162
+
163
+ (_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.scrollToCurrentIndex();
131
164
  (0, _mobileUtils.nextTick)(function () {
132
- var _pickerViewRef$curren7, _pickerViewRef$curren8;
165
+ var _getCurrentValueData = getCurrentValueData(),
166
+ val = _getCurrentValueData.value,
167
+ selectedData = _getCurrentValueData.data;
133
168
 
134
- var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValueRef.current || [];
135
- var selectedData = ((_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.getAllColumnData()) || [];
169
+ setLinkArgs({
170
+ value: val,
171
+ data: selectedData
172
+ });
136
173
 
137
174
  if (onOk) {
138
175
  onOk(val, selectedData);
@@ -142,11 +179,9 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
142
179
  onChange(val);
143
180
  }
144
181
 
145
- if (onHide) {
146
- onHide('confirm');
147
- }
182
+ hidePicker('confirm');
148
183
  });
149
- };
184
+ }
150
185
 
151
186
  (0, _helpers.useListenResize)(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值(初始值)
152
187
 
@@ -162,11 +197,16 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
162
197
  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
163
198
  var prefixCls = _ref.prefixCls,
164
199
  locale = _ref.locale;
165
- return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
200
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkedContainer ? /*#__PURE__*/_react.default.createElement("div", {
201
+ className: prefixCls + "-picker-linked-container",
202
+ onClick: function onClick() {
203
+ return setLinkVisible(true);
204
+ }
205
+ }, renderLinkedContainer(linkArgs.value, linkArgs.data)) : null, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
166
206
  visible: visible,
167
207
  className: (0, _mobileUtils.cls)(className, prefixCls + "-picker all-border-box"),
168
208
  close: function close() {
169
- return onHide == null ? void 0 : onHide('mask');
209
+ return hidePicker('mask');
170
210
  },
171
211
  direction: "bottom",
172
212
  maskClosable: maskClosable,
@@ -198,7 +238,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
198
238
  clickable: clickable,
199
239
  hideEmptyCols: hideEmptyCols,
200
240
  touchToStop: touchToStop
201
- })));
241
+ }))));
202
242
  });
203
243
  });
204
244
  /**
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { PickerData, ValueType } from '../picker-view/type';
3
3
  import { PopupProps } from '../popup';
4
4
  export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
@@ -123,4 +123,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
123
123
  * @default true
124
124
  */
125
125
  gestureOutOfControl?: boolean;
126
+ /**
127
+ * 将选择器的展现隐藏状态及选中值的展示与某个容器关联,传入后将同时渲染该容器和选择器组件,此时选择器组件的 visible 和 onHide 属性可不传,点击该容器会唤起选择器
128
+ * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
129
+ */
130
+ renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
126
131
  }
package/cjs/style.d.ts CHANGED
@@ -57,3 +57,4 @@ import './tag/style';
57
57
  import './textarea/style';
58
58
  import './toast/style';
59
59
  import './transition/style';
60
+ import './uploader/style';
package/cjs/style.js CHANGED
@@ -116,4 +116,6 @@ require("./textarea/style");
116
116
 
117
117
  require("./toast/style");
118
118
 
119
- require("./transition/style");
119
+ require("./transition/style");
120
+
121
+ require("./uploader/style");
@@ -147,7 +147,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
147
147
  (0, _react.useEffect)(function () {
148
148
  updateScrollPosition();
149
149
  }, [activeIndex, wrapSize]);
150
- (0, _react.useEffect)(function () {
150
+ (0, _helpers.useUpdateEffect)(function () {
151
151
  var _underlineRef$current2;
152
152
 
153
153
  setCellOverflow();
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { UploaderRef, UploaderProps } from './type';
3
+ export * from './type';
4
+ declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
5
+ displayName?: string | undefined;
6
+ };
7
+ /**
8
+ * 文件上传组件
9
+ * @en Uploader Component
10
+ * @type 数据录入
11
+ * @type_en Data Entry
12
+ * @name 文件上传
13
+ * @name_en Uploader
14
+ * @displayName Uploader
15
+ */
16
+ export default _default;