@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.
- package/CHANGELOG.md +19 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/form-item.d.ts +3 -0
- package/cjs/form/form-item.js +38 -10
- package/cjs/form/style/css/index.css +13 -0
- package/cjs/form/style/index.less +18 -0
- package/cjs/icon/IconCheck/index.js +1 -2
- package/cjs/icon/IconDownload/index.d.ts +7 -0
- package/cjs/icon/IconDownload/index.js +41 -0
- package/cjs/icon/IconFile/index.d.ts +7 -0
- package/cjs/icon/IconFile/index.js +41 -0
- package/cjs/icon/IconKeyboard/index.js +1 -0
- package/cjs/icon/IconQuestionCircle/index.js +1 -2
- package/cjs/icon/IconUpload/index.js +6 -4
- package/cjs/icon/IconUserFill/index.js +1 -2
- package/cjs/icon/index.d.ts +3 -1
- package/cjs/icon/index.js +17 -7
- package/cjs/icon/type.d.ts +3 -1
- package/cjs/image-picker/index.js +15 -161
- package/cjs/image-picker/type.d.ts +4 -73
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +6 -2
- package/cjs/input/hooks.js +2 -2
- package/cjs/input/props.d.ts +2 -2
- package/cjs/picker/index.js +59 -19
- package/cjs/picker/type.d.ts +6 -1
- package/cjs/style.d.ts +1 -0
- package/cjs/style.js +3 -1
- package/cjs/tabs/tab-cell.js +1 -1
- package/cjs/uploader/index.d.ts +16 -0
- package/cjs/uploader/index.js +180 -0
- package/cjs/uploader/style/css/index.css +650 -0
- package/cjs/uploader/style/css/index.d.ts +4 -0
- package/cjs/uploader/style/css/index.js +9 -0
- package/cjs/uploader/style/index.d.ts +4 -0
- package/cjs/uploader/style/index.js +9 -0
- package/cjs/uploader/style/index.less +161 -0
- package/cjs/uploader/type.d.ts +108 -0
- package/cjs/uploader/type.js +3 -0
- package/cjs/uploader/upload/index.d.ts +2 -0
- package/cjs/uploader/upload/index.js +19 -0
- package/cjs/uploader/upload/type.d.ts +107 -0
- package/cjs/uploader/upload/type.js +3 -0
- package/cjs/uploader/upload/upload.d.ts +20 -0
- package/cjs/uploader/upload/upload.js +189 -0
- package/dist/index.js +580 -265
- package/dist/index.min.js +4 -4
- package/dist/style.css +593 -0
- package/dist/style.min.css +1 -1
- package/esm/form/form-item.d.ts +3 -0
- package/esm/form/form-item.js +36 -10
- package/esm/form/style/css/index.css +13 -0
- package/esm/form/style/index.less +18 -0
- package/esm/icon/IconCheck/index.js +1 -2
- package/esm/icon/IconDownload/index.d.ts +7 -0
- package/esm/icon/IconDownload/index.js +30 -0
- package/esm/icon/IconFile/index.d.ts +7 -0
- package/esm/icon/IconFile/index.js +30 -0
- package/esm/icon/IconKeyboard/index.js +1 -0
- package/esm/icon/IconQuestionCircle/index.js +1 -2
- package/esm/icon/IconUpload/index.js +6 -4
- package/esm/icon/IconUserFill/index.js +1 -2
- package/esm/icon/index.d.ts +3 -1
- package/esm/icon/index.js +3 -1
- package/esm/icon/type.d.ts +3 -1
- package/esm/image-picker/index.js +14 -160
- package/esm/image-picker/type.d.ts +4 -73
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -1
- package/esm/input/hooks.js +2 -2
- package/esm/input/props.d.ts +2 -2
- package/esm/picker/index.js +60 -20
- package/esm/picker/type.d.ts +6 -1
- package/esm/style.d.ts +1 -0
- package/esm/style.js +2 -1
- package/esm/tabs/tab-cell.js +2 -2
- package/esm/uploader/index.d.ts +16 -0
- package/esm/uploader/index.js +150 -0
- package/esm/uploader/style/css/index.css +650 -0
- package/esm/uploader/style/css/index.d.ts +4 -0
- package/esm/uploader/style/css/index.js +4 -0
- package/esm/uploader/style/index.d.ts +4 -0
- package/esm/uploader/style/index.js +4 -0
- package/esm/uploader/style/index.less +161 -0
- package/esm/uploader/type.d.ts +108 -0
- package/esm/uploader/type.js +1 -0
- package/esm/uploader/upload/index.d.ts +2 -0
- package/esm/uploader/upload/index.js +2 -0
- package/esm/uploader/upload/type.d.ts +107 -0
- package/esm/uploader/upload/type.js +1 -0
- package/esm/uploader/upload/upload.d.ts +20 -0
- package/esm/uploader/upload/upload.js +175 -0
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +27 -0
- package/tokens/app/arcodesign/default/index.d.ts +27 -0
- package/tokens/app/arcodesign/default/index.js +28 -1
- package/tokens/app/arcodesign/default/index.json +292 -0
- package/tokens/app/arcodesign/default/index.less +27 -0
- package/umd/form/form-item.d.ts +3 -0
- package/umd/form/form-item.js +38 -10
- package/umd/form/style/css/index.css +13 -0
- package/umd/form/style/index.less +18 -0
- package/umd/icon/IconCheck/index.js +1 -2
- package/umd/icon/IconDownload/index.d.ts +7 -0
- package/umd/icon/IconDownload/index.js +49 -0
- package/umd/icon/IconFile/index.d.ts +7 -0
- package/umd/icon/IconFile/index.js +49 -0
- package/umd/icon/IconKeyboard/index.js +1 -0
- package/umd/icon/IconQuestionCircle/index.js +1 -2
- package/umd/icon/IconUpload/index.js +6 -4
- package/umd/icon/IconUserFill/index.js +1 -2
- package/umd/icon/index.d.ts +3 -1
- package/umd/icon/index.js +15 -9
- package/umd/icon/type.d.ts +3 -1
- package/umd/image-picker/index.js +17 -163
- package/umd/image-picker/type.d.ts +4 -73
- package/umd/index.d.ts +1 -0
- package/umd/index.js +7 -5
- package/umd/input/hooks.js +2 -2
- package/umd/input/props.d.ts +2 -2
- package/umd/picker/index.js +59 -19
- package/umd/picker/type.d.ts +6 -1
- package/umd/style.d.ts +1 -0
- package/umd/style.js +4 -4
- package/umd/tabs/tab-cell.js +1 -1
- package/umd/uploader/index.d.ts +16 -0
- package/umd/uploader/index.js +178 -0
- package/umd/uploader/style/css/index.css +650 -0
- package/umd/uploader/style/css/index.d.ts +4 -0
- package/umd/uploader/style/css/index.js +15 -0
- package/umd/uploader/style/index.d.ts +4 -0
- package/umd/uploader/style/index.js +15 -0
- package/umd/uploader/style/index.less +161 -0
- package/umd/uploader/type.d.ts +108 -0
- package/umd/uploader/type.js +17 -0
- package/umd/uploader/upload/index.d.ts +2 -0
- package/umd/uploader/upload/index.js +27 -0
- package/umd/uploader/upload/type.d.ts +107 -0
- package/umd/uploader/upload/type.js +17 -0
- package/umd/uploader/upload/upload.d.ts +20 -0
- 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
|
-
|
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
|
-
|
94
|
-
|
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
|
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 (
|
170
|
+
return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
|
317
171
|
var _cls2;
|
318
172
|
|
319
|
-
var prefixCls =
|
320
|
-
|
321
|
-
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
|
-
|
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
|
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
|
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
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;
|
package/cjs/input/hooks.js
CHANGED
@@ -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.
|
81
|
-
},
|
80
|
+
inputRef.current && inputRef.current.click();
|
81
|
+
}, 100);
|
82
82
|
}
|
83
83
|
}, []);
|
84
84
|
(0, _react.useEffect)(function () {
|
package/cjs/input/props.d.ts
CHANGED
@@ -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
|
/**
|
package/cjs/picker/index.js
CHANGED
@@ -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
|
-
|
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
|
-
|
123
|
-
onHide('dismiss');
|
124
|
-
}
|
146
|
+
hidePicker('dismiss');
|
125
147
|
}
|
126
148
|
|
127
|
-
|
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
|
-
|
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
|
165
|
+
var _getCurrentValueData = getCurrentValueData(),
|
166
|
+
val = _getCurrentValueData.value,
|
167
|
+
selectedData = _getCurrentValueData.data;
|
133
168
|
|
134
|
-
|
135
|
-
|
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
|
-
|
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(
|
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
|
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
|
/**
|
package/cjs/picker/type.d.ts
CHANGED
@@ -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
package/cjs/style.js
CHANGED
package/cjs/tabs/tab-cell.js
CHANGED
@@ -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,
|
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;
|