@pinnacle0/web-ui 0.3.36 → 0.3.39

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()} />;
-    }
-}

package/src/admin/AdminPage/SaveBar.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import {Button} from "../../core/Button";
-import {i18n} from "../../internal/i18n/admin";
-
-export interface Props {
-    onSave: () => void;
-    onReset?: () => void;
-    leftNode?: React.ReactElement;
-}
-
-export class SaveBar extends React.PureComponent<Props> {
-    static displayName = "AdminPage.SaveBar";
-
-    render() {
-        const {leftNode, onReset, onSave} = this.props;
-        const t = i18n();
-        return (
-            <div className="g-admin-page-save-bar">
-                <div className="left">{leftNode}</div>
-                <div className="right">
-                    {onReset && (
-                        <Button size="large" color="wire-frame" onClick={onReset}>
-                            {t.reset}
-                        </Button>
-                    )}
-                    <Button size="large" onClick={onSave}>
-                        {t.save}
-                    </Button>
-                </div>
-            </div>
-        );
-    }
-}

package/src/admin/AdminPage/Summary.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import type {SafeReactChildren} from "../../internal/type";
-
-export interface Props {
-    children: SafeReactChildren;
-}
-
-export class Summary extends React.PureComponent<Props> {
-    static displayName = "AdminPage.Summary";
-
-    render() {
-        const {children} = this.props;
-        return <div className="g-admin-page-summary">{children}</div>;
-    }
-}

package/src/admin/AdminPage/TopBar.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import type {SafeReactChildren} from "../../internal/type";
-
-export interface Props {
-    children: SafeReactChildren;
-}
-
-export class TopBar extends React.PureComponent<Props> {
-    static displayName = "AdminPage.TopBar";
-
-    render() {
-        const {children} = this.props;
-        return <div className="g-admin-page-top-bar">{children}</div>;
-    }
-}

package/src/admin/AdminPage/index.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import {Filter} from "./Filter";
-import {Summary} from "./Summary";
-import {SaveBar} from "./SaveBar";
-import {Result} from "./Result";
-import {TopBar} from "./TopBar";
-import type {SafeReactChildren} from "../../internal/type";
-import "./index.less";
-
-export interface Props {
-    children: SafeReactChildren;
-    className?: string;
-}
-
-export class AdminPage extends React.PureComponent<Props> {
-    static displayName = "AdminPage";
-
-    static Filter = Filter;
-    static Summary = Summary;
-    static TopBar = TopBar;
-    static SaveBar = SaveBar;
-    static Result = Result;
-
-    render() {
-        const {className, children} = this.props;
-        return <div className={classNames("g-admin-page", className)}>{children}</div>;
-    }
-}

package/src/admin/AdminPermissionSelector.tsx

@@ -1,299 +0,0 @@
-import React from "react";
-import {Popover} from "../core/Popover";
-import {Checkbox} from "../core/Checkbox";
-import {Progress} from "../core/Progress";
-import {Descriptions} from "../core/Descriptions";
-import type {NavigationGroupItem, NavigationModuleItem} from "../util/AdminNavigatorBase";
-import {ArrayUtil} from "../internal/ArrayUtil";
-import {i18n} from "../internal/i18n/admin";
-
-export interface Props<Feature, Field = undefined> {
-    navigationGroups: Array<NavigationGroupItem<Feature, Field>>;
-    boundPermissionsCalculator?: (permissions: Feature) => Feature[];
-    featureValue: Feature[];
-    onFeatureChange: (value: Feature[]) => void;
-    fieldValue?: Field[];
-    onFieldChange?: (value: Field[]) => void;
-    featurePermissionTranslator: (permission: Feature) => string;
-    fieldPermissionTranslator?: (permission: Field) => string;
-    editable: boolean;
-    extraPermissions?: Feature[]; // Used for special permissions not in NavigationGroup
-    moduleNameWidth?: number;
-    alwaysExpand?: boolean;
-}
-
-export class AdminPermissionSelector<Feature extends string, Field extends string = never> extends React.PureComponent<Props<Feature, Field>> {
-    static displayName = "AdminPermissionSelector";
-
-    private readonly navigationModuleItemContainerStyle: React.CSSProperties = {display: "flex"};
-    private readonly progressStyle: React.CSSProperties = {width: "100%", lineHeight: "32px"};
-    private readonly permissionCheckboxStyle: React.CSSProperties = {marginRight: 5, marginLeft: 0};
-    private readonly popoverStyle: React.CSSProperties = {width: 450};
-    private readonly descriptionItemStyle: React.CSSProperties = {minWidth: 450};
-    private readonly checkboxStyle: React.CSSProperties = {
-        width: this.props.moduleNameWidth || 130,
-        height: 32,
-        lineHeight: "32px",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-    };
-
-    triggerChangeEvent = (changedPermissions: Array<Feature | Field>, isChecked: boolean, isFieldPermission: boolean) => {
-        const {onFeatureChange, onFieldChange, fieldValue, featureValue, editable} = this.props;
-
-        const getNewPermissions = <T extends Feature | Field>(isChecked: boolean, value: T[]) => {
-            if (!value) {
-                return [];
-            }
-
-            return isChecked ? [...new Set([...value, ...(changedPermissions as T[])])] : value.filter(_ => !(changedPermissions as T[]).includes(_));
-        };
-
-        if (!editable) {
-            return;
-        }
-
-        if (!isFieldPermission) {
-            onFeatureChange(getNewPermissions(isChecked, featureValue));
-            return;
-        }
-
-        if (fieldValue && onFieldChange) {
-            onFieldChange(getNewPermissions(isChecked, fieldValue));
-        }
-    };
-
-    getNavigationModuleFeaturePermissions = (module: NavigationModuleItem<Feature, Field>): Feature[] => {
-        const permissions = module.featurePermissions;
-        if (permissions) {
-            return [...permissions];
-        }
-        return [];
-    };
-
-    getNavigationModuleFieldPermission = (module: NavigationModuleItem<Feature, Field>): Field[] => {
-        const permissions = module.fieldPermissions;
-        if (permissions) {
-            return [...permissions];
-        }
-        return [];
-    };
-
-    getNavigationGroupFeaturePermissions = (groupItem: NavigationGroupItem<Feature, Field>): Feature[] => {
-        return groupItem.modules.flatMap(this.getNavigationModuleFeaturePermissions);
-    };
-
-    getNavigationGroupFieldPermissions = (groupItem: NavigationGroupItem<Feature, Field>): Field[] => {
-        return groupItem.modules.flatMap(this.getNavigationModuleFieldPermission);
-    };
-
-    recursivelyGetBoundPermissions(permission: Feature | Field, includeSelf = true) {
-        const {boundPermissionsCalculator} = this.props;
-
-        const extractPermissions = (feature: Feature): Feature[] => {
-            const childPermissions = boundPermissionsCalculator?.(feature as Feature) || [];
-            return [...childPermissions, ...childPermissions.flatMap(extractPermissions)];
-        };
-
-        const permissions = extractPermissions(permission as Feature);
-
-        if (includeSelf) {
-            permissions.unshift(permission as Feature);
-        }
-
-        return [...new Set(permissions)];
-    }
-
-    onPermissionChange = (checked: boolean, permission: Feature | Field, isFieldPermission: boolean) => {
-        const {boundPermissionsCalculator} = this.props;
-        const changedPermissions: Array<Feature | Field> = (() => {
-            if (checked && boundPermissionsCalculator) {
-                // Also trigger bound permission checked event
-                return isFieldPermission ? [permission] : this.recursivelyGetBoundPermissions(permission);
-            }
-            return [permission];
-        })();
-
-        this.triggerChangeEvent(changedPermissions, checked, isFieldPermission);
-    };
-
-    renderExtraPermission = (extraPermissions: Feature[]) => {
-        const t = i18n();
-        const {featureValue, featurePermissionTranslator} = this.props;
-        const enabledPercentage = ArrayUtil.intersectionPercentage(extraPermissions, featureValue);
-
-        const titleNode = (
-            <Checkbox value={enabledPercentage > 0} indeterminate={enabledPercentage > 0 && enabledPercentage < 100} onChange={value => this.triggerChangeEvent(extraPermissions, value, false)}>
-                {t.extraPermission}
-            </Checkbox>
-        );
-
-        return (
-            <Descriptions>
-                <Descriptions.Item label={titleNode}>
-                    {extraPermissions.map(_ => (
-                        <Checkbox key={_} onChange={value => this.onPermissionChange(value, _, false)} value={featureValue.includes(_)} style={this.permissionCheckboxStyle}>
-                            {featurePermissionTranslator(_)}
-                        </Checkbox>
-                    ))}
-                </Descriptions.Item>
-            </Descriptions>
-        );
-    };
-
-    /**
-     *
-     * @param permissions
-     * type here is not accurate
-     * Feature[] | Field[] will cause TS error
-     * https://github.com/microsoft/TypeScript/issues/7294
-     * https://github.com/microsoft/TypeScript/issues/36390
-     */
-    renderPermissionGroup = (permissions: (Feature | Field)[], isFieldPermission: boolean) => {
-        if (permissions.length < 1) {
-            return null;
-        }
-
-        const t = i18n();
-        const {featureValue, fieldValue, editable, boundPermissionsCalculator, featurePermissionTranslator, fieldPermissionTranslator} = this.props;
-        const enabledPercentage = isFieldPermission ? ArrayUtil.intersectionPercentage(permissions as Field[], fieldValue!) : ArrayUtil.intersectionPercentage(permissions as Feature[], featureValue);
-
-        const titleNode = editable ? (
-            <Checkbox
-                value={enabledPercentage > 0}
-                indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
-                onChange={value => this.triggerChangeEvent(isFieldPermission ? permissions : permissions.flatMap(_ => this.recursivelyGetBoundPermissions(_)), value, isFieldPermission)}
-            >
-                {isFieldPermission ? t.fieldPermission : t.featurePermission}
-            </Checkbox>
-        ) : isFieldPermission ? (
-            t.fieldPermission
-        ) : (
-            t.featurePermission
-        );
-
-        return (
-            <Descriptions.Item label={titleNode}>
-                {permissions.map(permission => {
-                    const isDisabled = !editable || (!isFieldPermission && featureValue.some(_ => boundPermissionsCalculator?.(_).includes(permission as Feature)));
-                    return (
-                        <Checkbox
-                            key={permission}
-                            disabled={isDisabled}
-                            onChange={value => this.onPermissionChange(value, permission, isFieldPermission)}
-                            value={isFieldPermission ? fieldValue?.includes(permission as Field) || false : featureValue.includes(permission as Feature)}
-                            style={this.permissionCheckboxStyle}
-                        >
-                            {isFieldPermission ? fieldPermissionTranslator?.(permission as Field) : featurePermissionTranslator(permission as Feature)}
-                        </Checkbox>
-                    );
-                })}
-            </Descriptions.Item>
-        );
-    };
-
-    renderNavigationModule = (module: NavigationModuleItem<Feature, Field>) => {
-        const {featureValue, fieldValue, alwaysExpand} = this.props;
-        const featurePermissions = module.featurePermissions;
-        const fieldPermission = module.fieldPermissions;
-
-        const hasFeaturePermissions = featurePermissions?.length;
-        const hasFieldPermissions = fieldPermission?.length;
-
-        if (!hasFeaturePermissions && !hasFieldPermissions) {
-            return null;
-        }
-
-        const moduleFeaturePermissions = this.getNavigationModuleFeaturePermissions(module);
-        const moduleFieldPermissions = this.getNavigationModuleFieldPermission(module);
-        const enabledPercentage = ArrayUtil.intersectionPercentage([...moduleFeaturePermissions, ...moduleFieldPermissions], [...featureValue, ...(fieldValue || [])]);
-
-        const popover = (
-            <Descriptions column={1}>
-                {featurePermissions ? this.renderPermissionGroup(featurePermissions, false) : null}
-                {fieldValue && fieldPermission ? this.renderPermissionGroup(fieldPermission, true) : null}
-            </Descriptions>
-        );
-
-        const navigationModuleItemContainer = (
-            <div style={this.navigationModuleItemContainerStyle}>
-                <Checkbox
-                    value={enabledPercentage > 0}
-                    indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
-                    onChange={value => {
-                        this.triggerChangeEvent(moduleFieldPermissions, value, true);
-                        this.triggerChangeEvent(
-                            moduleFeaturePermissions.flatMap(_ => this.recursivelyGetBoundPermissions(_)),
-                            value,
-                            false
-                        );
-                    }}
-                    style={this.checkboxStyle}
-                >
-                    {module.title}
-                </Checkbox>
-                <Progress style={this.progressStyle} percent={enabledPercentage} size="small" showInfo={false} />
-            </div>
-        );
-
-        if (alwaysExpand) {
-            return (
-                <div key={module.title}>
-                    {navigationModuleItemContainer}
-                    {popover}
-                </div>
-            );
-        }
-
-        return (
-            <Popover overlayClassName="permission-group" placement="left" overlayStyle={this.popoverStyle} autoAdjustOverflow key={module.title} content={popover}>
-                {navigationModuleItemContainer}
-            </Popover>
-        );
-    };
-
-    renderNavigationGroup = (groupItem: NavigationGroupItem<Feature, Field>) => {
-        const {featureValue, fieldValue} = this.props;
-        const modulesWithSelectablePermissions = groupItem.modules.map(this.renderNavigationModule).filter(_ => _);
-
-        if (modulesWithSelectablePermissions.length === 0) {
-            return;
-        }
-
-        const groupFeaturePermissions = this.getNavigationGroupFeaturePermissions(groupItem);
-        const groupFieldPermissions = this.getNavigationGroupFieldPermissions(groupItem);
-        const enabledPercentage = ArrayUtil.intersectionPercentage([...groupFeaturePermissions, ...groupFieldPermissions], [...featureValue, ...(fieldValue || [])]);
-
-        const titleNode = (
-            <Checkbox
-                value={enabledPercentage > 0}
-                indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
-                onChange={value => {
-                    this.triggerChangeEvent(groupFeaturePermissions, value, false);
-                    this.triggerChangeEvent(groupFieldPermissions, value, true);
-                }}
-            >
-                {groupItem.title}
-            </Checkbox>
-        );
-
-        return (
-            <Descriptions key={groupItem.title}>
-                <Descriptions.Item style={this.descriptionItemStyle} label={titleNode}>
-                    {modulesWithSelectablePermissions}
-                </Descriptions.Item>
-            </Descriptions>
-        );
-    };
-
-    render() {
-        const {navigationGroups, extraPermissions} = this.props;
-        return (
-            <div>
-                {navigationGroups.map(this.renderNavigationGroup)}
-                {extraPermissions && this.renderExtraPermission(extraPermissions)}
-            </div>
-        );
-    }
-}