@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/LocaleProvider.tsx

@@ -0,0 +1,31 @@
+import AntConfigProvider from "antd/lib/config-provider";
+import chineseLocale from "antd/lib/locale/zh_CN";
+import englishLocale from "antd/lib/locale/en_US";
+import React from "react";
+import type {SafeReactChildren} from "../internal/type";
+import type {Locale} from "../util/LocaleUtil";
+import {LocaleContext, LocaleUtil} from "../util/LocaleUtil";
+
+export interface Props {
+    locale: Locale | "auto";
+    children: SafeReactChildren;
+}
+
+export class LocaleProvider extends React.PureComponent<Props> {
+    static displayName = "LocaleProvider";
+
+    constructor(props: Props) {
+        super(props);
+        LocaleUtil.setInitial(props.locale);
+    }
+
+    render() {
+        const {children} = this.props;
+        const locale = LocaleUtil.current();
+        return (
+            <LocaleContext.Provider value={locale}>
+                <AntConfigProvider locale={locale === "zh" ? chineseLocale : englishLocale}>{children}</AntConfigProvider>
+            </LocaleContext.Provider>
+        );
+    }
+}

package/src/core/LocaleSelect.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {EnumSelect} from "./EnumSelect";
+import type {Locale} from "../util/LocaleUtil";
+import {LocaleUtil} from "../util/LocaleUtil";
+
+export interface Props {}
+
+export class LocaleSelect extends React.PureComponent<Props> {
+    static displayName = "LocaleSelect";
+
+    private readonly allLocales: Locale[] = ["zh", "en"];
+    private readonly selectStyle: React.CSSProperties = {width: 120};
+
+    translator = (locale: Locale): string => {
+        switch (locale) {
+            case "en":
+                return "English";
+            case "zh":
+                return "中文";
+        }
+    };
+
+    render() {
+        const currentLocale = LocaleUtil.current();
+        return (
+            <EnumSelect
+                list={this.allLocales}
+                translator={this.translator}
+                style={this.selectStyle}
+                value={currentLocale}
+                // Do not use onChange={LocaleUtil.change}, due to "this" issue
+                onChange={newLocale => LocaleUtil.change(newLocale)}
+            />
+        );
+    }
+}

package/src/core/Markdown/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import "./index.less";
+
+/**
+ * Currently, <Markdown> supports:
+ * - \n for new line, each line wrapped with <p/>.
+ * - `text` for emphasis, transform to <em>text</em>.
+ * - __text__ for boldness, transform to <b>text</b>.
+ *
+ * Nested usage not supported yet.
+ */
+export interface Props {
+    children: string;
+    style?: React.CSSProperties;
+}
+
+export class Markdown extends React.PureComponent<Props> {
+    static displayName = "Markdown";
+
+    renderBold = (content: string, index: number) => {
+        const splitContents = content.split("__");
+        return <React.Fragment key={index}>{splitContents.map((_, segmentIndex) => (segmentIndex % 2 === 1 ? <b key={"bold" + segmentIndex}>{_}</b> : _))}</React.Fragment>;
+    };
+
+    renderLine = (content: string, index: number) => {
+        const splitContents = content.split("`");
+        return (
+            <div className="line" key={index}>
+                {splitContents.map((_, segmentIndex) => (segmentIndex % 2 === 1 ? <em key={segmentIndex}>{_}</em> : this.renderBold(_, segmentIndex)))}
+            </div>
+        );
+    };
+
+    render() {
+        const {children, style} = this.props;
+        return (
+            <div className="g-markdown" style={style}>
+                {children.split("\n").map(this.renderLine)}
+            </div>
+        );
+    }
+}

package/src/core/Modal/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import AntModal from "antd/lib/modal";
+import {classNames} from "../../util/ClassNames";
+import {Spin} from "../Spin";
+import type {ModalProps} from "antd/lib/modal";
+import type {PickOptional, SafeReactChildren} from "../../internal/type";
+import "antd/lib/modal/style";
+import "./index.less";
+
+export interface Props extends ModalProps {
+    width: number | string; // Do not use "auto"
+    children: SafeReactChildren;
+    loading?: boolean;
+    addInnerPadding?: boolean;
+}
+
+export class Modal extends React.PureComponent<Props> {
+    static displayName = "Modal";
+    static defaultProps: PickOptional<Props> = {
+        centered: true,
+        visible: true,
+        footer: null,
+        maskClosable: false,
+        keyboard: false,
+        loading: false,
+        addInnerPadding: true,
+    };
+
+    render() {
+        const {children, loading, title, className, addInnerPadding, ...restProps} = this.props;
+        return (
+            <AntModal title={title} className={classNames(className, {"no-padding": !addInnerPadding})} {...restProps}>
+                <Spin spinning={loading || false}>{children}</Spin>
+            </AntModal>
+        );
+    }
+}

package/src/core/MultipleCascader/index.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import AntCascader from "antd/lib/cascader";
+import {classNames} from "../../util/ClassNames";
+import type {ControlledFormValue} from "../../internal/type";
+import type {DefaultOptionType} from "rc-cascader";
+import "antd/lib/cascader/style";
+import "./index.less";
+
+/**
+ * Attention:
+ * CascaderDataNode.value must be unique in the whole data tree.
+ */
+
+export interface CascaderDataNode<T extends string | number> {
+    label: string; // Label must be unique
+    value: T | Array<CascaderDataNode<T>>;
+    disabled?: boolean;
+}
+
+export interface BaseProps<T extends string | number> {
+    data: CascaderDataNode<T>[];
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+
+export interface Props<T extends string | number> extends BaseProps<T>, ControlledFormValue<T[]> {}
+
+export class MultipleCascader<T extends string | number> extends React.PureComponent<Props<T>> {
+    static displayName = "MultipleCascader";
+    static nonLeafPrefix = "@@NON_LEAF_";
+
+    getAntValue = (): (string | number)[][] => {
+        const data = this.getAntDataSource();
+        const value = this.props.value;
+        const getCascaderValues = (data: DefaultOptionType[], value: T): Array<string | number> => {
+            for (const item of data) {
+                if (item.value === value) {
+                    return [item.value];
+                } else if (item.children) {
+                    const result = [item.value!, ...getCascaderValues(item.children, value)];
+                    if (result.includes(value)) {
+                        return result;
+                    }
+                }
+            }
+            return [];
+        };
+
+        return value.map(_ => getCascaderValues(data, _));
+    };
+
+    getAntDataSource = (): DefaultOptionType[] => {
+        const getAntChildren = (list: Array<CascaderDataNode<T>>): DefaultOptionType[] => {
+            return list.map((node, index) => ({
+                label: node.label,
+                disabled: node.disabled,
+                value: Array.isArray(node.value) ? MultipleCascader.nonLeafPrefix + `${index}_` + node.label : node.value,
+                children: Array.isArray(node.value) && node.value.length > 0 ? getAntChildren(node.value) : undefined,
+            }));
+        };
+        return getAntChildren(this.props.data);
+    };
+
+    onChange = (antValue: (string | number)[][]) => {
+        const data = this.getAntDataSource();
+        const lastNodes = antValue.map(_ => _[_.length - 1]);
+        const branches = lastNodes.filter(_ => `${_}`.startsWith(MultipleCascader.nonLeafPrefix));
+        const leaves = lastNodes.filter(_ => !`${_}`.startsWith(MultipleCascader.nonLeafPrefix));
+
+        const recursion = (data: DefaultOptionType): (string | number)[] => {
+            if (data.children) {
+                return data.children.flatMap(recursion);
+            }
+            return [data.value!];
+        };
+        const getLeafValue = (data: DefaultOptionType[], value: string): (string | number)[] => {
+            for (const item of data) {
+                if (item.value === value) {
+                    return recursion(item);
+                } else if (item.children) {
+                    const result = getLeafValue(item.children, value);
+                    if (result.length) {
+                        return result;
+                    }
+                }
+            }
+            return [];
+        };
+
+        this.props.onChange([...leaves, ...branches.flatMap(_ => getLeafValue(data, _ as string))] as T[]);
+    };
+
+    render() {
+        const {placeholder = "", disabled, style, className} = this.props;
+        return (
+            <AntCascader
+                multiple
+                className={classNames("g-multiple-cascader", className)}
+                dropdownClassName="g-multiple-cascader-popup"
+                style={style}
+                value={this.getAntValue()}
+                onChange={this.onChange}
+                options={this.getAntDataSource()}
+                placeholder={placeholder}
+                disabled={disabled}
+                expandTrigger="hover"
+                allowClear
+                maxTagCount="responsive"
+            />
+        );
+    }
+}

package/src/core/MultipleEnumSelect.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {Select} from "./Select";
+import type {ControlledFormValue} from "../internal/type";
+
+interface Props<Enum extends string | number> extends ControlledFormValue<Enum[]> {
+    list: Enum[];
+    translator?: (enumValue: Enum) => string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+
+export class MultipleEnumSelect<Enum extends string | number> extends React.PureComponent<Props<Enum>> {
+    static displayName = "MultipleEnumSelect";
+
+    getSelectOptions = () => {
+        const {list, translator} = this.props;
+        return list.map(value => ({
+            value,
+            label: translator ? translator(value) : value.toString(),
+        }));
+    };
+
+    render() {
+        const {disabled, value, onChange, style} = this.props;
+        // antd: using options prop will get better perf than jsx definition
+        return <Select mode="multiple" value={value} onChange={onChange} disabled={disabled} style={style} options={this.getSelectOptions()} optionFilterProp="label" />;
+    }
+}

package/src/core/MultipleSelector/TablePopover.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type {ControlledFormValue, StringKey} from "../../internal/type";
+import type {TableColumns, TableRowSelection} from "../Table";
+import {Table} from "../Table";
+
+interface Props<RowType extends object> extends ControlledFormValue<RowType[]> {
+    dataSource: RowType[];
+    columns: TableColumns<RowType>;
+    rowKey: StringKey<RowType> | ((record: RowType) => string);
+    scrollY: number;
+    children?: (table: React.ReactElement) => React.ReactElement;
+    onFirstRender?: () => void;
+    selectionDisabled?: boolean;
+}
+
+export class TablePopover<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName = "TablePopover";
+
+    componentDidMount() {
+        this.props.onFirstRender?.();
+    }
+
+    rowKey = (item: RowType): string => {
+        const {rowKey} = this.props;
+        return typeof rowKey === "function" ? rowKey(item) : (item[rowKey] as any);
+    };
+
+    onChange = (newSelectedKeys: string[]) => {
+        const {value, dataSource, onChange} = this.props;
+        const prevSelectedKeys = value.map(this.rowKey);
+        const newSelectedItems = newSelectedKeys
+            .filter(_ => !prevSelectedKeys.includes(_))
+            // By Ant Design, Parameter `newSelectedKeys` must exist in current data source
+            .map(key => dataSource.find(_ => this.rowKey(_) === key)!);
+        if (newSelectedItems.length > 0) {
+            // Select
+            onChange([...value, ...newSelectedItems]);
+        } else {
+            // Deselect
+            const dataSourceKeys = dataSource.map(this.rowKey);
+            const deletedItems = value.filter(_ => {
+                const key = this.rowKey(_);
+                return !newSelectedKeys.includes(key) && dataSourceKeys.includes(key);
+            });
+            const withoutDeletedItems = value.filter(_ => !deletedItems.includes(_));
+            onChange(withoutDeletedItems);
+        }
+    };
+
+    render() {
+        const {dataSource, rowKey, columns, children, selectionDisabled, scrollY, value} = this.props;
+        const selectedRowKeys = value.map(this.rowKey);
+        const rowSelection: TableRowSelection<RowType> | undefined = selectionDisabled
+            ? undefined
+            : {
+                  selectedRowKeys,
+                  onChange: this.onChange as (_: Array<string | number>) => void,
+              };
+        const table = <Table rowSelection={rowSelection} size="small" dataSource={dataSource} columns={columns} rowKey={rowKey} scrollY={scrollY} scrollX="none" />;
+        return <div className="g-multiple-selector-table-popover">{children ? children(table) : table}</div>;
+    }
+}

package/src/core/MultipleSelector/index.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import type {TableColumns} from "../Table";
+import {Popover} from "../Popover";
+import {Button} from "../Button";
+import {Tags} from "../Tags";
+import type {TooltipPlacement} from "../Tooltip";
+import {i18n} from "../../internal/i18n/core";
+import type {ControlledFormValue, StringKey} from "../../internal/type";
+import {TextUtil} from "../../internal/TextUtil";
+import {TablePopover} from "./TablePopover";
+
+export interface Props<RowType extends object> extends ControlledFormValue<RowType[]> {
+    dataSource: RowType[];
+    rowKey: StringKey<RowType> | ((record: RowType, index?: number) => string);
+    tableColumns: TableColumns<RowType>;
+    /**
+     * If string key, it will render each value as a closable tag with key as label.
+     * If function returning string[] (must be same length with values), it will render as closable tags.
+     * If function returning React Element, it will render the element itself.
+     * If undefined, it will render nothing.
+     */
+    renderTags?: StringKey<RowType> | ((values: RowType[]) => React.ReactElement | string[]);
+    renderPopover?: (table: React.ReactElement) => React.ReactElement;
+    renderButtonText?: string | ((selectedCount: number) => string);
+    popoverPlacement?: TooltipPlacement;
+    popoverClassName?: string;
+    popoverStyle?: React.CSSProperties;
+    onPopoverFirstRender?: () => void;
+    disabled?: "button" | "table";
+    scrollY?: number;
+}
+
+export class MultipleSelector<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName = "MultipleSelector";
+
+    buttonText = (): string => {
+        const {value, renderButtonText} = this.props;
+        const t = i18n();
+        const length = value.length;
+        if (renderButtonText) {
+            return typeof renderButtonText === "string" ? renderButtonText : renderButtonText(length);
+        } else {
+            return value.length === 0 ? t.select : TextUtil.interpolate(t.edit, value.length.toString());
+        }
+    };
+
+    onClose = (index: number) => {
+        const {value, onChange} = this.props;
+        const newValue = [...value];
+        newValue.splice(index, 1);
+        onChange(newValue);
+    };
+
+    renderSelectedAsTags = (labels: string[]) => {
+        const {disabled} = this.props;
+        return (
+            <div className="g-multiple-selector-selected-tags">
+                <Tags maxWidth={600} color="blue" items={labels} onClose={disabled ? undefined : this.onClose} />
+            </div>
+        );
+    };
+
+    renderSelectedItems = () => {
+        const {value, renderTags} = this.props;
+        if (renderTags) {
+            if (typeof renderTags === "function") {
+                const renderedResult = renderTags(value);
+                return Array.isArray(renderedResult) ? this.renderSelectedAsTags(renderedResult) : renderedResult;
+            } else {
+                return this.renderSelectedAsTags(value.map(_ => _[renderTags] as any));
+            }
+        }
+    };
+
+    renderPopover = () => {
+        const {renderPopover, value, onChange, disabled, onPopoverFirstRender, dataSource, tableColumns, rowKey, scrollY} = this.props;
+        return (
+            <TablePopover
+                dataSource={dataSource}
+                columns={tableColumns}
+                rowKey={rowKey}
+                value={value}
+                onChange={onChange}
+                onFirstRender={onPopoverFirstRender}
+                selectionDisabled={disabled === "table"}
+                scrollY={scrollY || 500}
+            >
+                {renderPopover}
+            </TablePopover>
+        );
+    };
+
+    render() {
+        const {popoverPlacement, disabled, popoverClassName, popoverStyle} = this.props;
+        return (
+            <div className="g-multiple-selector">
+                {this.renderSelectedItems()}
+                <Popover placement={popoverPlacement || "bottomLeft"} trigger="click" content={this.renderPopover()} overlayClassName={popoverClassName} overlayStyle={popoverStyle}>
+                    <Button color="wire-frame" disabled={disabled === "button"}>
+                        {this.buttonText()}
+                    </Button>
+                </Popover>
+            </div>
+        );
+    }
+}

package/src/core/MutableTable/index.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import type {TableColumns} from "../Table";
+import {Table} from "../Table";
+import type {PickOptional} from "../../internal/type";
+import {i18n} from "../../internal/i18n/core";
+import "./index.less";
+
+/**
+ * A MutableTable is a table supporting add/minus rows.
+ * The table should contain at least 1 row.
+ * If props.nextRow is undefined, the (+) button should be disabled.
+ *
+ * Attention:
+ * dataSource must not be empty array.
+ */
+
+export interface SequenceColumnConfig {
+    title: string;
+    renderer: (index: number) => string;
+    width: number;
+    align: "left" | "center" | "right";
+}
+
+export interface Props<RowType extends object> {
+    dataSource: RowType[];
+    columns: TableColumns<RowType>;
+    onChange?: (values: RowType[]) => void;
+    onRowCountChange?: (type: "add-row" | "remove-row") => void;
+    nextRow?: RowType | true; // If true, onRowCountChange will be triggered when + is clicked, instead of onChange
+    fixedRowCount?: number;
+    shouldRenderIfUpdate?: any;
+    sequenceColumn?: Partial<SequenceColumnConfig> | "default";
+    scrollX?: "max-content" | "none" | number;
+    scrollY?: number;
+    bordered?: boolean;
+    disabled?: boolean;
+}
+
+export class MutableTable<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName = "MutableTable";
+
+    static defaultProps: PickOptional<Props<any>> = {
+        scrollX: "none",
+    };
+
+    private readonly ref: React.RefObject<HTMLDivElement>;
+    private readonly defaultSequenceColumn: SequenceColumnConfig = {
+        title: i18n().sequence,
+        renderer: (index: number) => (index + 1).toString(),
+        width: 90,
+        align: "center",
+    };
+
+    constructor(props: Props<RowType>) {
+        super(props);
+        this.ref = React.createRef();
+    }
+
+    componentDidUpdate(prevProps: Props<RowType>) {
+        if (prevProps.dataSource.length < this.props.dataSource.length && Number(this.props.scrollY) > 0) {
+            const tableContainerRef = this.ref.current!.querySelector(".ant-table-body");
+            if (tableContainerRef) {
+                tableContainerRef.scrollTop = tableContainerRef.scrollHeight;
+            }
+        }
+    }
+
+    getColumns = (): TableColumns<RowType> => {
+        const {columns, dataSource, nextRow, fixedRowCount, scrollX, sequenceColumn, disabled} = this.props;
+        const newColumns = [...columns];
+        const t = i18n();
+        if (sequenceColumn) {
+            const finalSequenceColumn = sequenceColumn === "default" ? this.defaultSequenceColumn : {...this.defaultSequenceColumn, ...sequenceColumn};
+            newColumns.unshift({
+                title: finalSequenceColumn.title,
+                width: finalSequenceColumn.width,
+                align: finalSequenceColumn.align,
+                fixed: scrollX === "none" ? undefined : "left",
+                renderData: (_, index) => finalSequenceColumn.renderer(index),
+            });
+        }
+        newColumns.push({
+            title: t.action,
+            width: 100,
+            align: "center",
+            fixed: scrollX === "none" ? undefined : "right",
+            renderData: (_, index) => {
+                const dataSourceLength = dataSource.length;
+                return (
+                    <div className="operation">
+                        {(!fixedRowCount || fixedRowCount <= index) && (
+                            <button type="button" disabled={disabled || dataSourceLength === 1} onClick={() => this.onDeleteRow(index)}>
+                                &#65293;
+                            </button>
+                        )}
+                        {index === dataSourceLength - 1 && (
+                            <button disabled={disabled || nextRow === undefined} type="button" onClick={() => this.onAddRow(nextRow!)}>
+                                &#xff0b;
+                            </button>
+                        )}
+                    </div>
+                );
+            },
+        });
+        return newColumns;
+    };
+
+    onDeleteRow = (index: number) => {
+        const {dataSource, onChange, onRowCountChange} = this.props;
+        if (onRowCountChange) {
+            onRowCountChange("remove-row");
+        }
+
+        if (onChange) {
+            const newData = [...dataSource];
+            newData.splice(index, 1);
+            onChange(newData);
+        }
+    };
+
+    onAddRow = (nextRow: RowType | true) => {
+        const {dataSource, onChange, onRowCountChange} = this.props;
+        if (onRowCountChange) {
+            onRowCountChange("add-row");
+        }
+
+        if (nextRow !== true && onChange) {
+            const newData = [...dataSource];
+            newData.push(nextRow);
+            onChange(newData);
+        }
+    };
+
+    render() {
+        const {dataSource, shouldRenderIfUpdate, scrollX, scrollY, bordered} = this.props;
+        return (
+            <div ref={this.ref}>
+                <Table
+                    className="g-mutable-table"
+                    scrollX={scrollX}
+                    scrollY={scrollY}
+                    rowKey="index"
+                    columns={this.getColumns()}
+                    dataSource={dataSource}
+                    shouldRenderIfUpdate={shouldRenderIfUpdate}
+                    bordered={bordered}
+                />
+            </div>
+        );
+    }
+}