@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,20 @@
+.g-dark-overlay {
+    @keyframes overlay-fade {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0 0 0 / 75%);
+    animation: overlay-fade 500ms;
+}

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

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

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

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

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

package/src/core/DateTimeRangePicker/index.less

@@ -0,0 +1,5 @@
+.ant-picker-range {
+    input {
+        text-align: center;
+    }
+}

package/src/core/DateTimeRangePicker/index.tsx

@@ -0,0 +1,60 @@
+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 ? [Date, Date] : [Date | null, Date | null]> {
+    allowNull: T;
+    disabled?: boolean;
+    className?: string;
+    disabledRange?: (diffToToday: number, date: Date) => boolean;
+    // default ranges for quick select
+    ranges?: {[range: string]: [moment.Moment, moment.Moment]};
+}
+
+export class DateTimeRangePicker<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "DateTimeRangePicker";
+
+    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 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: [Date | null, Date | null]) => void;
+        if (dates && dates[0] && dates[1]) {
+            typedOnChange([dates[0].toDate(), dates[1].toDate()]);
+        } else {
+            typedOnChange([null, null]);
+        }
+    };
+
+    render() {
+        const {value, allowNull, disabled, className, ranges} = this.props;
+        return (
+            <AntDatePicker.RangePicker
+                className={className}
+                value={value[0] && value[1] ? [moment(value[0]), moment(value[1])] : [null, null]}
+                onChange={this.onChange}
+                disabledDate={this.isDateDisabled}
+                allowClear={allowNull}
+                disabled={disabled}
+                ranges={ranges}
+                showTime
+            />
+        );
+    }
+}

package/src/core/Descriptions/index.less

@@ -0,0 +1,21 @@
+.ant-descriptions {
+    padding: 0;
+
+    .ant-descriptions-title {
+        font-size: 24px;
+        margin-bottom: 12px;
+        color: #777;
+    }
+
+    .ant-descriptions-item-label {
+        padding: 8px 10px;
+        width: 120px;
+        text-align: left;
+    }
+
+    .ant-descriptions-item-content {
+        padding: 8px 10px;
+        position: relative;
+        color: inherit;
+    }
+}

package/src/core/Descriptions/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import AntDescriptions from "antd/lib/descriptions";
+import "antd/lib/descriptions/style";
+import type {SafeReactChild, SafeReactChildren, PickOptional} from "../../internal/type";
+import "./index.less";
+
+export interface Props {
+    children: SafeReactChildren;
+    horizontal?: boolean;
+    title?: string;
+    column?: number; // If undefined, column length will be same as children's length
+    className?: string;
+    style?: React.CSSProperties;
+    bordered?: boolean;
+}
+
+export interface DescriptionsItemProps {
+    label: SafeReactChild;
+    children: SafeReactChildren;
+    className?: string;
+    style?: React.CSSProperties;
+    span?: number;
+}
+
+export class Descriptions extends React.PureComponent<Props> {
+    static defaultProps: PickOptional<Props> = {
+        bordered: true,
+    };
+
+    static displayName = "Descriptions";
+
+    static Item = (props: DescriptionsItemProps) => <AntDescriptions.Item {...props} />;
+
+    private readonly containerStyle: React.CSSProperties = {marginBottom: 15};
+
+    render() {
+        const {horizontal, column, title, children, className, style, bordered} = this.props;
+        const columnCount = column || React.Children.count(children);
+        return (
+            <AntDescriptions style={{...this.containerStyle, ...style}} className={className} layout={horizontal ? "horizontal" : "vertical"} bordered={bordered} title={title} column={columnCount}>
+                {children}
+            </AntDescriptions>
+        );
+    }
+}

package/src/core/DocumentTitle.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+/**
+ * <DocumentTitle> will set the document.title as one of following:
+ *      {baseTitle}
+ *      {baseTitle} {separator} {pageTitle}
+ * According to latest <DocumentTitle> element.
+ */
+export interface Props {
+    title?: string | null;
+    children: React.ReactElement;
+}
+
+interface BaseOption {
+    baseTitle: string;
+    separator: string;
+}
+
+export class DocumentTitle extends React.PureComponent<Props> {
+    static displayName = "DocumentTitle";
+    static baseOption: BaseOption = {
+        baseTitle: "<Document Title Unset>",
+        separator: "-",
+    };
+    static register = <K extends keyof BaseOption>(option: Pick<BaseOption, K> | BaseOption) => Object.assign(DocumentTitle.baseOption, option);
+
+    private readonly prevTitle: string;
+
+    constructor(props: Props) {
+        super(props);
+        this.prevTitle = document.title;
+    }
+
+    componentDidMount() {
+        this.updateTitle();
+    }
+
+    componentDidUpdate(prevProps: Readonly<Props>) {
+        if (prevProps.title !== this.props.title) {
+            this.updateTitle();
+        }
+    }
+
+    componentWillUnmount() {
+        document.title = this.prevTitle;
+    }
+
+    updateTitle = () => {
+        const {title} = this.props;
+        const {baseTitle, separator} = DocumentTitle.baseOption;
+        const fullTitle = title ? `${baseTitle} ${separator} ${title}` : baseTitle;
+        document.title = fullTitle;
+    };
+
+    render() {
+        return this.props.children;
+    }
+}