@pinnacle0/web-ui 0.3.23 → 0.3.26

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

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

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

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

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

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

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

package/src/core/Input/index.less

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

package/src/core/Input/index.tsx

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

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

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