@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,6 @@
+.ant-picker-input > input,
+.ant-picker,
+.ant-picker-separator,
+.ant-picker-suffix {
+    color: inherit;
+}

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

@@ -0,0 +1,12 @@
+.ant-picker-range {
+    input {
+        text-align: center;
+    }
+}
+
+.ant-picker-input > input,
+.ant-picker,
+.ant-picker-separator,
+.ant-picker-suffix {
+    color: inherit;
+}

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

@@ -0,0 +1,17 @@
+.ant-tabs {
+    > .ant-tabs-nav {
+        > .ant-tabs-nav-wrap {
+            > .ant-tabs-nav-list {
+                > .ant-tabs-tab {
+                    display: flex;
+                    justify-content: center;
+
+                    > .ant-tabs-tab-btn {
+                        display: flex;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+@keyframes marquee {
+    0% {
+        transform: translate(0, 0);
+    }
+}
+
+.g-marquee {
+    overflow: hidden;
+
+    .inner:hover {
+        animation-play-state: paused !important;
+    }
+}

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

package/src/core/VirtualTable/TableRow.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import type {VirtualItem} from "react-virtual";
+import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, StickyPosition} from "./type";
+
+interface Props<RowType extends object> {
+    data: RowType;
+    columns: VirtualTableColumn<RowType>[];
+    virtualItem: VirtualItem;
+    columnWidths: number[];
+    rowHeight: number;
+    lastShownColumnIndex: number;
+    scrollBarSize: number;
+    stickyPosition: Record<number, StickyPosition>;
+    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
+    rowClassName?: string;
+    onRowClick?: (record: RowType, rowIndex: number) => void;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const TableRow = Object.assign(
+    function <RowType extends object>({
+        virtualItem,
+        getFixedColumnClassNames,
+        data,
+        columns,
+        columnWidths,
+        rowHeight,
+        scrollBarSize,
+        stickyPosition,
+        lastShownColumnIndex,
+        rowClassName,
+        onRowClick,
+        rowExpand,
+    }: Props<RowType>) {
+        const rowRef = React.useRef<HTMLDivElement>(null);
+        const [isExpanded, setIsExpanded] = React.useState(rowExpand?.isDefaultExpanded || false);
+        const rowIndex = virtualItem.index;
+
+        const toggleExpendRow = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
+
+        React.useEffect(() => {
+            if (rowRef.current) {
+                virtualItem.measureRef(rowRef.current);
+            }
+        }, [isExpanded, virtualItem]);
+
+        return (
+            <div
+                ref={rowRef}
+                key={rowIndex}
+                className={classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even")}
+                style={{transform: `translateY(${virtualItem.start}px)`}}
+                onClick={() => onRowClick?.(data, rowIndex)}
+            >
+                {columns.map((column, columnIndex) => {
+                    const colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
+                    // handle colspan > 1
+                    const cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce((acc, curr) => acc + curr, 0) : columnWidths[columnIndex] || column.width;
+
+                    const renderData =
+                        column.display !== "hidden" && (rowExpand && columnIndex === columns.length - 1 ? <rowExpand.ExpandButton onClick={toggleExpendRow} /> : column.renderData(data, rowIndex));
+                    // minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
+                    const isLastShownColumn = lastShownColumnIndex === columnIndex;
+                    const stickyPositionValue = stickyPosition[columnIndex]?.value || 0;
+
+                    return (
+                        renderData && (
+                            <div
+                                className={classNames("table-cell", ...getFixedColumnClassNames(column.fixed, columnIndex))}
+                                key={columnIndex}
+                                style={{
+                                    height: rowHeight,
+                                    width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
+                                    textAlign: column.align,
+                                    left: column.fixed === "left" ? stickyPositionValue : undefined,
+                                    right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
+                                }}
+                            >
+                                {renderData}
+                            </div>
+                        )
+                    );
+                })}
+                {rowExpand && <div className={classNames("expand-row", {expanded: isExpanded})}>{rowExpand.renderExpandRow(data, rowIndex)}</div>}
+            </div>
+        );
+    },
+    {displayName: "TableRow"}
+);

package/src/core/VirtualTable/hooks/useColumnWidths.ts

@@ -0,0 +1,24 @@
+import React from "react";
+
+/**
+ *
+ * If the Virtual Table is render inside a container with open animation e.g. <Modal />,
+ * the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
+ * useLayoutEffect will be trigged in the transition process and get the final correct column widths
+ */
+
+export const useColumnWidths = (headersRef: React.RefObject<HTMLDivElement>) => {
+    const [colWidths, setColWidths] = React.useState<number[]>([]);
+
+    const calculateColWidths = React.useCallback(() => {
+        if (!headersRef.current) return;
+        const headers = headersRef.current.querySelectorAll(".table-header");
+        const widths: number[] = Array.prototype.slice.call(headers).map(header => {
+            const {width} = header.getBoundingClientRect();
+            return width;
+        });
+        setColWidths(widths);
+    }, [headersRef]);
+
+    return {columnWidths: colWidths, calculateColWidths};
+};

package/src/core/VirtualTable/hooks/useDebounce.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const useDebounce = function <Param extends any[]>(callback: (...args: Param) => void) {
+    const idRef = React.useRef<number>();
+
+    const debounce = () => {
+        return function (...args: Param) {
+            clearTimeout(idRef.current);
+            idRef.current = window.setTimeout(() => {
+                callback(...args);
+            }, 100);
+        };
+    };
+
+    React.useEffect(() => () => clearTimeout(idRef.current), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- callback is not allow to changed
+    return React.useMemo(() => debounce(), []);
+};