@pinnacle0/web-ui 0.3.23 → 0.3.26

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

@@ -1,100 +0,0 @@
-.g-carousel-3d {
-    position: relative;
-    width: 100%;
-    height: 400px;
-
-    &.has-transition {
-        .child-slide {
-            transition: opacity 0.5s cubic-bezier(0.17, 0.67, 0.55, 1.43), transform 0.5s cubic-bezier(0.17, 0.67, 0.55, 1.43);
-        }
-    }
-
-    .child-slide {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        transform: scale(0.9);
-        height: 100%;
-        cursor: pointer;
-
-        &.child-clone {
-            z-index: 0;
-            opacity: 0;
-        }
-
-        &.pre {
-            display: block;
-            opacity: 0.3;
-            z-index: 0;
-            transform: translateX(-5%) scale(0.9);
-        }
-
-        &.active {
-            display: block;
-            opacity: 1;
-            z-index: 1;
-            transform: scale(0.94);
-            overflow: hidden;
-
-            .arrow {
-                display: flex;
-            }
-        }
-
-        &.next {
-            display: block;
-            opacity: 0.3;
-            z-index: 0;
-            transform: translateX(5%) scale(0.9);
-        }
-
-        img {
-            width: 100%;
-        }
-
-        .arrow {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #000;
-            opacity: 0.8;
-
-            &:hover {
-                opacity: 1;
-            }
-
-            &.arrow-left {
-                left: 0;
-            }
-
-            &.arrow-right {
-                right: 0;
-            }
-        }
-    }
-
-    .pagination {
-        position: absolute;
-        right: 48px;
-        text-align: center;
-        bottom: 16px;
-        z-index: 2;
-
-        > div {
-            display: inline-block;
-            cursor: pointer;
-            height: 8px;
-            width: 8px;
-            background-color: #bbb;
-            border-radius: 8px;
-            transition: width 0.6s ease;
-            margin: 0 2px;
-
-            &.active {
-                width: 36px;
-            }
-        }
-    }
-}

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

@@ -1,18 +0,0 @@
-.g-cascader-popup {
-    background: transparent;
-    box-shadow: none;
-
-    .ant-cascader-menu {
-        height: auto;
-        max-height: 300px;
-        border: 1px solid #d7d7d7;
-        background: #fff;
-    }
-}
-
-.ant-cascader-picker,
-.ant-cascader-picker-arrow,
-.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon,
-.ant-cascader-menu-item-loading-icon {
-    color: inherit;
-}

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

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

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

@@ -1,37 +0,0 @@
-.g-countdown {
-    @height: 26px;
-
-    .colon {
-        height: @height;
-        line-height: @height;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    .sliding-digit-outer {
-        overflow: hidden;
-        background: transparent;
-        border-radius: 4px;
-        height: @height;
-        line-height: @height;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    .sliding-digit-inner {
-        margin-top: -@height;
-
-        &.slided {
-            margin-top: 0;
-            transition: margin 0.2s;
-        }
-
-        p {
-            height: @height;
-            line-height: @height;
-            text-align: center;
-            margin: 0;
-            width: 10px; // Very important, for stable UI effect
-        }
-    }
-}