@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/FlatList/type.tsx

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

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

package/src/core/Form/context.ts

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

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

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

package/src/core/HTMLContent/index.tsx

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

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

package/src/core/Input/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import AntInput from "antd/lib/input";
+import type {InputProps, PasswordProps, SearchProps, TextAreaProps, InputRef} from "antd/lib/input";
+import type {ControlledFormValue} from "../../internal/type";
+import "antd/lib/input/style";
+import "./index.less";
+
+type ExcludedAntInputKeys = "value" | "onChange" | "addonBefore" | "addonAfter";
+
+export interface InputReadonlyProps extends Omit<InputProps, ExcludedAntInputKeys | "readonly" | "disabled" | "allowClear"> {
+    value: string;
+}
+
+export interface InputSearchProps extends Omit<SearchProps, ExcludedAntInputKeys>, ControlledFormValue<string> {}
+
+export interface InputTextAreaProps extends Omit<TextAreaProps, ExcludedAntInputKeys>, ControlledFormValue<string> {}
+
+export interface InputPasswordProps extends Omit<PasswordProps, ExcludedAntInputKeys>, ControlledFormValue<string> {}
+
+export interface InputNullableProps extends Omit<InputProps, ExcludedAntInputKeys>, ControlledFormValue<string | null> {}
+
+export interface InputNullableTextAreaProps extends Omit<TextAreaProps, ExcludedAntInputKeys>, ControlledFormValue<string | null> {}
+
+export interface Props extends Omit<InputProps, ExcludedAntInputKeys>, ControlledFormValue<string> {
+    inputRef?: React.RefObject<InputRef>;
+}
+
+export class Input extends React.PureComponent<Props> {
+    static displayName = "Input";
+
+    static Group = AntInput.Group;
+
+    static Readonly = (props: InputReadonlyProps) => <AntInput onChange={() => {}} readOnly disabled {...props} />;
+
+    static Search = ({onChange, ...rest}: InputSearchProps) => <AntInput.Search onChange={e => Input.onChange(e, onChange)} {...rest} />;
+
+    static TextArea = ({onChange, ...rest}: InputTextAreaProps) => <AntInput.TextArea onChange={e => Input.onChange(e, onChange)} {...rest} />;
+
+    static Password = ({onChange, ...rest}: InputPasswordProps) => <AntInput.Password onChange={e => Input.onChange(e, onChange)} {...rest} />;
+
+    static Nullable = ({value, onChange, ...rest}: InputNullableProps) => <Input value={value || ""} onChange={value => onChange(value.trim() ? value : null)} {...rest} />;
+
+    static NullableTextArea = ({value, onChange, ...rest}: InputNullableTextAreaProps) => <Input.TextArea value={value || ""} onChange={value => onChange(value.trim() ? value : null)} {...rest} />;
+
+    private static onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, onValueChange: (newValue: string) => void) => onValueChange(e.target.value);
+
+    private antInputRef = React.createRef<InputRef>();
+
+    componentDidMount() {
+        if (this.props.autoFocus) {
+            (this.props.inputRef || this.antInputRef).current?.focus();
+        }
+    }
+
+    blur = () => (this.props.inputRef || this.antInputRef).current?.blur();
+
+    focus = () => (this.props.inputRef || this.antInputRef).current?.focus();
+
+    render() {
+        const {onChange, autoFocus, inputRef, ...rest} = this.props;
+        return <AntInput {...rest} onChange={e => Input.onChange(e, onChange)} ref={inputRef || this.antInputRef} />;
+    }
+}

package/src/core/LabelledSelect.tsx

@@ -0,0 +1,15 @@
+import type {Props as SelectProps, SelectValue, SelectOptionProps} from "./Select";
+import {Select} from "./Select";
+import React from "react";
+
+export interface Props<ValueType extends SelectValue> extends Omit<SelectProps<ValueType>, "optionLabelProp"> {}
+
+export class LabelledSelect<ValueType extends SelectValue> extends React.PureComponent<Props<ValueType>> {
+    static displayName = "LabelledSelect";
+
+    static Option = Select.Option as React.ComponentType<SelectOptionProps & {label: string}>;
+
+    render() {
+        return <Select optionLabelProp="label" {...this.props} />;
+    }
+}

package/src/core/Link.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {NavLink as ReactRouterLink} from "react-router-dom";
+import {classNames} from "../util/ClassNames";
+import type {LocationDescriptorObject} from "history";
+import type {SafeReactChild} from "../internal/type";
+
+export interface Props {
+    children: SafeReactChild;
+    to?: string | (() => void) | LocationDescriptorObject<any>;
+    className?: string; // class "g-text-link" will be added if children is pure string
+    style?: React.CSSProperties;
+    newTab?: boolean; // Default value: If `to` is local (start with /), then false; Else true
+    replace?: boolean; // Only work when `to` is local path or LocationDescriptorObject
+}
+
+export class Link extends React.PureComponent<Props> {
+    static displayName = "Link";
+
+    render() {
+        const {to, children, newTab, replace, className, style} = this.props;
+
+        const fullClassNames: string = classNames(
+            {
+                "g-text-link": typeof children === "string" || typeof children === "number",
+            },
+            className
+        );
+
+        if (typeof to === "object") {
+            return (
+                <ReactRouterLink to={to} replace={replace} className={fullClassNames} style={style}>
+                    {children}
+                </ReactRouterLink>
+            );
+        } else if (typeof to === "string") {
+            if (to.startsWith("/")) {
+                return (
+                    <ReactRouterLink to={to} target={!newTab ? "_self" : "_blank"} replace={replace} className={fullClassNames} style={style}>
+                        {children}
+                    </ReactRouterLink>
+                );
+            } else {
+                return (
+                    <a href={to} target={newTab === undefined || newTab ? "_blank" : "_self"} className={fullClassNames} style={style}>
+                        {children}
+                    </a>
+                );
+            }
+        } else {
+            return (
+                <a onClick={to} className={fullClassNames} style={style}>
+                    {children}
+                </a>
+            );
+        }
+    }
+}

package/src/core/LocalImporter.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type {SafeReactChildren} from "../internal/type";
+import AntUpload from "antd/lib/upload";
+import {i18n} from "../internal/i18n/core";
+import {TextUtil} from "../internal/TextUtil";
+import {Spin} from "./Spin";
+import "antd/lib/upload/style";
+
+export interface Props {
+    type: "txt" | "csv";
+    onImport: (file: File) => Promise<void> | void;
+    children?: SafeReactChildren;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+
+interface State {
+    importing: boolean;
+}
+
+export class LocalImporter extends React.PureComponent<Props, State> {
+    static displayName = "LocalImporter";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {importing: false};
+    }
+
+    beforeUpload = async (file: File): Promise<false> => {
+        try {
+            this.setState({importing: true});
+            await this.props.onImport(file);
+        } finally {
+            this.setState({importing: false});
+        }
+
+        return false;
+    };
+
+    render() {
+        const {type, children, className, disabled, style} = this.props;
+        const {importing} = this.state;
+        const t = i18n();
+        return (
+            <AntUpload.Dragger
+                showUploadList={false}
+                multiple={false}
+                accept={type === "txt" ? ".txt" : ".csv"}
+                className={className}
+                disabled={disabled}
+                style={style}
+                height={Number(style?.height)}
+                beforeUpload={this.beforeUpload}
+            >
+                <Spin spinning={importing} size="small">
+                    {children || TextUtil.interpolate(t.localImporterHint, type)}
+                </Spin>
+            </AntUpload.Dragger>
+        );
+    }
+}