@pinnacle0/web-ui 0.3.38 → 0.3.39

package/src/core/Button/index.tsx

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

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

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

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

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

@@ -1,28 +0,0 @@
-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} />;
-    }
-}

package/src/core/Cascader/index.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import type {DefaultOptionType} from "rc-cascader";
-import AntCascader from "antd/lib/cascader";
-import type {ControlledFormValue} from "../../internal/type";
-import {Nullable} from "./Nullable";
-import {InitialNullable} from "./InitialNullable";
-import "antd/lib/cascader/style";
-import "./index.less";
-
-/**
- * Attention:
- * CascaderDataNode.value must be unique in the whole data tree.
- */
-
-export interface CascaderDataNode<T extends string | number> {
-    label: string;
-    value?: T; // Undefined if same with label
-    disabled?: boolean;
-    children?: Array<CascaderDataNode<T>>;
-}
-
-export interface BaseProps<T extends string | number> {
-    data: Array<CascaderDataNode<T>>;
-    canSelectAnyLevel?: boolean;
-    placeholder?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-}
-
-export interface Props<T extends string | number> extends BaseProps<T>, ControlledFormValue<T> {}
-
-export class Cascader<T extends string | number> extends React.PureComponent<Props<T>> {
-    static displayName = "Cascader";
-    static Nullable = Nullable;
-    static InitialNullable = InitialNullable;
-
-    getAntValue = (): Array<string | number> => {
-        const data = this.getAntDataSource();
-        const getCascaderValues = (data: DefaultOptionType[]): Array<string | number> => {
-            const {value} = this.props;
-            for (const item of data) {
-                if (item.value === value) {
-                    return [item.value];
-                } else if (item.children) {
-                    const result = [item.value!, ...getCascaderValues(item.children)];
-                    if (result.includes(value)) {
-                        return result;
-                    }
-                }
-            }
-            return [];
-        };
-        return getCascaderValues(data);
-    };
-
-    getAntDataSource = (): DefaultOptionType[] => {
-        const getAntChildren = (list: Array<CascaderDataNode<T>>): DefaultOptionType[] => {
-            return list.map(node => ({
-                label: node.label,
-                disabled: node.disabled,
-                value: node.value || node.label,
-                children: node.children && node.children.length > 0 ? getAntChildren(node.children) : undefined,
-            }));
-        };
-        return getAntChildren(this.props.data);
-    };
-
-    displayRender = (labels: React.ReactNode[]) => <React.Fragment>{labels.join("/")}</React.Fragment>;
-
-    onChange = (antValue: Array<string | number>) => this.props.onChange(antValue[antValue.length - 1] as T);
-
-    render() {
-        const {canSelectAnyLevel, placeholder, disabled, style, className} = this.props;
-        return (
-            <AntCascader
-                multiple={false}
-                className={`g-cascader ${className || ""}`}
-                dropdownClassName="g-cascader-popup"
-                style={style}
-                changeOnSelect={canSelectAnyLevel}
-                value={this.getAntValue()}
-                onChange={this.onChange}
-                options={this.getAntDataSource()}
-                allowClear={false}
-                expandTrigger="hover"
-                displayRender={this.displayRender}
-                placeholder={placeholder}
-                disabled={disabled}
-            />
-        );
-    }
-}

package/src/core/Checkbox/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import type {CheckboxChangeEvent, CheckboxOptionType, CheckboxProps} from "antd/lib/checkbox";
-import AntCheckbox from "antd/lib/checkbox";
-import type {CheckboxValueType} from "antd/lib/checkbox/Group";
-import "antd/lib/checkbox/style";
-import type {ControlledFormValue} from "../../internal/type";
-import "./index.less";
-
-export interface Props extends Omit<CheckboxProps, "value" | "onChange" | "checked">, ControlledFormValue<boolean> {}
-
-export class Checkbox extends React.PureComponent<Props> {
-    static displayName = "Checkbox";
-
-    static Group = AntCheckbox.Group;
-
-    onChange = (e: CheckboxChangeEvent) => this.props.onChange(e.target.checked);
-
-    render() {
-        const {value} = this.props;
-        return <AntCheckbox {...this.props} checked={value} onChange={this.onChange} />;
-    }
-}
-
-export type {CheckboxChangeEvent, CheckboxOptionType, CheckboxValueType};

package/src/core/Collapse.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import AntdCollapse from "antd/lib/collapse";
-import type {CollapseProps, CollapsePanelProps} from "antd/lib/collapse";
-import "antd/lib/collapse/style";
-
-/** Will be remove in future, replaced by Foldable and Accordion */
-export interface Props extends CollapseProps {}
-
-export class Collapse extends React.PureComponent<Props> {
-    static displayName = "Collapse";
-
-    static Panel = AntdCollapse.Panel;
-
-    render() {
-        return <AntdCollapse {...this.props} />;
-    }
-}
-
-export type PanelProps = CollapsePanelProps;

package/src/core/Countdown/SlidingDigit.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-
-interface Props {
-    digit: string;
-}
-
-interface State {
-    currentDigit: string;
-    withSlidedClass: boolean;
-}
-
-export class SlidingDigit extends React.PureComponent<Props, State> {
-    static displayName = "SlidingDigit";
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            currentDigit: this.props.digit,
-            withSlidedClass: false,
-        };
-    }
-
-    componentDidUpdate() {
-        if (this.state.currentDigit !== this.props.digit) {
-            this.setState({withSlidedClass: true});
-        }
-    }
-
-    render() {
-        return (
-            <div className="sliding-digit-outer">
-                <div onTransitionEnd={() => this.setState({currentDigit: this.props.digit, withSlidedClass: false})} className={`sliding-digit-inner ${this.state.withSlidedClass ? "slided" : ""}`}>
-                    <p>{this.props.digit}</p>
-                    <p>{this.state.currentDigit}</p>
-                </div>
-            </div>
-        );
-    }
-}

package/src/core/Countdown/index.tsx

@@ -1,125 +0,0 @@
-import React from "react";
-import type {PickOptional} from "../../internal/type";
-import {SlidingDigit} from "./SlidingDigit";
-import "./index.less";
-
-export interface Props {
-    /**
-     * Pass 0 or negative will invalidate the time into --:--:--.
-     */
-    timeToComplete: number;
-    onComplete?: () => void;
-    /**
-     * @param remainingSecond - positive ONLY, use `onComplete` for remaining second is 0
-     */
-    onTick?: (remainingSecond: number) => void;
-    /**
-     * @param hours/minutes/seconds - well-formatted in exact two chars
-     * @param remainingSecond - NULL if not applicable
-     */
-    renderer?: (hours: string, minutes: string, seconds: string, remainingSecond: number | null) => React.ReactElement | string;
-    isHidden?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-interface State {
-    remainingSecond: number;
-}
-
-export class Countdown extends React.PureComponent<Props, State> {
-    static displayName = "Countdown";
-    static defaultProps: PickOptional<Props> = {
-        renderer: (hours, minutes, seconds) => (
-            <React.Fragment>
-                <SlidingDigit digit={hours.charAt(0)} />
-                <SlidingDigit digit={hours.charAt(1)} />
-                <div className="colon">:</div>
-                <SlidingDigit digit={minutes.charAt(0)} />
-                <SlidingDigit digit={minutes.charAt(1)} />
-                <div className="colon">:</div>
-                <SlidingDigit digit={seconds.charAt(0)} />
-                <SlidingDigit digit={seconds.charAt(1)} />
-            </React.Fragment>
-        ),
-    };
-
-    private timer!: number;
-    private isTimerCompleted = false;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {remainingSecond: this.computeRemainingSecond()};
-    }
-
-    componentDidMount() {
-        this.timer = window.setInterval(this.onTick, 1000);
-    }
-
-    componentWillUnmount() {
-        window.clearInterval(this.timer);
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        if (prevProps.timeToComplete !== this.props.timeToComplete) {
-            this.isTimerCompleted = false;
-        }
-    }
-
-    computeRemainingSecond = () => {
-        const {timeToComplete} = this.props;
-        if (timeToComplete > 0) {
-            return Math.ceil((timeToComplete - Date.now()) / 1000);
-        } else {
-            return 0;
-        }
-    };
-
-    onTick = () => {
-        const {timeToComplete, onComplete, onTick} = this.props;
-        if (!this.isTimerCompleted && timeToComplete > 0) {
-            const remainingSecond = this.computeRemainingSecond();
-            if (remainingSecond <= 0) {
-                this.isTimerCompleted = true; // To avoid call onComplete more than once
-                onComplete?.();
-            } else if (remainingSecond !== this.state.remainingSecond) {
-                this.setState({remainingSecond}, () => onTick?.(remainingSecond));
-            }
-        }
-    };
-
-    render() {
-        const {isHidden, renderer, timeToComplete, className, style} = this.props;
-        const {remainingSecond} = this.state;
-        if (isHidden) {
-            return null;
-        }
-
-        let bodyNode: React.ReactElement | string;
-        if (timeToComplete > 0) {
-            if (remainingSecond / 3600 >= 100) {
-                bodyNode = renderer!("99", "59", "59", remainingSecond);
-            } else if (remainingSecond <= 0) {
-                bodyNode = renderer!("00", "00", "00", 0);
-            } else {
-                const hours = Math.floor(remainingSecond / 3600)
-                    .toString()
-                    .padStart(2, "0");
-                const remainingSecondWithinHour = remainingSecond % 3600;
-                const minutes = Math.floor(remainingSecondWithinHour / 60)
-                    .toString()
-                    .padStart(2, "0");
-                const seconds = (remainingSecondWithinHour % 60).toString().padStart(2, "0");
-                bodyNode = renderer!(hours, minutes, seconds, remainingSecond);
-            }
-        } else {
-            bodyNode = renderer!("--", "--", "--", null);
-        }
-
-        return (
-            <div className={`g-countdown ${className || ""}`} style={style}>
-                {bodyNode}
-            </div>
-        );
-    }
-}

package/src/core/DarkOverlay/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import type {SafeReactChildren} from "../../internal/type";
-import "./index.less";
-
-export interface Props {
-    children: SafeReactChildren;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export class DarkOverlay extends React.PureComponent<Props> {
-    static displayName = "DarkOverlay";
-
-    render() {
-        const {children, className, style} = this.props;
-        return ReactDOM.createPortal(
-            <div className={`g-dark-overlay ${className || ""}`} style={style}>
-                {children}
-            </div>,
-            document.body
-        );
-    }
-}