@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,5 @@
+.g-step-form-container {
+    > .ant-steps {
+        margin-bottom: 20px;
+    }
+}

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

@@ -0,0 +1,5 @@
+.ant-steps,
+.ant-steps-item-title,
+.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+    color: inherit;
+}

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

@@ -0,0 +1,39 @@
+@import "../../css/variable.less";
+
+.ant-table {
+    table {
+        .ant-table-thead {
+            th {
+                padding: 9px;
+                background: @lib-background-gray;
+                font-weight: bold;
+
+                .ant-table-column-sorters {
+                    padding: 0;
+                }
+            }
+        }
+
+        .ant-table-tbody {
+            td {
+                padding: 12px 8px;
+            }
+        }
+    }
+
+    &.ant-table-small {
+        .ant-table-thead {
+            background: @lib-background-gray;
+        }
+
+        .ant-table-body {
+            margin: 0;
+        }
+    }
+}
+
+.ant-table-thead > tr > th,
+.ant-table,
+.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
+    color: inherit;
+}

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>
+        );
+    }
+}

package/src/core/Tabs/index.less

@@ -0,0 +1,14 @@
+.ant-tabs {
+    color: inherit;
+
+    .ant-tabs-tab {
+        margin: 0;
+        padding: 12px;
+    }
+
+    &.with-max-visible-tab-count {
+        .ant-tabs-nav-operations {
+            display: none;
+        }
+    }
+}

package/src/core/Tabs/index.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import AntTabs from "antd/lib/tabs";
+import {classNames} from "../../util/ClassNames";
+import {Single} from "./Single";
+import type {TabsProps} from "antd/lib/tabs";
+import type {TabBarExtraMap} from "rc-tabs/lib/interface";
+import type {PickOptional, SafeReactChildren} from "../../internal/type";
+import "antd/lib/tabs/style";
+import "./index.less";
+
+export interface Props extends Omit<TabsProps, "tabBarExtraContent"> {
+    tabBarPrefix?: SafeReactChildren;
+    tabBarSuffix?: SafeReactChildren;
+    /**
+     * Attention:
+     *  - Should be at least 1
+     *  - No effect if tabs count < initialMaxVisibleTabCount
+     *  - Not work when used together with customized props.renderTabBar
+     *  - Will not recalculate tab width when resize after mount
+     */
+    initialMaxVisibleTabCount?: number;
+}
+
+export class Tabs extends React.PureComponent<Props> {
+    static displayName = "Tabs";
+
+    static Single = Single;
+    static TabPane = AntTabs.TabPane;
+
+    static defaultProps: PickOptional<Props> = {
+        type: "card",
+    };
+
+    private tabBarRef: HTMLDivElement | null = null;
+
+    componentDidMount() {
+        this.resizeTabs();
+    }
+
+    resizeTabs = () => {
+        const {initialMaxVisibleTabCount} = this.props;
+        if (initialMaxVisibleTabCount && initialMaxVisibleTabCount >= 1) {
+            const tabBarWidth = this.tabBarRef?.getBoundingClientRect().width;
+            const tabNodes = this.tabBarRef?.querySelectorAll<HTMLDivElement>(".ant-tabs-nav-list > .ant-tabs-tab");
+            if (tabBarWidth && tabNodes && tabNodes.length > initialMaxVisibleTabCount) {
+                const singleTabWidth = tabBarWidth / initialMaxVisibleTabCount;
+                Array.from(tabNodes).forEach(tabNode => (tabNode.style.width = `${singleTabWidth}px`));
+            }
+        }
+    };
+
+    tabBarCallBackRef = (tabBar: HTMLDivElement | null) => (this.tabBarRef = tabBar);
+
+    render() {
+        const {tabBarPrefix, tabBarSuffix, initialMaxVisibleTabCount, className, renderTabBar, type, animated, ...restProps} = this.props;
+
+        // Passing {} or {left:undefined} to <AntTabs tabBarExtraContent> will lead to error
+        let tabBarExtraContent: TabBarExtraMap | undefined;
+        if (tabBarPrefix || tabBarSuffix) {
+            tabBarExtraContent = {};
+            if (tabBarPrefix) tabBarExtraContent.left = tabBarPrefix;
+            if (tabBarSuffix) tabBarExtraContent.right = tabBarSuffix;
+        }
+
+        return (
+            <AntTabs
+                className={classNames("g-tabs", className, {"with-max-visible-tab-count": initialMaxVisibleTabCount})}
+                animated={animated === undefined ? type === "line" : animated}
+                type={type}
+                tabBarExtraContent={tabBarExtraContent}
+                // DefaultTabBar is a React.ForwardRef component but mark as a React.ComponentType by antd, needed to change the type  to 'any' in order to assign ref
+                renderTabBar={renderTabBar || ((oldProps, DefaultTabBar: any) => <DefaultTabBar {...oldProps} ref={this.tabBarCallBackRef} />)}
+                {...restProps}
+            />
+        );
+    }
+}

package/src/core/Tag.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type {TagProps} from "antd/lib/tag";
+import AntTag from "antd/lib/tag";
+import "antd/lib/tag/style";
+import type {PresetColorType, PresetStatusColorType} from "antd/lib/_util/colors";
+
+export interface Props extends TagProps {}
+
+export class Tag extends React.PureComponent<Props> {
+    static displayName = "Tag";
+
+    render() {
+        return <AntTag {...this.props} />;
+    }
+}
+
+export type TagColor = PresetColorType | PresetStatusColorType;

package/src/core/TagInput/index.less

@@ -0,0 +1,59 @@
+.g-tag-input {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    overflow-y: auto;
+    height: 100%;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    position: relative;
+
+    .placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: 16px;
+        padding: 2px 7px;
+        color: rgb(211 211 211);
+        z-index: 1;
+    }
+
+    .g-tag-input-label {
+        height: 28px;
+        padding: 0 10px;
+        line-height: 28px;
+        margin: 5px;
+        border-radius: 14px;
+        background-color: #dadce8;
+
+        i {
+            margin-left: 8px;
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+
+    .text-area-wrapper {
+        position: relative;
+        width: 100%;
+
+        textarea {
+            resize: none;
+            width: 100%;
+            margin: 0 5px;
+            background: transparent;
+            font-size: 16px;
+            border: 0;
+            position: relative;
+            z-index: 2;
+
+            &:focus,
+            &:active,
+            &:visited {
+                border: 0;
+                outline: none;
+                position: absolute;
+            }
+        }
+    }
+}