@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,23 @@
+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 FooterData {
+    measure?: Measure;
+}
+
+export const Footer = (props: Props) => {
+    const {loading, ended, loadingMessage, endMessage, measure} = props;
+    const measureRef = React.useRef(measure);
+    measureRef.current = measure;
+
+    return (
+        <div className="g-flat-list-footer" ref={measure}>
+            {loading && <Spinner loading message={loadingMessage ?? "loading..."} />}
+            {ended && !loading && (endMessage ?? "All data loaded")}
+            {!ended && !loading && "Pull up to loading more "}
+        </div>
+    );
+};

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

@@ -0,0 +1,13 @@
+.g-flat-list-spinner {
+    position: relative;
+
+    .ant-spin {
+        position: absolute;
+        left: 0;
+        transform: translateX(-150%);
+
+        .anticon.ant-spin-dot {
+            font-size: 14px;
+        }
+    }
+}

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

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

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

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

@@ -0,0 +1,33 @@
+.g-flat-list-wrapper {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-flow: column;
+
+    .inner-container {
+        flex: 1;
+        transition: all 300ms cubic-bezier(0, 0.61, 0.28, 1.22);
+        max-height: 100%;
+        will-change: transform;
+
+        .list-wrapper {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+        }
+    }
+
+    .g-flat-list-loading {
+        width: 100%;
+        padding: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        left: 0;
+        min-height: 50px;
+        will-change: transform;
+        transform: translateY(-100%);
+    }
+}

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

@@ -0,0 +1,121 @@
+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"> {
+    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,
+        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("g-flat-list-wrapper", className)} style={style} {...(bounceEffect ? handlers : {})}>
+            <div className={classNames("inner-container", innerClassName)} style={innerStyle} ref={animatedRef}>
+                <Loading loading={loading && loadingType === "refresh"} message={pullDownRefreshMessage} />
+                <div className="list-wrapper" ref={listWrapperRef} onScroll={handleScroll}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/core/FlatList/shared/hooks/useBounceSwipe.ts

@@ -0,0 +1,120 @@
+import React from "react";
+import {useElementScrollState} from "./useElementScrollState";
+import type {SwipeHookResult, SwipeState} from "../../../../hooks/useSwipe";
+import {Direction, useSwipe} from "../../../../hooks/useSwipe";
+import {useTransform} from "../../../../hooks/useTransform";
+
+export type Boundary = "upper" | "lower" | null;
+
+interface BounceSwipeState extends SwipeState {
+    // always be null when inner content is not scrollable
+    boundary: Boundary;
+}
+
+export type BounceSwipeHandler = (state: BounceSwipeState) => void;
+
+type BounceSwipeHookResult = SwipeHookResult;
+
+interface BounceSwipeHandlers {
+    onMove?: BounceSwipeHandler;
+    onStart?: BounceSwipeHandler;
+    onEnd?: BounceSwipeHandler;
+    onCancel?: BounceSwipeHandler;
+}
+
+interface BounceSwipeOption extends BounceSwipeHandlers {
+    axis: "vertical" | "horizontal";
+    // Use to determine content is scrollable or not
+    contentRef: React.RefObject<HTMLElement>;
+    // Element Ref which is going to be applied bounce transform and animation
+    animatedRef: React.RefObject<HTMLElement>;
+    baseOffset?: number;
+}
+
+export const useBounceSwipe = (options: BounceSwipeOption): BounceSwipeHookResult => {
+    const {contentRef, animatedRef, axis, baseOffset = 0, onStart, onMove, onEnd, onCancel} = options;
+    const [boundary, setBoundary] = React.useState<Boundary>(null);
+    const transform = useTransform(animatedRef, {duration: 300, timingFunction: "cubic-bezier(0, 0.61, 0.28, 1.22)", property: "transform"});
+    const startOffsetRef = React.useRef(0);
+
+    const isX = React.useMemo(() => axis === "horizontal", [axis]);
+    const isY = React.useMemo(() => axis === "vertical", [axis]);
+    const {isScrollable, isScrollTop, isScrollBottom, isScrollLeft, isScrollRight} = useElementScrollState(contentRef);
+
+    const threshold = ({direction}: SwipeState): boolean => {
+        if (isY) {
+            return (direction === Direction.DOWN && isScrollTop()) || (direction === Direction.UP && isScrollBottom());
+        } else {
+            return (direction === Direction.RIGHT && isScrollLeft()) || (direction === Direction.LEFT && isScrollRight());
+        }
+    };
+
+    const clearSwipe = () => {
+        startOffsetRef.current = 0;
+        setBoundary(null);
+    };
+
+    React.useEffect(() => {
+        // Changing overflow style to fixed laggy bounce swipe in chrome
+        if (contentRef.current) {
+            if (boundary) {
+                contentRef.current.style.overflow = "hidden";
+            } else {
+                contentRef.current.style.overflow = "auto";
+            }
+        }
+    }, [boundary, contentRef]);
+
+    const getOffset = (delta: [number, number], boundary: Boundary): Readonly<[number, number]> | null => {
+        let resultOffset: Readonly<[number, number]> | null = [0, 0];
+        const limitedOffset = delta[isX ? 0 : 1] - startOffsetRef.current + baseOffset;
+        const computeResultOffset = (value: number) => [isX ? value : 0, isY ? value : 0] as const;
+        if (boundary === "upper") {
+            resultOffset = limitedOffset < 0 ? null : computeResultOffset(limitedOffset);
+        } else if (boundary === "lower") {
+            resultOffset = limitedOffset > 0 ? null : computeResultOffset(limitedOffset);
+        } else {
+            resultOffset = computeResultOffset(limitedOffset);
+        }
+
+        return resultOffset;
+    };
+
+    const handlers = useSwipe(
+        {
+            onStart: state => {
+                const {
+                    delta: [x, y],
+                    direction,
+                } = state;
+                isScrollable(axis) && setBoundary(direction === Direction.DOWN ? "upper" : "lower");
+                startOffsetRef.current = isX ? x : y;
+                onStart?.({...state, boundary});
+            },
+            onMove: state => {
+                const {delta, cancel} = state;
+                const offset = getOffset(delta, boundary);
+                if (!offset) {
+                    cancel();
+                } else {
+                    const [x, y] = offset;
+                    transform.to({x, y, immediate: true});
+                    onMove?.({...state, boundary});
+                }
+            },
+            onEnd: state => {
+                onEnd?.({...state, boundary});
+                transform.clear();
+                clearSwipe();
+            },
+            onCancel: state => {
+                onCancel?.({...state, boundary});
+                transform.clear();
+                clearSwipe();
+            },
+        },
+        {threshold}
+    );
+
+    return handlers;
+};

package/src/core/FlatList/shared/hooks/useElementScrollState.ts

@@ -0,0 +1,43 @@
+import React from "react";
+
+// need to cache scrollable results
+
+// only change when window resize, data change, and css change
+
+export const useElementScrollState = (ref: React.RefObject<HTMLElement | null>) => {
+    const isScrollable = React.useCallback(
+        (direction: "vertical" | "horizontal") => {
+            if (ref.current) {
+                const element = ref.current;
+                return direction === "vertical" ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+            } else {
+                return false;
+            }
+        },
+        [ref]
+    );
+
+    const isScrollTop = React.useCallback(() => ref.current?.scrollTop === 0, [ref]);
+    const isScrollBottom = React.useCallback(() => {
+        const element = ref.current;
+        if (element) {
+            const {scrollHeight, scrollTop, clientHeight} = element;
+            return Math.ceil(scrollTop) + clientHeight >= scrollHeight;
+        } else {
+            return false;
+        }
+    }, [ref]);
+
+    const isScrollLeft = React.useCallback(() => ref.current?.scrollLeft === 0, [ref]);
+    const isScrollRight = React.useCallback(() => {
+        const element = ref.current;
+        if (element) {
+            const {scrollWidth, scrollLeft, clientWidth} = element;
+            return Math.ceil(scrollLeft) + clientWidth >= scrollWidth;
+        } else {
+            return false;
+        }
+    }, [ref]);
+
+    return {isScrollTop, isScrollBottom, isScrollLeft, isScrollRight, isScrollable};
+};

package/src/core/FlatList/shared/hooks/useLoadingWithDelay.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+/**
+ * This hook prevent loading state causing ui to flash
+ * For instance, in real life loading only last for 50ms, so it make loading ui appear in a blink of an eye, which is not good
+ * Hook will only delay the loading state change from true to false, it force loading ui at least appear for a period of time
+ * @param loading
+ * @param delay
+ * @returns
+ */
+export const useLoadingWithDelay = (loading: boolean, delay: number): Readonly<boolean> => {
+    const [loadingWithDelay, setLoadingWithDelay] = React.useState(loading);
+    const startTimeRef = React.useRef<number | null>(null);
+    const setLoadingRef = React.useRef<(value: boolean) => void>();
+
+    const setLoading = React.useCallback(
+        (value: boolean) => {
+            if (value) {
+                setLoadingWithDelay(true);
+                startTimeRef.current = Date.now();
+                setTimeout(() => (startTimeRef.current = null), delay);
+            } else {
+                if (startTimeRef.current) {
+                    setTimeout(() => setLoadingWithDelay(false), Math.abs(delay - (Date.now() - startTimeRef.current)));
+                } else {
+                    setLoadingWithDelay(value);
+                }
+            }
+        },
+        [delay]
+    );
+
+    setLoadingRef.current = setLoading;
+
+    React.useEffect(() => {
+        setLoadingRef.current?.(loading);
+    }, [loading]);
+
+    return loadingWithDelay;
+};

package/src/core/FlatList/type.tsx

@@ -0,0 +1,40 @@
+export const PULL_DOWN_REFRESH_THRESHOLD = 50;
+
+export type LoadingType = "refresh" | "loading" | null;
+
+export interface FlatListItemProps<T> {
+    data: T;
+    index: number;
+}
+
+export type ItemRenderer<T> = React.FunctionComponent<FlatListItemProps<T>>;
+
+export interface FlatListProps<T> {
+    data: T[];
+    renderItem: ItemRenderer<T>;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    /** When either onPullUpLoading or onPullDownRefresh is given, loading must be given too */
+    onPullUpLoading?: () => void;
+    onPullDownRefresh?: () => void;
+    emptyPlaceholder?: string | React.ReactElement;
+    contentStyle?: React.CSSProperties;
+    bounceEffect?: boolean;
+    hideFooter?: boolean;
+    pullUpLoadingMessage?: string;
+    endOfListMessage?: string;
+    pullDownRefreshMessage?: string;
+}
+
+export interface FlatListItemProps<T> {
+    data: T;
+    index: number;
+}
+
+export interface FooterData {
+    loading: boolean;
+    ended: boolean;
+    loadingMessage?: string;
+    endMessage?: string;
+}

package/src/core/Foldable/index.less

@@ -0,0 +1,77 @@
+@import "../../css/variable.less";
+
+.g-foldable-container {
+    font-size: 16px;
+    display: flex;
+    flex-flow: column;
+    min-height: 24px;
+    width: 100%;
+
+    > .header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: @lib-background-gray;
+        padding: 6px 10px;
+
+        > .right {
+            position: relative;
+            display: flex;
+            margin-left: auto;
+            align-items: center;
+
+            > .custom + a {
+                z-index: 1;
+                background: @lib-main-blue;
+                border-radius: 50%;
+                width: 20px;
+                height: 20px;
+                padding: 0;
+                margin-left: 10px;
+
+                // Arrow
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    border: solid rgba(0 0 0 / 65%);
+                    border-width: 1px 0 0 1px;
+                    transform: translateY(2px) translateY(-50%) rotate(45deg);
+                    transition: transform 0.3s;
+                    border-color: white;
+                    right: 6px;
+                    height: 8px;
+                    width: 8px;
+                }
+
+                &:hover {
+                    opacity: 0.8;
+                }
+
+                &:active {
+                    opacity: 0.9;
+                }
+
+                &.folded::before {
+                    transform: translateY(-2px) translateY(-50%) rotate(45deg) rotate(180deg);
+                }
+            }
+        }
+    }
+
+    > .content {
+        width: 100%;
+        max-height: 1000vh;
+        transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
+        overflow: hidden;
+
+        &.expanded {
+            border: 1px solid @lib-background-gray;
+        }
+
+        &.folded {
+            max-height: 0;
+            transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
+        }
+    }
+}

package/src/core/Foldable/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import type {SafeReactChild, SafeReactChildren} from "../../internal/type";
+import "./index.less";
+
+export interface Props {
+    title: SafeReactChild;
+    children: SafeReactChildren;
+    expanded: boolean;
+    onExpansionChange: (expanded: boolean) => void;
+    titleRight?: SafeReactChild;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export class Foldable extends React.PureComponent<Props> {
+    static displayName = "Foldable";
+
+    expand = () => this.props.onExpansionChange(true);
+
+    fold = () => this.props.onExpansionChange(false);
+
+    render() {
+        const {title, children, titleRight, className, style, expanded} = this.props;
+        return (
+            <div className={classNames("g-foldable-container", className)} style={style}>
+                <div className={classNames("header", expanded ? "expanded" : "folded")}>
+                    {title}
+                    <div className="right">
+                        <div className="custom">{titleRight}</div>
+                        {expanded ? <a className="expanded" onClick={this.fold} /> : <a className="folded" onClick={this.expand} />}
+                    </div>
+                </div>
+                <div className={classNames("content", expanded ? "expanded" : "folded")}>{children}</div>
+            </div>
+        );
+    }
+}

package/src/core/Form/Item.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import {Tooltip} from "../Tooltip";
+import {FormValidationContext} from "./context";
+import type {SafeReactChild} from "../../internal/type";
+
+export type FormValidator = () => string | null | Promise<string | null>;
+
+export interface Props {
+    children: SafeReactChild;
+    label?: SafeReactChild;
+    required?: boolean;
+    extra?: SafeReactChild;
+    validator?: FormValidator;
+    className?: string;
+    labelStyle?: React.CSSProperties;
+    widthMode?: "fill" | "auto" | "shrink"; // No affect for <Form layout="inline">
+}
+
+interface State {
+    errorMessage: string | null;
+}
+
+export class Item extends React.PureComponent<Props, State> {
+    static displayName = "Form.Item";
+    static contextType = FormValidationContext;
+    declare context: React.ContextType<typeof FormValidationContext>;
+
+    private readonly overlayStyle: React.CSSProperties = {color: "red"};
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {errorMessage: null};
+    }
+
+    componentDidMount() {
+        this.context.registerValidator(this.validate);
+    }
+
+    componentWillUnmount() {
+        this.context.unregisterValidator(this.validate);
+    }
+
+    validate = async (): Promise<boolean> => {
+        const {validator} = this.props;
+        if (validator) {
+            const errorMessage = await validator();
+            this.setState({errorMessage});
+            return errorMessage === null;
+        } else {
+            return true;
+        }
+    };
+
+    render() {
+        const {label, children, className, required, extra, labelStyle, widthMode} = this.props;
+        const {errorMessage} = this.state;
+        const errorDisplayMode = this.context.errorDisplayMode();
+
+        const childrenNode = typeof children === "number" || typeof children === "string" ? <span className="pure-text">{children}</span> : children;
+        const extraMessageNode = extra && <div className="message">{extra}</div>;
+
+        return (
+            <div className={classNames("g-form-item", className)}>
+                <div className={classNames("g-form-item-label", {required})} style={labelStyle}>
+                    {label && <label>{label}</label>}
+                </div>
+                <div className={classNames("g-form-item-children", {"has-error": errorMessage}, widthMode ? `width-${widthMode}` : "")}>
+                    {errorDisplayMode.type === "extra" ? (
+                        <React.Fragment>
+                            {childrenNode}
+                            {extraMessageNode}
+                            {errorMessage && <div className="message error">{errorMessage}</div>}
+                        </React.Fragment>
+                    ) : (
+                        <React.Fragment>
+                            <Tooltip title={errorMessage} visible={errorMessage !== null} placement={errorDisplayMode.placement || "right"} color="white" overlayInnerStyle={this.overlayStyle}>
+                                {childrenNode}
+                            </Tooltip>
+                            {extraMessageNode}
+                        </React.Fragment>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}