@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/admin/AdminApp/Navigator.tsx

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,13 @@
+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: () => {},
+});

package/src/admin/AdminApp/index.less

@@ -0,0 +1,148 @@
+@import "../../css/variable.less";
+
+#admin-app {
+    .ant-layout-sider {
+        height: 100vh;
+
+        > .ant-layout-sider-children {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            > .ant-menu {
+                flex: 1 1 0;
+                overflow: hidden auto;
+
+                .ant-menu-submenu-title .ant-badge {
+                    font-size: 16px;
+                }
+
+                .ant-menu-item .ant-badge {
+                    font-size: 14px;
+                }
+
+                .ant-badge {
+                    color: inherit;
+
+                    .anticon {
+                        // Override Antd default
+                        font-size: 16px;
+                        margin-right: 2px;
+                    }
+
+                    .ant-badge-count {
+                        position: absolute;
+                        right: -24px;
+                        top: 8px;
+                    }
+                }
+            }
+
+            > .toggle-menu-icon {
+                color: #fff;
+                font-size: 20px;
+                padding: 3px 24px;
+
+                &:hover {
+                    opacity: 0.7;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &.ant-layout-sider-collapsed {
+            > .ant-layout-sider-children {
+                > .ant-menu {
+                    .ant-menu-submenu-title {
+                        overflow: visible;
+                        padding-left: 24px;
+                        text-align: center;
+
+                        .ant-badge {
+                            .ant-badge-count {
+                                right: -2px;
+                                top: 0;
+                                z-index: 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .ant-layout-header {
+        height: 39px;
+        background: #fff;
+        display: flex;
+        padding: 0 12px 0 0;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid @lib-border-gray;
+
+        > .navigator-bar.ant-tabs-card {
+            > .ant-tabs-nav {
+                margin: 0;
+
+                .ant-tabs-tab {
+                    border: none;
+                    margin-right: 0;
+                    border-radius: 0;
+                    width: auto;
+
+                    > .ant-tabs-tab-btn {
+                        transition: none;
+                    }
+
+                    &:hover {
+                        background: @lib-background-gray;
+                    }
+
+                    .ant-spin {
+                        // Hide loading status for inactive tab
+                        display: none;
+                    }
+
+                    &.ant-tabs-tab-active {
+                        background: @lib-main-blue;
+
+                        .ant-tabs-tab-btn {
+                            color: #fff;
+
+                            .ant-spin {
+                                display: inline-block;
+                                margin-left: 8px;
+                                margin-right: -16px;
+                                color: #fff;
+                            }
+                        }
+
+                        .anticon-close {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .ant-layout-content {
+        height: ~"calc(100vh - 45px)"; // Minus header height
+        overflow-y: auto;
+    }
+}
+
+// Submenu popup is put directly under <body> in collapse mode
+.ant-menu-submenu-popup {
+    .ant-menu-item {
+        .ant-badge {
+            color: inherit;
+
+            .ant-badge-count {
+                position: absolute;
+                right: -22px;
+                top: 6px;
+            }
+        }
+    }
+}

package/src/admin/AdminApp/index.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import AntLayout from "antd/lib/layout";
+import MenuFoldOutlined from "@ant-design/icons/MenuFoldOutlined";
+import MenuUnfoldOutlined from "@ant-design/icons/MenuUnfoldOutlined";
+import {LocalStorageUtil} from "../../util/LocalStorageUtil";
+import type {AdminNavigatorBase, NavigationModuleItem} from "../../util/AdminNavigatorBase";
+import {SoundSwitch} from "./Default/SoundSwitch";
+import {SquareLogo} from "./Default/SquareLogo";
+import type {ExpandableProps} from "./Default/SquareLogo";
+import {BrowserRouter} from "react-router-dom";
+import {NavigatorSide} from "./Default/NavigatorSide";
+import type {AdminAppContextType} from "./context";
+import {AdminAppContext} from "./context";
+import {RouteSwitch} from "./RouteSwitch";
+import {Menu} from "./Menu";
+import {Navigator} from "./Navigator";
+import "antd/lib/layout/style";
+import "./index.less";
+
+export interface Props {
+    name: string;
+    navigationService: AdminNavigatorBase<any, any>;
+    LogoComponent?: React.ComponentType<ExpandableProps>;
+    NavigatorSideComponent?: React.ComponentType;
+    WelcomeComponent?: React.ComponentType;
+    sideMenuWidth?: number;
+    badges?: {[key: string]: number};
+    noBrowserRouter?: boolean;
+    onLifecycleError?: (error: unknown, componentStack: string) => void;
+    onNotFound?: (notFoundPath: string) => void;
+}
+
+interface State {
+    menuExpanded: boolean;
+}
+
+export class AdminApp extends React.PureComponent<Props, State> {
+    static displayName = "AdminApp";
+
+    static SquareLogo = SquareLogo;
+    static SoundSwitch = SoundSwitch;
+    static NavigatorSide = NavigatorSide;
+
+    private readonly menuExpandedKey = "admin-menu-expanded";
+    private readonly navigationModules: NavigationModuleItem<any, any>[];
+    private readonly adminAppContext: AdminAppContextType;
+    private registeredTitleUpdater: undefined | ((title: string | null) => void);
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            menuExpanded: LocalStorageUtil.getBool(this.menuExpandedKey, true),
+        };
+        this.navigationModules = props.navigationService.modules();
+        this.adminAppContext = {
+            name: props.name,
+            updateTitle: title => this.registeredTitleUpdater?.(title),
+            registerTitleUpdater: fn => (this.registeredTitleUpdater = fn),
+        };
+    }
+
+    toggleMenuExpansion = () => {
+        const newValue = !this.state.menuExpanded;
+        this.setState({menuExpanded: newValue});
+        LocalStorageUtil.setBool(this.menuExpandedKey, newValue);
+    };
+
+    render() {
+        const {name, navigationService, WelcomeComponent, LogoComponent, NavigatorSideComponent, noBrowserRouter, badges, sideMenuWidth, onNotFound, onLifecycleError} = this.props;
+        const {menuExpanded} = this.state;
+        const coreContent = (
+            <AdminAppContext.Provider value={this.adminAppContext}>
+                <AntLayout id="admin-app">
+                    <AntLayout.Sider collapsed={!menuExpanded} width={sideMenuWidth}>
+                        {LogoComponent && <LogoComponent expanded={menuExpanded} />}
+                        <Menu navigationService={navigationService} menuExpanded={menuExpanded} siteName={name} badges={badges} />
+                        <div className="toggle-menu-icon" onClick={this.toggleMenuExpansion}>
+                            {menuExpanded ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
+                        </div>
+                    </AntLayout.Sider>
+                    <AntLayout>
+                        <AntLayout.Header>
+                            <Navigator navigationService={navigationService} />
+                            {NavigatorSideComponent && <NavigatorSideComponent />}
+                        </AntLayout.Header>
+                        <AntLayout.Content>
+                            <RouteSwitch navigationService={navigationService} WelcomeComponent={WelcomeComponent} onLifecycleError={onLifecycleError} onNotFound={onNotFound} />
+                        </AntLayout.Content>
+                    </AntLayout>
+                </AntLayout>
+            </AdminAppContext.Provider>
+        );
+
+        return noBrowserRouter ? coreContent : <BrowserRouter>{coreContent}</BrowserRouter>;
+    }
+}

package/src/admin/AdminPage/Filter.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import DownOutlined from "@ant-design/icons/DownOutlined";
+import UpOutlined from "@ant-design/icons/UpOutlined";
+import {classNames} from "../../util/ClassNames";
+import {Form} from "../../core/Form";
+import {Button} from "../../core/Button";
+import {WithExplanation} from "../../core/WithExplanation";
+import type {SafeReactChildren} from "../../internal/type";
+import {LocalStorageUtil} from "../../util/LocalStorageUtil";
+import {i18n} from "../../internal/i18n/admin";
+import type {FormErrorDisplayMode} from "../../core/Form/context";
+import {Space} from "../../core/Space";
+
+export interface Props {
+    onFinish: () => void;
+    onReset?: () => void;
+    children: SafeReactChildren;
+    extraElements?: SafeReactChildren;
+    expandedArea?: React.ReactElement; // If undefined, the Filter cannot be expanded
+    loading?: boolean;
+    reminder?: string;
+}
+
+interface State {
+    expanded: boolean;
+}
+
+export class Filter extends React.PureComponent<Props, State> {
+    static displayName = "AdminPage.Filter";
+
+    private readonly errorDisplayMode: FormErrorDisplayMode = {type: "popover", placement: "top"};
+    private readonly storageKey: string;
+
+    constructor(props: Props) {
+        super(props);
+        this.storageKey = `filter-expansion:${location.pathname}`;
+        this.state = {expanded: LocalStorageUtil.getBool(this.storageKey, false)};
+    }
+
+    toggleExpansion = () => {
+        const expanded = !this.state.expanded;
+        this.setState({expanded});
+        LocalStorageUtil.setBool(this.storageKey, expanded);
+    };
+
+    render() {
+        const {onFinish, onReset, extraElements, reminder, loading, children, expandedArea} = this.props;
+        const {expanded} = this.state;
+        const t = i18n();
+
+        return (
+            <Form className="g-admin-page-filter" onFinish={onFinish} layout="inline" errorDisplayMode={this.errorDisplayMode} buttonRenderer={null}>
+                {children}
+                <Space>
+                    {reminder && <WithExplanation explanation={reminder} />}
+                    <Button type="submit" disabled={loading}>
+                        {t.search}
+                    </Button>
+                    {onReset && (
+                        <Button color="wire-frame" onClick={onReset} disabled={loading}>
+                            {t.reset}
+                        </Button>
+                    )}
+                    {extraElements}
+                    {expandedArea && (
+                        <div className="expand-trigger" onClick={this.toggleExpansion}>
+                            {expanded ? <UpOutlined /> : <DownOutlined />}
+                            {expanded ? t.collapse : t.expand}
+                        </div>
+                    )}
+                </Space>
+                <div className={classNames("expanded-area", {expanded})}>{expandedArea}</div>
+            </Form>
+        );
+    }
+}

package/src/admin/AdminPage/Result.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import AntResult from "antd/lib/result";
+import "antd/lib/result/style";
+import {Button} from "../../core/Button";
+import {i18n} from "../../internal/i18n/admin";
+
+interface Props {
+    type: "success" | "error";
+    title: string;
+    subtitle?: string;
+    hideButton?: boolean;
+    secondaryButton?: {label: string; onClick: () => void};
+}
+
+export class Result extends React.PureComponent<Props> {
+    static displayName = "AdminPage.Result";
+
+    private readonly buttonContainerStyle: React.CSSProperties = {display: "flex", width: 300, justifyContent: "space-around", margin: "0 auto"};
+
+    renderExtra = () => {
+        const {secondaryButton, hideButton} = this.props;
+        const t = i18n();
+        return (
+            !hideButton && (
+                <div style={this.buttonContainerStyle}>
+                    <Button link="/">{t.goHome}</Button>
+                    {secondaryButton && (
+                        <Button color="wire-frame" onClick={secondaryButton.onClick}>
+                            {secondaryButton.label}
+                        </Button>
+                    )}
+                </div>
+            )
+        );
+    };
+
+    render() {
+        const {type, title, subtitle} = this.props;
+        return <AntResult title={title} subTitle={subtitle} status={type} extra={this.renderExtra()} />;
+    }
+}