@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/Cascader/index.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import type {DefaultOptionType} from "rc-cascader";
+import AntCascader from "antd/lib/cascader";
+import type {ControlledFormValue} from "../../internal/type";
+import {Nullable} from "./Nullable";
+import {InitialNullable} from "./InitialNullable";
+import "antd/lib/cascader/style";
+import "./index.less";
+
+/**
+ * Attention:
+ * CascaderDataNode.value must be unique in the whole data tree.
+ */
+
+export interface CascaderDataNode<T extends string | number> {
+    label: string;
+    value?: T; // Undefined if same with label
+    disabled?: boolean;
+    children?: Array<CascaderDataNode<T>>;
+}
+
+export interface BaseProps<T extends string | number> {
+    data: Array<CascaderDataNode<T>>;
+    canSelectAnyLevel?: boolean;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+
+export interface Props<T extends string | number> extends BaseProps<T>, ControlledFormValue<T> {}
+
+export class Cascader<T extends string | number> extends React.PureComponent<Props<T>> {
+    static displayName = "Cascader";
+    static Nullable = Nullable;
+    static InitialNullable = InitialNullable;
+
+    getAntValue = (): Array<string | number> => {
+        const data = this.getAntDataSource();
+        const getCascaderValues = (data: DefaultOptionType[]): Array<string | number> => {
+            const {value} = this.props;
+            for (const item of data) {
+                if (item.value === value) {
+                    return [item.value];
+                } else if (item.children) {
+                    const result = [item.value!, ...getCascaderValues(item.children)];
+                    if (result.includes(value)) {
+                        return result;
+                    }
+                }
+            }
+            return [];
+        };
+        return getCascaderValues(data);
+    };
+
+    getAntDataSource = (): DefaultOptionType[] => {
+        const getAntChildren = (list: Array<CascaderDataNode<T>>): DefaultOptionType[] => {
+            return list.map(node => ({
+                label: node.label,
+                disabled: node.disabled,
+                value: node.value || node.label,
+                children: node.children && node.children.length > 0 ? getAntChildren(node.children) : undefined,
+            }));
+        };
+        return getAntChildren(this.props.data);
+    };
+
+    displayRender = (labels: React.ReactNode[]) => <React.Fragment>{labels.join("/")}</React.Fragment>;
+
+    onChange = (antValue: Array<string | number>) => this.props.onChange(antValue[antValue.length - 1] as T);
+
+    render() {
+        const {canSelectAnyLevel, placeholder, disabled, style, className} = this.props;
+        return (
+            <AntCascader
+                multiple={false}
+                className={`g-cascader ${className || ""}`}
+                dropdownClassName="g-cascader-popup"
+                style={style}
+                changeOnSelect={canSelectAnyLevel}
+                value={this.getAntValue()}
+                onChange={this.onChange}
+                options={this.getAntDataSource()}
+                allowClear={false}
+                expandTrigger="hover"
+                displayRender={this.displayRender}
+                placeholder={placeholder}
+                disabled={disabled}
+            />
+        );
+    }
+}

package/src/core/Checkbox/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type {CheckboxChangeEvent, CheckboxOptionType, CheckboxProps} from "antd/lib/checkbox";
+import AntCheckbox from "antd/lib/checkbox";
+import type {CheckboxValueType} from "antd/lib/checkbox/Group";
+import "antd/lib/checkbox/style";
+import type {ControlledFormValue} from "../../internal/type";
+import "./index.less";
+
+export interface Props extends Omit<CheckboxProps, "value" | "onChange" | "checked">, ControlledFormValue<boolean> {}
+
+export class Checkbox extends React.PureComponent<Props> {
+    static displayName = "Checkbox";
+
+    static Group = AntCheckbox.Group;
+
+    onChange = (e: CheckboxChangeEvent) => this.props.onChange(e.target.checked);
+
+    render() {
+        const {value} = this.props;
+        return <AntCheckbox {...this.props} checked={value} onChange={this.onChange} />;
+    }
+}
+
+export type {CheckboxChangeEvent, CheckboxOptionType, CheckboxValueType};

package/src/core/Collapse.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import AntdCollapse from "antd/lib/collapse";
+import type {CollapseProps, CollapsePanelProps} from "antd/lib/collapse";
+import "antd/lib/collapse/style";
+
+/** Will be remove in future, replaced by Foldable and Accordion */
+export interface Props extends CollapseProps {}
+
+export class Collapse extends React.PureComponent<Props> {
+    static displayName = "Collapse";
+
+    static Panel = AntdCollapse.Panel;
+
+    render() {
+        return <AntdCollapse {...this.props} />;
+    }
+}
+
+export type PanelProps = CollapsePanelProps;

package/src/core/Countdown/SlidingDigit.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface Props {
+    digit: string;
+}
+
+interface State {
+    currentDigit: string;
+    withSlidedClass: boolean;
+}
+
+export class SlidingDigit extends React.PureComponent<Props, State> {
+    static displayName = "SlidingDigit";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            currentDigit: this.props.digit,
+            withSlidedClass: false,
+        };
+    }
+
+    componentDidUpdate() {
+        if (this.state.currentDigit !== this.props.digit) {
+            this.setState({withSlidedClass: true});
+        }
+    }
+
+    render() {
+        return (
+            <div className="sliding-digit-outer">
+                <div onTransitionEnd={() => this.setState({currentDigit: this.props.digit, withSlidedClass: false})} className={`sliding-digit-inner ${this.state.withSlidedClass ? "slided" : ""}`}>
+                    <p>{this.props.digit}</p>
+                    <p>{this.state.currentDigit}</p>
+                </div>
+            </div>
+        );
+    }
+}

package/src/core/Countdown/index.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import type {PickOptional} from "../../internal/type";
+import {SlidingDigit} from "./SlidingDigit";
+import "./index.less";
+
+export interface Props {
+    /**
+     * Pass 0 or negative will invalidate the time into --:--:--.
+     */
+    timeToComplete: number;
+    onComplete?: () => void;
+    /**
+     * @param remainingSecond - positive ONLY, use `onComplete` for remaining second is 0
+     */
+    onTick?: (remainingSecond: number) => void;
+    /**
+     * @param hours/minutes/seconds - well-formatted in exact two chars
+     * @param remainingSecond - NULL if not applicable
+     */
+    renderer?: (hours: string, minutes: string, seconds: string, remainingSecond: number | null) => React.ReactElement | string;
+    isHidden?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+interface State {
+    remainingSecond: number;
+}
+
+export class Countdown extends React.PureComponent<Props, State> {
+    static displayName = "Countdown";
+    static defaultProps: PickOptional<Props> = {
+        renderer: (hours, minutes, seconds) => (
+            <React.Fragment>
+                <SlidingDigit digit={hours.charAt(0)} />
+                <SlidingDigit digit={hours.charAt(1)} />
+                <div className="colon">:</div>
+                <SlidingDigit digit={minutes.charAt(0)} />
+                <SlidingDigit digit={minutes.charAt(1)} />
+                <div className="colon">:</div>
+                <SlidingDigit digit={seconds.charAt(0)} />
+                <SlidingDigit digit={seconds.charAt(1)} />
+            </React.Fragment>
+        ),
+    };
+
+    private timer!: number;
+    private isTimerCompleted = false;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {remainingSecond: this.computeRemainingSecond()};
+    }
+
+    componentDidMount() {
+        this.timer = window.setInterval(this.onTick, 1000);
+    }
+
+    componentWillUnmount() {
+        window.clearInterval(this.timer);
+    }
+
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.timeToComplete !== this.props.timeToComplete) {
+            this.isTimerCompleted = false;
+        }
+    }
+
+    computeRemainingSecond = () => {
+        const {timeToComplete} = this.props;
+        if (timeToComplete > 0) {
+            return Math.ceil((timeToComplete - Date.now()) / 1000);
+        } else {
+            return 0;
+        }
+    };
+
+    onTick = () => {
+        const {timeToComplete, onComplete, onTick} = this.props;
+        if (!this.isTimerCompleted && timeToComplete > 0) {
+            const remainingSecond = this.computeRemainingSecond();
+            if (remainingSecond <= 0) {
+                this.isTimerCompleted = true; // To avoid call onComplete more than once
+                onComplete?.();
+            } else if (remainingSecond !== this.state.remainingSecond) {
+                this.setState({remainingSecond}, () => onTick?.(remainingSecond));
+            }
+        }
+    };
+
+    render() {
+        const {isHidden, renderer, timeToComplete, className, style} = this.props;
+        const {remainingSecond} = this.state;
+        if (isHidden) {
+            return null;
+        }
+
+        let bodyNode: React.ReactElement | string;
+        if (timeToComplete > 0) {
+            if (remainingSecond / 3600 >= 100) {
+                bodyNode = renderer!("99", "59", "59", remainingSecond);
+            } else if (remainingSecond <= 0) {
+                bodyNode = renderer!("00", "00", "00", 0);
+            } else {
+                const hours = Math.floor(remainingSecond / 3600)
+                    .toString()
+                    .padStart(2, "0");
+                const remainingSecondWithinHour = remainingSecond % 3600;
+                const minutes = Math.floor(remainingSecondWithinHour / 60)
+                    .toString()
+                    .padStart(2, "0");
+                const seconds = (remainingSecondWithinHour % 60).toString().padStart(2, "0");
+                bodyNode = renderer!(hours, minutes, seconds, remainingSecond);
+            }
+        } else {
+            bodyNode = renderer!("--", "--", "--", null);
+        }
+
+        return (
+            <div className={`g-countdown ${className || ""}`} style={style}>
+                {bodyNode}
+            </div>
+        );
+    }
+}

package/src/core/DarkOverlay/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import type {SafeReactChildren} from "../../internal/type";
+import "./index.less";
+
+export interface Props {
+    children: SafeReactChildren;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export class DarkOverlay extends React.PureComponent<Props> {
+    static displayName = "DarkOverlay";
+
+    render() {
+        const {children, className, style} = this.props;
+        return ReactDOM.createPortal(
+            <div className={`g-dark-overlay ${className || ""}`} style={style}>
+                {children}
+            </div>,
+            document.body
+        );
+    }
+}

package/src/core/DateCalendar.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import AntCalendar from "antd/lib/calendar";
+import type {HeaderRender} from "antd/lib/calendar/generateCalendar";
+import type {Moment} from "moment";
+import moment from "moment";
+import type {ControlledFormValue} from "../internal/type";
+import {Select} from "./Select";
+import {Space} from "./Space";
+import "antd/lib/calendar/style";
+
+interface Props extends ControlledFormValue<string> {}
+
+export class DateCalendar extends React.PureComponent<Props> {
+    static displayName = "DateCalendar";
+
+    private readonly headerStyle: React.CSSProperties = {padding: 8};
+
+    private readonly now = moment();
+
+    isDateDisabled = (current: moment.Moment): boolean => {
+        /**
+         * This is for compatibility of MySQL.
+         * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
+         * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
+         */
+        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+            return true;
+        }
+        return false;
+    };
+
+    onChange = (date: Moment) => this.props.onChange(moment(date).format("YYYY-MM-DD"));
+
+    renderHeader: HeaderRender<Moment> = ({value, onChange}) => {
+        const start = 0;
+        const end = 12;
+        const monthOptions = [];
+
+        const current = value.clone();
+        const localeData = this.now.localeData();
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            current.month(i);
+            months.push(localeData.monthsShort(current));
+        }
+
+        for (let index = start; index < end; index++) {
+            monthOptions.push(
+                <Select.Option value={index} key={`${index}`}>
+                    {months[index]}
+                </Select.Option>
+            );
+        }
+
+        const month = value.month();
+        const year = value.year();
+        const yearOfNow = this.now.year();
+        const options = [];
+
+        for (let i = yearOfNow - 100; i <= yearOfNow; i++) {
+            options.push(
+                <Select.Option key={i} value={i}>
+                    {i}
+                </Select.Option>
+            );
+        }
+
+        return (
+            <div style={this.headerStyle}>
+                <Space>
+                    <div>
+                        <Select
+                            size="small"
+                            dropdownMatchSelectWidth={false}
+                            onChange={newYear => {
+                                const now = value.clone().year(newYear);
+                                onChange(now);
+                            }}
+                            value={year}
+                        >
+                            {options}
+                        </Select>
+                    </div>
+                    <div>
+                        <Select
+                            size="small"
+                            dropdownMatchSelectWidth={false}
+                            value={month}
+                            onChange={selectedMonth => {
+                                const newValue = value.clone();
+                                newValue.month(selectedMonth);
+                                onChange(newValue);
+                            }}
+                        >
+                            {monthOptions}
+                        </Select>
+                    </div>
+                </Space>
+            </div>
+        );
+    };
+
+    render() {
+        return <AntCalendar disabledDate={this.isDateDisabled} headerRender={this.renderHeader} value={moment(this.props.value, "YYYY-MM-DD")} fullscreen={false} onChange={this.onChange} />;
+    }
+}

package/src/core/DatePicker/index.tsx

@@ -0,0 +1,54 @@
+import AntDatePicker from "antd/lib/date-picker";
+import type {Moment} from "moment";
+import moment from "moment";
+import React from "react";
+import type {ControlledFormValue} from "../../internal/type";
+import "antd/lib/date-picker/style";
+import "./index.less";
+
+export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? string : string | null> {
+    allowNull: T;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+
+export class DatePicker<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "DatePicker";
+
+    isDateDisabled = (current: moment.Moment): boolean => {
+        /**
+         * This is for compatibility of MySQL.
+         * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
+         * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
+         */
+        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+            return true;
+        }
+        return false;
+    };
+
+    onChange = (date: Moment | null, dateString: string) => {
+        const {onChange, allowNull} = this.props;
+        if (dateString || allowNull) {
+            const typedOnChange = onChange as (value: string | null) => void;
+            typedOnChange(dateString);
+        }
+    };
+
+    render() {
+        const {value, allowNull, placeholder, disabled, className} = this.props;
+        return (
+            <AntDatePicker
+                className={className}
+                showTime={false}
+                disabledDate={this.isDateDisabled}
+                placeholder={placeholder}
+                value={value ? moment(value) : null}
+                onChange={this.onChange}
+                allowClear={allowNull}
+                disabled={disabled}
+            />
+        );
+    }
+}

package/src/core/DateRangePicker/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import moment from "moment";
+import AntDatePicker from "antd/lib/date-picker";
+import type {ControlledFormValue} from "../../internal/type";
+import "antd/lib/date-picker/style";
+import "./index.less";
+
+export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? [string, string] : [string | null, string | null]> {
+    allowNull: T;
+    disabledRange?: (diffToToday: number, date: Date) => boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+export class DateRangePicker<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "DateRangePicker";
+
+    private readonly dateFormatter = "YYYY-MM-DD";
+
+    isDateDisabled = (current: moment.Moment): boolean => {
+        /**
+         * This is for compatibility of MySQL.
+         * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
+         * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
+         */
+        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+            return true;
+        }
+
+        // ref: https://momentjs.com/docs/#/displaying/difference/
+        const diffToToday = Math.floor(current.diff(moment().startOf("day"), "day", true));
+        return this.props.disabledRange?.(diffToToday, current.toDate()) || false;
+    };
+
+    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.dateFormatter), dates[1].format(this.dateFormatter)]);
+        } else {
+            typedOnChange([null, null]);
+        }
+    };
+
+    render() {
+        const {value, allowNull, disabled, className} = this.props;
+        return (
+            <AntDatePicker.RangePicker
+                disabledDate={this.isDateDisabled}
+                className={className}
+                showTime={false}
+                value={value[0] && value[1] ? [moment(value[0]), moment(value[1])] : [null, null]}
+                onChange={this.onChange}
+                allowClear={allowNull}
+                disabled={disabled}
+            />
+        );
+    }
+}

package/src/core/DateTimePicker/index.tsx

@@ -0,0 +1,61 @@
+import AntDatePicker from "antd/lib/date-picker";
+import moment from "moment";
+import React from "react";
+import type {ControlledFormValue} from "../../internal/type";
+import "antd/lib/date-picker/style";
+import "./index.less";
+
+export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? Date : Date | null> {
+    allowNull: T;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+    showNow?: boolean;
+    disabledRange?: (diffHourToToday: number, date: Date) => boolean;
+}
+
+export class DateTimePicker<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "DateTimePicker";
+
+    isDateDisabled = (current: moment.Moment): boolean => {
+        /**
+         * This is for compatibility of MySQL.
+         * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
+         * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
+         */
+        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+            return true;
+        }
+
+        // moment will truncate the result to zero decimal places
+        // ref: https://momentjs.com/docs/#/displaying/difference/
+        const diffHourToToday = Math.floor(current.diff(moment().startOf("hour"), "hour", true));
+        return this.props.disabledRange?.(diffHourToToday, current.toDate()) || false;
+    };
+
+    onChange = (date: moment.Moment | null) => {
+        const typedOnChange = this.props.onChange as (value: Date | null) => void;
+        if (date) {
+            typedOnChange(date.toDate());
+        } else {
+            typedOnChange(null);
+        }
+    };
+
+    render() {
+        const {value, allowNull, disabled, showNow, className, placeholder} = this.props;
+        return (
+            <AntDatePicker
+                className={className}
+                placeholder={placeholder}
+                disabledDate={this.isDateDisabled}
+                value={value ? moment(value) : null}
+                onChange={this.onChange}
+                allowClear={allowNull}
+                disabled={disabled}
+                showTime
+                showNow={showNow}
+            />
+        );
+    }
+}