@pinnacle0/web-ui 0.3.22 → 0.3.23

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

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

@@ -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} />;
+    }
+}

package/src/core/Cascader/index.less

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

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

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

package/src/core/Checkbox/index.tsx

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

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

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

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