@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/admin/AdminPage/SaveBar.tsx

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

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

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

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

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

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

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

package/src/admin/RichEditor/index.tsx

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

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

@@ -0,0 +1,52 @@
+@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;
+    }
+}