@nutui/nutui-react 2.0.19-beta.0 → 2.0.19

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.
@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
9
9
  return value;
10
10
  };
11
11
  /*!
12
- * @nutui/nutui-react v2.0.19-beta.0 Mon Sep 25 2023 18:01:43 GMT+0800 (China Standard Time)
12
+ * @nutui/nutui-react v2.0.19 Wed Sep 27 2023 18:11:25 GMT+0800 (China Standard Time)
13
13
  * (c) 2023 @jdf2e.
14
14
  * Released under the MIT License.
15
15
  */
@@ -17432,10 +17432,12 @@ Please add \`${key}Action\` when creating your handler.`);
17432
17432
  });
17433
17433
  };
17434
17434
  React.useEffect(() => {
17435
- scrollParent == null ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
17436
- return () => {
17437
- scrollParent == null ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
17438
- };
17435
+ if (!parent.lockScroll) {
17436
+ scrollParent == null ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
17437
+ return () => {
17438
+ scrollParent == null ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
17439
+ };
17440
+ }
17439
17441
  }, []);
17440
17442
  const getPosition = () => {
17441
17443
  return direction === "down" ? {
@@ -19002,6 +19004,99 @@ Please add \`${key}Action\` when creating your handler.`);
19002
19004
  };
19003
19005
  TextArea.defaultProps = defaultProps$H;
19004
19006
  TextArea.displayName = "NutTextArea";
19007
+ class UploadOptions {
19008
+ constructor() {
19009
+ __publicField(this, "url", "");
19010
+ __publicField(this, "name", "file");
19011
+ __publicField(this, "fileType", "image");
19012
+ __publicField(this, "formData");
19013
+ __publicField(this, "sourceFile");
19014
+ __publicField(this, "method", "post");
19015
+ __publicField(this, "xhrState", 200);
19016
+ __publicField(this, "timeout", 30 * 1e3);
19017
+ __publicField(this, "headers", {});
19018
+ __publicField(this, "withCredentials", false);
19019
+ __publicField(this, "onStart");
19020
+ __publicField(this, "taroFilePath");
19021
+ __publicField(this, "onProgress");
19022
+ __publicField(this, "onSuccess");
19023
+ __publicField(this, "onFailure");
19024
+ __publicField(this, "beforeXhrUpload");
19025
+ }
19026
+ }
19027
+ const UPLOADING = "uploading";
19028
+ const SUCCESS = "success";
19029
+ const ERROR = "error";
19030
+ class Upload {
19031
+ constructor(options2) {
19032
+ __publicField(this, "options");
19033
+ this.options = options2;
19034
+ }
19035
+ upload() {
19036
+ var _a2;
19037
+ const { options: options2 } = this;
19038
+ const xhr = new XMLHttpRequest();
19039
+ xhr.timeout = options2.timeout;
19040
+ if (xhr.upload) {
19041
+ xhr.upload.addEventListener(
19042
+ "progress",
19043
+ (e) => {
19044
+ var _a3;
19045
+ (_a3 = options2.onProgress) == null ? void 0 : _a3.call(options2, e, options2);
19046
+ },
19047
+ false
19048
+ );
19049
+ xhr.onreadystatechange = () => {
19050
+ var _a3, _b;
19051
+ if (xhr.readyState === 4) {
19052
+ if (xhr.status === options2.xhrState) {
19053
+ (_a3 = options2.onSuccess) == null ? void 0 : _a3.call(options2, xhr.responseText, options2);
19054
+ } else {
19055
+ (_b = options2.onFailure) == null ? void 0 : _b.call(options2, xhr.responseText, options2);
19056
+ }
19057
+ }
19058
+ };
19059
+ xhr.withCredentials = options2.withCredentials;
19060
+ xhr.open(options2.method, options2.url, true);
19061
+ for (const [key, value] of Object.entries(options2.headers)) {
19062
+ xhr.setRequestHeader(key, value);
19063
+ }
19064
+ (_a2 = options2.onStart) == null ? void 0 : _a2.call(options2, options2);
19065
+ if (options2.beforeXhrUpload) {
19066
+ options2.beforeXhrUpload(xhr, options2);
19067
+ } else {
19068
+ xhr.send(options2.formData);
19069
+ }
19070
+ } else {
19071
+ console.warn("浏览器不支持 XMLHttpRequest");
19072
+ }
19073
+ }
19074
+ }
19075
+ const funcInterceptor = (interceptor, {
19076
+ args = [],
19077
+ done,
19078
+ canceled
19079
+ }) => {
19080
+ if (interceptor) {
19081
+ const returnVal = interceptor.apply(null, args);
19082
+ if (isPromise(returnVal)) {
19083
+ returnVal.then((value) => {
19084
+ if (value) {
19085
+ done(value);
19086
+ } else if (canceled) {
19087
+ canceled();
19088
+ }
19089
+ }).catch(() => {
19090
+ });
19091
+ } else if (returnVal) {
19092
+ done();
19093
+ } else if (canceled) {
19094
+ canceled();
19095
+ }
19096
+ } else {
19097
+ done();
19098
+ }
19099
+ };
19005
19100
  const defaultProps$G = {
19006
19101
  ...ComponentDefaults,
19007
19102
  percent: 0,
@@ -19122,96 +19217,105 @@ Please add \`${key}Action\` when creating your handler.`);
19122
19217
  };
19123
19218
  Progress.defaultProps = defaultProps$G;
19124
19219
  Progress.displayName = "NutProgress";
19125
- class UploadOptions {
19126
- constructor() {
19127
- __publicField(this, "url", "");
19128
- __publicField(this, "name", "file");
19129
- __publicField(this, "fileType", "image");
19130
- __publicField(this, "formData");
19131
- __publicField(this, "sourceFile");
19132
- __publicField(this, "method", "post");
19133
- __publicField(this, "xhrState", 200);
19134
- __publicField(this, "timeout", 30 * 1e3);
19135
- __publicField(this, "headers", {});
19136
- __publicField(this, "withCredentials", false);
19137
- __publicField(this, "onStart");
19138
- __publicField(this, "taroFilePath");
19139
- __publicField(this, "onProgress");
19140
- __publicField(this, "onSuccess");
19141
- __publicField(this, "onFailure");
19142
- __publicField(this, "beforeXhrUpload");
19143
- }
19144
- }
19145
- class Upload {
19146
- constructor(options2) {
19147
- __publicField(this, "options");
19148
- this.options = options2;
19149
- }
19150
- upload() {
19220
+ const Preview = ({
19221
+ fileList,
19222
+ previewType,
19223
+ deletable,
19224
+ onDeleteItem,
19225
+ handleItemClick,
19226
+ previewUrl,
19227
+ children
19228
+ }) => {
19229
+ const renderIcon = (item) => {
19230
+ if (item.status === ERROR) {
19231
+ return item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" });
19232
+ }
19233
+ return item.loadingIcon || /* @__PURE__ */ React.createElement(k$3, { className: "nut-icon-loading", color: "#fff" });
19234
+ };
19235
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, fileList.length !== 0 && fileList.map((item, index) => {
19151
19236
  var _a2;
19152
- const { options: options2 } = this;
19153
- const xhr = new XMLHttpRequest();
19154
- xhr.timeout = options2.timeout;
19155
- if (xhr.upload) {
19156
- xhr.upload.addEventListener(
19157
- "progress",
19158
- (e) => {
19159
- var _a3;
19160
- (_a3 = options2.onProgress) == null ? void 0 : _a3.call(options2, e, options2);
19237
+ return /* @__PURE__ */ React.createElement(
19238
+ "div",
19239
+ {
19240
+ className: `nut-uploader__preview ${previewType}`,
19241
+ key: item.uid
19242
+ },
19243
+ previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
19244
+ x$9,
19245
+ {
19246
+ color: "rgba(0,0,0,0.6)",
19247
+ className: "close",
19248
+ onClick: () => onDeleteItem(item, index)
19249
+ }
19250
+ ),
19251
+ previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, renderIcon(item), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), ((_a2 = item.type) == null ? void 0 : _a2.includes("image")) ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
19252
+ "img",
19253
+ {
19254
+ className: "nut-uploader__preview-img__c",
19255
+ style: { objectFit: "fill" },
19256
+ src: item.url,
19257
+ alt: "",
19258
+ onClick: () => handleItemClick(item)
19259
+ }
19260
+ )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
19261
+ "img",
19262
+ {
19263
+ className: "nut-uploader__preview-img__c",
19264
+ src: previewUrl,
19265
+ alt: "",
19266
+ onClick: () => handleItemClick(item)
19267
+ }
19268
+ ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
19269
+ "div",
19270
+ {
19271
+ onClick: () => handleItemClick(item),
19272
+ className: "nut-uploader__preview-img__file__name"
19161
19273
  },
19162
- false
19163
- );
19164
- xhr.onreadystatechange = () => {
19165
- var _a3, _b;
19166
- if (xhr.readyState === 4) {
19167
- if (xhr.status === options2.xhrState) {
19168
- (_a3 = options2.onSuccess) == null ? void 0 : _a3.call(options2, xhr.responseText, options2);
19169
- } else {
19170
- (_b = options2.onFailure) == null ? void 0 : _b.call(options2, xhr.responseText, options2);
19171
- }
19274
+ /* @__PURE__ */ React.createElement(x$6, { color: "#808080" }),
19275
+ /* @__PURE__ */ React.createElement("span", null, " ", item.name)
19276
+ ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
19277
+ previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
19278
+ "div",
19279
+ {
19280
+ className: `nut-uploader__preview-img__file__name ${item.status}`,
19281
+ onClick: () => handleItemClick(item)
19282
+ },
19283
+ /* @__PURE__ */ React.createElement(x$6, null),
19284
+ /* @__PURE__ */ React.createElement("span", null, " ", item.name)
19285
+ ), deletable && /* @__PURE__ */ React.createElement(
19286
+ y$8,
19287
+ {
19288
+ color: "#808080",
19289
+ className: "nut-uploader__preview-img__file__del",
19290
+ onClick: () => onDeleteItem(item, index)
19172
19291
  }
19173
- };
19174
- xhr.withCredentials = options2.withCredentials;
19175
- xhr.open(options2.method, options2.url, true);
19176
- for (const [key, value] of Object.entries(options2.headers)) {
19177
- xhr.setRequestHeader(key, value);
19178
- }
19179
- (_a2 = options2.onStart) == null ? void 0 : _a2.call(options2, options2);
19180
- if (options2.beforeXhrUpload) {
19181
- options2.beforeXhrUpload(xhr, options2);
19182
- } else {
19183
- xhr.send(options2.formData);
19184
- }
19185
- } else {
19186
- console.warn("浏览器不支持 XMLHttpRequest");
19187
- }
19188
- }
19189
- }
19190
- const funcInterceptor = (interceptor, {
19191
- args = [],
19192
- done,
19193
- canceled
19194
- }) => {
19195
- if (interceptor) {
19196
- const returnVal = interceptor.apply(null, args);
19197
- if (isPromise(returnVal)) {
19198
- returnVal.then((value) => {
19199
- if (value) {
19200
- done(value);
19201
- } else if (canceled) {
19202
- canceled();
19292
+ ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
19293
+ Progress,
19294
+ {
19295
+ percent: item.percentage,
19296
+ color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
19297
+ showText: false
19203
19298
  }
19204
- }).catch(() => {
19205
- });
19206
- } else if (returnVal) {
19207
- done();
19208
- } else if (canceled) {
19209
- canceled();
19210
- }
19211
- } else {
19212
- done();
19213
- }
19299
+ ))
19300
+ );
19301
+ }));
19214
19302
  };
19303
+ class FileItem {
19304
+ constructor() {
19305
+ __publicField(this, "status", "ready");
19306
+ __publicField(this, "message", "准备中..");
19307
+ __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
19308
+ __publicField(this, "name");
19309
+ __publicField(this, "url");
19310
+ __publicField(this, "type");
19311
+ __publicField(this, "path");
19312
+ __publicField(this, "percentage", 0);
19313
+ __publicField(this, "formData", {});
19314
+ __publicField(this, "responseText");
19315
+ __publicField(this, "loadingIcon");
19316
+ __publicField(this, "failIcon");
19317
+ }
19318
+ }
19215
19319
  const defaultProps$F = {
19216
19320
  ...ComponentDefaults,
19217
19321
  url: "",
@@ -19234,24 +19338,11 @@ Please add \`${key}Action\` when creating your handler.`);
19234
19338
  preview: true,
19235
19339
  deletable: true,
19236
19340
  capture: false,
19341
+ uploadIcon: /* @__PURE__ */ React.createElement(x$3, { width: "20px", height: "20px", color: "#808080" }),
19237
19342
  beforeDelete: (file, files) => {
19238
19343
  return true;
19239
19344
  }
19240
19345
  };
19241
- class FileItem {
19242
- constructor() {
19243
- __publicField(this, "status", "ready");
19244
- __publicField(this, "message", "准备中..");
19245
- __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
19246
- __publicField(this, "name");
19247
- __publicField(this, "url");
19248
- __publicField(this, "type");
19249
- __publicField(this, "path");
19250
- __publicField(this, "percentage", 0);
19251
- __publicField(this, "formData", new FormData());
19252
- __publicField(this, "responseText");
19253
- }
19254
- }
19255
19346
  const InternalUploader = (props, ref) => {
19256
19347
  const { locale } = useConfig();
19257
19348
  const {
@@ -19296,13 +19387,15 @@ Please add \`${key}Action\` when creating your handler.`);
19296
19387
  beforeDelete,
19297
19388
  ...restProps
19298
19389
  } = { ...defaultProps$F, ...props };
19299
- const [fileList, setFileList] = React.useState(defaultValue || []);
19300
- const [uploadQueue, setUploadQueue] = React.useState([]);
19301
- React.useEffect(() => {
19302
- if (value) {
19303
- setFileList(value);
19390
+ const [fileList, setFileList] = usePropsValue({
19391
+ value,
19392
+ defaultValue,
19393
+ finalValue: [],
19394
+ onChange: (v) => {
19395
+ onChange == null ? void 0 : onChange(v);
19304
19396
  }
19305
- }, [value]);
19397
+ });
19398
+ const [uploadQueue, setUploadQueue] = React.useState([]);
19306
19399
  const classes = classNames(className, "nut-uploader");
19307
19400
  React.useImperativeHandle(ref, () => ({
19308
19401
  submit: () => {
@@ -19328,10 +19421,11 @@ Please add \`${key}Action\` when creating your handler.`);
19328
19421
  el.value = "";
19329
19422
  };
19330
19423
  const executeUpload = (fileItem, index) => {
19424
+ var _a2, _b;
19331
19425
  const uploadOption = new UploadOptions();
19332
19426
  uploadOption.url = url;
19333
19427
  for (const [key, value2] of Object.entries(data)) {
19334
- fileItem.formData.append(key, value2);
19428
+ (_a2 = fileItem.formData) == null ? void 0 : _a2.append(key, value2);
19335
19429
  }
19336
19430
  uploadOption.formData = fileItem.formData;
19337
19431
  uploadOption.timeout = timeout * 1;
@@ -19341,73 +19435,67 @@ Please add \`${key}Action\` when creating your handler.`);
19341
19435
  uploadOption.withCredentials = withCredentials;
19342
19436
  uploadOption.beforeXhrUpload = beforeXhrUpload;
19343
19437
  try {
19344
- uploadOption.sourceFile = fileItem.formData.get(name);
19438
+ uploadOption.sourceFile = (_b = fileItem.formData) == null ? void 0 : _b.get(name);
19345
19439
  } catch (error) {
19346
19440
  console.warn(error);
19347
19441
  }
19348
19442
  uploadOption.onStart = (option) => {
19349
19443
  clearUploadQueue(index);
19350
- setFileList((fileList2) => {
19351
- fileList2.map((item) => {
19444
+ setFileList(
19445
+ fileList.map((item) => {
19352
19446
  if (item.uid === fileItem.uid) {
19353
19447
  item.status = "ready";
19354
19448
  item.message = locale.uploader.readyUpload;
19355
19449
  }
19356
19450
  return item;
19357
- });
19358
- return [...fileList2];
19359
- });
19451
+ })
19452
+ );
19360
19453
  onStart && onStart(option);
19361
19454
  };
19362
19455
  uploadOption.onProgress = (e, option) => {
19363
- setFileList((fileList2) => {
19364
- fileList2.map((item) => {
19456
+ setFileList(
19457
+ fileList.map((item) => {
19365
19458
  if (item.uid === fileItem.uid) {
19366
- item.status = "uploading";
19459
+ item.status = UPLOADING;
19367
19460
  item.message = locale.uploader.uploading;
19368
19461
  item.percentage = (e.loaded / e.total * 100).toFixed(0);
19369
19462
  onProgress && onProgress({ e, option, percentage: item.percentage });
19370
19463
  }
19371
19464
  return item;
19372
- });
19373
- return [...fileList2];
19374
- });
19465
+ })
19466
+ );
19375
19467
  };
19376
19468
  uploadOption.onSuccess = (responseText, option) => {
19377
- setFileList((fileList2) => {
19378
- onUpdate && onUpdate(fileList2);
19379
- fileList2.map((item) => {
19380
- if (item.uid === fileItem.uid) {
19381
- item.status = "success";
19382
- item.message = locale.uploader.success;
19383
- item.responseText = responseText;
19384
- }
19385
- return item;
19386
- });
19387
- return [...fileList2];
19469
+ const list = fileList.map((item) => {
19470
+ if (item.uid === fileItem.uid) {
19471
+ item.status = SUCCESS;
19472
+ item.message = locale.uploader.success;
19473
+ item.responseText = responseText;
19474
+ }
19475
+ return item;
19388
19476
  });
19389
- onSuccess && onSuccess({
19477
+ setFileList(list);
19478
+ onUpdate == null ? void 0 : onUpdate(list);
19479
+ onSuccess == null ? void 0 : onSuccess({
19390
19480
  responseText,
19391
19481
  option,
19392
- fileList
19482
+ fileList: list
19393
19483
  });
19394
19484
  };
19395
19485
  uploadOption.onFailure = (responseText, option) => {
19396
- setFileList((fileList2) => {
19397
- fileList2.map((item) => {
19398
- if (item.uid === fileItem.uid) {
19399
- item.status = "error";
19400
- item.message = locale.uploader.error;
19401
- item.responseText = responseText;
19402
- }
19403
- return item;
19404
- });
19405
- return [...fileList2];
19486
+ const list = fileList.map((item) => {
19487
+ if (item.uid === fileItem.uid) {
19488
+ item.status = ERROR;
19489
+ item.message = locale.uploader.error;
19490
+ item.responseText = responseText;
19491
+ }
19492
+ return item;
19406
19493
  });
19407
- onFailure && onFailure({
19494
+ setFileList(list);
19495
+ onFailure == null ? void 0 : onFailure({
19408
19496
  responseText,
19409
19497
  option,
19410
- fileList
19498
+ fileList: list
19411
19499
  });
19412
19500
  };
19413
19501
  const task = new Upload(uploadOption);
@@ -19432,11 +19520,7 @@ Please add \`${key}Action\` when creating your handler.`);
19432
19520
  fileItem.type = file.type;
19433
19521
  fileItem.formData = formData;
19434
19522
  fileItem.uid = file.lastModified + fileItem.uid;
19435
- if (autoUpload) {
19436
- fileItem.message = locale.uploader.readyUpload;
19437
- } else {
19438
- fileItem.message = locale.uploader.waitingUpload;
19439
- }
19523
+ fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
19440
19524
  executeUpload(fileItem, index);
19441
19525
  if (preview && file.type.includes("image")) {
19442
19526
  const reader = new FileReader();
@@ -19447,8 +19531,7 @@ Please add \`${key}Action\` when creating your handler.`);
19447
19531
  };
19448
19532
  reader.readAsDataURL(file);
19449
19533
  } else {
19450
- fileList.push(fileItem);
19451
- setFileList([...fileList]);
19534
+ setFileList([...fileList, fileItem]);
19452
19535
  }
19453
19536
  });
19454
19537
  };
@@ -19475,9 +19558,9 @@ Please add \`${key}Action\` when creating your handler.`);
19475
19558
  return filterFile;
19476
19559
  };
19477
19560
  const deleted = (file, index) => {
19478
- fileList.splice(index, 1);
19479
- onDelete && onDelete(file, fileList);
19480
- setFileList([...fileList]);
19561
+ const deletedFileList = fileList.filter((file2, idx) => idx !== index);
19562
+ onDelete == null ? void 0 : onDelete(file, deletedFileList);
19563
+ setFileList(deletedFileList);
19481
19564
  };
19482
19565
  const onDeleteItem = (file, index) => {
19483
19566
  clearUploadQueue(index);
@@ -19503,131 +19586,53 @@ Please add \`${key}Action\` when creating your handler.`);
19503
19586
  const _files = filterFiles(new Array().slice.call(files));
19504
19587
  readFile(_files);
19505
19588
  }
19506
- onChange && onChange({ fileList, event });
19589
+ setFileList(fileList);
19507
19590
  if (clearInput) {
19508
19591
  clearInputValue($el);
19509
19592
  }
19510
19593
  };
19511
19594
  const handleItemClick = (file) => {
19512
- onFileItemClick && onFileItemClick(file);
19595
+ onFileItemClick == null ? void 0 : onFileItemClick(file);
19513
19596
  };
19514
- return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(React.Fragment, null, capture ? /* @__PURE__ */ React.createElement(
19597
+ return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(
19515
19598
  "input",
19516
19599
  {
19517
19600
  className: "nut-uploader__input",
19518
19601
  type: "file",
19519
- capture: "user",
19602
+ capture,
19520
19603
  name,
19521
19604
  accept,
19522
19605
  disabled,
19523
19606
  multiple,
19524
19607
  onChange: fileChange
19525
19608
  }
19526
- ) : /* @__PURE__ */ React.createElement(
19527
- "input",
19609
+ )), /* @__PURE__ */ React.createElement(
19610
+ Preview,
19528
19611
  {
19529
- className: "nut-uploader__input",
19530
- type: "file",
19531
- name,
19532
- accept,
19533
- disabled,
19534
- multiple,
19535
- onChange: fileChange
19612
+ ...{
19613
+ fileList,
19614
+ previewType,
19615
+ deletable,
19616
+ onDeleteItem,
19617
+ handleItemClick,
19618
+ previewUrl,
19619
+ children
19620
+ }
19536
19621
  }
19537
- )))), fileList.length !== 0 && Array.isArray(fileList) && fileList.map((item, index) => {
19538
- return /* @__PURE__ */ React.createElement(
19539
- "div",
19540
- {
19541
- className: `nut-uploader__preview ${previewType}`,
19542
- key: item.uid
19543
- },
19544
- previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
19545
- x$9,
19546
- {
19547
- color: "rgba(0,0,0,0.6)",
19548
- className: "close",
19549
- onClick: () => onDeleteItem(item, index)
19550
- }
19551
- ),
19552
- previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
19553
- k$3,
19554
- {
19555
- className: "nut-icon-loading",
19556
- color: "#fff"
19557
- }
19558
- )), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
19559
- "img",
19560
- {
19561
- className: "nut-uploader__preview-img__c",
19562
- style: { objectFit: fit },
19563
- src: item.url,
19564
- alt: "",
19565
- onClick: () => handleItemClick(item)
19566
- }
19567
- )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
19568
- "img",
19569
- {
19570
- className: "nut-uploader__preview-img__c",
19571
- src: previewUrl,
19572
- alt: "",
19573
- onClick: () => handleItemClick(item)
19574
- }
19575
- ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
19576
- "div",
19577
- {
19578
- onClick: () => handleItemClick(item),
19579
- className: "nut-uploader__preview-img__file__name"
19580
- },
19581
- /* @__PURE__ */ React.createElement(x$6, { color: "#808080" }),
19582
- /* @__PURE__ */ React.createElement("span", null, " ", item.name)
19583
- ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
19584
- previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
19585
- "div",
19586
- {
19587
- className: `nut-uploader__preview-img__file__name ${item.status}`,
19588
- onClick: () => handleItemClick(item)
19589
- },
19590
- /* @__PURE__ */ React.createElement(x$6, null),
19591
- /* @__PURE__ */ React.createElement("span", null, " ", item.name)
19592
- ), deletable && /* @__PURE__ */ React.createElement(
19593
- y$8,
19594
- {
19595
- color: "#808080",
19596
- className: "nut-uploader__preview-img__file__del",
19597
- onClick: () => onDeleteItem(item, index)
19598
- }
19599
- ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
19600
- Progress,
19601
- {
19602
- percent: item.percentage,
19603
- color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
19604
- showText: false
19605
- }
19606
- ))
19607
- );
19608
- }), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
19622
+ ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
19609
19623
  "div",
19610
19624
  {
19611
- className: `nut-uploader__upload ${previewType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
19625
+ className: classNames("nut-uploader__upload", previewType, {
19626
+ "nut-uploader__upload-disabled": disabled
19627
+ })
19612
19628
  },
19613
- /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon || /* @__PURE__ */ React.createElement(x$3, { width: "20px", height: "20px", color: "#808080" }), /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
19614
- capture ? /* @__PURE__ */ React.createElement(
19615
- "input",
19616
- {
19617
- className: "nut-uploader__input",
19618
- type: "file",
19619
- capture: "user",
19620
- name,
19621
- accept,
19622
- disabled,
19623
- multiple,
19624
- onChange: fileChange
19625
- }
19626
- ) : /* @__PURE__ */ React.createElement(
19629
+ /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon, /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
19630
+ /* @__PURE__ */ React.createElement(
19627
19631
  "input",
19628
19632
  {
19629
19633
  className: "nut-uploader__input",
19630
19634
  type: "file",
19635
+ capture,
19631
19636
  name,
19632
19637
  accept,
19633
19638
  disabled,