@pinnacle0/web-ui 0.3.22 → 0.3.23

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

@@ -0,0 +1,199 @@
+.g-form {
+    > * {
+        margin-bottom: 8px;
+    }
+
+    .g-form-item {
+        vertical-align: top;
+        display: flex;
+
+        .g-form-item-label {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            vertical-align: top;
+            font-weight: 600;
+            display: inline-block;
+            text-align: right;
+            width: 100px;
+
+            > label {
+                vertical-align: middle;
+            }
+
+            > label::after {
+                content: ":";
+                position: relative;
+                margin: 0 8px 0 2px;
+            }
+
+            &.required > label::before {
+                margin-right: 4px;
+                color: #f5222d;
+                font-size: 14px;
+                font-family: SimSun, sans-serif;
+                content: "*";
+            }
+        }
+
+        .g-form-item-children {
+            display: inline-block;
+            width: 100%;
+            max-width: 400px;
+            flex: 1;
+            height: 100%;
+
+            .message {
+                font-size: 12px;
+                margin: 5px 0;
+                line-height: 15px;
+                text-align: left;
+
+                &.error {
+                    color: #f5222d;
+                }
+            }
+
+            .pure-text {
+                line-height: 1.8;
+            }
+
+            .ant-input,
+            .ant-select,
+            .ant-input-password,
+            .ant-input-affix-wrapper,
+            .ant-cascader-picker,
+            .ant-picker,
+            .g-number-input,
+            textarea {
+                width: 100%;
+            }
+
+            .g-number-input.stepper-always input {
+                width: auto;
+            }
+
+            .ant-input-group {
+                > * {
+                    width: auto;
+                }
+            }
+
+            // For braft editor
+            .bf-container {
+                border: 1px solid #d7d7d7;
+                border-radius: 4px;
+                width: 780px;
+
+                .bf-content {
+                    height: 350px;
+                }
+            }
+
+            &.has-error {
+                textarea,
+                input,
+                .ant-select-selector,
+                .ant-descriptions-view,
+                .ant-input-affix-wrapper,
+                .ant-upload {
+                    border-color: #f5222d !important;
+                }
+
+                .bf-container {
+                    border-color: #f5222d;
+                }
+            }
+
+            &.width-fill {
+                max-width: initial;
+            }
+
+            &.width-shrink {
+                max-width: initial;
+                width: auto;
+
+                .ant-input,
+                .ant-select,
+                .ant-input-password,
+                .ant-input-affix-wrapper,
+                .ant-cascader-picker,
+                .ant-picker,
+                .g-number-input,
+                textarea {
+                    width: auto;
+                }
+            }
+        }
+    }
+
+    .g-form-submit-form-item {
+        .g-button {
+            &:disabled:not(.button-disabled) {
+                border: none;
+                background-color: #1890ff;
+                color: #fff;
+            }
+
+            .ant-spin {
+                color: #fff;
+                line-height: 100%;
+            }
+        }
+    }
+
+    &.g-form-inline {
+        padding: 0;
+
+        .g-form-item {
+            display: inline-block;
+            margin-right: 12px;
+            white-space: nowrap;
+
+            .g-form-item-label {
+                display: inline-block;
+                width: initial;
+                line-height: 2;
+            }
+
+            .g-form-item-children {
+                width: auto;
+                max-width: unset;
+
+                .pure-text {
+                    line-height: 2.4;
+                }
+
+                .ant-select {
+                    width: 130px;
+                }
+
+                .ant-select-multiple {
+                    width: 100%;
+                    min-width: 130px;
+                }
+
+                // Tune margin top, to make them visually aligned with label
+                .g-amount,
+                .ant-switch,
+                .ant-radio,
+                .ant-checkbox-wrapper {
+                    margin-top: 5px;
+                }
+            }
+        }
+    }
+
+    &.g-form-vertical {
+        .g-form-item {
+            flex-direction: column;
+
+            .g-form-item-label {
+                display: block;
+                text-align: left;
+                width: initial;
+                margin-bottom: 3px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+.g-html-content {
+    // Reset style
+    word-break: break-all;
+    text-align: left;
+    font-weight: normal;
+
+    p {
+        margin: inherit !important;
+    }
+
+    img {
+        margin-bottom: 5px;
+        max-width: 100%;
+    }
+}

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

@@ -0,0 +1,53 @@
+@import "../../css/variable.less";
+
+.g-image-uploader {
+    min-width: auto;
+
+    > .ant-upload {
+        padding: 0 !important;
+
+        .image-container {
+            height: 100%;
+            width: 100%;
+            background-size: cover;
+            background-position: center center;
+            position: relative;
+
+            > .overlay {
+                display: none;
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                justify-content: center;
+                align-items: center;
+
+                > .action {
+                    @size: 60px;
+
+                    margin: 0 6px;
+                    width: @size;
+                    height: @size;
+                    line-height: @size;
+                    border-radius: @size;
+                    color: #fff;
+                    background-color: rgba(0 0 0 / 70%);
+                    font-size: 32px;
+                    transition: all 300ms;
+
+                    &:hover {
+                        background-color: @lib-main-blue;
+                        transform: scale(1.12);
+                    }
+                }
+            }
+
+            &:hover {
+                > .overlay {
+                    display: flex;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+.ant-input,
+.ant-input-affix-wrapper {
+    color: inherit;
+}

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