@qn-pandora/pandora-component 4.0.2 → 4.0.4

package/es/components/FileResumable/index.js

@@ -0,0 +1,327 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import Resumablejs from 'resumablejs';
+import { Progress, Tooltip, Upload } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
+import classnames from 'classnames';
+import { get } from 'lodash';
+import { CaretRightOutlined, Upload as UploadIcon, StopFill, Pause, PlusOutlined } from '@qn-pandora/pandora-component-icons';
+import { appEnv } from '@qn-pandora/app-sdk';
+import { formatString } from '../../utils/language';
+import { UploadLocale } from '../../constants/language/upload/type';
+import { SDK_PREFIX } from '../../constants/style';
+import { isJpgOrPngOrSvg } from './utils';
+var Dragger = Upload.Dragger;
+export default function FileResumable(props) {
+    var _a, _b;
+    var _this = this;
+    var resumable = useRef();
+    var _c = __read(useState(0), 2), percent = _c[0], setPercent = _c[1];
+    var _d = __read(useState(true), 2), isPlayDisabled = _d[0], setIsPlayDisabled = _d[1];
+    var _e = __read(useState(true), 2), isPauseDisabled = _e[0], setIsPauseDisabled = _e[1];
+    var _f = __read(useState(true), 2), isStopDisabled = _f[0], setIsStopDisabled = _f[1];
+    var _g = __read(useState(false), 2), showTool = _g[0], setShowTool = _g[1];
+    var _h = __read(useState(''), 2), imageUrl = _h[0], setImageUrl = _h[1];
+    var locale = useContext(ConfigContext).locale;
+    var maxFileSize = props.maxFileSize, minFileSize = props.minFileSize, minFileSizeErrorCallback = props.minFileSizeErrorCallback, maxFileSizeErrorCallback = props.maxFileSizeErrorCallback, onError = props.onError, onChange = props.onChange, query = props.query, onStop = props.onStop, onSuccess = props.onSuccess, accept = props.accept, fileList = props.fileList, uploading = props.uploading, children = props.children, className = props.className, showUploadList = props.showUploadList, mode = props.mode, uploadIcon = props.uploadIcon, uploadDesc = props.uploadDesc, disabled = props.disabled, defaultImageUrl = props.defaultImageUrl, others = __rest(props, ["maxFileSize", "minFileSize", "minFileSizeErrorCallback", "maxFileSizeErrorCallback", "onError", "onChange", "query", "onStop", "onSuccess", "accept", "fileList", "uploading", "children", "className", "showUploadList", "mode", "uploadIcon", "uploadDesc", "disabled", "defaultImageUrl"]);
+    var handleRemove = useCallback(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+    }, [onChange]);
+    var handleStop = useCallback(function () {
+        var _a;
+        onStop === null || onStop === void 0 ? void 0 : onStop();
+        handleRemove();
+        (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        setShowTool(false);
+        setIsStopDisabled(true);
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(true);
+    }, [
+        onStop,
+        handleRemove,
+        resumable,
+        setIsStopDisabled,
+        setIsPlayDisabled,
+        setIsPauseDisabled
+    ]);
+    var runItems = useMemo(function () {
+        var _a, _b, _c;
+        var playItem = {
+            type: 'play',
+            iconType: (React.createElement(CaretRightOutlined, { onClick: function () {
+                    var _a;
+                    (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.upload();
+                }, className: classnames(SDK_PREFIX + "-file-resumable-run-container-icon", (_a = {},
+                    _a[SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isPlayDisabled,
+                    _a)) })),
+            text: formatString(UploadLocale.play, locale)
+        };
+        var pauseItem = {
+            type: 'pause',
+            iconType: (React.createElement(Pause, { onClick: function () {
+                    var _a;
+                    (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.pause();
+                    setIsPlayDisabled(false);
+                    setIsPauseDisabled(true);
+                }, className: classnames(SDK_PREFIX + "-file-resumable-run-container-icon", (_b = {},
+                    _b[SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isPauseDisabled,
+                    _b)) })),
+            ownIcon: true,
+            text: formatString(UploadLocale.pause, locale),
+            disabled: isPauseDisabled
+        };
+        var stopItem = {
+            type: 'stop',
+            iconType: (React.createElement(StopFill, { onClick: handleStop, className: classnames(SDK_PREFIX + "-file-resumable-run-container-icon", (_c = {},
+                    _c[SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isStopDisabled,
+                    _c)) })),
+            ownIcon: true,
+            text: formatString(UploadLocale.stop, locale)
+        };
+        return [isPauseDisabled ? playItem : pauseItem, stopItem];
+    }, [
+        resumable,
+        isPlayDisabled,
+        isPauseDisabled,
+        isStopDisabled,
+        locale,
+        handleStop
+    ]);
+    var handleReadeImageFile = useCallback(function (file) {
+        var reader = new FileReader();
+        reader.readAsArrayBuffer(file);
+        reader.onloadend = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var view, first4Byte, hexValue, imageUrl_1;
+            return __generator(this, function (_a) {
+                if (e.target.readyState === FileReader.DONE) {
+                    view = new DataView(e.target.result);
+                    first4Byte = view.getUint32(0, false);
+                    hexValue = Number(first4Byte).toString(16);
+                    imageUrl_1 = isJpgOrPngOrSvg(file.type, hexValue)
+                        ? URL.createObjectURL(file)
+                        : '';
+                    setImageUrl(imageUrl_1);
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    }, []);
+    var handleBeforeUpload = useCallback(function (file) {
+        var _a;
+        if (file.size === 0) {
+            onError === null || onError === void 0 ? void 0 : onError(formatString(UploadLocale.empty_file_error_msg, locale));
+            return;
+        }
+        if (maxFileSize && file.size > maxFileSize) {
+            if (maxFileSizeErrorCallback) {
+                maxFileSizeErrorCallback(file);
+            }
+            else {
+                onError === null || onError === void 0 ? void 0 : onError("" + formatString(UploadLocale.max_size_error_msg, locale) + maxFileSize + formatString(UploadLocale.byte, locale) + " ");
+            }
+            return;
+        }
+        if (minFileSize && file.size < minFileSize) {
+            if (minFileSizeErrorCallback) {
+                minFileSizeErrorCallback(file);
+            }
+            else {
+                onError === null || onError === void 0 ? void 0 : onError("" + formatString(UploadLocale.min_size_error_msg, locale) + minFileSize + formatString(UploadLocale.byte, locale) + " ");
+            }
+            return;
+        }
+        (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.addFile(file);
+        if (mode === 'image') {
+            handleReadeImageFile(file);
+        }
+        if (onChange) {
+            onChange(file);
+        }
+        return false;
+    }, [
+        maxFileSize,
+        minFileSize,
+        resumable,
+        maxFileSizeErrorCallback,
+        locale,
+        minFileSizeErrorCallback,
+        onChange,
+        onError,
+        mode,
+        handleReadeImageFile
+    ]);
+    var handleStart = useCallback(function () {
+        var _a, _b;
+        (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.updateQuery(query);
+        (_b = resumable.current) === null || _b === void 0 ? void 0 : _b.upload();
+        setShowTool(true);
+    }, [query, setShowTool]);
+    var handleFileSuccess = useCallback(function (message) {
+        var _a;
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(message);
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(true);
+        setShowTool(false);
+        setPercent(0);
+        (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.cancel();
+    }, [
+        resumable,
+        onSuccess,
+        setIsPlayDisabled,
+        setIsPauseDisabled,
+        setShowTool,
+        setPercent
+    ]);
+    var handleUploadStart = useCallback(function () {
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(false);
+        setIsStopDisabled(false);
+    }, [setIsPlayDisabled, setIsPauseDisabled, setIsStopDisabled]);
+    var handleError = useCallback(function (error) {
+        var _a;
+        (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        onStop === null || onStop === void 0 ? void 0 : onStop();
+        var errorJson = JSON.parse(error);
+        onError === null || onError === void 0 ? void 0 : onError(get(errorJson, 'Message') || UploadLocale.error);
+        setImageUrl('');
+        handleRemove();
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(true);
+        setShowTool(false);
+    }, [
+        onStop,
+        handleRemove,
+        setIsPlayDisabled,
+        setIsPauseDisabled,
+        setShowTool,
+        onError
+    ]);
+    var init = useCallback(function () {
+        var ResumableField = new Resumablejs(__assign(__assign({ permanentErrors: [400, 404, 415, 500, 501, 409] }, others), { target: others.target || appEnv.getApiPrefix() + "/upload/file" }));
+        ResumableField.on('fileSuccess', function (_file, message) {
+            handleFileSuccess(message);
+        });
+        ResumableField.on('error', function (error) {
+            handleError(error);
+        });
+        ResumableField.on('fileProgress', function (resumableField) {
+            var percent = Math.floor(resumableField.progress() * 100);
+            setPercent(percent);
+        });
+        ResumableField.on('uploadStart', function () {
+            handleUploadStart();
+        });
+        resumable.current = ResumableField;
+    }, [handleError, setPercent, handleUploadStart, handleFileSuccess, others]);
+    var renderIcons = useCallback(function (icons) {
+        return icons.map(function (item) {
+            var Icon = item.iconType;
+            return (React.createElement(Tooltip, { key: item.type, title: item.text }, Icon));
+        });
+    }, []);
+    useEffect(function () {
+        setImageUrl(defaultImageUrl || '');
+    }, [defaultImageUrl]);
+    useEffect(function () {
+        init();
+        return function () {
+            var _a;
+            (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(function () {
+        if (uploading) {
+            handleStart();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [uploading]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dragger, { name: "file", accept: accept, multiple: false, beforeUpload: handleBeforeUpload, onRemove: handleRemove, fileList: fileList || [], showUploadList: showUploadList, disabled: disabled || uploading, className: classnames(SDK_PREFIX + "-file-resumable", className, (_a = {},
+                _a[SDK_PREFIX + "-file-resumable-img"] = mode === 'image',
+                _a)) }, children ? (children) : mode === 'image' ? (React.createElement("div", { className: SDK_PREFIX + "-file-resumable-img-container" },
+            React.createElement("div", { className: classnames(SDK_PREFIX + "-file-resumable-img-operator", (_b = {},
+                    _b[SDK_PREFIX + "-file-resumable-img-hidden-plus-icon"] = !!imageUrl,
+                    _b)) }, uploadIcon ? uploadIcon : React.createElement(PlusOutlined, null)),
+            React.createElement("img", { src: imageUrl, className: SDK_PREFIX + "-file-resumable-img-box" }))) : (React.createElement(React.Fragment, null,
+            uploadIcon ? (uploadIcon) : (React.createElement(UploadIcon, { className: SDK_PREFIX + "-file-resumable-upload-icon" })),
+            React.createElement("p", null, uploadDesc
+                ? uploadDesc
+                : formatString(UploadLocale.text, locale))))),
+        showTool && (React.createElement(React.Fragment, null,
+            React.createElement(Progress, { percent: percent, size: "small" }),
+            React.createElement("div", { className: SDK_PREFIX + "-file-resumable-run-container" }, renderIcons(runItems))))));
+}