@pinnacle0/web-ui 0.3.38 → 0.3.39

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.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,28 +0,0 @@
-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>
-    );
-};

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

@@ -1,142 +0,0 @@
-import React from "react";
-import {defaultRangeExtractor, useVirtual} from "react-virtual";
-import {classNames} from "../../../util/ClassNames";
-import {useLoadingWithDelay} from "../shared/hooks/useLoadingWithDelay";
-import {Wrapper} from "../shared/Wrapper";
-import {Footer} from "../shared/Footer";
-import {GetRowKey} from "../shared/GetRowKey";
-import {Item} from "./Item";
-import type {VirtualFlatListProps} from "./type";
-import type {Range} from "react-virtual";
-import type {FooterData, LoadingType} from "../type";
-import "./index.less";
-
-/**
- * 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,
-        rowKey,
-        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,
-                      __markedAsFooterData: true,
-                  } as FooterData,
-              ];
-    }, [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 && !loadingWithDelay ? (
-                emptyPlaceholder
-            ) : (
-                <div className="list" style={{height: rowVirtualizer.totalSize}}>
-                    {rowVirtualizer.virtualItems.map(virtualItem => {
-                        const data = listData[virtualItem.index];
-                        if (listData[virtualItem.index]?.["__markedAsFooterData"] === true) {
-                            const {loading, loadingMessage, endMessage, ended} = data as FooterData;
-                            return <Footer key={virtualItem.index} loading={loading} ended={ended} loadingMessage={loadingMessage} endMessage={endMessage} measure={virtualItem.measureRef} />;
-                        } else {
-                            return <Item key={GetRowKey(rowKey, data as T, virtualItem.index)} virtualItem={virtualItem} data={data as T} gap={gap} renderItem={renderItem} />;
-                        }
-                    })}
-                </div>
-            )}
-        </Wrapper>
-    );
-};

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

@@ -1,26 +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;
-    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,95 +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";
-import {GetRowKey} from "./shared/GetRowKey";
-
-export const FlatList = function <T>(props: FlatListProps<T>) {
-    const {
-        data,
-        renderItem: ItemRenderer,
-        rowKey,
-        loading,
-        bounceEffect = true,
-        className,
-        style,
-        gap,
-        onPullDownRefresh,
-        onPullUpLoading,
-        contentStyle,
-        emptyPlaceholder,
-        pullDownRefreshingMessage,
-        pullUpLoadMoreMessage,
-        pullDownRefreshMessage,
-        pullUpLoadingMessage,
-        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?.();
-            }
-        }
-    };
-
-    const margin = React.useMemo(
-        (): React.CSSProperties => (gap ? (typeof gap === "number" ? {margin: gap} : {marginLeft: gap.left, marginRight: gap.right, marginBottom: gap.bottom, marginTop: gap.top}) : {}),
-        [gap]
-    );
-
-    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}
-            pullDownRefreshingMessage={pullDownRefreshingMessage}
-            onScroll={onScroll}
-        >
-            {data.length === 0 ? (
-                emptyPlaceholder
-            ) : (
-                <div className="list">
-                    {data.map((d, i) => (
-                        <div className="g-flat-list-item" key={GetRowKey(rowKey, d, i)} style={{...margin}}>
-                            <ItemRenderer data={d} index={i} />
-                        </div>
-                    ))}
-                    {!hideFooter && (
-                        <Footer
-                            loading={loadingWithDelay && loadingType === "loading"}
-                            ended={!onPullUpLoading}
-                            loadMoreMessage={pullUpLoadMoreMessage}
-                            loadingMessage={pullUpLoadingMessage}
-                            endMessage={endOfListMessage}
-                        />
-                    )}
-                </div>
-            )}
-        </Wrapper>
-    );
-};

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

@@ -1,23 +0,0 @@
-import React from "react";
-import type {Measure} from "../../VirtualFlatList/type";
-import type {FooterData} from "../../type";
-import {Spinner} from "../Spinner";
-import "./index.less";
-
-export interface Props extends Omit<FooterData, "__markedAsFooterData"> {
-    measure?: Measure;
-}
-
-export const Footer = (props: Props) => {
-    const {loading, ended, loadMoreMessage, loadingMessage, endMessage, measure} = props;
-    const measureRef = React.useRef(measure);
-    measureRef.current = measure;
-
-    return (
-        <div className="g-flat-list-footer" ref={measure}>
-            {loading && (typeof loadingMessage !== "object" ? <Spinner loading message={loadingMessage ?? "loading..."} /> : loadingMessage)}
-            {ended && !loading && (endMessage ?? "All data loaded")}
-            {!ended && !loading && (loadMoreMessage ?? "Pull up to loading more")}
-        </div>
-    );
-};

package/src/core/FlatList/shared/GetRowKey.ts

@@ -1,11 +0,0 @@
-import type {RowKey} from "../type";
-
-export function GetRowKey<T>(rowKey: RowKey<T>, data: T, index: number): string | number {
-    if (rowKey === "index") {
-        return index;
-    } else if (typeof rowKey === "function") {
-        return rowKey(data, index);
-    } else {
-        return data[rowKey] as any;
-    }
-}

package/src/core/FlatList/shared/Spinner/index.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import {Spin} from "../../../Spin";
-import "./index.less";
-
-interface Props {
-    loading: boolean;
-    message?: string;
-}
-
-export const Spinner = (props: Props) => {
-    const {loading, message} = props;
-    return (
-        <div className="g-flat-list-spinner">
-            <Spin spinning={loading} size="small" />
-            <div className="message">{message}</div>
-        </div>
-    );
-};

package/src/core/FlatList/shared/Wrapper/Loading.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import {Spinner} from "../Spinner";
-
-interface Props {
-    loading: boolean;
-    message?: React.ReactElement | string;
-    loadingMessage?: React.ReactElement | string;
-}
-
-export const Loading = (props: Props) => {
-    const {loading, message, loadingMessage} = props;
-    return (
-        <div className="g-flat-list-loading">
-            {loading ? typeof loadingMessage !== "object" ? <Spinner loading={loading} message={loadingMessage ?? "loading..."} /> : loadingMessage : message ?? "Release to refresh"}
-        </div>
-    );
-};

package/src/core/FlatList/shared/Wrapper/index.tsx

@@ -1,123 +0,0 @@
-import React from "react";
-import {classNames} from "../../../../util/ClassNames";
-import {Direction} from "../../../../hooks/useSwipe";
-import {useTransform} from "../../../../hooks/useTransform";
-import {useBounceSwipe} from "../hooks/useBounceSwipe";
-import {useElementScrollState} from "../hooks/useElementScrollState";
-import type {FlatListProps, LoadingType} from "../../type";
-import {PULL_DOWN_REFRESH_THRESHOLD} from "../../type";
-import {Loading} from "./Loading";
-import "./index.less";
-
-interface Props<T>
-    extends Pick<FlatListProps<T>, "loading" | "bounceEffect" | "onPullUpLoading" | "onPullDownRefresh" | "className" | "style" | "pullDownRefreshMessage" | "pullDownRefreshingMessage"> {
-    children: React.ReactNode;
-    listWrapperRef: React.RefObject<HTMLDivElement>;
-    loadingType: LoadingType;
-    onLoadingTypeChange: (type: LoadingType) => void;
-    innerClassName?: string;
-    innerStyle?: React.CSSProperties;
-    onScroll?: (event: React.UIEvent) => void;
-}
-
-export const Wrapper = function <T>(props: Props<T>) {
-    const {
-        children,
-        bounceEffect,
-        listWrapperRef,
-        loadingType,
-        onLoadingTypeChange,
-        loading = false,
-        onPullDownRefresh,
-        onPullUpLoading,
-        className,
-        innerClassName,
-        style,
-        innerStyle,
-        pullDownRefreshMessage,
-        pullDownRefreshingMessage,
-        onScroll,
-    } = props;
-    const startOffsetRef = React.useRef(0);
-
-    const animatedRef = React.useRef<HTMLDivElement>(null);
-
-    const loadingTypeRef = React.useRef<LoadingType>(null);
-    loadingTypeRef.current = loadingType;
-
-    const onLoadingTypeChangeRef = React.useRef(onLoadingTypeChange);
-    onLoadingTypeChangeRef.current = onLoadingTypeChange;
-
-    const {isScrollable} = useElementScrollState(listWrapperRef);
-    const transform = useTransform(animatedRef);
-    const transformRef = React.useRef(transform);
-    transformRef.current = transform;
-
-    const reset = React.useCallback(() => {
-        startOffsetRef.current = 0;
-    }, []);
-
-    const handlers = useBounceSwipe({
-        axis: "vertical",
-        contentRef: listWrapperRef,
-        animatedRef,
-        onStart: ({delta: [, y]}) => {
-            startOffsetRef.current = y;
-        },
-        onEnd: ({delta, direction, boundary}) => {
-            if (loading) {
-                if (boundary !== "upper") {
-                    transform.to({
-                        y: PULL_DOWN_REFRESH_THRESHOLD,
-                    });
-                }
-            } else {
-                if (Math.abs(startOffsetRef.current - delta[1]) >= PULL_DOWN_REFRESH_THRESHOLD) {
-                    const scrollable = isScrollable("vertical");
-                    if (boundary === "upper" || (!scrollable && direction === Direction.DOWN)) {
-                        onLoadingTypeChange("refresh");
-                        onPullDownRefresh?.();
-                    } else {
-                        onLoadingTypeChange("loading");
-                        onPullUpLoading?.();
-                    }
-                }
-            }
-            reset();
-        },
-        onCancel: reset,
-    });
-
-    const handleScroll = React.useCallback(
-        (e: React.UIEvent) => {
-            transformRef.current.clear();
-            onScroll?.(e);
-        },
-        [onScroll]
-    );
-
-    React.useEffect(() => {
-        if (loading) {
-            if (loadingTypeRef.current === "refresh") {
-                transformRef.current.to({
-                    y: PULL_DOWN_REFRESH_THRESHOLD,
-                    immediate: false,
-                });
-            }
-        } else {
-            transformRef.current.clear();
-            onLoadingTypeChangeRef.current(null);
-        }
-    }, [loading]);
-
-    return (
-        <div className={classNames(className, "g-flat-list-wrapper")} style={style} {...(bounceEffect ? handlers : {})}>
-            <div className={classNames("inner-container", innerClassName)} style={innerStyle} ref={animatedRef}>
-                <Loading loading={loading && loadingType === "refresh"} message={pullDownRefreshMessage} loadingMessage={pullDownRefreshingMessage} />
-                <div className="list-wrapper" ref={listWrapperRef} onScroll={handleScroll}>
-                    {children}
-                </div>
-            </div>
-        </div>
-    );
-};