@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/Slider/index.tsx

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

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

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

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

package/src/core/StepFormContainer/index.tsx

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

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

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

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

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

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

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

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

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

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