@pinnacle0/web-ui 0.3.23 → 0.3.26

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

package/src/core/EnumSelect/Map.tsx

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

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

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

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

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

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

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

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

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

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