@pinnacle0/web-ui 0.3.35 → 0.3.36

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

package/src/core/Drawer.tsx

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

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

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

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

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

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

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

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

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

package/src/core/EnumSelect/Map.tsx

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

package/src/core/EnumSelect/Nullable.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type {BaseProps} from "./index";
+import {EnumSelect} 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 = "EnumSelect.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 <EnumSelect value={wrappedValue} onChange={wrappedOnChange} list={wrappedList} translator={wrappedTranslator} {...restProps} />;
+    }
+}

package/src/core/EnumSelect/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import type {LabeledValue} from "antd/lib/select";
+import type {ControlledFormValue} from "../../internal/type";
+import {Select} from "../Select";
+import {Nullable} from "./Nullable";
+import {InitialNullable} from "./InitialNullable";
+import {Map} from "./Map";
+import "./index.less";
+
+export interface BaseProps<Enum extends string | boolean | number> {
+    list: readonly Enum[];
+    translator?: (enumValue: Enum) => React.ReactChild;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    suffixIcon?: React.ReactNode;
+}
+
+export interface Props<Enum extends string | boolean | number> extends BaseProps<Enum>, ControlledFormValue<Enum> {}
+
+export class EnumSelect<Enum extends string | boolean | number> extends React.PureComponent<Props<Enum>> {
+    private readonly trueValue = "@@TRUE";
+    private readonly falseValue = "@@FALSE";
+
+    static displayName = "EnumSelect";
+
+    static Nullable = Nullable;
+    static InitialNullable = InitialNullable;
+    static Map = Map;
+
+    getAntSelectValue = (): LabeledValue | undefined => {
+        const value = this.props.value as Enum;
+        if (value === null) {
+            // Special case for InitialNullable, to show placeholder, no pre-selection
+            return undefined;
+        }
+
+        const {translator} = this.props;
+        const antValue = value.toString();
+        const antLabel = translator ? translator(value) : antValue;
+        return {
+            value: antValue,
+            label: antLabel,
+        };
+    };
+
+    onChange = ({value: antValue}: LabeledValue) => {
+        const enumValue = antValue === this.trueValue ? true : antValue === this.falseValue ? false : antValue;
+        this.props.onChange(enumValue as Enum);
+    };
+
+    render() {
+        const {list, translator, disabled, className = "", style, placeholder, suffixIcon} = this.props;
+        return (
+            <Select<LabeledValue>
+                disabled={disabled}
+                labelInValue
+                value={this.getAntSelectValue()}
+                onChange={this.onChange}
+                className={`g-enum-select ${className}`}
+                style={style}
+                placeholder={placeholder}
+                suffixIcon={suffixIcon}
+            >
+                {list.map(_ => (
+                    <Select.Option key={_.toString()} value={_ === true ? this.trueValue : _ === false ? this.falseValue : _}>
+                        {translator ? translator(_) : _.toString()}
+                    </Select.Option>
+                ))}
+            </Select>
+        );
+    }
+}

package/src/core/FlatList/VirtualFlatList/Item.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type {VirtualItem} from "react-virtual";
+import type {ItemRenderer} from "./type";
+import type {Gap} from "../type";
+
+export interface ListItemProps<T> {
+    virtualItem: VirtualItem;
+    data: T;
+    renderItem: ItemRenderer<T>;
+    gap?: Gap;
+}
+
+export const Item = function <T>(props: ListItemProps<T>) {
+    const {data, virtualItem, gap, renderItem: ItemRenderer} = props;
+
+    const padding = React.useMemo(
+        (): React.CSSProperties => (gap ? (typeof gap === "number" ? {padding: gap} : {paddingLeft: gap.left, paddingRight: gap.right, paddingBottom: gap.bottom, paddingTop: gap.top}) : {}),
+        [gap]
+    );
+
+    return (
+        <div className="g-virtual-flat-list-item-wrapper" style={{transform: `translateY(${virtualItem.start}px)`}} ref={virtualItem.measureRef}>
+            <div className="g-virtual-flat-list-item" style={{...padding}}>
+                <ItemRenderer data={data} index={virtualItem.index} measure={virtualItem.measureRef} />
+            </div>
+        </div>
+    );
+};