@pinnacle0/web-ui 0.3.23 → 0.3.26

package/script/build.ts

@@ -1,103 +0,0 @@
-import {PrettierUtil, TaskRunner, Utility} from "@pinnacle0/devtool-util";
-import fs from "fs";
-import {copySync as fsExtraCopySync} from "fs-extra";
-import path from "path";
-
-const FilePath = {
-    project: path.join(__dirname, ".."),
-    config: path.join(__dirname, "../config"),
-    build: path.join(__dirname, "../build"),
-    script: path.join(__dirname, "../script"),
-    src: path.join(__dirname, "../src"),
-    test: path.join(__dirname, "../test"),
-
-    jestConfig: path.join(__dirname, "../config/jest.config.ts"),
-    tsConfigForSrc: path.join(__dirname, "../config/tsconfig.src.json"),
-    projectPackageJSON: path.join(__dirname, "../package.json"),
-    projectReadMe: path.join(__dirname, "../README.md"),
-    projectLicense: path.join(__dirname, "../LICENSE.md"),
-    buildPackageJSON: path.join(__dirname, "../build/package.json"),
-    buildReadMe: path.join(__dirname, "../build/README.md"),
-    buildLicense: path.join(__dirname, "../build/LICENSE.md"),
-};
-
-new TaskRunner("build").execute([
-    {
-        name: "prettier",
-        skipInFastMode: true,
-        execute: () => {
-            PrettierUtil.check(FilePath.config);
-            PrettierUtil.check(FilePath.script);
-            PrettierUtil.check(FilePath.src);
-            PrettierUtil.check(FilePath.test);
-        },
-    },
-    {
-        name: "eslint",
-        skipInFastMode: true,
-        execute: () => {
-            Utility.runCommand("eslint", ["--ext=.js,.jsx,.ts,.tsx", FilePath.src]);
-            Utility.runCommand("eslint", ["--ext=.js,.jsx,.ts,.tsx", FilePath.test]);
-        },
-    },
-    {
-        name: "stylelint",
-        skipInFastMode: true,
-        execute: () => {
-            Utility.runCommand("stylelint", [path.join(FilePath.src, "**/*.{css,less}")]);
-            Utility.runCommand("stylelint", [path.join(FilePath.test, "**/*.{css,less}")]);
-        },
-    },
-    {
-        name: "unit test",
-        skipInFastMode: true,
-        execute: () => {
-            Utility.runCommand("jest", ["--config", FilePath.jestConfig, "--bail"]);
-        },
-    },
-    {
-        name: "prepare build directory",
-        execute: () => {
-            Utility.prepareEmptyDirectory(FilePath.build);
-        },
-    },
-    {
-        name: "compile with tsc",
-        execute: () => {
-            Utility.runCommand("tsc", ["--project", FilePath.tsConfigForSrc]);
-        },
-    },
-    {
-        name: "copy assets to build directory",
-        execute: () => {
-            const print = Utility.createConsoleLogger("build");
-            const supportedExtensions = [".less", ".css", ".json", ".jpg", ".png", ".gif", ".mp3", ".mp4", ".wmv"];
-            fsExtraCopySync(FilePath.src, FilePath.build, {
-                filter: source => {
-                    const extension = path.extname(source);
-                    // source may be a directory or a file under the directory.
-                    if (fs.statSync(source).isDirectory()) {
-                        return true;
-                    } else if (supportedExtensions.includes(extension)) {
-                        print.info(`Asset (${extension}) copied from "${path.relative(FilePath.src, source)}"`);
-                        return true;
-                    } else {
-                        if (extension !== ".tsx" && extension !== ".ts") {
-                            print.error(`Asset (${extension}) is unsupported, skipped "${path.relative(FilePath.src, source)}"`);
-                        }
-                        return false;
-                    }
-                },
-                dereference: true,
-            });
-        },
-    },
-    {
-        name: "copy package.json, markdown files",
-        execute: () => {
-            fs.copyFileSync(FilePath.projectPackageJSON, FilePath.buildPackageJSON);
-            fs.copyFileSync(FilePath.projectReadMe, FilePath.buildReadMe);
-            fs.copyFileSync(FilePath.projectLicense, FilePath.buildLicense);
-        },
-    },
-]);

package/script/format.ts

@@ -1,7 +0,0 @@
-import {PrettierUtil} from "@pinnacle0/devtool-util";
-import path from "path";
-
-PrettierUtil.format(path.join(__dirname, "../config"));
-PrettierUtil.format(path.join(__dirname, "../script"));
-PrettierUtil.format(path.join(__dirname, "../src"));
-PrettierUtil.format(path.join(__dirname, "../test"));

package/script/start-mobile.ts

@@ -1,13 +0,0 @@
-import path from "path";
-import {WebpackUtil} from "@pinnacle0/webpack-util/src";
-
-new WebpackUtil.ServerStarter({
-    projectDirectory: path.resolve(__dirname, "../test/mobile-ui-test"),
-    port: 4456,
-    dynamicPathResolvers: [
-        {
-            prefix: "@pinnacle0/web-ui",
-            resolver: path.join(__dirname, "../src"),
-        },
-    ],
-}).run();

package/script/start.ts

@@ -1,31 +0,0 @@
-import path from "path";
-import {WebpackUtil} from "@pinnacle0/webpack-util/src";
-// @ts-ignore
-import type {TestImageUploadResponse, APIErrorResponse} from "../test/ui-test/src/type";
-
-new WebpackUtil.ServerStarter({
-    projectDirectory: path.join(__dirname, "../test/ui-test"),
-    port: 4455,
-    dynamicPathResolvers: [
-        {
-            prefix: "@pinnacle0/web-ui",
-            resolver: path.join(__dirname, "../src"),
-        },
-    ],
-    interceptExpressApp: app =>
-        app.post("/ajax/upload", (request, response) => {
-            if (Math.random() > 0.5) {
-                const uploadResponse: TestImageUploadResponse = {
-                    imageURL: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg",
-                    imageKey: "test",
-                };
-                response.json(uploadResponse);
-            } else {
-                const errorCode = Math.random() > 0.5 ? 500 : 400;
-                const uploadResponse: APIErrorResponse = {
-                    message: "Server Error, Please Retry",
-                };
-                response.status(errorCode).json(uploadResponse);
-            }
-        }),
-}).run();

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

@@ -1,57 +0,0 @@
-#admin-app-default-navigator-side-button {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
-    line-height: 36px;
-    border-radius: 99px;
-
-    .anticon-user {
-        font-size: 22px;
-    }
-}
-
-#admin-app-default-drawer {
-    > .avatar {
-        @avatar-size: 140px;
-
-        display: block;
-        margin: 0 auto 20px;
-        font-size: 86px;
-        border-radius: @avatar-size / 2;
-        color: #1890ff;
-        border: 1px solid #1890ff;
-        text-align: center;
-        line-height: @avatar-size + 4;
-        width: @avatar-size;
-        height: @avatar-size;
-    }
-
-    > .grid {
-        > .row {
-            @row-height: 40px;
-
-            position: relative;
-            font-size: 15px;
-            margin-bottom: 5px;
-            height: @row-height;
-            line-height: @row-height;
-            background: #f6f6f6;
-            padding-left: 130px;
-
-            > b.label {
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 116px;
-                line-height: @row-height;
-                background: #e8e8e9;
-                padding-left: 10px;
-            }
-        }
-    }
-
-    > .bottom {
-        margin: 40px 0 10px;
-        text-align: center;
-    }
-}

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.less

@@ -1,30 +0,0 @@
-#admin-app-default-logo {
-    display: flex;
-    align-items: center;
-    height: 70px;
-    padding-left: 24px;
-    transition: all 0.2s;
-
-    > img {
-        width: 50px;
-        height: 50px;
-    }
-
-    > h1 {
-        margin-left: 8px;
-        font-weight: bold;
-        font-size: 18px;
-        color: #fff;
-        overflow: hidden;
-        width: 200px;
-        white-space: nowrap;
-    }
-
-    &.collapsed {
-        padding-left: 13px;
-
-        > h1 {
-            width: 0;
-        }
-    }
-}

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,150 +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 (
-                <AntMenu.Item key={url} onClick={() => history.push(url)}>
-                    <Badge count={count}>{title}</Badge>
-                </AntMenu.Item>
-            );
-        });
-        const title = (
-            <Badge count={totalCount}>
-                {groupItem.icon} {menuExpanded ? groupItem.title : ""}
-            </Badge>
-        );
-        return (
-            <AntMenu.SubMenu title={title} key={groupItem.title}>
-                {children}
-            </AntMenu.SubMenu>
-        );
-    };
-
-    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}
-            >
-                {navigationService.groups(false).map(this.renderMenuGroup)}
-            </AntMenu>
-        );
-    }
-}
-
-export const Menu = withRouter(RouterAwareMenu);