@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/LocalImporter.tsx

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

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

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

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

package/src/core/Markdown/index.tsx

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

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

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

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

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

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

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

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

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