index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. var __assign = (this && this.__assign) || function () {
  2. __assign = Object.assign || function(t) {
  3. for (var s, i = 1, n = arguments.length; i < n; i++) {
  4. s = arguments[i];
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  6. t[p] = s[p];
  7. }
  8. return t;
  9. };
  10. return __assign.apply(this, arguments);
  11. };
  12. var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  13. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  14. return new (P || (P = Promise))(function (resolve, reject) {
  15. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  16. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  17. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  18. step((generator = generator.apply(thisArg, _arguments || [])).next());
  19. });
  20. };
  21. var __generator = (this && this.__generator) || function (thisArg, body) {
  22. var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
  23. return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
  24. function verb(n) { return function (v) { return step([n, v]); }; }
  25. function step(op) {
  26. if (f) throw new TypeError("Generator is already executing.");
  27. while (g && (g = 0, op[0] && (_ = 0)), _) try {
  28. if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
  29. if (y = 0, t) op = [op[0] & 2, t.value];
  30. switch (op[0]) {
  31. case 0: case 1: t = op; break;
  32. case 4: _.label++; return { value: op[1], done: false };
  33. case 5: _.label++; y = op[1]; op = [0]; continue;
  34. case 7: op = _.ops.pop(); _.trys.pop(); continue;
  35. default:
  36. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
  37. if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
  38. if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
  39. if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
  40. if (t[2]) _.ops.pop();
  41. _.trys.pop(); continue;
  42. }
  43. op = body.call(thisArg, _);
  44. } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
  45. if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
  46. }
  47. };
  48. var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  49. if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
  50. if (ar || !(i in from)) {
  51. if (!ar) ar = Array.prototype.slice.call(from, 0, i);
  52. ar[i] = from[i];
  53. }
  54. }
  55. return to.concat(ar || Array.prototype.slice.call(from));
  56. };
  57. import { useEvent, useRef } from 'functional-mini/component';
  58. import '../_util/assert-component2';
  59. import { mountComponent } from '../_util/component';
  60. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  61. import { useMixState } from '../_util/hooks/useMixState';
  62. import { triggerRefEvent } from '../_util/hooks/useReportRef';
  63. import { chooseImage } from '../_util/jsapi/choose-image';
  64. import { UploaderFunctionalProps, } from './props';
  65. import { useId } from 'functional-mini/compat';
  66. /**
  67. * 获取一个内部使用的 uid
  68. * 每次获取时自增
  69. */
  70. var useCounter = function () {
  71. var counterRef = useRef(0);
  72. // 使用 Date.now() 与 useId 作为前缀,防止每次前缀都相同
  73. var prefix = useId() + '-' + Date.now();
  74. return {
  75. getCount: function () {
  76. counterRef.current = counterRef.current + 1;
  77. return "".concat(prefix, "-").concat(counterRef.current);
  78. },
  79. };
  80. };
  81. var ImageUpload = function (props) {
  82. var getCount = useCounter().getCount;
  83. var _a = useMixState(props.defaultFileList, {
  84. value: props.fileList,
  85. postState: function (fileList) {
  86. return {
  87. valid: true,
  88. value: (fileList || []).map(function (item) {
  89. var file = __assign({}, item);
  90. if (typeof item.url === 'undefined') {
  91. file.url = '';
  92. }
  93. if (typeof item.uid === 'undefined') {
  94. file.uid = getCount();
  95. }
  96. if (typeof item.status === 'undefined') {
  97. file.status = 'done';
  98. }
  99. return file;
  100. }),
  101. };
  102. },
  103. }), fileList = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update, triggerUpdater = _b.triggerUpdater;
  104. triggerRefEvent();
  105. var triggerEvent = useComponentEvent(props).triggerEvent;
  106. function uploadFile(localFile) {
  107. return __awaiter(this, void 0, void 0, function () {
  108. var onUpload, uid, url, err_1;
  109. return __generator(this, function (_a) {
  110. switch (_a.label) {
  111. case 0:
  112. onUpload = props.onUpload;
  113. uid = getCount();
  114. triggerUpdater(function (oldFiles) {
  115. var tempFileList = __spreadArray(__spreadArray([], oldFiles, true), [
  116. {
  117. // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  118. //@ts-expect-error
  119. path: localFile.path,
  120. size: localFile.size,
  121. uid: uid,
  122. status: 'uploading',
  123. },
  124. ], false);
  125. triggerEvent('change', tempFileList);
  126. return tempFileList;
  127. });
  128. _a.label = 1;
  129. case 1:
  130. _a.trys.push([1, 3, , 4]);
  131. return [4 /*yield*/, onUpload(localFile)];
  132. case 2:
  133. url = _a.sent();
  134. if (typeof url !== 'string' || !url) {
  135. updateFile(uid, {
  136. status: 'error',
  137. });
  138. return [2 /*return*/];
  139. }
  140. updateFile(uid, {
  141. status: 'done',
  142. url: url,
  143. });
  144. return [3 /*break*/, 4];
  145. case 3:
  146. err_1 = _a.sent();
  147. updateFile(uid, {
  148. status: 'error',
  149. });
  150. return [3 /*break*/, 4];
  151. case 4: return [2 /*return*/];
  152. }
  153. });
  154. });
  155. }
  156. function updateFile(uid, file) {
  157. return __awaiter(this, void 0, void 0, function () {
  158. return __generator(this, function (_a) {
  159. triggerUpdater(function (old) {
  160. var tempFileList = old.map(function (item) {
  161. if (item.uid === uid) {
  162. return __assign(__assign({}, item), file);
  163. }
  164. return item;
  165. });
  166. triggerEvent('change', tempFileList);
  167. return tempFileList;
  168. });
  169. return [2 /*return*/];
  170. });
  171. });
  172. }
  173. useEvent('chooseImage', function () { return __awaiter(void 0, void 0, void 0, function () {
  174. var onBeforeUpload, onUpload, maxCount, sourceType, localFileList, chooseImageRes, err_2, beforeUploadRes, err_3, tasks;
  175. return __generator(this, function (_a) {
  176. switch (_a.label) {
  177. case 0:
  178. onBeforeUpload = props.onBeforeUpload, onUpload = props.onUpload, maxCount = props.maxCount, sourceType = props.sourceType;
  179. if (!onUpload || typeof onUpload !== 'function') {
  180. throw new Error('need props onUpload');
  181. }
  182. _a.label = 1;
  183. case 1:
  184. _a.trys.push([1, 3, , 4]);
  185. return [4 /*yield*/, chooseImage({
  186. count: typeof maxCount === 'undefined'
  187. ? Infinity
  188. : maxCount - fileList.length,
  189. sourceType: sourceType,
  190. })];
  191. case 2:
  192. chooseImageRes = _a.sent();
  193. localFileList = (chooseImageRes.tempFiles ||
  194. chooseImageRes.tempFilePaths ||
  195. chooseImageRes.apFilePaths ||
  196. chooseImageRes.filePaths ||
  197. [])
  198. .map(function (item) {
  199. if (typeof item === 'string') {
  200. return {
  201. path: item,
  202. };
  203. }
  204. if (item.path) {
  205. return {
  206. path: item.path,
  207. size: item.size,
  208. };
  209. }
  210. })
  211. .filter(function (item) { return !!item; });
  212. return [3 /*break*/, 4];
  213. case 3:
  214. err_2 = _a.sent();
  215. triggerEvent('chooseImageError', err_2);
  216. return [2 /*return*/];
  217. case 4:
  218. if (!(onBeforeUpload && typeof onBeforeUpload === 'function')) return [3 /*break*/, 8];
  219. _a.label = 5;
  220. case 5:
  221. _a.trys.push([5, 7, , 8]);
  222. return [4 /*yield*/, onBeforeUpload(localFileList)];
  223. case 6:
  224. beforeUploadRes = _a.sent();
  225. if (beforeUploadRes === false) {
  226. return [2 /*return*/];
  227. }
  228. if (Array.isArray(beforeUploadRes)) {
  229. localFileList = beforeUploadRes;
  230. }
  231. return [3 /*break*/, 8];
  232. case 7:
  233. err_3 = _a.sent();
  234. return [2 /*return*/];
  235. case 8:
  236. tasks = localFileList.map(function (file) { return uploadFile(file); });
  237. return [4 /*yield*/, Promise.all(tasks)];
  238. case 9:
  239. _a.sent();
  240. return [2 /*return*/];
  241. }
  242. });
  243. }); });
  244. useEvent('onRemove', function (e) { return __awaiter(void 0, void 0, void 0, function () {
  245. var uid, file, result, tempFileList;
  246. return __generator(this, function (_a) {
  247. switch (_a.label) {
  248. case 0:
  249. uid = e.currentTarget.dataset.uid;
  250. file = fileList.find(function (item) { return item.uid === uid; });
  251. if (!(props.onRemove && typeof props.onRemove === 'function')) return [3 /*break*/, 2];
  252. return [4 /*yield*/, props.onRemove(file)];
  253. case 1:
  254. result = _a.sent();
  255. if (result === false) {
  256. return [2 /*return*/];
  257. }
  258. _a.label = 2;
  259. case 2:
  260. tempFileList = fileList.filter(function (item) { return item.uid !== uid; });
  261. if (!isControlled) {
  262. update(tempFileList);
  263. }
  264. triggerEvent('change', tempFileList);
  265. return [2 /*return*/];
  266. }
  267. });
  268. }); });
  269. useEvent('onPreview', function (e) {
  270. var uid = e.currentTarget.dataset.uid;
  271. var file = fileList.find(function (item) { return item.uid === uid; });
  272. triggerEvent('preview', file);
  273. });
  274. useEvent('update', function (e) {
  275. if (isControlled) {
  276. return;
  277. }
  278. update(e);
  279. });
  280. return {
  281. mixin: {
  282. value: fileList,
  283. },
  284. };
  285. };
  286. mountComponent(ImageUpload, UploaderFunctionalProps);