@pinnacle0/web-ui 0.3.23 → 0.3.26

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 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

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

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

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

@@ -1,121 +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"> {
-    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

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

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

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

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

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

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

@@ -1,87 +0,0 @@
-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>
-        );
-    }
-}