@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/core/LocalImporter.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type {SafeReactChildren} from "../internal/type";
+import AntUpload from "antd/lib/upload";
+import {i18n} from "../internal/i18n/core";
+import {TextUtil} from "../internal/TextUtil";
+import {Spin} from "./Spin";
+import "antd/lib/upload/style";
+
+export interface Props {
+    type: "txt" | "csv";
+    onImport: (file: File) => Promise<void> | void;
+    children?: SafeReactChildren;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+
+interface State {
+    importing: boolean;
+}
+
+export class LocalImporter extends React.PureComponent<Props, State> {
+    static displayName = "LocalImporter";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {importing: false};
+    }
+
+    beforeUpload = async (file: File): Promise<false> => {
+        try {
+            this.setState({importing: true});
+            await this.props.onImport(file);
+        } finally {
+            this.setState({importing: false});
+        }
+
+        return false;
+    };
+
+    render() {
+        const {type, children, className, disabled, style} = this.props;
+        const {importing} = this.state;
+        const t = i18n();
+        return (
+            <AntUpload.Dragger
+                showUploadList={false}
+                multiple={false}
+                accept={type === "txt" ? ".txt" : ".csv"}
+                className={className}
+                disabled={disabled}
+                style={style}
+                height={Number(style?.height)}
+                beforeUpload={this.beforeUpload}
+            >
+                <Spin spinning={importing} size="small">
+                    {children || TextUtil.interpolate(t.localImporterHint, type)}
+                </Spin>
+            </AntUpload.Dragger>
+        );
+    }
+}

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

@@ -0,0 +1,5 @@
+.g-markdown {
+    > .line + .line {
+        margin-top: 6px;
+    }
+}

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

@@ -0,0 +1,57 @@
+@import "../../css/variable.less";
+
+.ant-modal {
+    .ant-modal-header {
+        background: @lib-background-gray;
+        padding: 12px 20px;
+
+        .ant-modal-title {
+            > .extra-title {
+                font-size: 13px;
+                font-weight: lighter;
+                margin-left: 15px;
+            }
+        }
+    }
+
+    .ant-modal-close {
+        color: #666;
+        position: absolute;
+        right: 0;
+        top: 0;
+        cursor: pointer;
+
+        .ant-modal-close-x {
+            font-size: 20px;
+            line-height: 47px;
+            height: 47px;
+            font-weight: bold;
+        }
+    }
+
+    .ant-modal-body {
+        padding: 0;
+
+        > .ant-spin-nested-loading {
+            > .ant-spin-container {
+                padding: 24px;
+            }
+        }
+    }
+
+    &.no-padding {
+        .ant-modal-body {
+            > .ant-spin-nested-loading {
+                > .ant-spin-container {
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+
+.ant-modal,
+.ant-modal-confirm-body .ant-modal-confirm-content,
+.ant-modal-confirm-body .ant-modal-confirm-title {
+    color: inherit;
+}

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

@@ -0,0 +1,11 @@
+.g-multiple-cascader-popup {
+    background: transparent;
+    box-shadow: none;
+
+    .ant-cascader-menu {
+        height: auto;
+        max-height: 300px;
+        border: 1px solid #d7d7d7;
+        background: #fff;
+    }
+}

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

@@ -0,0 +1,31 @@
+.g-mutable-table {
+    .operation {
+        vertical-align: middle;
+
+        button {
+            width: 26px;
+            height: 26px;
+            line-height: 24px;
+            font-size: 14px;
+            text-align: center;
+            border: 1px solid #ccc;
+            border-radius: 50%;
+            margin: 0 3px;
+            vertical-align: middle;
+
+            &:hover {
+                background-color: #202c3a;
+                border-color: #202c3a;
+                color: #fff;
+                cursor: pointer;
+            }
+
+            &[disabled] {
+                background: #eee;
+                border-color: #eee;
+                color: #ccc;
+                cursor: not-allowed;
+            }
+        }
+    }
+}