@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/AuthenticationCodeInput.tsx

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

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

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

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

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

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

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

package/src/core/Button/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {Link} from "../Link";
+import "./index.less";
+
+/**
+ * In most cases, preset size/color styles may not match your real requirement.
+ * Please over-write the CSS for each color/size in your global CSS.
+ *
+ * You can also extends the color/size spectrum by following:
+ *      type MyColor = ButtonColor | "version1" | "version2";
+ *      const MyButton = (props: Props<MyColor>) => <Button {...props} />;
+ *
+ * If we change Props<Color extends string = ButtonColor>, it will lose the type-checking for original Button.
+ */
+export type ButtonSize = "small" | "medium" | "large" | "x-large";
+export type ButtonColor = "primary" | "wire-frame" | "green" | "red";
+
+/**
+ * This typing is needed for customization of ButtonColor and ButtonSize, since a customized color is actually widening, therefore we cannot use extends, because extends means subset of for type literals
+ *
+ * Truth side ButtonColor is for type hinting only, such that Typescript can factor out ButtonColor before the conditional is actually resolved.
+ * (Although ButtonColor extends ExtraColor should have the same effect, but doesn't)
+ */
+type ExtendableColor<ExtraColor extends string> = ButtonColor extends ExtraColor ? ExtraColor | ButtonColor : ButtonColor;
+type ExtendableSize<ExtraSize extends string> = ButtonSize extends ExtraSize ? ExtraSize | ButtonSize : ButtonSize;
+
+export interface Props<Color extends string, Size extends string = ButtonSize> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Set link to open when clicked. If set, use a `<Link />` instead of a `<button />` */
+    link?: string;
+    /** Whether the link should be opened in a new tab */
+    linkInNewTab?: boolean;
+    /** Color of button */
+    color?: ExtendableColor<Color>;
+    /** Size of button */
+    size?: ExtendableSize<Size>;
+}
+
+export class Button<Color extends string, Size extends string = ButtonSize> extends React.PureComponent<Props<Color, Size>> {
+    static displayName = "Button";
+
+    render() {
+        const {children, link, linkInNewTab, color = "primary", size = "medium", className = "", type = "button", ...restProps} = this.props;
+        const buttonNode = (
+            <button className={`g-button ${color} ${size} ${className}`} type={type} {...restProps}>
+                {children}
+            </button>
+        );
+
+        if (link) {
+            return (
+                <Link to={link} newTab={linkInNewTab}>
+                    {buttonNode}
+                </Link>
+            );
+        } else {
+            return buttonNode;
+        }
+    }
+}

package/src/core/Card.tsx

@@ -0,0 +1,16 @@
+import type {CardProps} from "antd/lib/card";
+import AntCard from "antd/lib/card";
+import React from "react";
+import "antd/lib/card/style";
+
+export interface Props extends CardProps {}
+
+export class Card extends React.PureComponent<Props> {
+    static displayName = "Card";
+
+    static Grid = AntCard.Grid;
+
+    render() {
+        return <AntCard {...this.props} />;
+    }
+}

package/src/core/Carousel.tsx

@@ -0,0 +1,19 @@
+import type {CarouselProps as AntCarouselProps, CarouselRef} from "antd/lib/carousel";
+import AntCarousel from "antd/lib/carousel";
+import React from "react";
+import "antd/lib/carousel/style";
+
+export type {CarouselRef} from "antd/lib/carousel";
+
+export interface Props extends AntCarouselProps {
+    innerRef?: React.Ref<CarouselRef>;
+}
+
+export class Carousel extends React.PureComponent<Props> {
+    static displayName = "Carousel";
+
+    render() {
+        const {innerRef, ...props} = this.props;
+        return <AntCarousel ref={innerRef} {...props} />;
+    }
+}

package/src/core/Carousel3D/index.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import "./index.less";
+
+interface Props {
+    children: React.ReactElement[];
+}
+
+interface State {
+    current: number; // Range: [-1, children.length], 1st & last are cloned
+}
+
+export class Carousel3D extends React.PureComponent<Props, State> {
+    static displayName = "Carousel3D";
+
+    private readonly autoPlayInterval = 3000;
+    private isTimerComplete: boolean = false; // onCarouselTransitionEnd each frame is executed only once.
+    private isChildTransition: boolean = true; // whether transition is necessary or not.
+    private timer: number | undefined;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            current: 0,
+        };
+    }
+
+    componentDidMount() {
+        this.startAnimation();
+    }
+
+    componentDidUpdate() {
+        if (this.state.current === React.Children.count(this.props.children)) {
+            this.isChildTransition = false;
+        } else {
+            this.isChildTransition = true;
+        }
+        this.isTimerComplete = false;
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timer);
+    }
+
+    jumpToPrevSlide = () => {
+        clearTimeout(this.timer);
+        this.setState(prev => ({current: prev.current === 0 ? React.Children.count(this.props.children) - 1 : prev.current - 1}));
+        this.isTimerComplete = true;
+    };
+
+    jumpToNextSlide = () => {
+        clearTimeout(this.timer);
+        this.setState(prev => ({current: prev.current === React.Children.count(this.props.children) ? 0 : prev.current + 1}));
+        this.isTimerComplete = true;
+    };
+
+    jumpToSlide = (index: number) => {
+        clearTimeout(this.timer);
+        this.setState({current: index});
+        this.isTimerComplete = true;
+    };
+
+    startAnimation = () => {
+        if (!this.isTimerComplete) {
+            this.isTimerComplete = true;
+            if (this.state.current === React.Children.count(this.props.children)) {
+                this.setState({current: 0});
+            } else {
+                this.timer = window.setTimeout(() => this.setState({current: this.state.current + 1}), this.autoPlayInterval);
+            }
+        }
+    };
+
+    handleMouseEnter = () => {
+        clearTimeout(this.timer!);
+        this.isTimerComplete = true;
+    };
+
+    handleMouseLeave = () => {
+        clearTimeout(this.timer!);
+        this.isTimerComplete = false;
+        this.startAnimation();
+    };
+
+    render() {
+        const {children} = this.props;
+        const {current} = this.state;
+        const childrenLength = React.Children.count(children);
+        if (childrenLength <= 1) {
+            return (
+                <div className="g-carousel-3d">
+                    <div className="child-slide active">{children}</div>
+                </div>
+            );
+        } else {
+            return (
+                <div className={`g-carousel-3d ${this.isChildTransition ? "has-transition" : ""}`} onTransitionEnd={this.startAnimation}>
+                    <div className={`child-slide child-clone ${current === -1 ? "pre" : ""}`}>{children[childrenLength - 2]}</div>
+                    <div className={`child-slide child-clone ${current === -1 ? "active" : ""} ${current === 0 ? "pre" : ""} `}>{children[childrenLength - 1]}</div>
+                    {React.Children.map(children, (child, key) => (
+                        <div
+                            key={key}
+                            className={`child-slide ${current === key - 1 ? "next" : current === key ? "active" : current === key + 1 ? "pre" : ""}`}
+                            onMouseEnter={() => current === key && this.handleMouseEnter()}
+                            onMouseLeave={() => current === key && this.handleMouseLeave()}
+                        >
+                            {child}
+                            <div className="arrow arrow-left" onClick={this.jumpToPrevSlide}>
+                                <svg width="40px" height="44px" viewBox="0 0 40 44" version="1.1">
+                                    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.300000012">
+                                        <g transform="translate(-80.000000, -133.000000)" fill="#000000">
+                                            <g transform="translate(80.000000, 133.000000)">
+                                                <path d="M38,-1.42108547e-14 C39.1045695,-1.44137608e-14 40,0.8954305 40,2 L40,41.1428571 C40,42.2474266 39.1045695,43.1428571 38,43.1428571 L2,43.1428571 C0.8954305,43.1428571 1.3527075e-16,42.2474266 0,41.1428571 L0,2 C-1.3527075e-16,0.8954305 0.8954305,-1.40079486e-14 2,-1.42108547e-14 L38,-1.42108547e-14 Z M22.2974465,7.582202 L11.3775647,19.7056672 C10.5306088,20.6475229 10.5306088,22.1746071 11.3775647,23.1145987 L22.2974465,35.2376129 C23.146744,36.1794687 24.5218276,36.1794687 25.3693131,35.2376129 C26.2181367,34.2971102 26.2181367,32.7703567 25.3693131,31.8282905 L15.984835,21.4100879 L25.3693131,10.9930879 C26.2181088,10.0512322 26.2181088,8.52441857 25.3693131,7.58208173 C24.5219391,6.64203 23.1469112,6.64203 22.2974465,7.582202 Z" />
+                                            </g>
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                            <div className="arrow arrow-right" onClick={this.jumpToNextSlide}>
+                                <svg width="40px" height="44px" viewBox="0 0 40 44" version="1.1">
+                                    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.300000012">
+                                        <g transform="translate(-1240.000000, -133.000000)" fill="#000000">
+                                            <g transform="translate(1240.000000, 133.000000)">
+                                                <path
+                                                    d="M38,-1.42108547e-14 C39.1045695,-1.44137608e-14 40,0.8954305 40,2 L40,41.1428571 C40,42.2474266 39.1045695,43.1428571 38,43.1428571 L2,43.1428571 C0.8954305,43.1428571 1.3527075e-16,42.2474266 0,41.1428571 L0,2 C-1.3527075e-16,0.8954305 0.8954305,-1.40079486e-14 2,-1.42108547e-14 L38,-1.42108547e-14 Z M22.2974465,7.582202 L11.3775647,19.7056672 C10.5306088,20.6475229 10.5306088,22.1746071 11.3775647,23.1145987 L22.2974465,35.2376129 C23.146744,36.1794687 24.5218276,36.1794687 25.3693131,35.2376129 C26.2181367,34.2971102 26.2181367,32.7703567 25.3693131,31.8282905 L15.984835,21.4100879 L25.3693131,10.9930879 C26.2181088,10.0512322 26.2181088,8.52441857 25.3693131,7.58208173 C24.5219391,6.64203 23.1469112,6.64203 22.2974465,7.582202 Z"
+                                                    transform="translate(20.000000, 21.571429) scale(-1, 1) translate(-20.000000, -21.571429) "
+                                                />
+                                            </g>
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                        </div>
+                    ))}
+                    <div className={`child-slide child-clone ${current === childrenLength ? "active" : ""} ${current === childrenLength - 1 ? "next" : ""}`}>{children[0]}</div>
+                    <div className={`child-slide child-clone ${current === childrenLength ? "next" : ""}`}>{children[1]}</div>
+                    <div className="pagination">
+                        {React.Children.map(children, (_, key) => (
+                            <div
+                                key={key}
+                                className={current % childrenLength === key ? "active" : ""}
+                                onClick={() => this.jumpToSlide(key)}
+                                onMouseEnter={() => current === key && this.handleMouseEnter()}
+                            />
+                        ))}
+                    </div>
+                </div>
+            );
+        }
+    }
+}

package/src/core/Cascader/InitialNullable.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type {BaseProps} from "./index";
+import {Cascader} from "./index";
+
+export interface Props<T extends string | number> extends BaseProps<T> {
+    value: T | null;
+    onChange: (newValue: T) => void;
+}
+
+export class InitialNullable<T extends string | number> extends React.PureComponent<Props<T>> {
+    static displayName = "EnumSelect.InitialNullable";
+
+    render() {
+        const {value, ...restProps} = this.props;
+
+        const wrappedValue = value as T;
+
+        return <Cascader value={wrappedValue} {...restProps} />;
+    }
+}

package/src/core/Cascader/Nullable.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type {ControlledFormValue} from "../../internal/type";
+import {i18n} from "../../internal/i18n/core";
+import type {CascaderDataNode, BaseProps} from "./index";
+import {Cascader} from "./index";
+
+type NullType = "@@NULL";
+
+interface Props<T extends string | number> extends BaseProps<T>, ControlledFormValue<T | null> {
+    nullText?: string;
+}
+
+export class Nullable<T extends string> extends React.PureComponent<Props<T>> {
+    static displayName = "Cascader.Nullable";
+
+    private readonly nullValue: NullType = "@@NULL";
+
+    override render() {
+        const {nullText, data, value, onChange, ...restProps} = this.props;
+        const t = i18n();
+
+        const wrappedData: Array<CascaderDataNode<T | NullType>> = [{label: nullText || t.all, value: this.nullValue}, ...data];
+        const wrappedValue: T | NullType = value === null ? this.nullValue : value;
+        const wrappedOnChange = (newValue: T | NullType) => onChange(newValue === this.nullValue ? null : newValue);
+
+        return <Cascader data={wrappedData} value={wrappedValue} onChange={wrappedOnChange} {...restProps} />;
+    }
+}