@pinnacle0/web-ui 0.3.23 → 0.3.26

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

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

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

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

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

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

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

package/src/core/Uploader.tsx

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

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

package/src/core/VerticalMarquee/index.tsx

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

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

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

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

@@ -1,18 +0,0 @@
-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(), []);
-};