@pinnacle0/web-ui 0.3.36 → 0.3.39

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.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.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.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.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.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;
-    }
-}

package/src/core/Drawer.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import AntdDrawer from "antd/lib/drawer";
-import type {DrawerProps, PushState} from "antd/lib/drawer";
-import "antd/lib/drawer/style";
-
-export interface Props extends DrawerProps {}
-
-export class Drawer extends React.PureComponent<Props> {
-    render() {
-        return <AntdDrawer {...this.props} />;
-    }
-}
-
-export type {PushState};

package/src/core/Dropdown.tsx

@@ -1,10 +0,0 @@
-import AntdDropdown from "antd/lib/dropdown";
-import type {DropdownProps} from "antd/lib/dropdown";
-import "antd/lib/dropdown/style";
-
-export type {DropdownButtonProps, DropdownButtonType} from "antd/lib/dropdown";
-export interface Props extends DropdownProps {}
-
-export class Dropdown {
-    static Button: typeof AntdDropdown.Button = AntdDropdown.Button;
-}

package/src/core/EnumCheckboxGroup/Map.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import {EnumCheckboxGroup} from "./index";
-import type {ControlledFormValue} from "../../internal/type";
-
-export interface Props<Enum extends string> extends ControlledFormValue<Enum[]> {
-    map: Record<Enum, React.ReactChild>;
-    disabledItems?: Enum[] | "all";
-}
-
-export class Map<Enum extends string> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumCheckboxGroup.Map";
-
-    render() {
-        const {map, ...restProps} = this.props;
-
-        const list: Enum[] = Object.keys(map) as Enum[];
-        const translator = (_: Enum) => map[_];
-
-        return <EnumCheckboxGroup list={list} translator={translator} {...restProps} />;
-    }
-}

package/src/core/EnumCheckboxGroup/index.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import {Checkbox} from "../Checkbox";
-import type {ControlledFormValue} from "../../internal/type";
-
-interface Props<Enum extends string | boolean | number> extends ControlledFormValue<Enum[]> {
-    list: readonly Enum[];
-    translator?: (enumValue: Enum) => React.ReactChild;
-    disabledItems?: Enum[] | "all";
-}
-
-export class EnumCheckboxGroup<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumCheckboxGroup";
-
-    render() {
-        const {list, translator, disabledItems, value, onChange} = this.props;
-        const options = list.map(_ => ({
-            label: translator ? translator(_) : _.toString(),
-            value: _,
-            disabled: disabledItems ? disabledItems === "all" || disabledItems.includes(_) : false,
-        }));
-        return <Checkbox.Group options={options} value={value} onChange={onChange as any} />;
-    }
-}

package/src/core/EnumRadio/InitialNullable.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import type {BaseProps} from "./index";
-import {EnumRadio} from "./index";
-
-type NullType = "@@NULL";
-
-export interface Props<Enum extends string | boolean | number> extends BaseProps<Enum> {
-    value: Enum | null;
-    onChange: (newValue: Enum) => void;
-}
-
-export class InitialNullable<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumRadio.InitialNullable";
-
-    private readonly nullValue: NullType = "@@NULL";
-
-    render() {
-        const {value, ...restProps} = this.props;
-
-        const wrappedValue = (value === null ? this.nullValue : value) as Enum; // nullValue does not exist in list, so no Radio will be selected
-
-        return <EnumRadio value={wrappedValue} {...restProps} />;
-    }
-}

package/src/core/EnumRadio/Map.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import type {BaseProps} from "./index";
-import {EnumRadio} from "./index";
-import type {ControlledFormValue} from "../../internal/type";
-
-export interface Props<Enum extends string> extends Omit<BaseProps<any>, "list" | "translator">, ControlledFormValue<Enum> {
-    map: Record<Enum, React.ReactChild>;
-}
-
-export class Map<Enum extends string> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumRadio.Map";
-
-    render() {
-        const {map, ...restProps} = this.props;
-
-        const list: Enum[] = Object.keys(map) as Enum[];
-        const translator = (_: Enum) => map[_];
-
-        return <EnumRadio list={list} translator={translator} {...restProps} />;
-    }
-}

package/src/core/EnumRadio/Nullable.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import type {BaseProps} from "./index";
-import {EnumRadio} from "./index";
-import type {ControlledFormValue} from "../../internal/type";
-import {i18n} from "../../internal/i18n/core";
-
-type NullType = "@@NULL";
-
-export interface Props<Enum extends string | boolean | number> extends BaseProps<Enum>, ControlledFormValue<Enum | null> {
-    nullText?: React.ReactChild;
-    nullPositionIndex?: number;
-}
-
-export class Nullable<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumRadio.Nullable";
-
-    private readonly nullValue: NullType = "@@NULL";
-
-    render() {
-        const {value, onChange, nullText, nullPositionIndex, list, translator, ...restProps} = this.props;
-        const t = i18n();
-
-        const wrappedValue = value === null ? this.nullValue : value;
-        const wrappedOnChange = (value: Enum | NullType) => onChange(value === this.nullValue ? null : value);
-        const wrappedList: Array<Enum | NullType> = [...list];
-        wrappedList.splice(nullPositionIndex || 0, 0, this.nullValue);
-        const wrappedTranslator = (value: Enum | NullType) => (value === this.nullValue ? nullText ?? t.all : translator ? translator(value) : value.toString());
-
-        return <EnumRadio value={wrappedValue} onChange={wrappedOnChange} list={wrappedList} translator={wrappedTranslator} {...restProps} />;
-    }
-}

package/src/core/EnumRadio/index.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import type {RadioChangeEvent} from "../Radio";
-import {Radio} from "../Radio";
-import type {ControlledFormValue} from "../../internal/type";
-import {Nullable} from "./Nullable";
-import {InitialNullable} from "./InitialNullable";
-import {Map} from "./Map";
-
-export interface BaseProps<Enum extends string | boolean | number> {
-    list: readonly Enum[];
-    translator?: (enumValue: Enum) => React.ReactChild;
-    useButtonMode?: boolean;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export interface Props<Enum extends string | boolean | number> extends BaseProps<Enum>, ControlledFormValue<Enum> {}
-
-export class EnumRadio<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumRadio";
-    static Nullable = Nullable;
-    static InitialNullable = InitialNullable;
-    static Map = Map;
-
-    onChange = (event: RadioChangeEvent) => {
-        const enumValue: Enum = event.target.value;
-        this.props.onChange(enumValue);
-    };
-
-    render() {
-        const {list, translator, value, useButtonMode, disabled, className, style} = this.props;
-        const RadioItem = useButtonMode ? Radio.Button : Radio;
-        return (
-            <Radio.Group value={value} onChange={this.onChange} disabled={disabled} className={className} style={style} optionType={useButtonMode ? "button" : undefined}>
-                {list.map(_ => (
-                    // RadioItem can accept any type as value, and emit the exact type while onChange
-                    <RadioItem key={_.toString()} value={_}>
-                        {translator ? translator(_) : _.toString()}
-                    </RadioItem>
-                ))}
-            </Radio.Group>
-        );
-    }
-}

package/src/core/EnumSelect/InitialNullable.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import type {BaseProps} from "./index";
-import {EnumSelect} from "./index";
-
-export interface Props<Enum extends string | boolean | number> extends BaseProps<Enum> {
-    value: Enum | null;
-    onChange: (newValue: Enum) => void;
-}
-
-export class InitialNullable<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
-    static displayName = "EnumSelect.InitialNullable";
-
-    render() {
-        const {value, ...restProps} = this.props;
-
-        const wrappedValue = value as Enum;
-
-        return <EnumSelect value={wrappedValue} {...restProps} />;
-    }
-}