@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/Tabs/index.tsx

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+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>
+        );
+    }
+}

package/src/core/Uploader.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import type {UploadChangeParam} from "antd/lib/upload";
+import type {HttpRequestHeader} from "antd/lib/upload/interface";
+import AntUpload from "antd/lib/upload";
+import type {SafeReactChildren} from "../internal/type";
+import type {UploaderProps, UploadLogInfo} from "../util/UploadUtil/type";
+import {Spin} from "./Spin";
+import "antd/lib/upload/style";
+
+export interface Props<SuccessResponseType, ErrorResponseType> extends UploaderProps<SuccessResponseType, ErrorResponseType> {
+    children: SafeReactChildren;
+    /**
+     * Please follow W3C standard for HTML accept string.
+     * Ref:
+     * https://www.w3schools.com/tags/att_input_accept.asp
+     */
+    accept: string;
+    beforeUpload?: (file: File) => boolean | Promise<void | Blob | File>;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+
+interface State {
+    uploading: boolean;
+}
+
+export class Uploader<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>, State> {
+    static displayName = "Uploader";
+
+    private readonly defaultStyle: React.CSSProperties = {minWidth: 250};
+    private readonly uploadHeader: HttpRequestHeader = {Accept: "application/json"};
+    private uploadStartTime: number | undefined;
+
+    constructor(props: Props<SuccessResponseType, ErrorResponseType>) {
+        super(props);
+        this.state = {uploading: false};
+    }
+
+    componentDidMount() {
+        document.addEventListener("dragover", this.preventDefaultDragDrop);
+        document.addEventListener("drop", this.preventDefaultDragDrop);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener("dragover", this.preventDefaultDragDrop);
+        document.removeEventListener("drop", this.preventDefaultDragDrop);
+    }
+
+    preventDefaultDragDrop = (e: DragEvent) => e.preventDefault();
+
+    onUpload = ({file}: UploadChangeParam) => {
+        if (file.status === "uploading") {
+            this.setState({uploading: true});
+            this.uploadStartTime = Date.now();
+        } else if (file.status === "done" || file.status === "error") {
+            const {onUploadSuccess, onUploadFailure} = this.props;
+
+            try {
+                const info: UploadLogInfo = {
+                    file_name: file.fileName || file.name,
+                    file_size: file.size?.toString() || "-",
+                    file_type: file.type || "-",
+                    api_response: JSON.stringify(file.response),
+                };
+                const elapsedTime = this.uploadStartTime ? Date.now() - this.uploadStartTime : 0;
+
+                if (file.status === "error") {
+                    onUploadFailure?.(
+                        {
+                            info,
+                            elapsedTime,
+                            errorCode: "UPLOADER_FAILURE",
+                            errorMessage: file.error?.toString() || "[No Message]",
+                            statusCode: Number(file.error?.status), // Un-official API, by trial
+                        },
+                        file.response
+                    );
+                } else {
+                    onUploadSuccess?.(
+                        {
+                            info,
+                            elapsedTime,
+                        },
+                        file.response
+                    );
+                }
+            } finally {
+                this.setState({uploading: false});
+            }
+        }
+    };
+
+    render() {
+        const {children, accept, beforeUpload, className, style, uploadURL, formField, disabled} = this.props;
+        const {uploading} = this.state;
+        return (
+            <AntUpload.Dragger
+                name={formField}
+                showUploadList={false}
+                multiple={false}
+                accept={accept}
+                className={className}
+                style={{...this.defaultStyle, ...style}}
+                action={uploadURL}
+                onChange={this.onUpload}
+                disabled={this.state.uploading || disabled}
+                height={Number(style?.height)}
+                beforeUpload={beforeUpload}
+                headers={this.uploadHeader}
+            >
+                <Spin spinning={uploading} size="small">
+                    {children}
+                </Spin>
+            </AntUpload.Dragger>
+        );
+    }
+}

package/src/core/VerticalMarquee/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import type {SafeReactChildren} from "../../internal/type";
+import "./index.less";
+
+export interface Props {
+    height: number;
+    children: SafeReactChildren;
+    className?: string;
+    styles?: React.CSSProperties;
+    speed?: number; // number of pixels scrolled per second
+}
+
+export interface State {
+    hasShadowChildren: boolean;
+    paused: boolean;
+}
+
+export const VerticalMarquee = Object.assign(
+    React.memo(({className: extraClassName, speed, height, styles, children}: Props) => {
+        const className = ["g-marquee", extraClassName].filter(Boolean).join(" ");
+        const [contentHeight, setContentHeight] = React.useState(0);
+        const animationSpeed = contentHeight / (speed || 30);
+
+        const marqueeInnerRef = React.useCallback((node: HTMLDivElement | null) => {
+            if (!node) {
+                return;
+            }
+            setContentHeight(node?.clientHeight);
+        }, []);
+
+        const marqueeInnerAnimationStyle: React.CSSProperties = React.useMemo(
+            () => ({
+                animation: `marquee ${animationSpeed}s linear infinite`,
+                transform: `translate(0, calc(-100% + ${contentHeight / 2}px))`,
+            }),
+            [animationSpeed, contentHeight]
+        );
+
+        const pageSize = contentHeight / height;
+
+        return (
+            <div className={className} style={{...styles, height}}>
+                <div ref={marqueeInnerRef} className="inner" style={pageSize > 1 ? marqueeInnerAnimationStyle : undefined}>
+                    {children}
+                    {children}
+                </div>
+            </div>
+        );
+    }),
+    {displayName: "VerticalMarquee"}
+);

package/src/core/VirtualTable/TableHeader.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import type {ColumnFixedPosition, VirtualTableColumn, StickyPosition} from "./type";
+
+interface Props<RowType extends object> {
+    headersRef: React.RefObject<HTMLDivElement>;
+    headerHeight: number;
+    columns: VirtualTableColumn<RowType>[];
+    stickyPosition: Record<number, StickyPosition>;
+    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
+}
+
+export const TableHeader = Object.assign(
+    function <RowType extends object>({headersRef, headerHeight, columns, stickyPosition, getFixedColumnClassNames}: Props<RowType>) {
+        return (
+            <div className="table-headers" ref={headersRef} style={{height: headerHeight, width: scrollX || "100%"}}>
+                {columns.map(({title, width, align, fixed, display}, columnIndex) => {
+                    const stickyPositionValue = stickyPosition[columnIndex]?.value || 0;
+                    return (
+                        <div
+                            className={classNames("table-header", ...getFixedColumnClassNames(fixed, columnIndex))}
+                            key={columnIndex}
+                            style={{
+                                display: display !== "hidden" ? "flex" : "none",
+                                flex: `1 0 ${width}px`,
+                                textAlign: align,
+                                left: fixed === "left" ? stickyPositionValue : undefined,
+                                right: fixed === "right" ? stickyPositionValue : undefined,
+                            }}
+                        >
+                            {title}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    },
+    {
+        displayName: "TableHeader",
+    }
+);