@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,17 @@
+.g-enum-select {
+    &-label {
+        display: flex;
+        align-items: center;
+    }
+
+    &-prefix {
+        margin-right: 4px;
+    }
+}
+
+.g-enum-select.ant-select {
+    .ant-select-selection-item {
+        display: flex;
+        align-items: center;
+    }
+}

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,36 @@
+import React from "react";
+import {Footer} from "../shared/Footer";
+import type {FooterData} from "../type";
+import type {ItemRenderer, Measure} from "./type";
+
+export interface Gap {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+
+export interface ListItemProps<T> {
+    measure: Measure;
+    data: (T | FooterData)[];
+    index: number;
+    itemRenderer: ItemRenderer<T>;
+    gap?: Gap;
+}
+
+export const Item = function <T>(props: ListItemProps<T>) {
+    const {data, index, itemRenderer: ItemRenderer, gap, measure} = props;
+
+    const padding = React.useMemo((): React.CSSProperties => (gap ? {paddingLeft: gap.left, paddingRight: gap.right, paddingBottom: gap.bottom, paddingTop: gap.top} : {}), [gap]);
+
+    if (index === data.length - 1) {
+        const {loading, loadingMessage, endMessage, ended} = data[index] as FooterData;
+        return <Footer loading={loading} ended={ended} loadingMessage={loadingMessage} endMessage={endMessage} measure={measure} />;
+    } else {
+        return (
+            <div className="g-virtual-flat-list-item" style={{...padding}}>
+                <ItemRenderer data={data[index] as T} index={index} measure={measure} />
+            </div>
+        );
+    }
+};

package/src/core/FlatList/VirtualFlatList/index.less

@@ -0,0 +1,22 @@
+.g-virtual-flat-list {
+    .list-wrapper {
+        width: 100%;
+        height: 100%;
+
+        .list {
+            width: 100%;
+            position: relative;
+        }
+    }
+
+    .g-virtual-flat-list-item-wrapper {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .g-virtual-flat-list-item {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,126 @@
+import React from "react";
+import {defaultRangeExtractor, useVirtual} from "react-virtual";
+import {Wrapper} from "../shared/Wrapper";
+import {Item} from "./Item";
+import "./index.less";
+import type {VirtualFlatListProps} from "./type";
+import type {Range} from "react-virtual";
+import type {FooterData, LoadingType} from "../type";
+import {useLoadingWithDelay} from "../shared/hooks/useLoadingWithDelay";
+import {classNames} from "../../../util/ClassNames";
+
+/**
+ * VirtualizedFlatList currently only work with item without and size related animation and transition since it break the layout. This will be improve in the future
+ */
+export const VirtualFlatList = function <T>(props: VirtualFlatListProps<T>) {
+    const {
+        data,
+        renderItem,
+        loading,
+        bounceEffect = true,
+        className,
+        style,
+        onPullDownRefresh,
+        onPullUpLoading,
+        emptyPlaceholder,
+        contentStyle,
+        gap,
+        autoLoad = true,
+        overscan = 3,
+        hideFooter,
+        estimateSize,
+        listRef,
+        pullUpLoadingMessage,
+        endOfListMessage,
+        pullDownRefreshMessage,
+    } = props;
+
+    const listWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [loadingType, setLoadingType] = React.useState<LoadingType>(null);
+    const currentRangeRef = React.useRef<Range>();
+    const previousRangeRef = React.useRef<Range>();
+
+    const loadingWithDelay = useLoadingWithDelay(loading ?? false, 300);
+
+    const listData: Array<T | FooterData> = React.useMemo(() => {
+        return hideFooter ? data : [...data, {loading: loadingWithDelay && loadingType === "loading", ended: !onPullUpLoading, endMessage: endOfListMessage, loadingMessage: pullUpLoadingMessage}];
+    }, [loadingWithDelay, loadingType, endOfListMessage, onPullUpLoading, pullUpLoadingMessage, data, hideFooter]);
+
+    const rangeExtractor = React.useCallback((range: Range) => {
+        previousRangeRef.current = currentRangeRef.current ?? range;
+        currentRangeRef.current = range;
+        return defaultRangeExtractor(range);
+    }, []);
+
+    const rowVirtualizer = useVirtual({
+        size: listData.length,
+        parentRef: listWrapperRef,
+        overscan,
+        estimateSize,
+        rangeExtractor,
+    });
+    const rowVirtualizerRef = React.useRef(rowVirtualizer);
+    rowVirtualizerRef.current = rowVirtualizer;
+
+    React.useImperativeHandle(listRef, () => ({
+        measure: rowVirtualizer.measure,
+    }));
+
+    React.useEffect(() => {
+        if ((loading === undefined || loading === null) && (onPullDownRefresh || onPullUpLoading)) {
+            throw new Error("Loading must be specify when given either onPullDownRefresh or onPullUpLoading");
+        }
+    }, [onPullDownRefresh, onPullUpLoading, loading]);
+
+    // the reason why onScroll event is used to simulate auto loading instead of rangeExtractor is rangeExtractor return a wrong range when on mount
+    const onAutoLoad = () => {
+        const previousRange = previousRangeRef.current;
+        const currentRange = currentRangeRef.current;
+        if (
+            previousRange &&
+            currentRange &&
+            autoLoad &&
+            onPullUpLoading &&
+            !loadingWithDelay &&
+            // check going downward
+            previousRange.end < currentRange.end &&
+            currentRange.end > data.length - 2 - (typeof autoLoad === "number" ? autoLoad : 3)
+        ) {
+            setLoadingType("loading");
+            onPullUpLoading();
+        }
+    };
+
+    // TODO/Alvis loading more when item can not fill the whole viewport
+
+    return (
+        <Wrapper
+            className={classNames("g-virtual-flat-list", className)}
+            bounceEffect={bounceEffect}
+            listWrapperRef={listWrapperRef}
+            loadingType={loadingType}
+            onLoadingTypeChange={setLoadingType}
+            loading={loadingWithDelay}
+            onPullDownRefresh={onPullDownRefresh}
+            onPullUpLoading={onPullUpLoading}
+            innerStyle={contentStyle}
+            style={style}
+            pullDownRefreshMessage={pullDownRefreshMessage}
+            onScroll={onAutoLoad}
+        >
+            {data.length === 0 ? (
+                emptyPlaceholder
+            ) : (
+                <div className="list" style={{height: rowVirtualizer.totalSize}}>
+                    {rowVirtualizer.virtualItems.map(virtualItem => {
+                        return (
+                            <div key={virtualItem.index} className="g-virtual-flat-list-item-wrapper" style={{transform: `translateY(${virtualItem.start}px)`}} ref={virtualItem.measureRef}>
+                                <Item data={listData} index={virtualItem.index} itemRenderer={renderItem} measure={virtualItem.measureRef} gap={gap} />
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </Wrapper>
+    );
+};

package/src/core/FlatList/VirtualFlatList/type.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import type {FlatListItemProps, FlatListProps} from "../type";
+
+// FlatList related type
+export type Measure = (node: HTMLElement | null) => void;
+
+export interface VirtualFlatListHandle {
+    measure: () => void;
+}
+
+export interface VirtualFlatListProps<T> extends Omit<FlatListProps<T>, "renderItem" | "autoLoad"> {
+    renderItem: ItemRenderer<T>;
+    /** Automatic load new data when scroll to bottom, a number {X} mean: when to scroll to last {X} items, auto load is going to be triggered */
+    autoLoad?: boolean | number;
+    /** Must wrap with React.useCallback */
+    estimateSize?: (index: number) => number;
+    /** The amount of items to load both behind and ahead of the current window range, default = 3 */
+    overscan?: number;
+    gap?: {top?: number; bottom?: number; left?: number; right?: number};
+    listRef?: React.RefObject<VirtualFlatListHandle>;
+}
+
+export interface VirtualFlatListItemProps<T> extends FlatListItemProps<T> {
+    measure: Measure;
+}
+
+export type ItemRenderer<T> = React.FunctionComponent<VirtualFlatListItemProps<T>>;

package/src/core/FlatList/index.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import {Wrapper} from "./shared/Wrapper";
+import type {FlatListProps, LoadingType} from "./type";
+import {Footer} from "./shared/Footer";
+import {useLoadingWithDelay} from "./shared/hooks/useLoadingWithDelay";
+import {classNames} from "../../util/ClassNames";
+
+export const FlatList = function <T>(props: FlatListProps<T>) {
+    const {
+        data,
+        renderItem: ItemRenderer,
+        loading,
+        bounceEffect = true,
+        className,
+        style,
+        onPullDownRefresh,
+        onPullUpLoading,
+        pullDownRefreshMessage,
+        pullUpLoadingMessage,
+        contentStyle,
+        emptyPlaceholder,
+        endOfListMessage,
+        hideFooter,
+    } = props;
+
+    const listWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [loadingType, setLoadingType] = React.useState<LoadingType>(null);
+    const loadingWithDelay = useLoadingWithDelay(loading ?? false, 250);
+
+    React.useEffect(() => {
+        if ((loading === undefined || loading === null) && (onPullDownRefresh || onPullUpLoading)) {
+            throw new Error("Loading must be specify when given either onPullDownRefresh or onPullUpLoading");
+        }
+    }, [onPullDownRefresh, onPullUpLoading, loading]);
+
+    // Automatically loading new data when scroll near the bottom
+    const onScroll = (e: React.UIEvent) => {
+        if (!loadingWithDelay && onPullUpLoading) {
+            const {scrollHeight, scrollTop, clientHeight} = e.currentTarget;
+            if (scrollHeight * 0.8 < clientHeight + scrollTop) {
+                setLoadingType("loading");
+                onPullUpLoading?.();
+            }
+        }
+    };
+
+    return (
+        <Wrapper
+            className={classNames("g-flat-list", className)}
+            listWrapperRef={listWrapperRef}
+            bounceEffect={bounceEffect}
+            innerStyle={contentStyle}
+            loadingType={loadingType}
+            onLoadingTypeChange={setLoadingType}
+            loading={loadingWithDelay}
+            style={style}
+            onPullDownRefresh={onPullDownRefresh}
+            onPullUpLoading={onPullUpLoading}
+            pullDownRefreshMessage={pullDownRefreshMessage}
+            onScroll={onScroll}
+        >
+            {data.length === 0 ? (
+                emptyPlaceholder
+            ) : (
+                <div className="list">
+                    {data.map((d, i) => (
+                        <div className="g-flat-list-item" key={i}>
+                            <ItemRenderer data={d} index={i} />
+                        </div>
+                    ))}
+                    {!hideFooter && <Footer loading={loadingWithDelay && loadingType === "loading"} ended={!onPullUpLoading} endMessage={endOfListMessage} loadingMessage={pullUpLoadingMessage} />}
+                </div>
+            )}
+        </Wrapper>
+    );
+};

package/src/core/FlatList/shared/Footer/index.less

@@ -0,0 +1,8 @@
+.g-flat-list-footer {
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+}