@pinnacle0/web-ui 0.3.36 → 0.3.39

package/src/admin/RichEditor/index.tsx

@@ -1,123 +0,0 @@
-import React from "react";
-import type {ControlType, EditorState, ImageControlType, MediaType} from "braft-editor";
-import BraftEditor from "braft-editor";
-import {LocaleUtil} from "../../util/LocaleUtil";
-import type {ControlledFormValue} from "../../internal/type";
-import type {UploaderProps} from "../../util/UploadUtil/type";
-import "braft-editor/dist/index.css";
-import "./index.less";
-import {UploadUtil} from "../../util/UploadUtil";
-
-/**
- * onChange/value is of the HTML content.
- * If the HTML content is only empty rows (e.g: pure <p/>), onChange also emit "".
- *
- * CAVEAT:
- * This component is storing the editor state internally (un-controlled).
- * The props.value only represents the initial value.
- * Because createEditorState must only be created only ONCE, in the constructor.
- * Therefore, we cannot create new editor state every time based on current props.value.
- *
- * Ref: https://www.yuque.com/braft-editor/be/lzwpnr#1bbbb204
- */
-export interface Props<SuccessResponseType, ErrorResponseType> extends ControlledFormValue<string>, UploaderProps<SuccessResponseType, ErrorResponseType> {
-    imageURLParser: (response: SuccessResponseType) => string;
-}
-
-interface State {
-    editorState: EditorState;
-}
-
-export class RichEditor<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>, State> {
-    static displayName = "RichEditor";
-
-    // API reference: https://www.yuque.com/braft-editor/be/gz44tn
-    private readonly editorControls: ControlType[] = [
-        "font-size",
-        "text-align",
-        "text-color",
-        "bold",
-        "italic",
-        "underline",
-        "strike-through",
-        "separator",
-        "list-ul",
-        "list-ol",
-        "separator",
-        "link",
-        "media",
-        "separator",
-        "remove-styles",
-    ];
-    private readonly imageControls: ImageControlType[] = [];
-    private readonly mediaConfig: MediaType = {
-        pasteImage: false,
-        accepts: {
-            image: "image/png,image/jpeg,image/gif,image/svg",
-            video: false,
-            audio: false,
-        },
-        externals: {
-            image: false,
-            audio: false,
-            video: false,
-            embed: false,
-        },
-        uploadFn: params => {
-            const {formField, uploadURL, imageURLParser, onUploadFailure, onUploadSuccess} = this.props;
-            const {file, success, progress} = params;
-
-            UploadUtil.createRequest({
-                uploadURL,
-                file,
-                formField,
-                onSuccess: (logEntry, response) => {
-                    const imageURL = imageURLParser(response);
-                    success({
-                        url: imageURL,
-                        meta: {
-                            id: imageURL,
-                            title: "",
-                            alt: "image",
-                            // Below are for video settings, not available here
-                            loop: true,
-                            autoPlay: true,
-                            controls: true,
-                            poster: "",
-                        },
-                    });
-                    onUploadSuccess?.(logEntry, response);
-                },
-                onError: onUploadFailure,
-                onProgress: progress,
-            });
-        },
-    };
-
-    constructor(props: Props<SuccessResponseType, ErrorResponseType>) {
-        super(props);
-        this.state = {editorState: BraftEditor.createEditorState(this.props.value)};
-    }
-
-    onChange = (editorState: EditorState) => {
-        this.setState({editorState});
-        const {onChange} = this.props;
-        const textContent = editorState.toText().trim();
-        onChange(textContent === "" ? "" : editorState.toHTML());
-    };
-
-    render() {
-        const {editorState} = this.state;
-        return (
-            <BraftEditor
-                language={LocaleUtil.current()}
-                controls={this.editorControls}
-                media={this.mediaConfig}
-                imageControls={this.imageControls}
-                value={editorState}
-                stripPastedStyles
-                onChange={this.onChange}
-            />
-        );
-    }
-}

package/src/core/Amount/AmountPercentage.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import type {Props as AmountProps} from "./index";
-import {Amount} from "./index";
-
-export interface Props extends Omit<AmountProps, "postfix" | "scale" | "value"> {
-    /**
-     * Value of display amount in decimal, e.g: 0.2 for 20%.
-     */
-    value: number | null | undefined;
-    /**
-     * Number of decimal points used for percentage values.
-     *
-     * To use 2 decimal points (eg 12.34%) in percentage values, `props.percentageScale` should be `2`.
-     * Must be an integer, otherwise throws an Error.
-     */
-    percentageScale: number;
-}
-
-export class AmountPercentage extends React.PureComponent<Props> {
-    static displayName = "AmountPercentage";
-
-    render() {
-        const {percentageScale, value, ...restProps} = this.props;
-        const percentageValue = value !== null && value !== undefined ? value * 100 : value;
-        return <Amount value={percentageValue} scale={percentageScale} postfix="%" {...restProps} />;
-    }
-}

package/src/core/Amount/index.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import type {PickOptional} from "../../internal/type";
-import {NumberUtil} from "../../internal/NumberUtil";
-import {AmountPercentage} from "./AmountPercentage";
-import "./index.less";
-
-export interface Props {
-    value: number | null | undefined;
-    scale: number; // Range [0, 10]
-    rounding?: "floor" | "ceil" | "round";
-    plusSignForPositive?: boolean;
-    thousandSplitter?: boolean;
-    nullText?: string;
-    prefix?: string;
-    postfix?: string;
-    colorScheme?: "green+red-" | "highlight" | "highlight+" | "green-red+";
-    bold?: boolean;
-    underline?: boolean;
-    del?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class Amount extends React.PureComponent<Props> {
-    static displayName = "Amount";
-    static defaultProps: PickOptional<Props> = {
-        rounding: "round",
-        thousandSplitter: true,
-        nullText: "-",
-    };
-
-    static Percentage = AmountPercentage;
-
-    render() {
-        const {value, scale, rounding, thousandSplitter, plusSignForPositive, prefix, postfix, colorScheme, bold, del, underline, style, className, nullText} = this.props;
-        if (value !== null && value !== undefined && Number.isFinite(value)) {
-            const roundedString = NumberUtil.roundingToString(value, rounding!, scale);
-            const parts = roundedString.split(".");
-            if (thousandSplitter) {
-                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            }
-            if (plusSignForPositive && value > 0) {
-                parts[0] = "+" + parts[0];
-            }
-
-            const fullClassNames = classNames("g-amount", {bold, del, underline}, className, {
-                "color-green": (colorScheme === "green+red-" && value > 0) || (colorScheme === "green-red+" && value < 0),
-                "color-red": (colorScheme === "green+red-" && value < 0) || (colorScheme === "green-red+" && value > 0),
-                "color-highlight": colorScheme === "highlight" || (colorScheme === "highlight+" && value > 0),
-            });
-
-            return (
-                <div className={fullClassNames} style={style}>
-                    {prefix && <div className="prefix">{prefix}</div>}
-                    <div className="digits">
-                        {parts[0]}
-                        {parts[1] && (
-                            <React.Fragment>
-                                .<small>{parts[1]}</small>
-                            </React.Fragment>
-                        )}
-                    </div>
-                    {postfix && <div className="postfix">{postfix}</div>}
-                </div>
-            );
-        } else {
-            return <span className={classNames("g-amount", "null-text", className)}>{nullText}</span>;
-        }
-    }
-}

package/src/core/AmountConditionInput.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import {NumberInput} from "./NumberInput";
-import {Input} from "./Input";
-import {EnumSelect} from "./EnumSelect";
-import type {ControlledFormValue} from "../internal/type";
-
-export enum Operator {
-    GREATER_THAN = "GREATER_THAN",
-    GREATER_EQUAL = "GREATER_EQUAL",
-    LESS_THAN = "LESS_THAN",
-    LESS_EQUAL = "LESS_EQUAL",
-    EQUALS = "EQUALS",
-    NOT_EQUALS = "NOT_EQUALS",
-}
-
-export interface AmountConditionValue {
-    condition: Operator;
-    amount: number | null;
-}
-
-export interface Props extends ControlledFormValue<AmountConditionValue> {
-    scale: number;
-    operators?: Operator[];
-}
-
-export class AmountConditionInput extends React.PureComponent<Props> {
-    static displayName = "AmountConditionInput";
-
-    private readonly operators: Operator[] = this.props.operators || [Operator.GREATER_THAN, Operator.GREATER_EQUAL, Operator.LESS_THAN, Operator.LESS_EQUAL, Operator.EQUALS];
-    private readonly selectStyle: React.CSSProperties = {width: 55};
-    private readonly inputStyle: React.CSSProperties = {width: 180, borderTopLeftRadius: 0, borderBottomLeftRadius: 0};
-
-    operatorTranslator = (value: Operator): string => {
-        switch (value) {
-            case Operator.GREATER_THAN:
-                return ">";
-            case Operator.GREATER_EQUAL:
-                return "≥";
-            case Operator.LESS_THAN:
-                return "<";
-            case Operator.LESS_EQUAL:
-                return "≤";
-            case Operator.EQUALS:
-                return "=";
-            case Operator.NOT_EQUALS:
-                return "≠";
-        }
-    };
-
-    onConditionChange = (value: Operator) => this.props.onChange({condition: value, amount: this.props.value.amount});
-
-    onAmountChange = (value: number | null) => this.props.onChange({condition: this.props.value.condition, amount: value});
-
-    render() {
-        const {scale, value} = this.props;
-        return (
-            <Input.Group compact>
-                <EnumSelect value={value.condition} onChange={this.onConditionChange} translator={this.operatorTranslator} list={this.operators} style={this.selectStyle} />
-                <NumberInput allowNull scale={scale} value={value.amount} onChange={this.onAmountChange} inputStyle={this.inputStyle} />
-            </Input.Group>
-        );
-    }
-}

package/src/core/AmountRangeInput.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import {NumberInput} from "./NumberInput";
-import {Input} from "./Input";
-import type {ControlledFormValue, PickOptional} from "../internal/type";
-import {i18n} from "../internal/i18n/core";
-
-export type AmountRangeValue<T extends boolean> = T extends true ? [number | null, number | null] : [number, number];
-
-export interface Props<T extends boolean> extends ControlledFormValue<AmountRangeValue<T>> {
-    allowNull: T;
-    scale?: number;
-    disabled?: boolean;
-    min?: number;
-    shouldNotEqual?: true;
-    style?: React.CSSProperties;
-    inputStyle?: React.CSSProperties;
-}
-
-export class AmountRangeInput<T extends boolean> extends React.PureComponent<Props<T>> {
-    static displayName = "AmountRangeInput";
-
-    static defaultProps: PickOptional<Props<any>> = {
-        scale: 2,
-        min: 0,
-    };
-
-    private readonly minInputStyle: React.CSSProperties = {borderTopRightRadius: 0, borderBottomRightRadius: 0, width: 80, textAlign: "right"};
-    private readonly maxInputStyle: React.CSSProperties = {borderTopLeftRadius: 0, borderBottomLeftRadius: 0, width: 80, borderLeftWidth: 0, textAlign: "left"};
-    private readonly connectorStyle: React.CSSProperties = {width: 30, borderLeftWidth: 0, borderRightWidth: 0, backgroundColor: "#fff", pointerEvents: "none"};
-
-    onMinAmountChange = (value: number | null) => this.props.onChange([value, this.props.value[1]] as any);
-
-    onMaxAmountChange = (value: number | null) => this.props.onChange([this.props.value[0], value] as any);
-
-    onConnectorInputChange = () => {};
-
-    render() {
-        const {value, scale, disabled, min, shouldNotEqual, allowNull, style, inputStyle} = this.props;
-        const t = i18n();
-        return (
-            <Input.Group compact style={style}>
-                <NumberInput
-                    disabled={disabled}
-                    allowNull={allowNull!}
-                    min={min}
-                    scale={scale}
-                    placeholder={t.minimum}
-                    value={value[0] as any}
-                    onChange={this.onMinAmountChange}
-                    inputStyle={{...this.minInputStyle, ...inputStyle}}
-                />
-                <Input style={this.connectorStyle} disabled value="~" onChange={this.onConnectorInputChange} />
-                <NumberInput
-                    disabled={disabled}
-                    allowNull={allowNull!}
-                    min={value[0] !== null ? (shouldNotEqual ? value[0] + 1 : value[0]) : 0}
-                    scale={scale}
-                    placeholder={t.maximum}
-                    value={value[1] as any}
-                    onChange={this.onMaxAmountChange}
-                    inputStyle={{...this.maxInputStyle, ...inputStyle}}
-                />
-            </Input.Group>
-        );
-    }
-}

package/src/core/AuthenticationCodeInput.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import {Button} from "./Button";
-import {classNames} from "../util/ClassNames";
-import {i18n} from "../internal/i18n/core";
-import {TextUtil} from "../internal/TextUtil";
-import {Input} from "./Input";
-import type {Props as InputProps} from "./Input";
-import type {PickOptional} from "../internal/type";
-
-export interface Props extends Omit<InputProps, "suffix"> {
-    onSend: () => Promise<boolean>;
-    nextSendInterval?: number; // In second
-    autoSendOnMount?: boolean;
-    sendButtonText?: string;
-}
-
-interface State {
-    isSending: boolean; // Only true during calling send API
-    nextSendRemainingSecond: number | null; // At least 1 when type is number
-}
-
-export class AuthenticationCodeInput extends React.PureComponent<Props, State> {
-    static displayName = "AuthenticationCodeInput";
-    static defaultProps: PickOptional<Props> = {
-        nextSendInterval: 60,
-    };
-
-    private timer: number | undefined;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            isSending: false,
-            nextSendRemainingSecond: null,
-        };
-    }
-
-    componentDidMount() {
-        if (this.props.autoSendOnMount) {
-            this.onSend();
-        }
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.timer);
-    }
-
-    updateNextSendRemainingSecond = () => {
-        const nextSendRemainingSecond = this.state.nextSendRemainingSecond! - 1;
-        if (nextSendRemainingSecond <= 0) {
-            clearInterval(this.timer);
-            this.setState({nextSendRemainingSecond: null});
-        } else {
-            this.setState({nextSendRemainingSecond});
-        }
-    };
-
-    onSend = async () => {
-        const {nextSendInterval, onSend} = this.props;
-
-        try {
-            this.setState({isSending: true});
-            const sendSuccess = await onSend();
-            if (sendSuccess) {
-                this.setState({nextSendRemainingSecond: nextSendInterval!}, () => {
-                    this.timer = window.setInterval(this.updateNextSendRemainingSecond, 1000);
-                });
-            }
-        } finally {
-            this.setState({isSending: false});
-        }
-    };
-
-    render() {
-        const {sendButtonText, onSend, autoSendOnMount, nextSendInterval, className, ...inputProps} = this.props;
-        const {isSending, nextSendRemainingSecond} = this.state;
-        const t = i18n();
-        const sendButton = (
-            <Button className="g-auth-code-input-send-button" size="small" disabled={nextSendRemainingSecond !== null || isSending} onClick={this.onSend}>
-                {nextSendRemainingSecond ? TextUtil.interpolate(t.waitResendAuthCode, nextSendRemainingSecond.toString()) : sendButtonText || t.sendAuthCode}
-            </Button>
-        );
-        return <Input {...inputProps} className={classNames(className, "g-auth-code-input")} suffix={sendButton} />;
-    }
-}

package/src/core/AutoCompleteInput.tsx

@@ -1,16 +0,0 @@
-import type {AutoCompleteProps} from "antd/lib/auto-complete";
-import AntAutoComplete from "antd/lib/auto-complete";
-import "antd/lib/auto-complete/style";
-import React from "react";
-
-export interface Props extends AutoCompleteProps {}
-
-export class AutoCompleteInput extends React.PureComponent<Props> {
-    static displayName = "AutoCompleteInput";
-
-    static Option = AntAutoComplete.Option;
-
-    render() {
-        return <AntAutoComplete {...this.props} />;
-    }
-}

package/src/core/Badge/index.tsx

@@ -1,15 +0,0 @@
-import type {BadgeProps as AntBadgeProps} from "antd/lib/badge";
-import AntBadge from "antd/lib/badge";
-import React from "react";
-import "antd/lib/badge/style";
-import "./index.less";
-
-export interface Props extends AntBadgeProps {}
-
-export class Badge extends React.PureComponent<Props> {
-    static displayName = "Badge";
-
-    render() {
-        return <AntBadge {...this.props} />;
-    }
-}

package/src/core/BoolRadio.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import {EnumRadio} from "./EnumRadio";
-import type {PickOptional, ControlledFormValue} from "../internal/type";
-import {i18n} from "../internal/i18n/core";
-
-export interface Props<AllowNull extends boolean> extends ControlledFormValue<AllowNull extends false ? boolean : boolean | null> {
-    allowNull?: AllowNull;
-    trueText?: string;
-    falseText?: string;
-    trueOptionFirst?: boolean;
-    useButtonMode?: boolean;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class BoolRadio<AllowNull extends boolean> extends React.PureComponent<Props<AllowNull>> {
-    static displayName = "BoolRadio";
-    static defaultProps: PickOptional<Props<false>> = {
-        trueOptionFirst: true,
-    };
-
-    private readonly trueOptionFirstList = [true, false];
-    private readonly falseOptionFirstList = [false, true];
-
-    translator = (_: boolean): string => {
-        const t = i18n();
-        return _ ? this.props.trueText ?? t.yes : this.props.falseText ?? t.no;
-    };
-
-    render() {
-        const {trueOptionFirst, allowNull, value, onChange, useButtonMode, disabled, className, style} = this.props;
-        const list = trueOptionFirst ? this.trueOptionFirstList : this.falseOptionFirstList;
-        if (allowNull) {
-            return (
-                <EnumRadio.Nullable
-                    list={list}
-                    translator={this.translator}
-                    value={value as boolean | null}
-                    onChange={onChange as (_: boolean | null) => void}
-                    useButtonMode={useButtonMode}
-                    disabled={disabled}
-                    className={className}
-                    style={style}
-                />
-            );
-        } else {
-            return (
-                <EnumRadio
-                    list={list}
-                    translator={this.translator}
-                    value={value as boolean}
-                    onChange={onChange as (_: boolean) => void}
-                    useButtonMode={useButtonMode}
-                    disabled={disabled}
-                    className={className}
-                    style={style}
-                />
-            );
-        }
-    }
-}

package/src/core/BoolSelect.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import {EnumSelect} from "./EnumSelect";
-import type {ControlledFormValue, PickOptional} from "../internal/type";
-import {i18n} from "../internal/i18n/core";
-
-export interface Props<AllowNull extends boolean> extends ControlledFormValue<AllowNull extends false ? boolean : boolean | null> {
-    allowNull: AllowNull;
-    trueText?: string;
-    falseText?: string;
-    trueOptionFirst?: boolean;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class BoolSelect<AllowNull extends boolean> extends React.PureComponent<Props<AllowNull>> {
-    static displayName = "BoolSelect";
-    static defaultProps: PickOptional<Props<any>> = {
-        trueOptionFirst: true,
-    };
-
-    private readonly trueOptionFirstList = [true, false];
-    private readonly falseOptionFirstList = [false, true];
-
-    translator = (_: boolean) => {
-        const t = i18n();
-        return _ ? this.props.trueText || t.yes : this.props.falseText || t.no;
-    };
-
-    render() {
-        const {trueOptionFirst, allowNull, value, onChange, disabled, className, style} = this.props;
-        const list = trueOptionFirst ? this.trueOptionFirstList : this.falseOptionFirstList;
-
-        if (allowNull) {
-            return (
-                <EnumSelect.Nullable
-                    list={list}
-                    translator={this.translator}
-                    value={value as boolean | null}
-                    onChange={onChange as (_: boolean | null) => void}
-                    disabled={disabled}
-                    className={className}
-                    style={style}
-                />
-            );
-        } else {
-            return <EnumSelect list={list} translator={this.translator} value={value as boolean} onChange={onChange as (_: boolean) => void} disabled={disabled} className={className} style={style} />;
-        }
-    }
-}

package/src/core/BoolSwitch.tsx

@@ -1,37 +0,0 @@
-import AntSwitch from "antd/lib/switch";
-import React from "react";
-import type {ControlledFormValue} from "../internal/type";
-import {i18n} from "../internal/i18n/core";
-import "antd/lib/switch/style";
-
-export interface Props extends ControlledFormValue<boolean> {
-    trueText?: string;
-    falseText?: string;
-    disabled?: boolean;
-    style?: React.CSSProperties;
-    loading?: boolean;
-}
-
-export class BoolSwitch extends React.PureComponent<Props> {
-    static displayName = "BoolSwitch";
-
-    static YesNo = (props: Omit<Props, "trueText" | "falseText">) => {
-        const t = i18n();
-        return <BoolSwitch trueText={t.yes} falseText={t.no} {...props} />;
-    };
-
-    static OnOff = (props: Omit<Props, "trueText" | "falseText">) => {
-        const t = i18n();
-        return <BoolSwitch trueText={t.on} falseText={t.off} {...props} />;
-    };
-
-    static ActiveOrNot = (props: Omit<Props, "trueText" | "falseText">) => {
-        const t = i18n();
-        return <BoolSwitch trueText={t.active} falseText={t.inactive} {...props} />;
-    };
-
-    render() {
-        const {trueText, falseText, disabled, loading, style, value, onChange} = this.props;
-        return <AntSwitch loading={loading} style={style} checked={value} onChange={onChange} disabled={disabled} checkedChildren={trueText} unCheckedChildren={falseText} />;
-    }
-}

package/src/core/Breadcrumb/index.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import type {SafeReactChild, StringKey} from "../../internal/type";
-import "./index.less";
-
-export interface Props<T extends object> {
-    data: T[];
-    onClick: (item: T, index: number) => void;
-    renderItem: (item: T, index: number) => SafeReactChild;
-    itemKey: StringKey<T> | ((item: T, index?: number) => string) | "index";
-    lastClickable?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class Breadcrumb<T extends object> extends React.PureComponent<Props<T>> {
-    static displayName = "Breadcrumb";
-
-    getItemKey = (item: T, index: number): string | number => {
-        const {itemKey} = this.props;
-        if (itemKey === "index") {
-            return index;
-        } else if (typeof itemKey === "function") {
-            return itemKey(item, index);
-        } else {
-            return item[itemKey] as any;
-        }
-    };
-
-    render() {
-        const {data, onClick, renderItem, lastClickable, className, style} = this.props;
-
-        return (
-            <div className={`g-breadcrumb ${className || ""}`} style={style}>
-                {data.map((_, index) => (
-                    <div
-                        onClick={lastClickable || index !== data.length - 1 ? () => onClick(_, index) : undefined}
-                        key={this.getItemKey(_, index)}
-                        className={lastClickable || index !== data.length - 1 ? "clickable" : ""}
-                    >
-                        {renderItem(_, index)}
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}