@pinnacle0/web-ui 0.3.35 → 0.3.36

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/hooks/useOrientationMode.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import {OrientationUtil} from "../util/OrientationUtil";
+import type {OrientationType} from "../util/OrientationUtil";
+
+export function useOrientationMode(): OrientationType {
+    const [mode, setMode] = React.useState<OrientationType>(OrientationUtil.mode());
+
+    React.useEffect(() => {
+        const handler = () => setMode(OrientationUtil.mode());
+        OrientationUtil.onOrientationChange(handler);
+
+        return () => {
+            OrientationUtil.removeOnChange(handler);
+        };
+    }, []);
+
+    return mode;
+}

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,78 @@
+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?: string | number;
+    y?: string | number;
+    z?: string | number;
+    immediate?: boolean;
+}
+
+export const useTransform = (ref: React.RefObject<HTMLElement>, option?: Option) => {
+    const initialOptionRef = React.useRef(option);
+    initialOptionRef.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, option?: Option) => {
+            if (option) {
+                const {delay, duration, property, timingFunction} = option;
+                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 format = (value?: number | string): string => (value ? (typeof value === "number" ? `${value}px` : value) : "0px");
+                const el = ref.current;
+                requestAnimationFrame(() => {
+                    el.style.transform = `translate3d(${format(option.x)}, ${format(option.y)}, ${format(option.z)}) `;
+                    option.immediate ? clearTransition(el) : setTransition(el, option);
+                });
+            }
+        },
+        [ref, setTransition, clearTransition]
+    );
+
+    const clear = React.useCallback(() => {
+        if (ref.current) {
+            const el = ref.current;
+            requestAnimationFrame(() => {
+                el.style.transform = "";
+                setTransition(el, initialOptionRef.current);
+            });
+        }
+    }, [ref, setTransition]);
+
+    React.useEffect(() => {
+        if (initialOptionRef.current) {
+            to(initialOptionRef.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,
+});