@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/Countdown/index.tsx

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

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

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

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

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

package/src/core/DatePicker/index.tsx

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

@@ -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/DateRangePicker/index.tsx

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

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

package/src/core/DateTimePicker/index.tsx

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

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

package/src/core/DateTimeRangePicker/index.tsx

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

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

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

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