@pinnacle0/web-ui 0.3.36 → 0.3.39

package/src/admin/AdminApp/Default/NavigatorSide/index.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import UserOutlined from "@ant-design/icons/UserOutlined";
-import {Button} from "../../../../core/Button";
-import {Drawer} from "../../../../core/Drawer";
-import {i18n} from "../../../../internal/i18n/admin";
-import "./index.less";
-
-type DrawerUserInfo = {[title: string]: React.ReactElement | string | null};
-
-interface Props {
-    onLogout: () => void;
-    drawerInfo: DrawerUserInfo;
-}
-
-interface State {
-    showDrawer: boolean;
-}
-
-export class NavigatorSide extends React.PureComponent<Props, State> {
-    static displayName = "NavigatorSide";
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            showDrawer: false,
-        };
-    }
-
-    showDrawer = () => this.setState({showDrawer: true});
-
-    closeDrawer = () => this.setState({showDrawer: false});
-
-    render() {
-        const t = i18n();
-        const {onLogout, drawerInfo} = this.props;
-        const {showDrawer} = this.state;
-
-        return (
-            <React.Fragment>
-                <Button id="admin-app-default-navigator-side-button" size="small" onClick={this.showDrawer}>
-                    <UserOutlined />
-                </Button>
-                <Drawer width={350} visible={showDrawer} closable={false} onClose={this.closeDrawer}>
-                    <div id="admin-app-default-drawer">
-                        <UserOutlined className="avatar" />
-                        <div className="grid">
-                            {Object.entries(drawerInfo).map(([title, node], index) => {
-                                if (node) {
-                                    return (
-                                        <div className="row" key={index}>
-                                            <b className="label">{title}</b>
-                                            {node}
-                                        </div>
-                                    );
-                                }
-                            })}
-                        </div>
-                        <div className="bottom">
-                            <Button size="large" onClick={onLogout}>
-                                {t.logout}
-                            </Button>
-                        </div>
-                    </div>
-                </Drawer>
-            </React.Fragment>
-        );
-    }
-}

package/src/admin/AdminApp/Default/SoundSwitch.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import {LocalStorageUtil} from "../../../util/LocalStorageUtil";
-import {BoolSwitch} from "../../../core/BoolSwitch";
-
-interface Props {}
-
-interface State {
-    soundEnabled: boolean;
-}
-
-export class SoundSwitch extends React.PureComponent<Props, State> {
-    static displayName = "SoundSwitch";
-
-    private readonly soundEnabledKey = "admin-sound-enabled";
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            soundEnabled: LocalStorageUtil.getBool(this.soundEnabledKey, true),
-        };
-    }
-
-    toggleSoundSwitch = () => {
-        const newValue = !this.state.soundEnabled;
-        this.setState({soundEnabled: newValue});
-        LocalStorageUtil.setBool(this.soundEnabledKey, newValue);
-    };
-
-    render() {
-        return <BoolSwitch.OnOff value={this.state.soundEnabled} onChange={this.toggleSoundSwitch} />;
-    }
-}

package/src/admin/AdminApp/Default/SquareLogo/index.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import {classNames} from "../../../../util/ClassNames";
-import {AdminAppContext} from "../../context";
-import {Link} from "../../../../core/Link";
-import "./index.less";
-
-export interface ExpandableProps {
-    expanded: boolean;
-}
-
-export interface Props extends ExpandableProps {
-    src: string;
-}
-
-export class SquareLogo extends React.PureComponent<Props> {
-    static displayName = "SquareLogo";
-    static contextType = AdminAppContext;
-    declare context: React.ContextType<typeof AdminAppContext>;
-
-    render() {
-        const {expanded, src} = this.props;
-        const {name} = this.context;
-        return (
-            <Link to="/">
-                <div id="admin-app-default-logo" className={classNames({collapsed: !expanded})}>
-                    <img src={src} />
-                    <h1>{name}</h1>
-                </div>
-            </Link>
-        );
-    }
-}

package/src/admin/AdminApp/Menu.tsx

@@ -1,154 +0,0 @@
-import React from "react";
-import {withRouter} from "react-router-dom";
-import AntMenu from "antd/lib/menu";
-import type {AdminNavigatorBase, NavigationGroupItem} from "../../util/AdminNavigatorBase";
-import type {RouteComponentProps} from "react-router-dom";
-import {LocalStorageUtil} from "../../util/LocalStorageUtil";
-import {MediaUtil} from "../../util/MediaUtil";
-import {Badge} from "../../core/Badge";
-import {AdminAppContext} from "./context";
-import "antd/lib/menu/style";
-
-interface Props extends RouteComponentProps {
-    siteName: string;
-    navigationService: AdminNavigatorBase<any, any>;
-    menuExpanded: boolean;
-    badges?: {[key: string]: number};
-}
-
-interface State {
-    currentOpenedMenuKey: string | null;
-    currentSelectedMenuKey: string | null;
-}
-
-class RouterAwareMenu extends React.PureComponent<Props, State> {
-    static displayName = "Menu";
-    static contextType = AdminAppContext;
-    declare context: React.ContextType<typeof AdminAppContext>;
-
-    private readonly soundEnabledKey = "admin-sound-enabled";
-
-    constructor(props: Props) {
-        super(props);
-        this.state = this.calculateMenuKeyByURL();
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        const {location, menuExpanded, badges} = this.props;
-        if (prevProps.location.pathname !== location.pathname || prevProps.menuExpanded !== menuExpanded || prevProps.badges !== badges) {
-            this.setState(this.calculateMenuKeyByURL(prevProps.badges));
-        }
-    }
-
-    /**
-     * Return true if any field of currentBadges > prevBadges.
-     */
-    shouldAlertNewBadge = (prevBadges: {[key: string]: number}, currentBadges: {[key: string]: number}): boolean => {
-        for (const [key, badge] of Object.entries(currentBadges)) {
-            if (prevBadges[key] === undefined || badge > prevBadges[key]) {
-                return true;
-            }
-        }
-        return false;
-    };
-
-    calculateTotalBadge = (badges: {[key: string]: number}): number => {
-        let totalCount = 0;
-        this.props.navigationService.groups(false).forEach(({modules}) => {
-            modules.forEach(_ => (totalCount += badges[_.url] || 0));
-        });
-        return totalCount;
-    };
-
-    calculateMenuKeyByURL = (prevBadges?: {[key: string]: number}): State => {
-        const {location, menuExpanded, siteName, badges, navigationService} = this.props;
-        const allNavigationGroups = navigationService.groups(true);
-        let currentOpenedMenuKey: string | null = allNavigationGroups?.[0]?.title || null; // Fallback opened key
-        let currentSelectedMenuKey = null;
-        const currentModule = navigationService.moduleByURL(location.pathname);
-        const totalBadgeCount = badges ? this.calculateTotalBadge(badges) : 0;
-        const titlePrefix = (totalBadgeCount > 0 ? `(${totalBadgeCount}) ` : "") + siteName;
-        const soundEnabled = LocalStorageUtil.getBool(this.soundEnabledKey, true);
-
-        if (soundEnabled && prevBadges && badges && this.shouldAlertNewBadge(prevBadges, badges)) {
-            MediaUtil.playAudio(require("./asset/alert.mp3"));
-        }
-
-        if (currentModule) {
-            const matchedGroup = allNavigationGroups.find(_ => _.modules.includes(currentModule));
-            if (matchedGroup) {
-                currentOpenedMenuKey = matchedGroup.title;
-                currentSelectedMenuKey = currentModule.url;
-            }
-            document.title = titlePrefix + " - " + currentModule.title;
-        } else {
-            document.title = titlePrefix;
-        }
-
-        if (!menuExpanded) {
-            currentOpenedMenuKey = null; // Otherwise, AntD will pop this menu
-        }
-
-        return {currentOpenedMenuKey, currentSelectedMenuKey};
-    };
-
-    onMenuOpenChange = (openKeys: string[]) => {
-        const length = openKeys.length;
-        if (length === 0) {
-            this.setState({currentOpenedMenuKey: null});
-        } else if (length === 1) {
-            this.setState({currentOpenedMenuKey: openKeys[0]});
-        } else {
-            const index = openKeys.indexOf(this.state.currentOpenedMenuKey!); // By logic, index should be 0/1 (length should be 2)
-            if (index >= 0) {
-                this.setState({currentOpenedMenuKey: openKeys[length - 1 - index]});
-            }
-        }
-    };
-
-    renderMenuGroup = (groupItem: NavigationGroupItem<any, any>) => {
-        const {history, badges, menuExpanded} = this.props;
-        let totalCount = 0;
-        const children = groupItem.modules.map(({title, url}) => {
-            const count = badges?.[url] || 0;
-            totalCount += count;
-
-            return {
-                label: <Badge count={count}>{title}</Badge>,
-                key: url,
-                onClick() {
-                    history.push(url);
-                },
-            };
-        });
-
-        const label = (
-            <Badge count={totalCount}>
-                {groupItem.icon} {menuExpanded ? groupItem.title : ""}
-            </Badge>
-        );
-
-        return {
-            children,
-            label,
-            key: groupItem.title,
-        };
-    };
-
-    render() {
-        const {navigationService} = this.props;
-        const {currentOpenedMenuKey, currentSelectedMenuKey} = this.state;
-        return (
-            <AntMenu
-                theme="dark"
-                mode="inline"
-                openKeys={currentOpenedMenuKey ? [currentOpenedMenuKey] : []}
-                selectedKeys={currentSelectedMenuKey ? [currentSelectedMenuKey] : []}
-                onOpenChange={this.onMenuOpenChange as any}
-                items={navigationService.groups(false).map(this.renderMenuGroup)}
-            />
-        );
-    }
-}
-
-export const Menu = withRouter(RouterAwareMenu);

package/src/admin/AdminApp/Navigator.tsx

@@ -1,186 +0,0 @@
-import React from "react";
-import {Tabs} from "../../core/Tabs";
-import type {RouteComponentProps} from "react-router-dom";
-import {withRouter} from "react-router-dom";
-import {AdminAppContext} from "./context";
-import type {AdminNavigatorBase, NavigationModuleItem} from "../../util/AdminNavigatorBase";
-import {i18n} from "../../internal/i18n/admin";
-import {Spin} from "../../core/Spin";
-
-interface NavigatorTabItem {
-    url: string;
-    module: NavigationModuleItem<any, any>;
-    historyState?: any;
-    customTitle?: string | null;
-}
-
-interface Props extends RouteComponentProps {
-    navigationService: AdminNavigatorBase<any, any>;
-}
-
-interface State {
-    tabs: NavigatorTabItem[];
-}
-
-class RouterAwareNavigator extends React.PureComponent<Props, State> {
-    static displayName = "Navigator";
-    static contextType = AdminAppContext;
-    declare context: React.ContextType<typeof AdminAppContext>;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {tabs: []};
-    }
-
-    componentDidMount() {
-        // Register context
-        this.context.registerTitleUpdater(title => {
-            const url = this.props.location.pathname;
-            const index = this.computeIndexByURL(url);
-            if (index >= 0) {
-                const newTabs = [...this.state.tabs];
-                newTabs[index].customTitle = title;
-                this.setState({tabs: newTabs});
-            }
-        });
-
-        // Create initial tab, unless homepage or 404
-        const {location, navigationService} = this.props;
-        const url = location.pathname;
-        const targetModule = navigationService.moduleByURL(url);
-        if (targetModule) {
-            this.setState({
-                tabs: [
-                    {
-                        url,
-                        module: targetModule,
-                        historyState: location.state,
-                    },
-                ],
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        if (prevProps.location !== this.props.location) {
-            const {tabs} = this.state;
-            const newTabs = [...tabs];
-
-            // Save the previous tab (both URL and history state)
-            const prevURL = prevProps.location.pathname;
-            const prevHistoryState = prevProps.location.state;
-            const prevItemIndex = this.computeIndexByURL(prevURL);
-            if (prevItemIndex >= 0) {
-                newTabs[prevItemIndex].url = prevURL;
-                newTabs[prevItemIndex].historyState = prevHistoryState;
-            }
-
-            // Then determine whether create a new tab, or update the existing tab
-            const {location, navigationService} = this.props;
-            const newURL = location.pathname;
-            const newHistoryState = location.state;
-            const newIndex = this.computeIndexByURL(newURL);
-            if (newIndex >= 0) {
-                // Update the existing tab
-                newTabs[newIndex].url = newURL;
-                newTabs[newIndex].historyState = newHistoryState;
-            } else {
-                // If module exists, create a new tab
-                // Else, it means, the user goes to the homepage tab, so just do nothing
-                const targetModule = navigationService.moduleByURL(newURL);
-                if (targetModule) {
-                    newTabs.push({
-                        url: newURL,
-                        historyState: newHistoryState,
-                        module: targetModule,
-                    });
-                }
-            }
-
-            // Finalize the component state
-            this.setState({tabs: newTabs});
-        }
-    }
-
-    computeIndexByURL = (url: string): number => {
-        // If url is null, then use current URL
-        const {navigationService} = this.props;
-        const {tabs} = this.state;
-        const matchedModule = navigationService.moduleByURL(url);
-        if (matchedModule) {
-            if (matchedModule.separateTab) {
-                return tabs.findIndex(_ => _.url === url);
-            } else {
-                return tabs.findIndex(_ => _.module === matchedModule);
-            }
-        } else {
-            return -1;
-        }
-    };
-
-    onTabClose = (key: string | React.MouseEvent | React.KeyboardEvent) => {
-        const {history, location} = this.props;
-        const {tabs} = this.state;
-
-        const currentURL = location.pathname;
-        const closedURL = key as string;
-        const closedIndex = this.computeIndexByURL(closedURL);
-        if (closedIndex >= 0) {
-            const newTabs = [...tabs];
-            newTabs.splice(closedIndex, 1);
-            this.setState({tabs: newTabs});
-
-            if (currentURL === closedURL) {
-                // Close current tab, then re-open the previous tab, or the first tab
-                const followingItem = newTabs[closedIndex - 1];
-                if (followingItem) {
-                    history.push(followingItem.url, followingItem.historyState);
-                } else {
-                    history.push("/");
-                }
-            }
-        }
-    };
-
-    onTabChange = (url: string) => {
-        const {history} = this.props;
-        const index = this.computeIndexByURL(url);
-        if (index >= 0) {
-            // Trigger URL change, then the flow will go to componentDidUpdate
-            const existedItem = this.state.tabs[index];
-            history.push(existedItem.url, existedItem.historyState);
-        } else {
-            // Open homepage tab
-            history.push("/");
-        }
-    };
-
-    render() {
-        const {location} = this.props;
-        const {tabs} = this.state;
-        const t = i18n();
-        return (
-            <Tabs className="navigator-bar" hideAdd onEdit={this.onTabClose} type="editable-card" activeKey={location.pathname} onChange={this.onTabChange}>
-                <Tabs.TabPane tab={t.homePageTitle} key="/" closable={false} />
-                {tabs.map(({customTitle, url, module}) => {
-                    let tab: React.ReactElement | string;
-                    if (customTitle) {
-                        tab = customTitle;
-                    } else if (module.separateTab) {
-                        tab = (
-                            <React.Fragment>
-                                {module.title}
-                                <Spin spinning size="small" />
-                            </React.Fragment>
-                        );
-                    } else {
-                        tab = module.title;
-                    }
-                    return <Tabs.TabPane tab={tab} key={url} closable />;
-                })}
-            </Tabs>
-        );
-    }
-}
-
-export const Navigator = withRouter(RouterAwareNavigator);

package/src/admin/AdminApp/NotFound.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import {AdminPage} from "../AdminPage";
-import {i18n} from "../../internal/i18n/admin";
-
-interface Props {
-    onNotFound?: (notFoundPath: string) => void;
-}
-
-export class NotFound extends React.PureComponent<Props> {
-    static displayName = "NotFound";
-
-    componentDidMount() {
-        this.props.onNotFound?.(location.href);
-    }
-
-    render() {
-        const t = i18n();
-        return (
-            <AdminPage>
-                <AdminPage.Result type="error" title={t.notFound} />
-            </AdminPage>
-        );
-    }
-}

package/src/admin/AdminApp/RouteSwitch.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import type {AdminNavigatorBase, NavigationModuleItem} from "../../util/AdminNavigatorBase";
-import {Route, Switch} from "react-router-dom";
-import {WithErrorBoundary} from "./WithErrorBoundary";
-import {NotFound} from "./NotFound";
-import {i18n} from "../../internal/i18n/admin";
-import {AdminPage} from "../AdminPage";
-import {TextUtil} from "../../internal/TextUtil";
-import {AdminAppContext} from "./context";
-
-interface Props {
-    navigationService: AdminNavigatorBase<any, any>;
-    WelcomeComponent?: React.ComponentType;
-    onLifecycleError?: (error: unknown, componentStack: string) => void;
-    onNotFound?: (notFoundPath: string) => void;
-}
-
-export class RouteSwitch extends React.PureComponent<Props> {
-    static displayName = "RouteSwitch";
-    static contextType = AdminAppContext;
-    declare context: React.ContextType<typeof AdminAppContext>;
-
-    private readonly navigationModules: NavigationModuleItem<any, any>[];
-
-    constructor(props: Props) {
-        super(props);
-        this.navigationModules = props.navigationService.modules();
-    }
-
-    renderWelcome = () => {
-        const {name} = this.context;
-        const t = i18n();
-        return (
-            <AdminPage>
-                <AdminPage.Result type="success" title={TextUtil.interpolate(t.welcome, name)} subtitle={t.homePageSubtitle} hideButton />
-            </AdminPage>
-        );
-    };
-
-    render() {
-        const {WelcomeComponent, onLifecycleError, onNotFound} = this.props;
-        return (
-            <Switch>
-                <Route exact path="/" component={WelcomeComponent || this.renderWelcome} />
-                {this.navigationModules.map(({url, routeParam, componentType: RouteComponent}) => (
-                    <Route
-                        exact
-                        key={url}
-                        path={routeParam ? url + routeParam : url}
-                        component={(props: any) => (
-                            <WithErrorBoundary onLifecycleError={onLifecycleError}>
-                                <RouteComponent {...props} />
-                            </WithErrorBoundary>
-                        )}
-                    />
-                ))}
-                <Route component={() => <NotFound onNotFound={onNotFound} />} />
-            </Switch>
-        );
-    }
-}

package/src/admin/AdminApp/WithErrorBoundary.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import {AdminPage} from "../AdminPage";
-
-interface Props {
-    onLifecycleError?: (error: unknown, componentStack: string) => void;
-    children: React.ReactChild;
-}
-
-interface State {
-    error: Error | null;
-}
-
-export class WithErrorBoundary extends React.PureComponent<Props, State> {
-    static displayName = "WithErrorBoundary";
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {error: null};
-    }
-
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-        this.setState({error});
-        this.props.onLifecycleError?.(error, errorInfo.componentStack);
-    }
-
-    render() {
-        const {error} = this.state;
-        return error ? (
-            <AdminPage>
-                <AdminPage.Result type="error" title="Page Script Error" subtitle={error.message} />
-            </AdminPage>
-        ) : (
-            this.props.children
-        );
-    }
-}

package/src/admin/AdminApp/context.ts

@@ -1,13 +0,0 @@
-import React from "react";
-
-export interface AdminAppContextType {
-    name: string;
-    updateTitle: (title: string | null) => void;
-    registerTitleUpdater: (fn: (title: string | null) => void) => void;
-}
-
-export const AdminAppContext = React.createContext<AdminAppContextType>({
-    name: "",
-    updateTitle: () => {},
-    registerTitleUpdater: () => {},
-});