@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/RelativeTime.tsx

@@ -0,0 +1,59 @@
+import moment from "moment";
+import React from "react";
+import {LocaleUtil} from "../util/LocaleUtil";
+
+export interface Props {
+    date: Date;
+}
+
+interface State {
+    elapsedText: string;
+}
+
+export class RelativeTime extends React.PureComponent<Props, State> {
+    static displayName = "RelativeTime";
+
+    private repaintTimeout: number | undefined;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            elapsedText: "-",
+        };
+    }
+
+    componentDidMount() {
+        this.repaint();
+    }
+
+    componentDidUpdate(prevProps: Readonly<Props>) {
+        if (prevProps.date !== this.props.date) {
+            this.repaint();
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.repaintTimeout);
+    }
+
+    repaint = () => {
+        clearTimeout(this.repaintTimeout);
+
+        const momentLocale = LocaleUtil.current() === "zh" ? "zh-cn" : "en";
+        const propsMoment = moment(this.props.date).locale(momentLocale);
+        const currentMoment = moment();
+        const elapsedText = propsMoment.from(currentMoment);
+        this.setState({elapsedText});
+
+        // Moment threshold uses 45 minutes for "an hour ago" and 45 seconds for "a minute ago".
+        // Repaint after 15 minutes / seconds interval should be good enough for now.
+        // See: https://momentjs.com/docs/#/displaying/fromnow/
+        const isAnHourAgo = Date.now() - this.props.date.getTime() > 3600 * 1000;
+        const timeoutDuration = isAnHourAgo ? 15 * 1000 * 60 : 15 * 1000;
+        this.repaintTimeout = window.setTimeout(this.repaint, timeoutDuration);
+    };
+
+    render() {
+        return this.state.elapsedText;
+    }
+}

package/src/core/ResizeObserver.tsx

@@ -0,0 +1,2 @@
+export {default as ResizeObserver} from "rc-resize-observer";
+export type {OnResize, ResizeObserverProps, SizeInfo} from "rc-resize-observer";

package/src/core/SearchableSelect.tsx

@@ -0,0 +1,17 @@
+import type {Props as SelectProps, SelectValue, SelectOptionProps} from "./Select";
+import {Select} from "./Select";
+import React from "react";
+
+export interface Props<ValueType extends SelectValue> extends Omit<SelectProps<ValueType>, "optionFilterProp" | "showSearch" | "optionLabelProp" | "options"> {
+    options?: Array<{value: string; label: string}>;
+}
+
+export class SearchableSelect<ValueType extends SelectValue> extends React.PureComponent<Props<ValueType>> {
+    static displayName = "SearchableSelect";
+
+    static Option = Select.Option as React.ComponentType<SelectOptionProps & {children: string}>;
+
+    render() {
+        return <Select optionFilterProp={this.props.options ? "label" : "children"} showSearch {...this.props} />;
+    }
+}

package/src/core/Select/index.tsx

@@ -0,0 +1,25 @@
+import type {SelectProps, SelectValue} from "antd/lib/select";
+import AntSelect from "antd/lib/select";
+import type {OptionProps as SelectOptionProps} from "rc-select/lib/Option";
+import type {DefaultOptionType} from "rc-select/lib/Select";
+import React from "react";
+import "antd/lib/select/style";
+import "./index.less";
+
+export interface Props<ValueType extends SelectValue> extends Omit<SelectProps<ValueType>, "options"> {
+    options?: Array<DefaultOptionType>;
+}
+
+export class Select<ValueType extends SelectValue> extends React.PureComponent<Props<ValueType>> {
+    static displayName = "Select";
+
+    static Option = AntSelect.Option;
+
+    static OptGroup = AntSelect.OptGroup;
+
+    render() {
+        return <AntSelect {...this.props} />;
+    }
+}
+
+export type {SelectValue, SelectOptionProps};

package/src/core/SignedAmountInput.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {NumberInput} from "./NumberInput";
+import {Input} from "./Input";
+import {Select} from "./Select";
+import type {ControlledFormValue} from "../internal/type";
+import {i18n} from "../internal/i18n/core";
+
+export interface SignedAmountInputData {
+    isIncrease: boolean;
+    amount: number | null; // Always store positive number (or null for empty input), keep same as UI
+}
+
+export interface Props extends ControlledFormValue<SignedAmountInputData> {
+    labels: [string, string];
+    onSignChange?: (isIncrease: boolean) => void;
+    scale?: number; // Default: 2
+    max?: number;
+}
+
+export class SignedAmountInput extends React.PureComponent<Props> {
+    static displayName = "SignedAmountInput";
+
+    private readonly selectStyle: React.CSSProperties = {width: 96};
+    private readonly inputStyle: React.CSSProperties = {borderTopLeftRadius: 0, borderBottomLeftRadius: 0};
+
+    onInputChange = (amount: number | null) => {
+        const {value, onChange} = this.props;
+        onChange({isIncrease: value.isIncrease, amount});
+    };
+
+    onSelectChange = (newValue: "+" | "-") => {
+        const isIncrease = newValue === "+";
+        const {value, onChange, onSignChange} = this.props;
+        onChange({isIncrease, amount: value.amount});
+        if (onSignChange) {
+            onSignChange(isIncrease);
+        }
+    };
+
+    render() {
+        const {value, labels, scale, max} = this.props;
+        const t = i18n();
+        const safeScale = scale || 2;
+        const min = Number(Math.pow(0.1, safeScale).toFixed(safeScale));
+        return (
+            <Input.Group compact>
+                <Select onChange={this.onSelectChange} value={value.isIncrease ? "+" : "-"} style={this.selectStyle}>
+                    <Select.Option key="+" value="+">
+                        {labels[0] || t.depositPositive + " (+)"}
+                    </Select.Option>
+                    <Select.Option key="-" value="-">
+                        {labels[1] || t.depositNegative + " (-)"}
+                    </Select.Option>
+                </Select>
+                <NumberInput allowNull value={value.amount} min={min} max={max} scale={scale} onChange={this.onInputChange} inputStyle={this.inputStyle} />
+            </Input.Group>
+        );
+    }
+}

package/src/core/Skeleton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import type {SkeletonProps} from "antd/lib/skeleton";
+import AntSkeleton from "antd/lib/skeleton";
+import "antd/lib/skeleton/style";
+
+export interface Props extends SkeletonProps {}
+
+export class Skeleton extends React.PureComponent<Props> {
+    static displayName = "Skeleton";
+
+    render() {
+        return <AntSkeleton {...this.props} />;
+    }
+}

package/src/core/Slider/RangeSlider.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type {SliderRangeProps} from "antd/lib/slider";
+import AntSlider from "antd/lib/slider";
+import type {ControlledFormValue} from "../../internal/type";
+
+interface RangeProps extends Omit<SliderRangeProps, "range" | "value" | "onChange">, ControlledFormValue<[number, number]> {
+    draggable?: boolean;
+}
+
+export class RangeSlider extends React.PureComponent<RangeProps> {
+    static displayName = "RangeSlider";
+
+    render() {
+        const {draggable, ...rest} = this.props;
+        return <AntSlider range={{draggableTrack: draggable}} {...rest} />;
+    }
+}

package/src/core/Slider/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import AntSlider from "antd/lib/slider";
+import {classNames} from "../../util/ClassNames";
+import {Button} from "../Button";
+import {RangeSlider} from "./RangeSlider";
+import type {SliderSingleProps} from "antd/lib/slider";
+import type {ControlledFormValue} from "../../internal/type";
+import "antd/lib/slider/style";
+import "./index.less";
+
+interface Props extends Omit<SliderSingleProps, "range" | "value" | "onChange">, ControlledFormValue<number> {
+    showButton?: boolean;
+}
+
+export class Slider extends React.PureComponent<Props> {
+    static displayName = "Slider";
+    static Range = RangeSlider;
+
+    onChange = (newValue: number) => {
+        const {min, max, onChange} = this.props;
+        if (max && newValue > max) {
+            onChange(max);
+        } else if (min && newValue < min) {
+            onChange(min);
+        } else {
+            onChange(newValue);
+        }
+    };
+
+    render() {
+        const {showButton, onChange, value, step, className, ...rest} = this.props;
+        const safeStep = step || 1;
+
+        return (
+            <span className={classNames("g-slider", className)}>
+                {showButton && (
+                    <Button className="decrease-button" onClick={() => this.onChange(value - safeStep)}>
+                        <span>{"<"}</span>
+                    </Button>
+                )}
+                <AntSlider range={false} value={value} onChange={this.onChange} step={safeStep} {...rest} />
+                {showButton && (
+                    <Button className="increase-button" onClick={() => this.onChange(value + safeStep)}>
+                        <span>{">"}</span>
+                    </Button>
+                )}
+            </span>
+        );
+    }
+}

package/src/core/Space.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import type {SpaceProps} from "antd/lib/space";
+import AntSpace from "antd/lib/space";
+import "antd/lib/space/style";
+
+interface Props extends SpaceProps {}
+
+export class Space extends React.PureComponent<Props> {
+    static displayName = "Space";
+
+    render() {
+        return <AntSpace {...this.props} />;
+    }
+}

package/src/core/Spin.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import AntSpin from "antd/lib/spin";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import type {SpinProps as AntSpinProps, SpinSize as AntSpinSize, SpinIndicator as AntSpinIndicator} from "antd/lib/spin";
+import "antd/lib/spin/style";
+
+export interface Props extends Omit<AntSpinProps, "spinning"> {
+    spinning: boolean;
+}
+
+export class Spin extends React.PureComponent<Props> {
+    static displayName = "Spin";
+
+    render() {
+        const {spinning, children, indicator, ...restProps} = this.props;
+        return (
+            <AntSpin spinning={spinning} indicator={indicator || <LoadingOutlined />} {...restProps}>
+                {children}
+            </AntSpin>
+        );
+    }
+}
+
+export type SpinSize = AntSpinSize;
+export type SpinIndicator = AntSpinIndicator;

package/src/core/StepFormContainer/index.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {i18n} from "../../internal/i18n/core";
+import {classNames} from "../../util/ClassNames";
+import {Button} from "../Button";
+import {Form} from "../Form";
+import {Space} from "../Space";
+import {Steps} from "../Steps";
+import type {SafeReactChild} from "../../internal/type";
+import "./index.less";
+
+export interface StepItem {
+    title: string;
+    content: SafeReactChild;
+    description?: string;
+}
+
+export interface Props {
+    currentStep: number;
+    steps: StepItem[];
+    onStepChange: (step: number) => void;
+    onFinish: () => void;
+    stepLabelPlacement?: "horizontal" | "vertical"; // Default: horizontal
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    formLayout?: "horizontal" | "vertical";
+    buttonRenderer?: (prevButton: React.ReactElement, nextButton: React.ReactElement) => React.ReactElement;
+}
+
+export class StepFormContainer extends React.PureComponent<Props> {
+    static displayName = "StepFormContainer";
+
+    goToPrevStep = () => this.props.onStepChange(this.props.currentStep - 1);
+
+    goToNextStep = () => this.props.onStepChange(this.props.currentStep + 1);
+
+    renderButtons = (submitButton: React.ReactElement, isValidating: boolean) => {
+        const {currentStep, buttonRenderer = (prevButton, nextButton) => (currentStep > 0 ? [prevButton, nextButton] : nextButton)} = this.props;
+        const t = i18n();
+        const prevButton = (
+            <Button color="wire-frame" onClick={this.goToPrevStep} disabled={isValidating} key="prevButton">
+                {t.prevStep}
+            </Button>
+        );
+        return <Space>{buttonRenderer(prevButton, submitButton)}</Space>;
+    };
+
+    render() {
+        const {stepLabelPlacement, formLayout, currentStep, steps, onFinish, style, className, id} = this.props;
+        const t = i18n();
+        const nextButtonText = currentStep !== steps.length - 1 ? t.nextStep : t.finish;
+
+        return (
+            <div className={classNames("g-step-form-container", className)} id={id} style={style}>
+                <Steps current={currentStep} labelPlacement={stepLabelPlacement}>
+                    {steps.map((_, key) => (
+                        <Steps.Step key={key} title={_.title} description={_.description} />
+                    ))}
+                </Steps>
+                <Form layout={formLayout} onFinish={currentStep < steps.length - 1 ? this.goToNextStep : onFinish} buttonText={nextButtonText} buttonRenderer={this.renderButtons}>
+                    {steps[currentStep].content}
+                </Form>
+            </div>
+        );
+    }
+}

package/src/core/Steps/index.tsx

@@ -0,0 +1,17 @@
+import type {StepsProps} from "antd/lib/steps";
+import AntSteps from "antd/lib/steps";
+import React from "react";
+import "antd/lib/steps/style";
+import "./index.less";
+
+export interface Props extends StepsProps {}
+
+export class Steps extends React.PureComponent<Props> {
+    static displayName = "Steps";
+
+    static Step = AntSteps.Step;
+
+    render() {
+        return <AntSteps {...this.props} />;
+    }
+}

package/src/core/Table/index.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import type {ColumnProps as AntColumnsProps, TableProps as AntTableProps} from "antd/lib/table";
+import AntTable from "antd/lib/table";
+import type {TableRowSelection} from "antd/lib/table/interface";
+import FileSearchOutlined from "@ant-design/icons/FileSearchOutlined";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import SettingOutlined from "@ant-design/icons/SettingOutlined";
+import type {PickOptional, SafeReactChild, SafeReactChildren, StringKey} from "../../internal/type";
+import {i18n} from "../../internal/i18n/core";
+import type {GetComponentProps, RenderedCell} from "rc-table/lib/interface";
+import {Checkbox} from "../Checkbox";
+import {Popover} from "../Popover";
+import {ArrayUtil} from "../../internal/ArrayUtil";
+import {LocalStorageUtil} from "../../util/LocalStorageUtil";
+import "antd/lib/table/style";
+import "./index.less";
+
+enum SortOrder {
+    DESC = "DESC",
+    ASC = "ASC",
+}
+
+export interface TableColumn<RowType extends object, OrderByFieldType = undefined> {
+    title: React.ReactElement | React.ReactChild;
+    renderData: (record: RowType, index: number) => SafeReactChildren | RenderedCell<RowType> | undefined; // Using name render leads to type incompatibility
+    align?: "left" | "right" | "center";
+    colSpan?: number;
+    width?: string | number;
+    className?: string;
+    fixed?: "left" | "right";
+    sortField?: OrderByFieldType | true; // True is used for only 1 columns sorting
+    onHeaderClick?: () => void;
+    display?: "default" | "hidden";
+    customizedKey?: string;
+    onCell?: GetComponentProps<RowType>;
+}
+
+export type TableColumns<RowType extends object, OrderByFieldType = undefined> = Array<TableColumn<RowType, OrderByFieldType>>;
+
+export interface TableSorter<OrderByFieldType = undefined> {
+    currentOrder: SortOrder;
+    onSortChange: (sortOrder: SortOrder, orderBy: OrderByFieldType | undefined) => void;
+    currentOrderBy?: OrderByFieldType; // This may be undefined if the table supports only 1 sort field
+}
+
+export interface TableProps<RowType extends object, OrderByFieldType> extends Omit<AntTableProps<RowType>, "onRow" | "scroll" | "locale"> {
+    columns: TableColumns<RowType, OrderByFieldType>;
+    dataSource: RowType[];
+    /**
+     * Attention:
+     * Use {rowKey: "index"} only if you are certain that the data source is immutable.
+     */
+    rowKey: StringKey<RowType> | ((record: RowType, index?: number) => string) | "index";
+    onRowClick?: (record: RowType, index?: number) => void;
+    scrollX?: "max-content" | "none" | number;
+    scrollY?: number;
+    loading?: boolean;
+    // if emptyPlaceholder is provided, emptyIcon and emptyText will be ignored
+    emptyPlaceholder?: SafeReactChild;
+    emptyIcon?: SafeReactChild;
+    emptyText?: string;
+    sortConfig?: TableSorter<OrderByFieldType>;
+    /**
+     * Just adding to props, without any usage, so that it could trigger re-render when it changes.
+     * A similar API is: https://facebook.github.io/react-native/docs/flatlist#extradata
+     */
+    shouldRenderIfUpdate?: any;
+    /**
+     * key for column customization
+     */
+    customizedStorageKey?: string;
+}
+
+interface State {
+    customizationConfig: {[key: string]: boolean};
+}
+
+export class Table<RowType extends object, OrderByFieldType> extends React.PureComponent<TableProps<RowType, OrderByFieldType>, State> {
+    static displayName = "Table";
+    static defaultProps: PickOptional<TableProps<any, any>> = {
+        scrollX: "max-content",
+    };
+
+    private readonly emptyPlaceHolderContainerStyle: React.CSSProperties = {padding: "50px 0"};
+    private readonly emptyPlaceHolderIconStyle: React.CSSProperties = {display: "block", fontSize: 50, marginBottom: 20};
+    private readonly settingIconContainerStyle: React.CSSProperties = {display: "flex", justifyContent: "flex-end", marginBottom: "7px", marginRight: "5px"};
+    private readonly settingIconStyle: React.CSSProperties = {fontSize: "20px"};
+    private readonly storageKey = `table-customization-config:${this.props.customizedStorageKey || location.pathname}`;
+    private readonly canCustomized: boolean;
+
+    constructor(props: TableProps<RowType, OrderByFieldType>) {
+        super(props);
+        const columnsCustomizedKeyList = ArrayUtil.compactMap(props.columns, _ => _.customizedKey || null);
+        const defaultConfig = ArrayUtil.toObject(columnsCustomizedKeyList, key => [key, true]);
+        const savedConfig = LocalStorageUtil.getObject(this.storageKey, defaultConfig, item => columnsCustomizedKeyList.some(_ => item[_] !== undefined));
+
+        this.canCustomized = Object.keys(defaultConfig).length > 0;
+        this.state = {customizationConfig: savedConfig};
+    }
+
+    hasUniqueSortingColumn = () => this.props.columns.some(_ => _.sortField === true);
+
+    rowKeyByIndex = (record: RowType) => this.props.dataSource.indexOf(record);
+
+    transformColumns = (column: TableColumn<RowType, OrderByFieldType>, index: number): AntColumnsProps<RowType> => {
+        const {renderData, onHeaderClick, ...restColumnProps} = column;
+        return {
+            // Ant Table requires key when enabling sorting, using column index here
+            key: index.toString(),
+            onHeaderCell: onHeaderClick ? () => ({onClick: onHeaderClick}) : undefined,
+            render: (data: any, record: RowType, index: number) => renderData(record, index),
+            ...restColumnProps,
+        };
+    };
+
+    onCustomizationConfigChange = (value: boolean, key: string) => {
+        const newConfig = {...this.state.customizationConfig, [key]: value};
+        this.setState({customizationConfig: newConfig});
+        LocalStorageUtil.setObject(this.storageKey, newConfig);
+    };
+
+    onSortChange = (_1: any, _2: any, sorter: {} | {order: "descend" | "ascend"; column: TableColumn<RowType, OrderByFieldType>}) => {
+        const {sortConfig} = this.props;
+        if (sortConfig) {
+            if (!("column" in sorter && sorter.column !== undefined) || !("sortField" in sorter.column) || this.hasUniqueSortingColumn()) {
+                // AntD sorter here may be {}, if clicking on the header 3rd time (ASC -> DESC -> undefined);
+                sortConfig.onSortChange(sortConfig.currentOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC, sortConfig.currentOrderBy);
+            } else {
+                const sortField = sorter.column.sortField as OrderByFieldType;
+                sortConfig.onSortChange(sorter.order === "ascend" ? SortOrder.ASC : SortOrder.DESC, sortField);
+            }
+        }
+    };
+
+    onRow = (record: RowType, index?: number) => {
+        const {onRowClick} = this.props;
+        return onRowClick
+            ? {
+                  onClick: () => onRowClick(record, index),
+              }
+            : {};
+    };
+
+    renderPopoverContent = () => {
+        const {columns} = this.props;
+        const {customizationConfig} = this.state;
+        return columns
+            .filter(_ => _.customizedKey && _.display !== "hidden")
+            .map((_, index) => (
+                <div key={index}>
+                    <Checkbox value={customizationConfig[_.customizedKey!] !== false} onChange={checked => this.onCustomizationConfigChange(checked, _.customizedKey!)}>
+                        {_.title}
+                    </Checkbox>
+                </div>
+            ));
+    };
+
+    render() {
+        // Exclude onRowClick from restProps, because onRowClick also exists in Ant Table props, which is depreciated though
+        const {sortConfig, loading, columns, onRowClick, rowKey, scrollX, scrollY, emptyPlaceholder, emptyIcon, emptyText, ...restProps} = this.props;
+        const t = i18n();
+        const emptyTextNode = loading ? (
+            <div />
+        ) : (
+            <div style={this.emptyPlaceHolderContainerStyle}>
+                {emptyPlaceholder || (
+                    <React.Fragment>
+                        {emptyIcon || <FileSearchOutlined style={this.emptyPlaceHolderIconStyle} />}
+                        <h2>{emptyText || t.emptyData}</h2>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+
+        const filteredColumns = columns.filter(_ => _.display !== "hidden" && (!_.customizedKey || this.state.customizationConfig[_.customizedKey] !== false));
+        let tableColumns: Array<AntColumnsProps<RowType>>;
+        if (sortConfig) {
+            const sortOrder: "ascend" | "descend" = sortConfig.currentOrder === SortOrder.ASC ? "ascend" : "descend";
+            tableColumns = filteredColumns.map((column: TableColumn<RowType, OrderByFieldType>, index: number): AntColumnsProps<RowType> => {
+                if (column.sortField) {
+                    const isSortingColumn = column.sortField === true || sortConfig.currentOrderBy === column.sortField;
+                    return {
+                        ...this.transformColumns(column, index),
+                        sorter: true,
+                        sortOrder: isSortingColumn ? sortOrder : null,
+                    };
+                } else {
+                    return this.transformColumns(column, index);
+                }
+            });
+        } else {
+            tableColumns = filteredColumns.map(this.transformColumns);
+        }
+
+        return (
+            <React.Fragment>
+                {this.canCustomized && (
+                    <div style={this.settingIconContainerStyle}>
+                        <Popover trigger="hover" placement="bottomLeft" content={this.renderPopoverContent()}>
+                            <SettingOutlined style={this.settingIconStyle} />
+                        </Popover>
+                    </div>
+                )}
+                <AntTable
+                    tableLayout="auto"
+                    locale={{emptyText: emptyTextNode}}
+                    onRow={this.props.onRowClick ? this.onRow : undefined}
+                    loading={loading ? {indicator: <LoadingOutlined />} : false}
+                    pagination={false}
+                    columns={tableColumns}
+                    onChange={this.onSortChange}
+                    rowKey={rowKey === "index" ? this.rowKeyByIndex : rowKey}
+                    scroll={{x: scrollX === "none" ? undefined : scrollX, y: scrollY}}
+                    {...restProps}
+                />
+            </React.Fragment>
+        );
+    }
+}
+
+export type {TableRowSelection};

package/src/core/Tabs/Single.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import type {Props as TabsProps} from "./index";
+import {Tabs} from "./index";
+import type {SafeReactChildren} from "../../internal/type";
+
+export interface Props extends Omit<TabsProps, "activeKey" | "onChange" | "defaultActiveKey"> {
+    title: string;
+    children: SafeReactChildren;
+}
+
+export class Single extends React.PureComponent<Props> {
+    static displayName = "Single";
+
+    render() {
+        const {children, title, ...rest} = this.props;
+
+        return (
+            <Tabs {...rest}>
+                <Tabs.TabPane tab={title} key={title}>
+                    {children}
+                </Tabs.TabPane>
+            </Tabs>
+        );
+    }
+}