@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/UserAvatarEditor.js

@@ -0,0 +1,169 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatarEditor = UserAvatarEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const RotateLeft_1 = __importDefault(require("@mui/icons-material/RotateLeft"));
+const RotateRight_1 = __importDefault(require("@mui/icons-material/RotateRight"));
+const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
+const Image_1 = __importDefault(require("@mui/icons-material/Image"));
+const Done_1 = __importDefault(require("@mui/icons-material/Done"));
+const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const Labels_1 = require("./app/Labels");
+const FileUploadButton_1 = require("./FileUploadButton");
+const defaultSize = 300;
+const defaultState = {
+    scale: 1,
+    rotate: 0
+};
+/**
+ * User avatar editor
+ * https://github.com/mosch/react-avatar-editor
+ * @param props Props
+ * @returns Component
+ */
+function UserAvatarEditor(props) {
+    // Labels
+    const labels = Labels_1.Labels.UserAvatarEditor;
+    // Destruct
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1], selectFileLabel = labels.selectFile + "..." } = props;
+    // Container width
+    const containerWidth = width + 2 * border + 44 + 4;
+    // Calculated max width
+    const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
+    // Ref
+    const ref = react_1.default.createRef();
+    // Image type
+    const type = react_1.default.useRef("image/jpeg");
+    // Button ref
+    const buttonRef = react_1.default.createRef();
+    // Preview image state
+    const [previewImage, setPreviewImage] = react_1.default.useState(image);
+    react_1.default.useEffect(() => setPreviewImage(image), [image]);
+    // Is ready state
+    const [ready, setReady] = react_1.default.useState(false);
+    // Editor states
+    const [editorState, setEditorState] = react_1.default.useState(defaultState);
+    // Height
+    // noHeight: height is not set and will be updated dynamically
+    const noHeight = height <= 0;
+    const [localHeight, setHeight] = react_1.default.useState(noHeight ? defaultSize : height);
+    // Range
+    const [min, max, step] = range;
+    const marks = [
+        {
+            value: min,
+            label: min.toString()
+        },
+        {
+            value: max,
+            label: max.toString()
+        }
+    ];
+    if (min < 1) {
+        marks.splice(1, 0, { value: 1, label: "1" });
+    }
+    // Handle zoom
+    const handleZoom = (_event, value, _activeThumb) => {
+        const scale = typeof value === "number" ? value : value[0];
+        setScale(scale);
+    };
+    const setScale = (scale) => {
+        const newState = { ...editorState, scale };
+        setEditorState(newState);
+    };
+    const adjustScale = (isAdd) => {
+        setScale(editorState.scale + (isAdd ? step : -step));
+    };
+    // Handle image load
+    const handleLoad = (imageInfo) => {
+        // Ignore too small images
+        if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
+            return;
+        if (noHeight) {
+            setHeight((imageInfo.height * width) / imageInfo.width);
+        }
+        setReady(true);
+    };
+    // Handle file upload
+    const handleFileUpload = (files) => {
+        // Reset all settings
+        handleReset();
+        // Set new preview image
+        const file = files[0];
+        type.current = file.type;
+        setPreviewImage(file);
+        // Set ready state
+        setReady(false);
+        // Make the submit button visible
+        buttonRef.current?.scrollIntoView(false);
+    };
+    // Handle reset
+    const handleReset = () => {
+        setEditorState({ ...defaultState });
+    };
+    const resetUI = () => {
+        setReady(false);
+        setPreviewImage(undefined);
+        handleReset();
+    };
+    // Handle rotate
+    const handleRotate = (r) => {
+        let rotate = editorState.rotate + r;
+        if (rotate >= 360 || rotate <= -360)
+            rotate = 0;
+        const newState = { ...editorState, rotate };
+        setEditorState(newState);
+    };
+    // Handle done
+    const handleDone = async () => {
+        // Data
+        var data = scaledResult
+            ? ref.current?.getImageScaledToCanvas()
+            : ref.current?.getImage();
+        if (data == null)
+            return;
+        // pica
+        const pica = (await import("pica")).default;
+        const picaInstance = pica();
+        // toBlob helper
+        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+        const toBlob = (canvas, mimeType = type.current, quality = 1) => {
+            return picaInstance.toBlob(canvas, mimeType, quality);
+        };
+        if (data.width > maxWidthCalculated) {
+            // Target height
+            const heightCalculated = (localHeight * maxWidthCalculated) / width;
+            // Target
+            const to = document.createElement("canvas");
+            to.width = maxWidthCalculated;
+            to.height = heightCalculated;
+            // Large photo, resize it
+            // https://github.com/nodeca/pica
+            const canvas = await picaInstance.resize(data, to, {
+                unsharpAmount: 160,
+                unsharpRadius: 0.6,
+                unsharpThreshold: 1
+            });
+            const result = await onDone(canvas, toBlob, type.current);
+            if (result) {
+                resetUI();
+            }
+        }
+        else {
+            const result = await onDone(data, toBlob, type.current);
+            if (result) {
+                resetUI();
+            }
+        }
+    };
+    // Load the component
+    const AE = react_1.default.lazy(() => import("react-avatar-editor"));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+}

package/lib/cjs/app/CommonApp.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommonApp = void 0;
+const react_1 = require("@etsoo/react");
+const ReactApp_1 = require("./ReactApp");
+/**
+ * Common independent application
+ * 通用独立程序
+ */
+class CommonApp extends ReactApp_1.ReactApp {
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     * @param debug Debug mode
+     */
+    constructor(settings, name, debug = false) {
+        super(settings, name, debug);
+        // Add persisted fields
+        this.persistedFields.push(react_1.CoreConstants.FieldUserIdSaved);
+    }
+    /**
+     * Init call update fields in local storage
+     * @returns Fields
+     */
+    initCallEncryptedUpdateFields() {
+        const fields = super.initCallEncryptedUpdateFields();
+        fields.push(react_1.CoreConstants.FieldUserIdSaved);
+        return fields;
+    }
+}
+exports.CommonApp = CommonApp;

package/lib/cjs/app/IServiceApp.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceAppContext = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Service application context
+ */
+exports.ServiceAppContext = react_1.default.createContext(null);

package/lib/cjs/app/IServiceAppSettings.js

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

package/lib/cjs/app/IServicePage.js

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

package/lib/cjs/app/IServiceUser.js

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

package/lib/cjs/app/ISmartERPUser.js

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

package/lib/cjs/app/Labels.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Labels = void 0;
+const shared_1 = require("@etsoo/shared");
+/**
+ * Labels
+ */
+var Labels;
+(function (Labels) {
+    /**
+     * Common page labels
+     */
+    Labels.CommonPage = {
+        add: "Add",
+        back: "Back",
+        delete: "Delete",
+        more: "More",
+        pullToRefresh: "Pull down to refresh",
+        refresh: "Refresh",
+        refreshing: "Refreshing",
+        releaseToRefresh: "Release to refresh",
+        reset: "Reset",
+        save: "Save",
+        scrollTop: "Scroll to top",
+        submit: "Submit"
+    };
+    /**
+     * Notification MU labels
+     */
+    Labels.NotificationMU = {
+        alertTitle: "Warning",
+        alertOK: "OK",
+        confirmTitle: "Confirm",
+        confirmYes: "OK",
+        confirmNo: "Cancel",
+        promptTitle: "Input",
+        promptCancel: "Cancel",
+        promptOK: "OK",
+        loading: "Loading",
+        success: "Success",
+        warning: "Warning",
+        info: "Information"
+    };
+    /**
+     * UserAvatarEditor labels
+     */
+    Labels.UserAvatarEditor = {
+        done: "Done",
+        reset: "Reset",
+        rotateLeft: "Rotate left 90°",
+        rotateRight: "Rotate right 90°",
+        selectFile: "Select file",
+        zoom: "Zoom"
+    };
+    /**
+     * Set components' labels
+     * @param labels Labels
+     * @param reference Key reference
+     */
+    Labels.setLabels = (labels, reference = {}) => {
+        shared_1.Utils.setLabels(Labels.CommonPage, labels, reference.commonPage);
+        shared_1.Utils.setLabels(Labels.NotificationMU, labels, reference.notificationMU);
+        shared_1.Utils.setLabels(Labels.UserAvatarEditor, labels, reference.userAvatarEditor);
+    };
+})(Labels || (exports.Labels = Labels = {}));

package/lib/cjs/app/ReactApp.js

@@ -0,0 +1,387 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactApp = exports.globalApp = exports.ReactAppContext = void 0;
+exports.ReactAppStateDetector = ReactAppStateDetector;
+const appscript_1 = require("@etsoo/appscript");
+const notificationbase_1 = require("@etsoo/notificationbase");
+const shared_1 = require("@etsoo/shared");
+const react_1 = __importDefault(require("react"));
+const NotifierMU_1 = require("../NotifierMU");
+const ProgressCount_1 = require("../ProgressCount");
+const Labels_1 = require("./Labels");
+const react_2 = require("@etsoo/react");
+/**
+ * React application context
+ */
+exports.ReactAppContext = react_1.default.createContext(null);
+/**
+ * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
+ * Case 4: property or properties changed
+ * @param props Props
+ * @returns Component
+ */
+function ReactAppStateDetector(props) {
+    // Destruct
+    const { targetFields, update } = props;
+    // Context
+    const { state } = exports.globalApp == null
+        ? {}
+        : react_1.default.useContext(exports.globalApp.userState.context);
+    // Ready
+    react_1.default.useEffect(() => {
+        // Match fields
+        const changedFields = state.lastChangedFields;
+        let matchedFields;
+        if (targetFields == null || changedFields == null) {
+            matchedFields = changedFields;
+        }
+        else {
+            matchedFields = [];
+            targetFields.forEach((targetField) => {
+                if (changedFields.includes(targetField))
+                    matchedFields?.push(targetField);
+            });
+        }
+        // Callback
+        update(state.authorized, matchedFields);
+    }, [state]);
+    // return
+    return react_1.default.createElement(react_1.default.Fragment);
+}
+/**
+ * React application
+ */
+class ReactApp extends appscript_1.CoreApp {
+    static _notifierProvider;
+    /**
+     * Get notifier provider
+     */
+    static get notifierProvider() {
+        return this._notifierProvider;
+    }
+    static createNotifier(debug) {
+        // Notifier
+        ReactApp._notifierProvider = NotifierMU_1.NotifierMU.setup(undefined, debug);
+        return NotifierMU_1.NotifierMU.instance;
+    }
+    /**
+     * Culture state
+     */
+    cultureState;
+    /**
+     * Page state
+     */
+    pageState;
+    /**
+     * User state
+     */
+    userState = new react_2.UserState();
+    /**
+     * Is screen size down 'sm'
+     */
+    smDown;
+    /**
+     * Is screen size up 'md'
+     */
+    mdUp;
+    /**
+     * Navigate function
+     */
+    navigateFunction;
+    /**
+     * Page state dispatch
+     */
+    pageStateDispatch;
+    /**
+     * User state dispatch
+     */
+    userStateDispatch;
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     * @param debug Debug mode
+     */
+    constructor(settings, name, debug = false) {
+        super(settings, null, ReactApp.createNotifier(debug), new shared_1.WindowStorage(), name, debug);
+        if (appscript_1.BridgeUtils.host) {
+            appscript_1.BridgeUtils.host.onUpdate((app, version) => {
+                this.notifier.message(notificationbase_1.NotificationMessageType.Success, this.get("updateTip") + `(${[app, version].join(", ")})`, this.get("updateReady"));
+            });
+        }
+        this.cultureState = new react_2.CultureState(settings.currentCulture);
+        this.pageState = new react_2.PageState();
+        exports.globalApp = this;
+    }
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     * @param forceToLocal Force to local labels
+     */
+    alertResult(result, callback, forceToLocal) {
+        const message = typeof result === "string"
+            ? result
+            : this.formatResult(result, forceToLocal);
+        if (message.endsWith(")")) {
+            const startPos = message.lastIndexOf("(");
+            if (startPos > 0) {
+                const main = message.substring(0, startPos).trim();
+                const tip = message.substring(startPos);
+                const titleNode = react_1.default.createElement(react_1.default.Fragment, null, main, react_1.default.createElement("br"), react_1.default.createElement("span", { style: { fontSize: "9px" } }, tip));
+                this.notifier.alert(titleNode, callback);
+                return;
+            }
+        }
+        super.alertResult(message, callback);
+    }
+    /**
+     * Change culture
+     * @param culture New culture definition
+     */
+    async changeCulture(culture) {
+        // Super call to update cultrue
+        const resources = await super.changeCulture(culture);
+        // Update component labels
+        Labels_1.Labels.setLabels(resources, {
+            notificationMU: {
+                alertTitle: "warning",
+                alertOK: "ok",
+                confirmTitle: "confirm",
+                confirmYes: "ok",
+                confirmNo: "cancel",
+                promptTitle: "prompt",
+                promptCancel: "cancel",
+                promptOK: "ok"
+            }
+        });
+        // Document title
+        // Default is servier name's label or appName label
+        const title = this.get(this.name) ?? this.get("appName") ?? this.name;
+        const host = appscript_1.BridgeUtils.host;
+        if (host) {
+            // Notify host
+            host.changeCulture(culture.name);
+            host.setTitle(title);
+        }
+        else {
+            document.title = title;
+        }
+        return resources;
+    }
+    /**
+     * Change culture extended
+     * @param dispatch Dispatch method
+     * @param culture New culture definition
+     */
+    changeCultureEx(dispatch, culture) {
+        // Same?
+        if (culture.name === this.culture)
+            return;
+        // Super call
+        this.changeCulture(culture).then(() => {
+            // Dispatch action
+            dispatch(culture);
+        });
+    }
+    /**
+     * Get date format props
+     * @returns Props
+     */
+    getDateFormatProps() {
+        return { culture: this.culture, timeZone: this.getTimeZone() };
+    }
+    /**
+     * Get money format props
+     * @param currency Currency, if undefined, default currency applied
+     * @returns Props
+     */
+    getMoneyFormatProps(currency) {
+        return { culture: this.culture, currency: currency ?? this.currency };
+    }
+    /**
+     * Fresh countdown UI
+     * @param callback Callback
+     */
+    freshCountdownUI(callback) {
+        // Labels
+        const labels = this.getLabels("cancel", "tokenExpiry");
+        // Progress
+        const progress = react_1.default.createElement(ProgressCount_1.ProgressCount, {
+            seconds: 30,
+            valueUnit: "s",
+            onComplete: () => {
+                // Stop the progress
+                return false;
+            }
+        });
+        // Popup
+        this.notifier.alert(labels.tokenExpiry, async () => {
+            if (callback)
+                await callback();
+            else
+                await this.tryLogin();
+        }, undefined, {
+            okLabel: labels.cancel,
+            primaryButtonProps: { fullWidth: true, autoFocus: false },
+            inputs: progress
+        });
+    }
+    /**
+     * Try login
+     * @param data Try login parameters
+     * @returns Result
+     */
+    async tryLogin(data) {
+        // Destruct
+        const { onFailure = (type) => {
+            console.log(`Try login failed: ${type}.`);
+            this.toLoginPage(rest);
+        }, onSuccess, ...rest } = data ?? {};
+        // Check status
+        const result = await super.tryLogin(data);
+        if (!result) {
+            onFailure("ReactAppSuperTryLoginFailed");
+            return false;
+        }
+        // Refresh token
+        await this.refreshToken({
+            showLoading: data?.showLoading
+        }, (result) => {
+            if (result === true) {
+                onSuccess?.();
+            }
+            else if (result === false) {
+                onFailure("ReactAppRefreshTokenFailed");
+            }
+            else if (result != null && !this.tryLoginIgnoreResult(result)) {
+                onFailure("ReactAppRefreshTokenFailed: " + JSON.stringify(result));
+            }
+            else {
+                // Ignore other results
+                onFailure("ReactAppRefreshTokenIgnoredFailure: " + JSON.stringify(result));
+                return true;
+            }
+        });
+        return true;
+    }
+    /**
+     * Check if the action result should be ignored during try login
+     * @param result Action result
+     * @returns Result
+     */
+    tryLoginIgnoreResult(result) {
+        // Ignore no token warning
+        if (result.type === "noData" && result.field === "token")
+            return true;
+        else
+            return false;
+    }
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data) {
+        // Dispatch the change
+        if (this.pageStateDispatch != null) {
+            this.pageStateDispatch({
+                type: react_2.PageActionType.Data,
+                data
+            });
+        }
+    }
+    /**
+     * Set page title and subtitle
+     * @param title Page title
+     * @param subtitle Page subtitle
+     */
+    setPageTitle(title, subtitle) {
+        // Data
+        const data = { title, subtitle };
+        // Dispatch the change
+        if (this.pageStateDispatch != null) {
+            this.pageStateDispatch({
+                type: react_2.PageActionType.Title,
+                data
+            });
+        }
+    }
+    /**
+     * Navigate to Url or delta
+     * @param url Url or delta
+     * @param options Options
+     */
+    navigate(to, options) {
+        if (this.navigateFunction == null)
+            super.navigate(to, options);
+        else if (typeof to === "number")
+            this.navigateFunction(to);
+        else
+            this.navigateFunction(to, options);
+    }
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key) {
+        this.setPageTitle(this.get(key) ?? "");
+    }
+    /**
+     * Show input dialog
+     * @param props Props
+     */
+    showInputDialog({ title, message, callback, ...rest }) {
+        return this.notifier.prompt(message, callback, title, rest);
+    }
+    /**
+     * User login extended
+     * @param user New user
+     * @param refreshToken Refresh token
+     * @param dispatch User state dispatch
+     */
+    userLogin(user, refreshToken, dispatch) {
+        // Super call, set token
+        super.userLogin(user, refreshToken);
+        // Dispatch action
+        if (this.userStateDispatch != null && dispatch !== false)
+            this.userStateDispatch({
+                type: react_2.UserActionType.Login,
+                user
+            });
+    }
+    /**
+     * User logout
+     * @param clearToken Clear refresh token or not
+     * @param noTrigger No trigger for state change
+     */
+    userLogout(clearToken = true, noTrigger = false) {
+        // Super call
+        super.userLogout(clearToken);
+        // Dispatch action
+        if (!noTrigger && this.userStateDispatch != null)
+            this.userStateDispatch({
+                type: react_2.UserActionType.Logout
+            });
+    }
+    /**
+     * User unauthorized
+     */
+    userUnauthorized() {
+        // Super call
+        super.userUnauthorized();
+        if (this.userStateDispatch != null) {
+            // There is delay during state update
+            // Not a good idea to try login multiple times with API calls
+            this.userStateDispatch({
+                type: react_2.UserActionType.Unauthorized
+            });
+        }
+    }
+}
+exports.ReactApp = ReactApp;