@qn-pandora/pandora-component 4.0.3 → 4.0.4

package/es/index.d.ts

@@ -28,6 +28,7 @@ export { default as AutoComplete, AutoSelectValue } from './components/AutoCompl
 export { default as Checkbox } from './components/Checkbox';
 export { default as CheckboxList, ICheckboxListProps, CheckboxValueType, IOptionItem as ICheckOptionItem } from './components/CheckboxList';
 export { default as Breadcrumb, IBreadcrumbProps } from './components/Breadcrumb';
+export { default as FileResumable } from './components/FileResumable';
 export { default as Drawer } from './components/Drawer';
 export { default as KeyValuePair, IKeyValuePairProps } from './components/KeyValuePair';
 export { default as NameExplainTooltip, INameExplainTooltip } from './components/NameExplainTooltip';

package/es/index.js

@@ -28,6 +28,7 @@ export { default as AutoComplete } from './components/AutoComplete';
 export { default as Checkbox } from './components/Checkbox';
 export { default as CheckboxList } from './components/CheckboxList';
 export { default as Breadcrumb } from './components/Breadcrumb';
+export { default as FileResumable } from './components/FileResumable';
 export { default as Drawer } from './components/Drawer';
 export { default as KeyValuePair } from './components/KeyValuePair';
 export { default as NameExplainTooltip } from './components/NameExplainTooltip';

package/es/index.less

@@ -1,49 +1,50 @@
 @import './style\mixin.less';
 @import './style\theme.less';
 @import './components\AutoComplete\style.less';
-@import './components\Breadcrumb\style.less';
 @import './components\Card\style.less';
 @import './components\Button\style.less';
-@import './components\Checkbox\style.less';
-@import './components\CheckTransformList\style.less';
+@import './components\Breadcrumb\style.less';
 @import './components\CheckboxList\style.less';
+@import './components\CheckTransformList\style.less';
 @import './components\Collapse\style.less';
+@import './components\Checkbox\style.less';
 @import './components\CollapsiblePanel\style.less';
-@import './components\Drawer\style.less';
 @import './components\DateTimePicker\style.less';
+@import './components\Drawer\style.less';
+@import './components\FileResumable\style.less';
 @import './components\Input\style.less';
 @import './components\KeyValuePair\style.less';
 @import './components\Menu\style.less';
 @import './components\Modal\style.less';
 @import './components\NameExplainTooltip\style.less';
 @import './components\NameLimiter\style.less';
-@import './components\RangeInput\style.less';
-@import './components\RadioGroup\style.less';
 @import './components\OptionList\style.less';
-@import './components\RemarkName\style.less';
+@import './components\RadioGroup\style.less';
+@import './components\RangeInput\style.less';
 @import './components\Selector\style.less';
 @import './components\Spin\style.less';
+@import './components\RemarkName\style.less';
 @import './components\Steps\style.less';
 @import './components\Table\style.less';
-@import './components\TagList\style.less';
+@import './components\Timeline\style.less';
 @import './components\Tabs\style.less';
+@import './components\TagList\style.less';
 @import './components\Transfer\style.less';
-@import './components\Timeline\style.less';
 @import './components\TreeSelector\style.less';
 @import './components\Card\RowExtra\style.less';
 @import './components\Card\SearchInput\style.less';
-@import './components\DateTimePicker\BaseMobile\style.less';
 @import './components\DateTimePicker\Base\style.less';
+@import './components\DateTimePicker\BaseMobile\style.less';
 @import './components\DateTimePicker\DisplayInput\style.less';
-@import './components\OptionList\OptionItem\style.less';
 @import './components\OptionList\InlineOptionList\style.less';
+@import './components\OptionList\OptionItem\style.less';
 @import './components\OptionList\PopoverOptionList\style.less';
 @import './components\Steps\ControlButton\style.less';
 @import './components\Table\ColumnTag\style.less';
-@import './components\TagList\TagSwitch\style.less';
+@import './components\Timeline\TimelineItem\style.less';
+@import './components\Transfer\List\style.less';
 @import './components\TagList\Tag\style.less';
 @import './components\Transfer\ListBody\style.less';
-@import './components\Transfer\List\style.less';
-@import './components\Timeline\TimelineItem\style.less';
-@import './components\DateTimePicker\BaseMobile\Absolute\style.less';
-@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\TagList\TagSwitch\style.less';
+@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\DateTimePicker\BaseMobile\Absolute\style.less';

package/es/style/theme.less

@@ -387,3 +387,4 @@
 @editor-nav-background-color: #f5f5f5;
 @editor_nav_border_color: #d8d8d8;
 @editor_nav_line_color: #fcce72;
+@image-operator-hover-bg: rgba(51, 51, 51, 0.7);

package/lib/components/FileResumable/constants.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { RcFile, UploadChangeParam } from 'antd/es/upload';
+export interface IFileResumableProps {
+    target?: string;
+    uploading: boolean;
+    accept: string;
+    chunkSize?: number;
+    forceChunkSize?: boolean;
+    simultaneousUploads?: number;
+    query?: IKeyValues;
+    fileList: UploadChangeParam['fileList'] | [];
+    method?: 'multipart' | 'octet';
+    testChunks?: boolean;
+    maxChunkRetries?: number;
+    maxFiles?: number;
+    withCredentials?: boolean;
+    headers?: IKeyValues;
+    onSuccess?: (message: string) => void;
+    onChange?: (file: RcFile | null) => void;
+    onStop?: () => void;
+    minFileSize?: number;
+    minFileSizeErrorCallback?: (file: RcFile) => void;
+    maxFileSize?: number;
+    maxFileSizeErrorCallback?: (file: RcFile) => void;
+    onError?: (error: string) => void;
+    className?: string;
+    showUploadList?: boolean;
+    mode?: 'image' | 'file';
+    uploadIcon?: React.ReactNode;
+    uploadDesc?: string;
+    disabled?: boolean;
+    defaultImageUrl?: string;
+}

package/lib/components/FileResumable/constants.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/FileResumable/index.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { IFileResumableProps } from './constants';
+export interface IIconItem {
+    iconType: any;
+    type: string;
+    text: string;
+    disabled?: boolean;
+    ownIcon?: boolean;
+    onClick?: () => void;
+}
+export default function FileResumable(props: PropsWithChildren<IFileResumableProps & {
+    ref?: any;
+}>): JSX.Element;

package/lib/components/FileResumable/index.js

@@ -0,0 +1,340 @@
+"use strict";
+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;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var resumablejs_1 = __importDefault(require("resumablejs"));
+var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
+var classnames_1 = __importDefault(require("classnames"));
+var lodash_1 = require("lodash");
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
+var app_sdk_1 = require("@qn-pandora/app-sdk");
+var language_1 = require("../../utils/language");
+var type_1 = require("../../constants/language/upload/type");
+var style_1 = require("../../constants/style");
+var utils_1 = require("./utils");
+var Dragger = antd_1.Upload.Dragger;
+function FileResumable(props) {
+    var _a, _b;
+    var _this = this;
+    var resumable = react_1.useRef();
+    var _c = __read(react_1.useState(0), 2), percent = _c[0], setPercent = _c[1];
+    var _d = __read(react_1.useState(true), 2), isPlayDisabled = _d[0], setIsPlayDisabled = _d[1];
+    var _e = __read(react_1.useState(true), 2), isPauseDisabled = _e[0], setIsPauseDisabled = _e[1];
+    var _f = __read(react_1.useState(true), 2), isStopDisabled = _f[0], setIsStopDisabled = _f[1];
+    var _g = __read(react_1.useState(false), 2), showTool = _g[0], setShowTool = _g[1];
+    var _h = __read(react_1.useState(''), 2), imageUrl = _h[0], setImageUrl = _h[1];
+    var locale = react_1.useContext(config_provider_1.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 = react_1.useCallback(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+    }, [onChange]);
+    var handleStop = react_1.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 = react_1.useMemo(function () {
+        var _a, _b, _c;
+        var playItem = {
+            type: 'play',
+            iconType: (react_1.default.createElement(pandora_component_icons_1.CaretRightOutlined, { onClick: function () {
+                    var _a;
+                    (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.upload();
+                }, className: classnames_1.default(style_1.SDK_PREFIX + "-file-resumable-run-container-icon", (_a = {},
+                    _a[style_1.SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isPlayDisabled,
+                    _a)) })),
+            text: language_1.formatString(type_1.UploadLocale.play, locale)
+        };
+        var pauseItem = {
+            type: 'pause',
+            iconType: (react_1.default.createElement(pandora_component_icons_1.Pause, { onClick: function () {
+                    var _a;
+                    (_a = resumable.current) === null || _a === void 0 ? void 0 : _a.pause();
+                    setIsPlayDisabled(false);
+                    setIsPauseDisabled(true);
+                }, className: classnames_1.default(style_1.SDK_PREFIX + "-file-resumable-run-container-icon", (_b = {},
+                    _b[style_1.SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isPauseDisabled,
+                    _b)) })),
+            ownIcon: true,
+            text: language_1.formatString(type_1.UploadLocale.pause, locale),
+            disabled: isPauseDisabled
+        };
+        var stopItem = {
+            type: 'stop',
+            iconType: (react_1.default.createElement(pandora_component_icons_1.StopFill, { onClick: handleStop, className: classnames_1.default(style_1.SDK_PREFIX + "-file-resumable-run-container-icon", (_c = {},
+                    _c[style_1.SDK_PREFIX + "-file-resumable-run-container-icon-disabled"] = isStopDisabled,
+                    _c)) })),
+            ownIcon: true,
+            text: language_1.formatString(type_1.UploadLocale.stop, locale)
+        };
+        return [isPauseDisabled ? playItem : pauseItem, stopItem];
+    }, [
+        resumable,
+        isPlayDisabled,
+        isPauseDisabled,
+        isStopDisabled,
+        locale,
+        handleStop
+    ]);
+    var handleReadeImageFile = react_1.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 = utils_1.isJpgOrPngOrSvg(file.type, hexValue)
+                        ? URL.createObjectURL(file)
+                        : '';
+                    setImageUrl(imageUrl_1);
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    }, []);
+    var handleBeforeUpload = react_1.useCallback(function (file) {
+        var _a;
+        if (file.size === 0) {
+            onError === null || onError === void 0 ? void 0 : onError(language_1.formatString(type_1.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("" + language_1.formatString(type_1.UploadLocale.max_size_error_msg, locale) + maxFileSize + language_1.formatString(type_1.UploadLocale.byte, locale) + " ");
+            }
+            return;
+        }
+        if (minFileSize && file.size < minFileSize) {
+            if (minFileSizeErrorCallback) {
+                minFileSizeErrorCallback(file);
+            }
+            else {
+                onError === null || onError === void 0 ? void 0 : onError("" + language_1.formatString(type_1.UploadLocale.min_size_error_msg, locale) + minFileSize + language_1.formatString(type_1.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 = react_1.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 = react_1.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 = react_1.useCallback(function () {
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(false);
+        setIsStopDisabled(false);
+    }, [setIsPlayDisabled, setIsPauseDisabled, setIsStopDisabled]);
+    var handleError = react_1.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(lodash_1.get(errorJson, 'Message') || type_1.UploadLocale.error);
+        setImageUrl('');
+        handleRemove();
+        setIsPlayDisabled(true);
+        setIsPauseDisabled(true);
+        setShowTool(false);
+    }, [
+        onStop,
+        handleRemove,
+        setIsPlayDisabled,
+        setIsPauseDisabled,
+        setShowTool,
+        onError
+    ]);
+    var init = react_1.useCallback(function () {
+        var ResumableField = new resumablejs_1.default(__assign(__assign({ permanentErrors: [400, 404, 415, 500, 501, 409] }, others), { target: others.target || app_sdk_1.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 = react_1.useCallback(function (icons) {
+        return icons.map(function (item) {
+            var Icon = item.iconType;
+            return (react_1.default.createElement(antd_1.Tooltip, { key: item.type, title: item.text }, Icon));
+        });
+    }, []);
+    react_1.useEffect(function () {
+        setImageUrl(defaultImageUrl || '');
+    }, [defaultImageUrl]);
+    react_1.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
+    }, []);
+    react_1.useEffect(function () {
+        if (uploading) {
+            handleStart();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [uploading]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Dragger, { name: "file", accept: accept, multiple: false, beforeUpload: handleBeforeUpload, onRemove: handleRemove, fileList: fileList || [], showUploadList: showUploadList, disabled: disabled || uploading, className: classnames_1.default(style_1.SDK_PREFIX + "-file-resumable", className, (_a = {},
+                _a[style_1.SDK_PREFIX + "-file-resumable-img"] = mode === 'image',
+                _a)) }, children ? (children) : mode === 'image' ? (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-file-resumable-img-container" },
+            react_1.default.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-file-resumable-img-operator", (_b = {},
+                    _b[style_1.SDK_PREFIX + "-file-resumable-img-hidden-plus-icon"] = !!imageUrl,
+                    _b)) }, uploadIcon ? uploadIcon : react_1.default.createElement(pandora_component_icons_1.PlusOutlined, null)),
+            react_1.default.createElement("img", { src: imageUrl, className: style_1.SDK_PREFIX + "-file-resumable-img-box" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            uploadIcon ? (uploadIcon) : (react_1.default.createElement(pandora_component_icons_1.Upload, { className: style_1.SDK_PREFIX + "-file-resumable-upload-icon" })),
+            react_1.default.createElement("p", null, uploadDesc
+                ? uploadDesc
+                : language_1.formatString(type_1.UploadLocale.text, locale))))),
+        showTool && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(antd_1.Progress, { percent: percent, size: "small" }),
+            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-file-resumable-run-container" }, renderIcons(runItems))))));
+}
+exports.default = FileResumable;