@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/WithExplanation/index.tsx

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

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

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

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

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

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

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

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

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

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