@pinnacle0/web-ui 0.3.23 → 0.3.26

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: () => {},
-});

package/src/admin/AdminApp/index.less

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

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

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

@@ -1,41 +0,0 @@
-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()} />;
-    }
-}