@etsoo/materialui 1.0.1

package/lib/Tiplist.js

@@ -0,0 +1,157 @@
+import { ReactUtils, useDelayedExecutor } from '@etsoo/react';
+import { DataTypes } from '@etsoo/shared';
+import { Autocomplete } from '@mui/material';
+import React from 'react';
+import { InputField } from './InputField';
+import { SearchField } from './SearchField';
+/**
+ * Tiplist
+ * @param props Props
+ * @returns Component
+ */
+export function Tiplist(props) {
+    // Destruct
+    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
+    // Value input ref
+    const inputRef = React.createRef();
+    // Local value
+    let localValue = value !== null && value !== void 0 ? value : defaultValue;
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = idValue !== null && idValue !== void 0 ? idValue : DataTypes.getValue(localValue, idField);
+    // Changable states
+    const [states, stateUpdate] = React.useReducer((currentState, newState) => {
+        return { ...currentState, ...newState };
+    }, {
+        // Loading unknown
+        open: false,
+        options: [],
+        value: null
+    });
+    // Input value
+    const inputValue = React.useMemo(() => states.value && states.value[idField], [states.value]);
+    React.useEffect(() => {
+        if (localValue != null)
+            stateUpdate({ value: localValue });
+    }, [localValue]);
+    // State
+    const [state] = React.useState({});
+    const isMounted = React.useRef(true);
+    // Add readOnly
+    const addReadOnly = (params) => {
+        if (readOnly != null) {
+            Object.assign(params, { readOnly });
+        }
+        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
+        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        return params;
+    };
+    // Change handler
+    const changeHandle = (event) => {
+        // Stop processing with auto trigger event
+        if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
+            stateUpdate({ options: [] });
+            return;
+        }
+        // Stop bubble
+        event.stopPropagation();
+        // Call with delay
+        delayed.call(undefined, event.currentTarget.value);
+    };
+    // Directly load data
+    const loadDataDirect = (keyword, id) => {
+        // Reset options
+        // setOptions([]);
+        if (id == null) {
+            // Reset real value
+            const input = inputRef.current;
+            if (input && input.value !== '') {
+                // Different value, trigger change event
+                ReactUtils.triggerChange(input, '', false);
+            }
+            if (states.options.length > 0) {
+                // Reset options
+                stateUpdate({ options: [] });
+            }
+        }
+        // Loading indicator
+        if (!states.loading)
+            stateUpdate({ loading: true });
+        // Load list
+        loadData(keyword, id).then((options) => {
+            if (!isMounted.current)
+                return;
+            // Indicates loading completed
+            stateUpdate({
+                loading: false,
+                ...(options != null && { options })
+            });
+        });
+    };
+    const delayed = useDelayedExecutor(loadDataDirect, 480);
+    const setInputValue = (value) => {
+        var _a;
+        stateUpdate({ value });
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    if (localIdValue != null && localIdValue !== '') {
+        if (state.idLoaded) {
+            // Set default
+            if (!state.idSet && states.options.length == 1) {
+                stateUpdate({ value: states.options[0] });
+                state.idSet = true;
+            }
+        }
+        else {
+            // Load id data
+            loadDataDirect(undefined, localIdValue);
+            state.idLoaded = true;
+        }
+    }
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed.clear();
+        };
+    }, []);
+    // Layout
+    return (React.createElement("div", null,
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : ''}`, readOnly: true, onChange: inputOnChange }),
+        React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+                // Set value
+                setInputValue(value);
+                // Custom
+                if (onChange != null)
+                    onChange(event, value, reason, details);
+                // For clear case
+                if (reason === 'clear') {
+                    stateUpdate({ options: [] });
+                    loadDataDirect();
+                }
+            }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
+                // Should load
+                const loading = states.loading
+                    ? true
+                    : states.options.length === 0;
+                stateUpdate({ open: true, loading });
+                // If not loading
+                if (loading)
+                    loadDataDirect(undefined, states.value == null
+                        ? undefined
+                        : states.value[idField]);
+            }, onClose: () => {
+                stateUpdate({
+                    open: false,
+                    ...(!states.value && { options: [] })
+                });
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...params, readOnly: readOnly, label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
+}

package/lib/TooltipClick.d.ts

@@ -0,0 +1,15 @@
+import { TooltipProps } from '@mui/material';
+import React from 'react';
+/**
+ * Tooltip with click visibility props
+ */
+export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open' | 'disableFocusListener' | 'disableTouchListener'> {
+    children: (openTooltip: (newTitle?: string) => void) => React.ReactElement<any, any>;
+    disableHoverListener?: boolean;
+}
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+export declare function TooltipClick(props: TooltipClickProps): JSX.Element;

package/lib/TooltipClick.js

@@ -0,0 +1,40 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { ClickAwayListener, Tooltip } from '@mui/material';
+import React from 'react';
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+export function TooltipClick(props) {
+    // Destruct
+    // leaveDelay set to 5 seconds to hide the tooltip automatically
+    const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
+    // State
+    const [localTitle, setTitle] = React.useState(title);
+    const [open, setOpen] = React.useState(false);
+    const delayed = leaveDelay > 0
+        ? useDelayedExecutor(() => setOpen(false), leaveDelay)
+        : undefined;
+    // Callback for open the tooltip
+    const openTooltip = (newTitle) => {
+        setOpen(true);
+        if (newTitle)
+            setTitle(newTitle);
+        delayed === null || delayed === void 0 ? void 0 : delayed.call();
+    };
+    React.useEffect(() => {
+        return () => {
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
+        };
+    }, []);
+    // Layout
+    return (React.createElement(ClickAwayListener, { onClickAway: () => setOpen(false) },
+        React.createElement(Tooltip, { PopperProps: {
+                disablePortal: true
+            }, onClose: (event) => {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest }, children(openTooltip))));
+}

package/lib/UserAvatar.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+/**
+ * User avatar props
+ */
+export interface UserAvatarProps {
+    /**
+     * Photo src
+     */
+    src?: string;
+    /**
+     * Format title
+     */
+    formatTitle?: (title?: string) => string;
+    /**
+     * Title of the user
+     */
+    title?: string;
+}
+/**
+ * User avatar
+ * @param props Props
+ * @returns Component
+ */
+export declare function UserAvatar(props: UserAvatarProps): JSX.Element;

package/lib/UserAvatar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Avatar } from '@mui/material';
+import { BusinessUtils } from '@etsoo/appscript';
+import { globalApp } from './app/ReactApp';
+/**
+ * User avatar
+ * @param props Props
+ * @returns Component
+ */
+export function UserAvatar(props) {
+    // Destruct
+    const { src, title, formatTitle = (title) => {
+        return BusinessUtils.formatAvatarTitle(title, 3, typeof globalApp === 'undefined'
+            ? 'ME'
+            : globalApp.get('me'));
+    } } = props;
+    // Format
+    const fTitle = formatTitle(title);
+    const count = fTitle.length;
+    return (React.createElement(Avatar, { title: title, src: src, sx: {
+            width: 48,
+            height: 32,
+            fontSize: count <= 2 ? '15px' : '12px'
+        } }, fTitle));
+}

package/lib/UserAvatarEditor.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+/**
+ * User avatar editor to Blob helper
+ */
+export interface UserAvatarEditorToBlob {
+    (canvas: HTMLCanvasElement, mimeType?: string, quality?: number): Promise<Blob>;
+}
+/**
+ * User avatar editor on done handler
+ */
+export interface UserAvatarEditorOnDoneHandler {
+    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
+}
+/**
+ * User avatar editor props
+ */
+export interface UserAvatarEditorProps {
+    /**
+     * Cropping border size
+     */
+    border?: number;
+    /**
+     * Image source
+     */
+    image?: string | File;
+    /**
+     * Max width to save
+     */
+    maxWidth?: number;
+    /**
+     * On done handler
+     */
+    onDone: UserAvatarEditorOnDoneHandler;
+    /**
+     * Return scaled result?
+     */
+    scaledResult?: boolean;
+    /**
+     * Width of the editor
+     */
+    width?: number;
+    /**
+     * Height of the editor
+     */
+    height?: number;
+}
+/**
+ * User avatar editor
+ * https://github.com/mosch/react-avatar-editor
+ * @param props Props
+ * @returns Component
+ */
+export declare function UserAvatarEditor(props: UserAvatarEditorProps): JSX.Element;

package/lib/UserAvatarEditor.js

@@ -0,0 +1,129 @@
+import { Button, ButtonGroup, Slider, Stack } from '@mui/material';
+import React from 'react';
+import AvatarEditor from 'react-avatar-editor';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import ComputerIcon from '@mui/icons-material/Computer';
+import DoneIcon from '@mui/icons-material/Done';
+import pica from 'pica';
+import { Labels } from './app/Labels';
+const defaultState = {
+    scale: 1,
+    rotate: 0
+};
+/**
+ * User avatar editor
+ * https://github.com/mosch/react-avatar-editor
+ * @param props Props
+ * @returns Component
+ */
+export function UserAvatarEditor(props) {
+    // Destruct
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200 } = props;
+    // Container width
+    const containerWidth = width + 2 * border + 44 + 4;
+    // Calculated max width
+    const maxWidthCalculated = maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+    // Labels
+    const labels = Labels.UserAvatarEditor;
+    // Ref
+    const ref = React.createRef();
+    // Button ref
+    const buttonRef = React.createRef();
+    // Preview image state
+    const [previewImage, setPreviewImage] = React.useState(image);
+    // Is ready state
+    const [ready, setReady] = React.useState(false);
+    // Editor states
+    const [editorState, setEditorState] = React.useState(defaultState);
+    // Handle zoom
+    const handleZoom = (_event, value, _activeThumb) => {
+        const scale = typeof value === 'number' ? value : value[0];
+        const newState = { ...editorState, scale };
+        setEditorState(newState);
+    };
+    // Handle image load
+    const handleLoad = () => {
+        setReady(true);
+    };
+    // Handle file change
+    const handleFileChange = (event) => {
+        var _a;
+        const files = event.target.files;
+        if (files == null || files.length == 0)
+            return;
+        // Reset all settings
+        handleReset();
+        // Set new preview image
+        setPreviewImage(files[0]);
+        // Set ready state
+        setReady(false);
+        // Make the submit button visible
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(false);
+    };
+    // Handle reset
+    const handleReset = () => {
+        setEditorState({ ...defaultState });
+    };
+    // 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 = () => {
+        var _a, _b;
+        // Data
+        var data = scaledResult
+            ? (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getImageScaledToCanvas()
+            : (_b = ref.current) === null || _b === void 0 ? void 0 : _b.getImage();
+        if (data == null)
+            return;
+        // pica
+        const picaInstance = pica();
+        // toBlob helper
+        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+        const toBlob = (canvas, mimeType = 'image/jpeg', quality = 1) => {
+            return picaInstance.toBlob(canvas, mimeType, quality);
+        };
+        if (data.width > maxWidthCalculated) {
+            // Target height
+            const heightCalculated = (height * maxWidthCalculated) / width;
+            // Target
+            const to = document.createElement('canvas');
+            to.width = maxWidthCalculated;
+            to.height = heightCalculated;
+            // Large photo, resize it
+            // https://github.com/nodeca/pica
+            picaInstance
+                .resize(data, to, {
+                unsharpAmount: 160,
+                unsharpRadius: 0.6,
+                unsharpThreshold: 1
+            })
+                .then((result) => onDone(result, toBlob));
+        }
+        else {
+            onDone(data, toBlob);
+        }
+    };
+    return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
+        React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
+            labels.upload,
+            React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
+        React.createElement(Stack, { direction: "row", spacing: 0.5 },
+            React.createElement(AvatarEditor, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : '', scale: editorState.scale, rotate: editorState.rotate }),
+            React.createElement(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
+                React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
+                    React.createElement(RotateRightIcon, null)),
+                React.createElement(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft },
+                    React.createElement(RotateLeftIcon, null)),
+                React.createElement(Button, { onClick: handleReset, title: labels.reset },
+                    React.createElement(ClearAllIcon, null)))),
+        React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: 1, max: 5, step: 0.01, value: editorState.scale, onChange: handleZoom }),
+        React.createElement(Button, { ref: buttonRef, variant: "contained", startIcon: React.createElement(DoneIcon, null), disabled: !ready, onClick: handleDone }, labels.done)));
+}

package/lib/app/CommonApp.d.ts

@@ -0,0 +1,38 @@
+import { IAppSettings, IUser, RefreshTokenProps } from '@etsoo/appscript';
+import { IPageData, RefreshTokenRQ } from '@etsoo/react';
+import { ReactApp } from './ReactApp';
+/**
+ * Common independent application
+ * 通用独立程序
+ */
+export declare abstract class CommonApp<U extends IUser = IUser, P extends IPageData = IPageData, S extends IAppSettings = IAppSettings> extends ReactApp<S, U, P> {
+    /**
+     * Override persistedFields
+     */
+    protected get persistedFields(): string[];
+    /**
+     * Init call update fields in local storage
+     * @returns Fields
+     */
+    protected initCallEncryptedUpdateFields(): string[];
+    /**
+     * Do user login
+     * @param data User data
+     * @param refreshToken Refresh token
+     * @param keep Keep login
+     * @returns Success data
+     */
+    protected doUserLogin(data: U, refreshToken: string, keep: boolean): string | undefined;
+    /**
+     * Refresh token
+     * @param props Props
+     */
+    refreshToken<D extends object = RefreshTokenRQ>(props?: RefreshTokenProps<D>): Promise<boolean>;
+    /**
+     * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
+     */
+    tryLogin<D extends object = RefreshTokenRQ>(data?: D, showLoading?: boolean): Promise<boolean>;
+}

package/lib/app/CommonApp.js

@@ -0,0 +1,149 @@
+import { CoreConstants } from '@etsoo/react';
+import { ReactApp } from './ReactApp';
+/**
+ * Common independent application
+ * 通用独立程序
+ */
+export class CommonApp extends ReactApp {
+    /**
+     * Override persistedFields
+     */
+    get persistedFields() {
+        return [...super.persistedFields, CoreConstants.FieldUserIdSaved];
+    }
+    /**
+     * Init call update fields in local storage
+     * @returns Fields
+     */
+    initCallEncryptedUpdateFields() {
+        const fields = super.initCallEncryptedUpdateFields();
+        fields.push(CoreConstants.FieldUserIdSaved);
+        return fields;
+    }
+    /**
+     * Do user login
+     * @param data User data
+     * @param refreshToken Refresh token
+     * @param keep Keep login
+     * @returns Success data
+     */
+    doUserLogin(data, refreshToken, keep) {
+        this.userLogin(data, refreshToken, keep);
+        return undefined;
+    }
+    /**
+     * Refresh token
+     * @param props Props
+     */
+    async refreshToken(props) {
+        // Destruct
+        const { callback, data, relogin = false, showLoading = false } = props !== null && props !== void 0 ? props : {};
+        // Token
+        const token = this.getCacheToken();
+        if (token == null || token === '') {
+            if (callback)
+                callback(false);
+            return false;
+        }
+        // Reqest data
+        const rq = {
+            deviceId: this.deviceId,
+            timezone: this.getTimeZone(),
+            ...data
+        };
+        // Payload
+        const payload = {
+            // No loading bar needed to avoid screen flicks
+            showLoading,
+            config: { headers: { [CoreConstants.TokenHeaderRefresh]: token } },
+            onError: (error) => {
+                if (callback)
+                    callback(error);
+                // Prevent further processing
+                return false;
+            }
+        };
+        // Success callback
+        const success = (result, failCallback) => {
+            // Token
+            const refreshToken = this.getResponseToken(payload.response);
+            if (refreshToken == null || result.data == null) {
+                if (failCallback)
+                    failCallback(this.get('noData'));
+                return false;
+            }
+            // Keep
+            const keep = this.storage.getData(CoreConstants.FieldLoginKeep, false);
+            // User login
+            var successData = this.doUserLogin(result.data, refreshToken, keep);
+            // Callback
+            if (failCallback)
+                failCallback(true, successData);
+            return true;
+        };
+        // Call API
+        const result = await this.api.put('Auth/RefreshToken', rq, payload);
+        if (result == null)
+            return false;
+        if (!result.ok) {
+            if (result.type === 'TokenExpired' && relogin) {
+                // Try login
+                // Dialog to receive password
+                var labels = this.getLabels('reloginTip', 'login');
+                this.notifier.prompt(labels.reloginTip, async (pwd) => {
+                    if (pwd == null) {
+                        this.toLoginPage();
+                        return;
+                    }
+                    // Set password for the action
+                    rq.pwd = this.encrypt(this.hash(pwd));
+                    // Submit again
+                    const result = await this.api.put('Auth/RefreshToken', rq, payload);
+                    if (result == null)
+                        return;
+                    if (result.ok) {
+                        success(result, (loginResult) => {
+                            if (loginResult === true) {
+                                if (callback)
+                                    callback(true);
+                                return;
+                            }
+                            const message = this.formatRefreshTokenResult(loginResult);
+                            if (message)
+                                this.notifier.alert(message);
+                        });
+                        return;
+                    }
+                    // Popup message
+                    this.alertResult(result);
+                    return false;
+                }, labels.login, { type: 'password' });
+                // Fake truth to avoid reloading
+                return true;
+            }
+            if (callback)
+                callback(result);
+            return false;
+        }
+        return success(result, callback);
+    }
+    /**
+     * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
+     */
+    async tryLogin(data, showLoading) {
+        // Reset user state
+        const result = await super.tryLogin(data);
+        if (!result)
+            return false;
+        // Refresh token
+        return await this.refreshToken({
+            callback: (result) => this.doRefreshTokenResult(result),
+            data,
+            showLoading,
+            relogin: true
+        });
+    }
+}

package/lib/app/IServiceAppSettings.d.ts

@@ -0,0 +1,11 @@
+import { IAppSettings } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Service app settings interface
+ */
+export interface IServiceAppSettings<S extends DataTypes.IdType = number> extends IAppSettings {
+    /**
+     * Service id
+     */
+    readonly serviceId: S;
+}

package/lib/app/IServiceAppSettings.js

@@ -0,0 +1 @@
+export {};

package/lib/app/IServicePage.d.ts

@@ -0,0 +1,6 @@
+import { IPageData } from '@etsoo/react';
+/**
+ * Service page data interface
+ */
+export interface IServicePageData extends IPageData {
+}

package/lib/app/IServicePage.js

@@ -0,0 +1 @@
+export {};

package/lib/app/IServiceUser.d.ts

@@ -0,0 +1,14 @@
+import { IActionResult, IUser } from '@etsoo/appscript';
+/**
+ * Service user interface
+ */
+export interface IServiceUser extends IUser {
+    /**
+     * Service device id
+     */
+    serviceDeviceId: string;
+}
+/**
+ * Service user login result
+ */
+export declare type ServiceLoginResult<U extends IServiceUser = IServiceUser> = IActionResult<U>;

package/lib/app/IServiceUser.js

@@ -0,0 +1 @@
+export {};