@etsoo/materialui 1.0.1

package/lib/app/ISmartERPUser.d.ts

@@ -0,0 +1,14 @@
+import { IActionResult, IUser } from '@etsoo/appscript';
+/**
+ * SmartERP user interface
+ */
+export interface ISmartERPUser extends IUser {
+    /**
+     * Service refresh token
+     */
+    readonly serviceToken?: string;
+}
+/**
+ * SmartERP user login result
+ */
+export declare type SmartERPLoginResult = IActionResult<ISmartERPUser>;

package/lib/app/ISmartERPUser.js

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

package/lib/app/Labels.d.ts

@@ -0,0 +1,65 @@
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Labels
+ */
+export declare namespace Labels {
+    /**
+     * Common page labels
+     */
+    const CommonPage: {
+        add: string;
+        back: string;
+        delete: string;
+        more: string;
+        pullToRefresh: string;
+        refresh: string;
+        refreshing: string;
+        releaseToRefresh: string;
+        reset: string;
+        save: string;
+        scrollTop: string;
+        submit: string;
+    };
+    /**
+     * Notification MU labels
+     */
+    const NotificationMU: {
+        alertTitle: string;
+        alertOK: string;
+        confirmTitle: string;
+        confirmYes: string;
+        confirmNo: string;
+        promptTitle: string;
+        promptCancel: string;
+        promptOK: string;
+        loading: string;
+        success: string;
+        warning: string;
+        info: string;
+    };
+    /**
+     * UserAvatarEditor labels
+     */
+    const UserAvatarEditor: {
+        done: string;
+        reset: string;
+        rotateLeft: string;
+        rotateRight: string;
+        upload: string;
+        zoom: string;
+    };
+    /**
+     * setLabelReference key reference
+     */
+    interface setLabelsReference {
+        commonPage?: DataTypes.StringDictionary;
+        notificationMU?: DataTypes.StringDictionary;
+        userAvatarEditor?: DataTypes.StringDictionary;
+    }
+    /**
+     * Set components' labels
+     * @param labels Labels
+     * @param reference Key reference
+     */
+    const setLabels: (labels: DataTypes.StringRecord, reference?: setLabelsReference) => void;
+}

package/lib/app/Labels.js

@@ -0,0 +1,62 @@
+import { Utils } from '@etsoo/shared';
+/**
+ * Labels
+ */
+export 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°',
+        upload: 'Upload',
+        zoom: 'Zoom'
+    };
+    /**
+     * Set components' labels
+     * @param labels Labels
+     * @param reference Key reference
+     */
+    Labels.setLabels = (labels, reference = {}) => {
+        Utils.setLabels(Labels.CommonPage, labels, reference.commonPage);
+        Utils.setLabels(Labels.NotificationMU, labels, reference.notificationMU);
+        Utils.setLabels(Labels.UserAvatarEditor, labels, reference.userAvatarEditor);
+    };
+})(Labels || (Labels = {}));

package/lib/app/ReactApp.d.ts

@@ -0,0 +1,195 @@
+import { CoreApp, IActionResult, IApp, IAppSettings, ICoreApp, IUser } from '@etsoo/appscript';
+import { NotificationRenderProps, NotificationReturn } from '@etsoo/notificationbase';
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+import { History } from 'history';
+import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from '@etsoo/react';
+/**
+ * Global application
+ */
+export declare let globalApp: IApp & IReactAppBase;
+/**
+ * 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
+ */
+export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
+    children?: React.ReactNode;
+}>;
+/**
+ * React implemented base
+ */
+export interface IReactAppBase {
+    /**
+     * User state
+     */
+    readonly userState: UserState<any>;
+    /**
+     * Router history
+     */
+    readonly history: History;
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data: IPageData): void;
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key: string): void;
+    /**
+     * Set page title and data
+     * @param title Page title
+     */
+    setPageTitle(title: string): void;
+}
+/**
+ * Core application interface
+ */
+export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps>, IReactAppBase {
+    /**
+     * User state
+     */
+    readonly userState: UserState<D>;
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data: P): void;
+}
+/**
+ * React application
+ */
+export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
+    private static _notifierProvider;
+    /**
+     * Get notifier provider
+     */
+    static get notifierProvider(): React.FunctionComponent<NotificationRenderProps>;
+    private static createApi;
+    private static createNotifier;
+    /**
+     * Culture state
+     */
+    readonly cultureState: CultureState;
+    /**
+     * Router history
+     */
+    readonly history: History;
+    /**
+     * Page state
+     */
+    readonly pageState: PageState<P>;
+    /**
+     * User state
+     */
+    readonly userState: UserState<D>;
+    /**
+     * Is screen size down 'sm'
+     */
+    smDown?: boolean;
+    /**
+     * Is screen size up 'md'
+     */
+    mdUp?: boolean;
+    /**
+     * Page state dispatch
+     */
+    pageStateDispatch?: React.Dispatch<PageAction<P>>;
+    /**
+     * User state dispatch
+     */
+    userStateDispatch?: React.Dispatch<UserAction<D>>;
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     */
+    constructor(settings: S, name: string);
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     */
+    alertResult(result: IActionResult, callback?: NotificationReturn<void>): void;
+    /**
+     * Change culture
+     * @param culture New culture definition
+     */
+    changeCulture(culture: DataTypes.CultureDefinition): void;
+    /**
+     * Change culture extended
+     * @param dispatch Dispatch method
+     * @param culture New culture definition
+     */
+    changeCultureEx(dispatch: React.Dispatch<CultureAction>, culture: DataTypes.CultureDefinition): void;
+    /**
+     * Get date format props
+     * @returns Props
+     */
+    getDateFormatProps(): {
+        culture: string;
+        timeZone: string | undefined;
+    };
+    /**
+     * Get money format props
+     * @param currency Currency, if undefined, default currency applied
+     * @returns Props
+     */
+    getMoneyFormatProps(currency?: string): {
+        culture: string;
+        currency: string;
+    };
+    /**
+     * Fresh countdown UI
+     * @param callback Callback
+     */
+    freshCountdownUI(callback?: () => PromiseLike<unknown>): void;
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    redirectTo(url: string): void;
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data: P): void;
+    /**
+     * Set page title and data
+     * @param title Page title
+     */
+    setPageTitle(title: string): void;
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key: string): void;
+    /**
+     * Show input dialog
+     * @param props Props
+     */
+    showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
+    /**
+     * User login extended
+     * @param user New user
+     * @param refreshToken Refresh token
+     * @param keep Keep in local storage or not
+     * @param dispatch User state dispatch
+     */
+    userLogin(user: D, refreshToken: string, keep?: boolean, dispatch?: boolean): void;
+    /**
+     * User logout
+     * @param clearToken Clear refresh token or not
+     */
+    userLogout(clearToken?: boolean): void;
+    /**
+     * User unauthorized
+     */
+    userUnauthorized(): void;
+}

package/lib/app/ReactApp.js

@@ -0,0 +1,296 @@
+import { BridgeUtils, CoreApp, createClient } from '@etsoo/appscript';
+import { NotificationMessageType } from '@etsoo/notificationbase';
+import { WindowStorage } from '@etsoo/shared';
+import React from 'react';
+import { NotifierMU } from '../NotifierMU';
+import { ProgressCount } from '../ProgressCount';
+import { Labels } from './Labels';
+import { createBrowserHistory, createMemoryHistory } from 'history';
+import { CultureState, PageActionType, PageState, UserActionType, UserState } from '@etsoo/react';
+/**
+ * Global application
+ */
+export let globalApp;
+/**
+ * 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
+ */
+export function ReactAppStateDetector(props) {
+    // Destruct
+    const { targetFields, update } = props;
+    // Context
+    const { state } = globalApp == null
+        ? {}
+        : React.useContext(globalApp.userState.context);
+    // Ready
+    React.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 === null || matchedFields === void 0 ? void 0 : matchedFields.push(targetField);
+            });
+        }
+        // Callback
+        update(state.authorized, matchedFields);
+    }, [state]);
+    // return
+    return React.createElement(React.Fragment);
+}
+/**
+ * React application
+ */
+export class ReactApp extends CoreApp {
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     */
+    constructor(settings, name) {
+        super(settings, ReactApp.createApi(settings), ReactApp.createNotifier(), new WindowStorage(), name);
+        /**
+         * User state
+         */
+        this.userState = new UserState();
+        if (BridgeUtils.host) {
+            const startUrl = BridgeUtils.host.getStartUrl();
+            this.history = createMemoryHistory({
+                initialEntries: startUrl == null ? undefined : [startUrl]
+            });
+            BridgeUtils.host.onUpdate((app, version) => {
+                this.notifier.message(NotificationMessageType.Success, this.get('updateTip') + `(${[app, version].join(', ')})`, this.get('updateReady'));
+            });
+        }
+        else {
+            this.history = createBrowserHistory();
+        }
+        this.cultureState = new CultureState(settings.currentCulture);
+        this.pageState = new PageState();
+        globalApp = this;
+    }
+    /**
+     * Get notifier provider
+     */
+    static get notifierProvider() {
+        return this._notifierProvider;
+    }
+    static createApi(settings) {
+        // API
+        // Support to replace {hostname} with current hostname
+        const api = createClient();
+        api.baseUrl = settings.endpoint;
+        return api;
+    }
+    static createNotifier() {
+        // Notifier
+        ReactApp._notifierProvider = NotifierMU.setup();
+        return NotifierMU.instance;
+    }
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     */
+    alertResult(result, callback) {
+        const message = this.formatResult(result);
+        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.createElement(React.Fragment, null, main, React.createElement('br'), React.createElement('span', { style: { fontSize: '9px' } }, tip));
+                this.notifier.alert(titleNode, callback);
+                return;
+            }
+        }
+        this.notifier.alert(message, callback);
+    }
+    /**
+     * Change culture
+     * @param culture New culture definition
+     */
+    changeCulture(culture) {
+        var _a, _b;
+        // Super call to update cultrue
+        super.changeCulture(culture);
+        // Update component labels
+        Labels.setLabels(culture.resources, {
+            notificationMU: {
+                alertTitle: 'warning',
+                alertOK: 'ok',
+                confirmTitle: 'confirm',
+                confirmYes: 'ok',
+                confirmNo: 'cancel',
+                promptTitle: 'prompt',
+                promptCancel: 'cancel',
+                promptOK: 'ok'
+            }
+        });
+        // Notify host
+        (_a = BridgeUtils.host) === null || _a === void 0 ? void 0 : _a.changeCulture(culture.name);
+        // Document title
+        document.title = (_b = this.get(this.name)) !== null && _b !== void 0 ? _b : this.name;
+    }
+    /**
+     * Change culture extended
+     * @param dispatch Dispatch method
+     * @param culture New culture definition
+     */
+    changeCultureEx(dispatch, culture) {
+        // Same?
+        if (culture.name === this.culture)
+            return;
+        // Dispatch action
+        dispatch(culture);
+        // Super call
+        this.changeCulture(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 !== null && currency !== void 0 ? currency : this.currency };
+    }
+    /**
+     * Fresh countdown UI
+     * @param callback Callback
+     */
+    freshCountdownUI(callback) {
+        // Labels
+        const labels = this.getLabels('cancel', 'tokenExpiry');
+        // Progress
+        const progress = React.createElement(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,
+            primaryButton: { fullWidth: true, autoFocus: false },
+            inputs: progress
+        });
+    }
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    redirectTo(url) {
+        this.history.push(url);
+    }
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data) {
+        // Dispatch the change
+        if (this.pageStateDispatch != null) {
+            this.pageStateDispatch({
+                type: PageActionType.Data,
+                data
+            });
+        }
+    }
+    /**
+     * Set page title and data
+     * @param title Page title
+     */
+    setPageTitle(title) {
+        // Data
+        const data = { title };
+        // Dispatch the change
+        if (this.pageStateDispatch != null) {
+            this.pageStateDispatch({
+                type: PageActionType.Title,
+                data
+            });
+        }
+    }
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key) {
+        var _a;
+        this.setPageTitle((_a = this.get(key)) !== null && _a !== void 0 ? _a : '');
+    }
+    /**
+     * 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 keep Keep in local storage or not
+     * @param dispatch User state dispatch
+     */
+    userLogin(user, refreshToken, keep, dispatch) {
+        // Super call, set token
+        super.userLogin(user, refreshToken, keep);
+        // Dispatch action
+        if (this.userStateDispatch != null && dispatch !== false)
+            this.userStateDispatch({
+                type: UserActionType.Login,
+                user
+            });
+    }
+    /**
+     * User logout
+     * @param clearToken Clear refresh token or not
+     */
+    userLogout(clearToken = true) {
+        // Super call
+        super.userLogout(clearToken);
+        // Dispatch action
+        if (this.userStateDispatch != null)
+            this.userStateDispatch({
+                type: 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: UserActionType.Unauthorized
+            });
+        }
+    }
+}