@pinnacle0/web-ui 0.3.36 → 0.3.39

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,56 +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 Gap =
-    | {
-          top?: number;
-          bottom?: number;
-          left?: number;
-          right?: number;
-      }
-    | number;
-export type ItemRenderer<T> = React.FunctionComponent<FlatListItemProps<T>>;
-
-export type RowKey<T> = (keyof T & string) | ((data: T, index: number) => string) | "index";
-
-export interface FlatListProps<T> {
-    data: T[];
-    renderItem: ItemRenderer<T>;
-    rowKey: RowKey<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;
-    gap?: Gap;
-    pullDownRefreshMessage?: React.ReactElement | string;
-    pullDownRefreshingMessage?: React.ReactElement | string;
-    pullUpLoadMoreMessage?: React.ReactElement | string;
-    pullUpLoadingMessage?: React.ReactElement | string;
-    endOfListMessage?: React.ReactElement | string;
-}
-
-export interface FlatListItemProps<T> {
-    data: T;
-    index: number;
-}
-
-export interface FooterData {
-    __markedAsFooterData: true;
-    loading: boolean;
-    ended: boolean;
-    loadMoreMessage?: React.ReactElement | string;
-    loadingMessage?: React.ReactElement | string;
-    endMessage?: React.ReactElement | string;
-}

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

package/src/core/Form/context.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import type {TooltipPlacement} from "../Tooltip";
-
-export type FormErrorDisplayMode = {type: "popover"; placement?: TooltipPlacement} | {type: "extra"};
-
-export interface FormValidationContextType {
-    registerValidator: (validator: () => Promise<boolean>) => void;
-    unregisterValidator: (validator: () => Promise<boolean>) => void;
-    errorDisplayMode: () => FormErrorDisplayMode;
-}
-
-export const FormValidationContext = React.createContext<FormValidationContextType>({
-    registerValidator: () => {},
-    unregisterValidator: () => {},
-    errorDisplayMode: () => ({type: "extra"}),
-});

package/src/core/Form/index.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import {Spin} from "../Spin";
-import {Button} from "../Button";
-import {FormValidationContext} from "./context";
-import {i18n} from "../../internal/i18n/core";
-import {Item} from "./Item";
-import type {PickOptional} from "../../internal/type";
-import type {FormErrorDisplayMode, FormValidationContextType} from "./context";
-import "./index.less";
-
-export interface Props {
-    children: React.ReactNode;
-    id?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    layout?: "horizontal" | "vertical" | "inline";
-    errorDisplayMode?: FormErrorDisplayMode;
-    loading?: boolean;
-    onFinish?: () => void;
-    buttonText?: string;
-    buttonDisabled?: boolean;
-    buttonStyle?: React.CSSProperties;
-    buttonRenderer?: ((submitButton: React.ReactElement, isValidating: boolean, loading?: boolean) => React.ReactElement) | null;
-    allowBrowserAutoComplete?: boolean;
-}
-
-interface State {
-    isValidating: boolean;
-}
-
-export class Form extends React.PureComponent<Props, State> {
-    static displayName = "Form";
-    static defaultProps: PickOptional<Props> = {
-        layout: "horizontal",
-        errorDisplayMode: {type: "extra"},
-    };
-    static Item = Item;
-
-    private readonly validationContext: FormValidationContextType;
-    private validators: Array<() => Promise<boolean>> = [];
-
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            isValidating: false,
-        };
-
-        this.validationContext = {
-            registerValidator: validator => this.validators.push(validator),
-            unregisterValidator: validator => {
-                const index = this.validators.indexOf(validator);
-                if (index >= 0) {
-                    this.validators.splice(index, 1);
-                }
-            },
-            errorDisplayMode: () => this.props.errorDisplayMode!,
-        };
-    }
-
-    // Exposed for outer ref use, not recommended
-    triggerSubmit = async () => {
-        const {onFinish} = this.props;
-        try {
-            this.setState({isValidating: true});
-            const validatorResults = await Promise.all(this.validators.map(_ => _()));
-            if (validatorResults.every(_ => _)) {
-                // Also true even if validatorResults is []
-                onFinish?.();
-                return true;
-            }
-            return false;
-        } finally {
-            this.setState({isValidating: false});
-        }
-    };
-
-    onSubmit = async (event: React.FormEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-        await this.triggerSubmit();
-    };
-
-    renderSubmitButton() {
-        const {loading, buttonRenderer: defaultButtonRenderer, buttonDisabled, buttonStyle, buttonText} = this.props;
-        const {isValidating} = this.state;
-        const buttonRenderer = defaultButtonRenderer === undefined ? (submitButton: React.ReactElement) => submitButton : defaultButtonRenderer;
-        const t = i18n();
-
-        const submitButton = (
-            <Button className={classNames("g-form-submit-button", {"button-disabled": buttonDisabled})} type="submit" style={buttonStyle} disabled={isValidating || loading || buttonDisabled}>
-                {isValidating || loading ? <Spin spinning size="small" /> : buttonText || t.submit}
-            </Button>
-        );
-
-        return buttonRenderer !== null ? <Form.Item className="g-form-submit-form-item">{buttonRenderer(submitButton, isValidating, loading)}</Form.Item> : null;
-    }
-
-    render() {
-        const {children, id, className, style, layout, allowBrowserAutoComplete} = this.props;
-        return (
-            <form autoComplete={allowBrowserAutoComplete ? undefined : "off"} id={id} className={classNames("g-form", `g-form-${layout}`, className)} style={style} onSubmit={this.onSubmit}>
-                <FormValidationContext.Provider value={this.validationContext}>{children}</FormValidationContext.Provider>
-                {this.renderSubmitButton()}
-            </form>
-        );
-    }
-}

package/src/core/Grid.tsx

@@ -1,7 +0,0 @@
-import {Row, Col} from "antd";
-import "antd/lib/grid/style";
-
-export const Grid = {
-    Row,
-    Column: Col,
-};

package/src/core/HTMLContent/index.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import "./index.less";
-
-interface Props {
-    html: string;
-    className?: string;
-}
-
-export class HTMLContent extends React.PureComponent<Props> {
-    static displayName = "HTMLContent";
-
-    render() {
-        const {html, className} = this.props;
-        return <div className={classNames("g-html-content", className)} dangerouslySetInnerHTML={{__html: html}} />;
-    }
-}

package/src/core/ImageUploader/index.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import CloudUploadOutlined from "@ant-design/icons/CloudUploadOutlined";
-import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
-import EyeOutlined from "@ant-design/icons/EyeOutlined";
-import {classNames} from "../../util/ClassNames";
-import {ModalUtil} from "../../util/ModalUtil";
-import {MediaUtil} from "../../util/MediaUtil";
-import {i18n} from "../../internal/i18n/core";
-import type {UploaderProps, UploadSuccessLogEntry} from "../../util/UploadUtil/type";
-import {Uploader} from "../../core/Uploader";
-import {Tooltip} from "../../core/Tooltip";
-import "./index.less";
-
-export interface Props<SuccessResponseType, ErrorResponseType> extends UploaderProps<SuccessResponseType, ErrorResponseType> {
-    imageURL: string | null;
-    onChange: (response: SuccessResponseType) => void;
-    width: number; // At least 200px if onRemove supported, else at least 150px
-    height: number;
-    onRemove?: () => void;
-    disabled?: boolean;
-    fileSizeLimitMB?: number;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class ImageUploader<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>> {
-    static displayName = "ImageUploader";
-
-    openPreviewModal = async (e: React.MouseEvent) => {
-        e.stopPropagation();
-        const {imageURL} = this.props;
-        if (imageURL) {
-            await MediaUtil.openImage(imageURL);
-        }
-    };
-
-    removeImage = async (e: React.MouseEvent) => {
-        e.stopPropagation();
-        const {onRemove} = this.props;
-        const t = i18n();
-        if (await ModalUtil.confirm(t.confirmImageRemoval)) {
-            onRemove?.();
-        }
-    };
-
-    beforeUpload = (file: File): boolean => {
-        const {fileSizeLimitMB} = this.props;
-        if (fileSizeLimitMB && file.size > 1024 * 1024 * fileSizeLimitMB) {
-            return false;
-        }
-        return true;
-    };
-
-    preventUploadBehavior = (e: React.MouseEvent) => {
-        if (e.target === e.currentTarget) {
-            // Only trigger for clicking "Upload" icon
-            e.stopPropagation();
-        }
-    };
-
-    onUploadSuccess = (logEntry: UploadSuccessLogEntry, response: SuccessResponseType) => {
-        const {onChange, onUploadSuccess} = this.props;
-        onChange(response);
-        onUploadSuccess?.(logEntry, response);
-    };
-
-    renderActionIcon = (name: string, icon: React.ReactElement) => {
-        return (
-            <Tooltip title={name}>
-                <div className="action">{icon}</div>
-            </Tooltip>
-        );
-    };
-
-    render() {
-        const {uploadURL, formField, className, style, imageURL, disabled, width, height, onRemove, onUploadFailure} = this.props;
-        const t = i18n();
-        return (
-            <Uploader<SuccessResponseType, ErrorResponseType>
-                accept="image/*"
-                formField={formField}
-                uploadURL={uploadURL}
-                onUploadFailure={onUploadFailure}
-                onUploadSuccess={this.onUploadSuccess}
-                style={{...style, width, height}}
-                className={classNames("g-image-uploader", className)}
-                disabled={disabled}
-                beforeUpload={this.beforeUpload}
-            >
-                {imageURL ? (
-                    <div className="image-container" style={{backgroundImage: `url(${imageURL})`, height}}>
-                        <div className="overlay" onClick={this.preventUploadBehavior}>
-                            {this.renderActionIcon(t.preview, <EyeOutlined onClick={this.openPreviewModal} />)}
-                            {!disabled && this.renderActionIcon(t.upload, <CloudUploadOutlined />)}
-                            {!disabled && onRemove && this.renderActionIcon(t.delete, <DeleteOutlined onClick={this.removeImage} />)}
-                        </div>
-                    </div>
-                ) : (
-                    t.uploadHint
-                )}
-            </Uploader>
-        );
-    }
-}