@pinnacle0/web-ui 0.3.38 → 0.3.39

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

@@ -1,82 +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();
-        window.addEventListener("resize", this.resizeTabs);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", 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.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import type {ControlledFormValue, PickOptional, SafeReactChild} from "../../internal/type";
-import "./index.less";
-
-interface Props<T> extends ControlledFormValue<T[]> {
-    parser: (rawString: string) => T[];
-    renderTag?: (item: T) => string;
-    className?: (item: T) => string;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-    placeholder?: SafeReactChild;
-    autoFocus?: boolean;
-}
-
-interface State {
-    inputText: string;
-}
-
-const separators = [" ", ";", "|", "*", "Tab", "Enter"];
-
-export class TagInput<T> extends React.PureComponent<Props<T>, State> {
-    static displayName = "TagInput";
-
-    static defaultProps: PickOptional<Props<string>> = {
-        renderTag: item => item,
-    };
-
-    constructor(props: Props<T>) {
-        super(props);
-        this.state = {inputText: ""};
-    }
-
-    removeTag = (index: number) => {
-        const {onChange, value, disabled} = this.props;
-        if (disabled) {
-            return;
-        }
-        const newTags = [...value];
-        newTags.splice(index, 1);
-        onChange(newTags);
-    };
-
-    addTagsByInput = (input: string) => {
-        if (this.props.disabled) {
-            return;
-        }
-        if (input) {
-            const {parser, onChange, value} = this.props;
-            this.setState({inputText: ""});
-            onChange([...value, ...parser(input)]);
-        }
-    };
-
-    onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        // Ref: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
-        const {inputText} = this.state;
-
-        if (event.key === "Backspace") {
-            if (!inputText.length) {
-                this.removeTag(this.props.value.length - 1);
-            }
-        } else if (separators.includes(event.key)) {
-            event.preventDefault();
-            this.addTagsByInput(inputText);
-        }
-    };
-
-    onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => this.setState({inputText: event.target.value});
-
-    onBlur = () => this.addTagsByInput(this.state.inputText);
-
-    render() {
-        const {value, renderTag, className, style, disabled, placeholder, autoFocus = true} = this.props;
-        const {inputText} = this.state;
-        return (
-            <div className={classNames("g-tag-input", {"ant-input-disabled": disabled})} style={style}>
-                {value.map((tag, index) => {
-                    return (
-                        <div className={classNames("g-tag-input-label", className?.(tag))} key={index}>
-                            {renderTag!(tag)}
-                            <i onClick={() => this.removeTag(index)}>&times;</i>
-                        </div>
-                    );
-                })}
-                {!value.length && !inputText && <div className="placeholder">{placeholder}</div>}
-                {/* The absolute position of textarea for prevent the cursor jumps back to the beginning while typing in the textarea out of view */}
-                <div className="text-area-wrapper">
-                    <textarea disabled={disabled} onBlur={this.onBlur} onChange={this.onChange} onKeyDown={this.onKeyDown} value={inputText} autoFocus={autoFocus} />
-                </div>
-            </div>
-        );
-    }
-}

package/src/core/Tags.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import type {TagColor} from "./Tag";
-import {Tag} from "./Tag";
-
-export interface Props {
-    items: React.ReactChild[];
-    /**
-     * If undefined, tags are not closable.
-     */
-    onClose?: (index: number) => void;
-    color?: TagColor | ((item: React.ReactChild, index: number) => TagColor);
-    maxWidth?: number;
-}
-
-export class Tags extends React.PureComponent<Props> {
-    static displayName = "Tags";
-
-    private readonly singleTagStyle: React.CSSProperties = {marginRight: 5, marginBottom: 4};
-
-    renderTag = (item: React.ReactChild, index: number) => {
-        const {color, onClose} = this.props;
-        const tagColor = typeof color === "function" ? color(item, index) : color;
-        return (
-            <Tag color={tagColor} key={index} style={this.singleTagStyle} closable={onClose !== undefined} onClose={() => onClose?.(index)}>
-                {item}
-            </Tag>
-        );
-    };
-
-    render() {
-        const {items, maxWidth} = this.props;
-        return <div style={{maxWidth}}>{items.map(this.renderTag)}</div>;
-    }
-}

package/src/core/TimePicker/index.tsx

@@ -1,44 +0,0 @@
-import AntTimePicker from "antd/lib/time-picker";
-import type {Moment} from "moment";
-import moment from "moment";
-import React from "react";
-import type {ControlledFormValue} from "../../internal/type";
-import "antd/lib/time-picker/style";
-import "./index.less";
-
-export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? string : string | null> {
-    allowNull: T;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-}
-
-export class TimePicker<T extends boolean> extends React.PureComponent<Props<T>> {
-    static displayName = "TimePicker";
-
-    private readonly timeFormatter = "HH:mm:ss";
-
-    onTimeChange = (time: Moment | null) => {
-        const {onChange} = this.props;
-        const typedOnChange = onChange as (value: string | null) => void;
-        if (time) {
-            typedOnChange(time.format(this.timeFormatter));
-        } else {
-            typedOnChange(null);
-        }
-    };
-
-    render() {
-        const {value, allowNull, placeholder, disabled, className} = this.props;
-        return (
-            <AntTimePicker
-                className={className}
-                placeholder={placeholder}
-                value={value ? moment(value, this.timeFormatter) : null}
-                onChange={this.onTimeChange}
-                allowClear={allowNull}
-                disabled={disabled}
-            />
-        );
-    }
-}

package/src/core/TimeRangePicker/index.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import moment from "moment";
-import AntTimePicker from "antd/lib/time-picker";
-import type {ControlledFormValue} from "../../internal/type";
-import "antd/lib/time-picker/style";
-import "./index.less";
-
-export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? [string, string] : [string | null, string | null]> {
-    allowNull: T;
-    disabled?: boolean;
-    className?: string;
-    order?: boolean;
-}
-
-export class TimeRangePicker<T extends boolean> extends React.PureComponent<Props<T>> {
-    static displayName = "TimeRangePicker";
-
-    private readonly timeFormatter = "HH:mm:ss";
-
-    onChange = (dates: [moment.Moment | null, moment.Moment | null] | null) => {
-        const typedOnChange = this.props.onChange as (value: [string | null, string | null]) => void;
-        if (dates && dates[0] && dates[1]) {
-            typedOnChange([dates[0].format(this.timeFormatter), dates[1].format(this.timeFormatter)]);
-        } else {
-            typedOnChange([null, null]);
-        }
-    };
-
-    render() {
-        const {value, disabled, className, allowNull, order} = this.props;
-        return (
-            <AntTimePicker.RangePicker
-                className={className}
-                value={value[0] && value[1] ? [moment(value[0], this.timeFormatter), moment(value[1], this.timeFormatter)] : [null, null]}
-                onChange={this.onChange}
-                disabled={disabled}
-                allowClear={allowNull}
-                order={order}
-            />
-        );
-    }
-}

package/src/core/Tooltip.tsx

@@ -1,17 +0,0 @@
-import type {TooltipPlacement, TooltipProps} from "antd/lib/tooltip";
-import AntTooltip from "antd/lib/tooltip";
-import "antd/lib/tooltip/style";
-import React from "react";
-
-// Cannot use interface extends here because TooltipProps is a type union
-export type Props = TooltipProps;
-
-export class Tooltip extends React.PureComponent<Props> {
-    static displayName = "Tooltip";
-
-    render() {
-        return <AntTooltip {...this.props} />;
-    }
-}
-
-export type {TooltipPlacement};

package/src/core/TypedTabs/index.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import type {Props as TabsProps} from "../Tabs";
-import type {SafeReactChildren} from "../../internal/type";
-import {Tabs} from "../Tabs";
-import "./index.less";
-
-export interface TabData {
-    title: React.ReactElement | string;
-    content: SafeReactChildren;
-    display?: "default" | "hidden";
-    disabled?: boolean;
-}
-
-export type TypedTabMap<T extends string> = Record<T, TabData>;
-
-export type TypedTabList<T extends string> = Array<TabData & {key: T}>;
-
-export interface Props<T extends string> extends Omit<TabsProps, "onChange"> {
-    tabs: TypedTabMap<T> | TypedTabList<T>;
-    activeKey: T;
-    onChange: (tab: T) => void;
-}
-
-export class TypedTabs<T extends string> extends React.PureComponent<Props<T>> {
-    static displayName = "TypedTabs";
-
-    render() {
-        const {tabs, children, onChange, ...restProps} = this.props;
-        const tabList = Array.isArray(tabs) ? tabs : Object.entries<TabData>(tabs).map(([key, item]) => ({key, ...item}));
-
-        return (
-            <Tabs onChange={onChange as (_: string) => void} {...restProps}>
-                {tabList
-                    .filter(_ => _.display !== "hidden")
-                    .map(_ => (
-                        <Tabs.TabPane tab={_.title} key={_.key} disabled={_.disabled}>
-                            {_.content}
-                        </Tabs.TabPane>
-                    ))}
-            </Tabs>
-        );
-    }
-}