@pinnacle0/web-ui 0.3.23 → 0.3.26

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

@@ -1,58 +0,0 @@
-@import "../../css/variable.less";
-
-.g-admin-page {
-    margin: 12px;
-    padding: 15px;
-    background: #fff;
-
-    .g-admin-page-top-bar {
-        margin-bottom: 8px;
-    }
-
-    .g-admin-page-filter {
-        margin-bottom: 8px;
-
-        .expand-trigger {
-            &:hover {
-                color: @lib-main-blue;
-                cursor: pointer;
-            }
-
-            > .anticon {
-                margin-right: 3px;
-            }
-        }
-
-        > .expanded-area {
-            max-height: 0;
-            overflow: hidden;
-            transition: all ease 300ms;
-
-            &.expanded {
-                border-top: 1px solid @lib-border-gray;
-                margin-top: 5px;
-                max-height: 1000px;
-                padding-top: 10px;
-            }
-        }
-    }
-
-    .g-admin-page-summary {
-        margin-bottom: 8px;
-        background-color: #e6f7ff;
-        border: 1px solid #91d5ff;
-        font-size: 14px;
-        padding: 4px 12px;
-    }
-
-    .g-admin-page-save-bar {
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        > .right > button {
-            margin-left: 15px;
-        }
-    }
-}

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

package/src/admin/RichEditor/index.less

@@ -1,6 +0,0 @@
-// Overwrite global CSS
-.bf-modal-caption {
-    padding: 0 15px !important;
-    font-weight: bold;
-    font-size: 20px;
-}

package/src/admin/RichEditor/index.tsx

@@ -1,123 +0,0 @@
-import React from "react";
-import type {ControlType, EditorState, ImageControlType, MediaType} from "braft-editor";
-import BraftEditor from "braft-editor";
-import {LocaleUtil} from "../../util/LocaleUtil";
-import type {ControlledFormValue} from "../../internal/type";
-import type {UploaderProps} from "../../util/UploadUtil/type";
-import "braft-editor/dist/index.css";
-import "./index.less";
-import {UploadUtil} from "../../util/UploadUtil";
-
-/**
- * onChange/value is of the HTML content.
- * If the HTML content is only empty rows (e.g: pure <p/>), onChange also emit "".
- *
- * CAVEAT:
- * This component is storing the editor state internally (un-controlled).
- * The props.value only represents the initial value.
- * Because createEditorState must only be created only ONCE, in the constructor.
- * Therefore, we cannot create new editor state every time based on current props.value.
- *
- * Ref: https://www.yuque.com/braft-editor/be/lzwpnr#1bbbb204
- */
-export interface Props<SuccessResponseType, ErrorResponseType> extends ControlledFormValue<string>, UploaderProps<SuccessResponseType, ErrorResponseType> {
-    imageURLParser: (response: SuccessResponseType) => string;
-}
-
-interface State {
-    editorState: EditorState;
-}
-
-export class RichEditor<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>, State> {
-    static displayName = "RichEditor";
-
-    // API reference: https://www.yuque.com/braft-editor/be/gz44tn
-    private readonly editorControls: ControlType[] = [
-        "font-size",
-        "text-align",
-        "text-color",
-        "bold",
-        "italic",
-        "underline",
-        "strike-through",
-        "separator",
-        "list-ul",
-        "list-ol",
-        "separator",
-        "link",
-        "media",
-        "separator",
-        "remove-styles",
-    ];
-    private readonly imageControls: ImageControlType[] = [];
-    private readonly mediaConfig: MediaType = {
-        pasteImage: false,
-        accepts: {
-            image: "image/png,image/jpeg,image/gif,image/svg",
-            video: false,
-            audio: false,
-        },
-        externals: {
-            image: false,
-            audio: false,
-            video: false,
-            embed: false,
-        },
-        uploadFn: params => {
-            const {formField, uploadURL, imageURLParser, onUploadFailure, onUploadSuccess} = this.props;
-            const {file, success, progress} = params;
-
-            UploadUtil.createRequest({
-                uploadURL,
-                file,
-                formField,
-                onSuccess: (logEntry, response) => {
-                    const imageURL = imageURLParser(response);
-                    success({
-                        url: imageURL,
-                        meta: {
-                            id: imageURL,
-                            title: "",
-                            alt: "image",
-                            // Below are for video settings, not available here
-                            loop: true,
-                            autoPlay: true,
-                            controls: true,
-                            poster: "",
-                        },
-                    });
-                    onUploadSuccess?.(logEntry, response);
-                },
-                onError: onUploadFailure,
-                onProgress: progress,
-            });
-        },
-    };
-
-    constructor(props: Props<SuccessResponseType, ErrorResponseType>) {
-        super(props);
-        this.state = {editorState: BraftEditor.createEditorState(this.props.value)};
-    }
-
-    onChange = (editorState: EditorState) => {
-        this.setState({editorState});
-        const {onChange} = this.props;
-        const textContent = editorState.toText().trim();
-        onChange(textContent === "" ? "" : editorState.toHTML());
-    };
-
-    render() {
-        const {editorState} = this.state;
-        return (
-            <BraftEditor
-                language={LocaleUtil.current()}
-                controls={this.editorControls}
-                media={this.mediaConfig}
-                imageControls={this.imageControls}
-                value={editorState}
-                stripPastedStyles
-                onChange={this.onChange}
-            />
-        );
-    }
-}

package/src/core/Amount/AmountPercentage.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import type {Props as AmountProps} from "./index";
-import {Amount} from "./index";
-
-export interface Props extends Omit<AmountProps, "postfix" | "scale" | "value"> {
-    /**
-     * Value of display amount in decimal, e.g: 0.2 for 20%.
-     */
-    value: number | null | undefined;
-    /**
-     * Number of decimal points used for percentage values.
-     *
-     * To use 2 decimal points (eg 12.34%) in percentage values, `props.percentageScale` should be `2`.
-     * Must be an integer, otherwise throws an Error.
-     */
-    percentageScale: number;
-}
-
-export class AmountPercentage extends React.PureComponent<Props> {
-    static displayName = "AmountPercentage";
-
-    render() {
-        const {percentageScale, value, ...restProps} = this.props;
-        const percentageValue = value !== null && value !== undefined ? value * 100 : value;
-        return <Amount value={percentageValue} scale={percentageScale} postfix="%" {...restProps} />;
-    }
-}

package/src/core/Amount/index.less

@@ -1,52 +0,0 @@
-@import "../../css/variable.less";
-
-.g-amount {
-    display: inline-flex;
-    align-items: center;
-
-    &.bold * {
-        font-weight: bold;
-    }
-
-    &.del * {
-        text-decoration: line-through;
-    }
-
-    &.underline * {
-        text-decoration: underline;
-    }
-
-    &.del.underline * {
-        // Otherwise, only one `text-decoration` will overwrite each other
-        text-decoration: underline line-through;
-    }
-
-    &.color-highlight {
-        color: @lib-main-blue;
-    }
-
-    &.color-green {
-        color: @lib-main-green;
-    }
-
-    &.color-red {
-        color: @lib-main-red;
-    }
-
-    > .prefix {
-        display: inline-flex;
-        align-items: center;
-        margin-right: 2px;
-    }
-
-    > .postfix {
-        display: inline-flex;
-        align-items: center;
-        margin-left: 2px;
-    }
-
-    > .digits {
-        display: inline-flex;
-        align-items: center;
-    }
-}