@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/core/WithExplanation/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import {Tooltip} from "../Tooltip";
+import type {PickOptional, SafeReactChildren} from "../../internal/type";
+import type {TooltipPlacement} from "../Tooltip";
+import "./index.less";
+
+export interface Props {
+    /**
+     * If there are multiple children, they should handle inline display by self.
+     */
+    children?: SafeReactChildren;
+    /**
+     * If falsy, tooltip icon will hide.
+     */
+    explanation?: SafeReactChildren;
+    placement?: TooltipPlacement;
+    iconPosition?: "left" | "right";
+}
+
+export class WithExplanation extends React.PureComponent<Props> {
+    static displayName = "WithExplanation";
+
+    static defaultProps: PickOptional<Props> = {
+        iconPosition: "right",
+    };
+
+    render() {
+        const {children, explanation, iconPosition} = this.props;
+        if (explanation) {
+            return (
+                <div className={classNames("g-with-explanation", `with-icon-${iconPosition}`)}>
+                    {children}
+                    <Tooltip className="g-with-explanation-tooltip" title={Array.isArray(explanation) ? explanation.map((_, index) => <p key={index}>{_}</p>) : explanation}>
+                        <div className="icon-container">
+                            <svg viewBox="0 0 1024 1024">
+                                <path d="M512 0C229.322105 0 0 229.914947 0 512S229.322105 1024 512 1024 1024 794.085053 1024 512 794.677895 0 512 0z m45.972211 779.964632a65.428211 65.428211 0 0 1-45.972211 18.378105h-1.239579c-17.785263 0-34.330947-6.736842-46.565053-19.024842a65.320421 65.320421 0 0 1-19.024842-46.565053c0-19.024842 6.736842-34.330947 19.617685-46.618947 11.641263-12.234105 27.594105-18.378105 46.618947-18.378106h15.898947v1.832422c12.288 2.425263 23.336421 7.976421 31.258948 16.545684 12.288 12.288 19.024842 27.594105 19.024842 46.618947 0 18.378105-6.736842 34.330947-19.617684 47.21179z m96.309894-283.270737c-4.311579 5.497263-15.36 16.545684-60.092631 55.781052-11.048421 9.162105-19.671579 20.210526-25.168842 31.258948-6.144 11.641263-9.162105 23.929263-9.162106 38.642526v27.594105H454.332632v-27.594105c0-29.426526 4.850526-53.355789 15.306105-72.973474 10.401684-20.857263 36.163368-49.690947 80.949895-88.279579l11.048421-12.288c10.994526-13.473684 15.898947-26.947368 15.898947-40.421052 0-19.671579-5.497263-35.031579-15.898947-46.026105-10.455579-10.401684-26.408421-15.952842-47.21179-15.952843-25.761684 0-44.193684 7.383579-54.595368 22.689685-10.401684 14.120421-15.952842 34.330947-15.952842 61.33221v15.952842H339.698526v-15.952842c0-53.948632 15.952842-98.088421 47.804632-129.994105 31.905684-32.498526 76.692211-49.044211 131.880421-49.044211 48.397474 0 88.279579 13.473684 118.298947 40.421053 31.258947 27.001263 46.618947 64.404211 46.026106 111.023158 0 36.756211-9.808842 68.661895-29.426527 93.776842z" />
+                            </svg>
+                        </div>
+                    </Tooltip>
+                </div>
+            );
+        } else {
+            return children || "";
+        }
+    }
+}

package/src/core/WithTooltipList.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {Tooltip} from "./Tooltip";
+
+export interface TooltipListProps {
+    label: string;
+    content: string | number | React.ReactElement;
+}
+
+export interface Props {
+    list: Array<TooltipListProps | "-">;
+    /**
+     * If undefined, it will use the first list item as label.
+     * If ReactElement, make sure it is inline-block, to make the tooltip arrow centered.
+     */
+    children?: string | React.ReactElement;
+    onClick?: () => void;
+    onVisibleChange?: (visible: boolean) => void;
+}
+
+export class WithTooltipList extends React.PureComponent<Props> {
+    static displayName = "WithTooltipList";
+
+    private readonly labelStyle: React.CSSProperties = {display: "inline-block", width: 90};
+    private readonly wrapperStyle: React.CSSProperties = {display: "inline-block"};
+
+    renderTooltip = () => {
+        const {list} = this.props;
+
+        return (
+            <div>
+                {list.map((item, index) =>
+                    item === "-" ? (
+                        <hr key={index} />
+                    ) : (
+                        <p key={item.label}>
+                            <span style={this.labelStyle}>{item.label}</span>
+                            <em>{item.content}</em>
+                        </p>
+                    )
+                )}
+            </div>
+        );
+    };
+
+    render() {
+        const {list, children, onClick, onVisibleChange} = this.props;
+        if (list.length === 0) {
+            return children || "-";
+        }
+
+        const label = children ? (
+            children
+        ) : list[0] === "-" ? (
+            "-"
+        ) : typeof list[0].content === "string" || typeof list[0].content === "number" ? (
+            list[0].label + ": " + list[0].content
+        ) : (
+            <React.Fragment>
+                {list[0].label}: {list[0].content}
+            </React.Fragment>
+        );
+
+        if (onClick) {
+            /**
+             * - Must wrap with a <div> since the child node of <Tooltip> must accept certain methods, since <a>'s onClick is used already.
+             * - Wrapper must be inline-block, to make the tooltip arrow centered.
+             *
+             * Ref: https://ant.design/components/tooltip/#Note
+             */
+            return (
+                <Tooltip placement="bottom" title={this.renderTooltip()} onVisibleChange={onVisibleChange}>
+                    <div style={this.wrapperStyle}>
+                        <a onClick={onClick || this.dummyClick} style={this.wrapperStyle} className="g-with-tooltip-list-anchor">
+                            {label}
+                        </a>
+                    </div>
+                </Tooltip>
+            );
+        } else {
+            return (
+                <Tooltip placement="bottom" title={this.renderTooltip()} onVisibleChange={onVisibleChange} className="g-with-tooltip-list-anchor">
+                    <a>{label}</a>
+                </Tooltip>
+            );
+        }
+    }
+
+    private readonly dummyClick = () => {};
+}

package/src/core/YearMonthSelector.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import moment from "moment";
+import type {ControlledFormValue} from "../internal/type";
+import type {Moment} from "moment";
+import AntDatePicker from "antd/lib/date-picker";
+
+export interface Props<T extends boolean> extends ControlledFormValue<T extends false ? [number, number] : [number, number] | null> {
+    allowNull: T;
+    disabledRange?: (diffMonthToThisMonth: number, date: Date) => boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+export class YearMonthSelector<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "DatePicker";
+
+    isDateDisabled = (current: moment.Moment): boolean => {
+        /**
+         * This is for compatibility of MySQL.
+         * MySQL TIMESTAMP data type is used for values that contain both date and time parts.
+         * TIMESTAMP has a range of '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC.
+         */
+        if (current.valueOf() >= new Date(2038, 0).valueOf()) {
+            return true;
+        }
+
+        const diffMonthToThisMonth = Math.floor(current.diff(moment().startOf("month"), "month", true));
+        return this.props.disabledRange?.(diffMonthToThisMonth, current.toDate()) || false;
+    };
+
+    onChange = (date: Moment | null, dateString: string) => {
+        const {onChange, allowNull} = this.props;
+        if (dateString || allowNull) {
+            const typedOnChange = onChange as (value: [number, number] | null) => void;
+            typedOnChange(date && [date.year(), date.month() + 1]);
+        }
+    };
+
+    render() {
+        const {value, allowNull, disabled, className} = this.props;
+        return (
+            <AntDatePicker
+                className={className}
+                disabledDate={this.isDateDisabled}
+                value={value ? moment([value[0], value[1] - 1]) : null}
+                onChange={this.onChange}
+                allowClear={allowNull}
+                disabled={disabled}
+                picker="month"
+            />
+        );
+    }
+}

package/src/css/global.less

@@ -0,0 +1,93 @@
+@import "~antd/lib/style/index.less";
+
+* {
+    font-family: "Microsoft YaHei", Yahei, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, "Hiragino Sans GB", sans-serif;
+}
+
+a {
+    // Remove antd pre-set color & animation
+    transition: none;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+        color: inherit;
+    }
+
+    &:active,
+    &:link,
+    &:visited {
+        text-decoration: none;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+    color: inherit;
+    padding: 0;
+    margin: 0;
+}
+
+em {
+    color: #1e90ff;
+    font-style: normal;
+}
+
+pre {
+    margin: 0;
+
+    em {
+        margin: 0 2px;
+    }
+}
+
+del,
+del * {
+    // Without *, tags inside <del> is not deleted (e.g: <del>100.<small>1234</small></del>)
+    text-decoration: line-through;
+
+    &::before,
+    &::after {
+        content: "\00a0"; /* Make line-through looks longer */
+    }
+}
+
+button {
+    border: none;
+    outline: none;
+    background-color: transparent;
+    padding: 0;
+    color: inherit;
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+        &:hover {
+            cursor: pointer;
+            opacity: 0.82;
+        }
+    }
+}
+
+.ant-select {
+    // Override ant-select element
+    > span:first-child {
+        display: none !important;
+    }
+}
+
+.ant-radio-group .ant-radio-wrapper,
+.ant-checkbox-group .ant-checkbox-wrapper,
+.ant-checkbox-group.ant-checkbox-group {
+    line-height: unset; // Use parent line height for vertical centering
+}
+
+::placeholder {
+    color: #ccc;
+}

package/src/css/variable.less

@@ -0,0 +1,5 @@
+@lib-main-blue: #1890ff;
+@lib-main-red: #ff5243;
+@lib-main-green: #1ea075;
+@lib-background-gray: #f2f2f3;
+@lib-border-gray: rgba(173, 173, 173, 0.6);

package/src/hooks/useSwipe/controller.ts

@@ -0,0 +1,133 @@
+import type React from "react";
+import type {SwipeHookConfig, SwipeHookHandlers, SwipeHookResult, SwipeState, Vector2} from "./type";
+import {SwipeUtil} from "../../util/SwipeUtil";
+
+const SWIPE_START_THRESHOLD = 10;
+
+export class Controller {
+    private startTime: number = 0;
+    private startTouch: React.Touch | null = null;
+    private started: boolean = false;
+    private handlers: SwipeHookHandlers;
+    private config: SwipeHookConfig;
+
+    constructor() {
+        this.handlers = {};
+        this.config = {};
+    }
+
+    private onTouchStart(e: React.TouchEvent) {
+        if (e.changedTouches[0] && !this.startTouch) {
+            this.startTouch = e.changedTouches[0];
+            this.startTime = Date.now();
+        }
+    }
+
+    private onTouchMove(e: React.TouchEvent) {
+        const matchedTouches = this.matchTouches(e);
+        if (!matchedTouches) {
+            return;
+        }
+        const state = this.computeEvent(matchedTouches.start, matchedTouches.changed, e);
+
+        if (!this.started && this.testThreshold(state)) {
+            this.started = true;
+            this.handlers.onStart?.(state);
+            return;
+        } else if (this.started) {
+            this.handlers.onMove?.(state);
+        }
+    }
+
+    private onTouchEnd(e: React.TouchEvent) {
+        if (!this.started) {
+            this.reset();
+            return;
+        }
+        const matchedTouches = this.matchTouches(e);
+        if (!matchedTouches) {
+            return;
+        }
+        const state = this.computeEvent(matchedTouches.start, matchedTouches.changed, e);
+        this.handlers.onEnd?.(state);
+        this.reset();
+    }
+
+    private onTouchCancel(e: React.TouchEvent) {
+        if (!this.started) {
+            this.reset();
+            return;
+        }
+        const matchedTouches = this.matchTouches(e);
+        if (!matchedTouches) {
+            return;
+        }
+        const state = this.computeEvent(matchedTouches.start, matchedTouches.changed, e);
+        this.handlers.onCancel?.(state);
+        this.reset();
+    }
+
+    private testThreshold(state: SwipeState): boolean {
+        return state.displacement > SWIPE_START_THRESHOLD && (this.config.threshold?.(state) ?? true);
+    }
+
+    private cancel(event: React.TouchEvent) {
+        if (this.startTouch) {
+            this.onTouchCancel(event);
+        }
+    }
+
+    private computeEvent(start: React.Touch, changed: React.Touch, event: React.TouchEvent): SwipeState {
+        const s: Vector2 = [start.clientX, start.clientY];
+        const e: Vector2 = [changed.clientX, changed.clientY];
+        const delta: Vector2 = [e[0] - s[0], e[1] - s[1]];
+        const timeElapsed = Date.now() - this.startTime;
+        return {
+            clientX: changed.clientX,
+            clientY: changed.clientY,
+            startTouch: start,
+            delta,
+            direction: SwipeUtil.getDirection(s, e),
+            displacement: SwipeUtil.getDisplacement(s, e),
+            // TODO/Alvis, need to improve velocity calculation
+            velocity: [Math.abs(delta[0]) / timeElapsed, Math.abs(delta[1]) / timeElapsed],
+            syntheticEvent: event,
+            cancel: (() => this.cancel(event)).bind(this),
+        };
+    }
+
+    private matchTouches(e: React.TouchEvent): {start: React.Touch; changed: React.Touch} | null {
+        if (!this.startTouch) {
+            return null;
+        }
+        const touch = Array.from(e.changedTouches).find(_ => _.identifier === this.startTouch!.identifier);
+        if (!touch) {
+            return null;
+        } else {
+            return {
+                start: this.startTouch,
+                changed: touch,
+            };
+        }
+    }
+
+    private reset() {
+        this.startTime = 0;
+        this.startTouch = null;
+        this.started = false;
+    }
+
+    update(handlers: SwipeHookHandlers, config: SwipeHookConfig = {}) {
+        this.handlers = handlers;
+        this.config = config;
+    }
+
+    createHandlers(): SwipeHookResult {
+        return {
+            onTouchStart: this.onTouchStart.bind(this),
+            onTouchMove: this.onTouchMove.bind(this),
+            onTouchEnd: this.onTouchEnd.bind(this),
+            onTouchCancel: this.onTouchCancel.bind(this),
+        };
+    }
+}

package/src/hooks/useSwipe/index.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import {Controller} from "./controller";
+import type {SwipeHookConfig, SwipeHookHandlers, SwipeHookResult} from "./type";
+
+export const useSwipe = (handlers: SwipeHookHandlers, config?: SwipeHookConfig): SwipeHookResult => {
+    const controller = React.useMemo(() => new Controller(), []);
+    controller.update(handlers, config);
+    return controller.createHandlers.apply(controller);
+};
+
+export * from "./type";

package/src/hooks/useSwipe/type.ts

@@ -0,0 +1,45 @@
+import type React from "react";
+
+export type TouchHandlers = Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onTouchStart" | "onTouchMove" | "onTouchEndCapture" | "onTouchCancelCapture">;
+
+export interface SwipeHookResult {
+    onTouchMove: React.TouchEventHandler;
+    onTouchStart: React.TouchEventHandler;
+    onTouchEnd: React.TouchEventHandler;
+    onTouchCancel: React.TouchEventHandler;
+}
+
+export interface SwipeState {
+    syntheticEvent: React.TouchEvent;
+    startTouch: React.Touch;
+    clientX: number;
+    clientY: number;
+    displacement: number;
+    delta: Vector2;
+    velocity: Vector2;
+    direction: Direction;
+    cancel: () => void;
+}
+
+type SwipeHookHandler = (event: SwipeState) => void;
+
+export interface SwipeHookHandlers {
+    onStart?: SwipeHookHandler;
+    onEnd?: SwipeHookHandler;
+    onMove?: SwipeHookHandler;
+    onCancel?: SwipeHookHandler;
+}
+
+export interface SwipeHookConfig {
+    threshold?: (state: SwipeState) => boolean;
+    preventDefault?: boolean;
+}
+
+export enum Direction {
+    UP = "UP",
+    DOWN = "DOWN",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+}
+
+export type Vector2 = [number, number];

package/src/hooks/useTransform.ts

@@ -0,0 +1,77 @@
+import React from "react";
+
+interface TransitionOption {
+    // transition related properties
+    property?: string;
+    // in ms
+    duration?: number;
+    delay?: number;
+    timingFunction?: string;
+}
+
+interface Option extends TransitionOption {
+    // transform related properties
+    x?: number;
+    y?: number;
+    z?: number;
+    immediate?: boolean;
+}
+
+export const useTransform = (ref: React.RefObject<HTMLElement>, option?: Option) => {
+    const optionRef = React.useRef(option);
+    optionRef.current = option;
+
+    const clearTransition = React.useCallback((el: HTMLElement) => {
+        el.style.transitionDuration = "";
+        el.style.transitionProperty = "";
+        el.style.transitionTimingFunction = "";
+        el.style.transitionDuration = "";
+    }, []);
+
+    const setTransition = React.useCallback(
+        (el: HTMLElement) => {
+            if (optionRef.current) {
+                const {delay, duration, property, timingFunction} = optionRef.current;
+                delay && (el.style.transitionDelay = delay + "ms");
+                duration && (el.style.transitionDuration = duration + "ms");
+                property && (el.style.transitionProperty = property);
+                timingFunction && (el.style.transitionTimingFunction = timingFunction);
+            } else {
+                clearTransition(el);
+            }
+        },
+        [clearTransition]
+    );
+
+    const to = React.useCallback(
+        (option: Option) => {
+            if (ref.current) {
+                const el = ref.current;
+                requestAnimationFrame(() => {
+                    el.style.transform = `translate3d(${option.x ?? 0}px, ${option.y ?? 0}px, ${option.z ?? 0}px) `;
+                    option.immediate ? clearTransition(el) : setTransition(el);
+                });
+            }
+        },
+        [ref, setTransition, clearTransition]
+    );
+
+    const clear = React.useCallback(() => {
+        if (ref.current) {
+            const el = ref.current;
+            requestAnimationFrame(() => {
+                el.style.transform = "";
+                setTransition(el);
+            });
+        }
+    }, [ref, setTransition]);
+
+    React.useEffect(() => {
+        if (optionRef.current) {
+            to(optionRef.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount
+    }, []);
+
+    return {to, clear};
+};

package/src/internal/ArrayUtil.ts

@@ -0,0 +1,53 @@
+/**
+ * Return b's the occurrence percentage in a.
+ * The ordering of a & b matters.
+ */
+function intersectionPercentage<T>(a: T[], b: T[]): number {
+    if (a.length === 0) {
+        return 0;
+    }
+    return (a.filter(_ => b.includes(_)).length / a.length) * 100;
+}
+
+function toObject<T, V>(array: ReadonlyArray<T>, mapperCallback: (item: T, index: number) => [string, V]): {[key: string]: V} {
+    const result: {[key: string]: V} = {};
+    array.forEach((item, index) => {
+        const mappedKV = mapperCallback(item, index);
+        result[mappedKV[0]] = mappedKV[1];
+    });
+    return result;
+}
+
+/**
+ * Accepts a list of item and a callback, maps each item with the callback,
+ * then removes value of `null`, `undefined`, `NaN` from the resulting list.
+ * Other falsy values are **NOT** removed.
+ *
+ * @param array    List of items to be filtered
+ * @param callback Callback to transform item
+ */
+function compactMap<T, V>(array: ReadonlyArray<T>, callback: (item: T, index: number) => V): Array<NonNullable<V>> {
+    return array.map(callback).filter(_ => _ !== null && _ !== undefined && (typeof _ !== "number" || !Number.isNaN(_))) as Array<NonNullable<V>>;
+}
+
+/**
+ * If element exists in array, it will return a new array without this element.
+ * If element not exists in array, it will return a new array with this element in the last.
+ */
+function toggleElement<T>(array: ReadonlyArray<T>, element: T): T[] {
+    const index = array.indexOf(element);
+    if (index >= 0) {
+        const clonedArray = [...array];
+        clonedArray.splice(index, 1);
+        return clonedArray;
+    } else {
+        return [...array, element];
+    }
+}
+
+export const ArrayUtil = Object.freeze({
+    intersectionPercentage,
+    toObject,
+    compactMap,
+    toggleElement,
+});