@pinnacle0/web-ui 0.3.36 → 0.3.39

package/src/core/VirtualTable/index.tsx

@@ -1,143 +0,0 @@
-import React from "react";
-import {useVirtual} from "react-virtual";
-import {classNames} from "../../util/ClassNames";
-import {Spin} from "../Spin";
-import {useLayout} from "./hooks/useLayout";
-import {useTransformColumn} from "./hooks/useTransformColumn";
-import {TableRow} from "./TableRow";
-import {TableHeader} from "./TableHeader";
-import type {SafeReactChild, StringKey} from "../../internal/type";
-import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection} from "./type";
-import "./index.less";
-
-export interface VirtualTableProps<RowType extends object> {
-    dataSource: RowType[];
-    columns: VirtualTableColumn<RowType>[];
-    scrollY: number;
-    rowHeight: number;
-    className?: string;
-    rowClassName?: string;
-    /**
-     * if scrollX is not provided, width: 100% will be used
-     * if width: 100% is used, please wrap the table with a container
-     */
-    scrollX?: number;
-    loading?: boolean;
-    emptyPlaceholder?: SafeReactChild;
-    rowSelection?: VirtualTableRowSelection<RowType>;
-    onRowClick?: (record: RowType, rowIndex: number) => void;
-    /**
-     * Default: index
-     */
-    rowKey?: StringKey<RowType> | "index";
-    headerHeight?: number;
-    rowExpand?: VirtualTableRowExpand<RowType>;
-}
-
-export const VirtualTable = Object.assign(
-    function <RowType extends object>({
-        columns,
-        rowHeight,
-        scrollY,
-        dataSource,
-        className,
-        rowClassName,
-        loading,
-        emptyPlaceholder,
-        rowSelection,
-        onRowClick,
-        scrollX,
-        rowExpand,
-        rowKey = "index",
-        headerHeight = 50,
-    }: VirtualTableProps<RowType>) {
-        const size = dataSource.length;
-        const scrollContentRef = React.useRef<HTMLDivElement>(null);
-        const headersRef = React.useRef<HTMLDivElement>(null);
-        const estimateSize = React.useCallback(() => rowHeight, [rowHeight]);
-        const overscan = rowExpand ? Math.floor(scrollY / rowHeight) : 1;
-
-        const {virtualItems, totalSize} = useVirtual({
-            size,
-            parentRef: scrollContentRef,
-            estimateSize,
-            overscan,
-        });
-        const transformedColumns = useTransformColumn({columns, dataSource, rowSelection, rowKey, rowExpand});
-
-        const isScrollable = totalSize > scrollY;
-        const tableHeight = scrollY + headerHeight;
-        const tableBodyHeight = scrollY;
-        const emptyElement = emptyPlaceholder || "暂无数据";
-        const {scrollBarSize, stickyPosition, columnWidths, isScrollToEdge, isScrollToLeft, isScrollToRight} = useLayout({headersRef, scrollContentRef, isScrollable, columns: transformedColumns});
-
-        const lastShownColumnIndex: number = React.useMemo(() => transformedColumns.length - 1 - [...transformedColumns].reverse().findIndex(_ => _.display !== "hidden"), [transformedColumns]);
-
-        // handle the edge position & shadow of the fixed columns
-        const getFixedColumnClassNames = React.useCallback(
-            (fixed: ColumnFixedPosition | undefined, columnIndex: number): (string | undefined)[] => {
-                const isFixedClassName = fixed ? "fixed" : "";
-                const isLastFixedClassName = fixed && stickyPosition[columnIndex]?.isLast ? "last" : "";
-                const fixedPositionClassName = fixed;
-                const hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
-                return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
-            },
-            [isScrollToLeft, isScrollToRight, stickyPosition]
-        );
-
-        const onScroll = React.useCallback(() => {
-            requestAnimationFrame(() => {
-                // only trigger in horizontal direction
-                if (!scrollContentRef.current || !headersRef.current || scrollContentRef.current.scrollLeft === headersRef.current.scrollLeft) return;
-
-                isScrollToEdge();
-                // sync scrolling in header
-                headersRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
-            });
-        }, [isScrollToEdge]);
-
-        return (
-            <div className={classNames("g-virtual-table", className)} style={{width: scrollX || "100%", height: tableHeight}}>
-                {loading && (
-                    <div className="mask">
-                        <Spin spinning={loading} />
-                    </div>
-                )}
-                <div className="scroll-content" ref={scrollContentRef} style={{height: tableBodyHeight, top: headerHeight}} onScroll={onScroll}>
-                    <div className="table" style={{height: totalSize}}>
-                        <TableHeader
-                            headersRef={headersRef}
-                            headerHeight={headerHeight}
-                            columns={transformedColumns}
-                            stickyPosition={stickyPosition}
-                            getFixedColumnClassNames={getFixedColumnClassNames}
-                        />
-                        <div className="table-body">
-                            {dataSource.length === 0
-                                ? emptyElement
-                                : columnWidths.length > 0 &&
-                                  virtualItems.map(virtualItem => (
-                                      <TableRow
-                                          key={virtualItem.index}
-                                          rowHeight={rowHeight}
-                                          onRowClick={onRowClick}
-                                          virtualItem={virtualItem}
-                                          data={dataSource[virtualItem.index]}
-                                          columns={transformedColumns}
-                                          columnWidths={columnWidths}
-                                          scrollBarSize={scrollBarSize}
-                                          stickyPosition={stickyPosition}
-                                          lastShownColumnIndex={lastShownColumnIndex}
-                                          rowClassName={rowClassName}
-                                          getFixedColumnClassNames={getFixedColumnClassNames}
-                                          rowExpand={rowExpand}
-                                      />
-                                  ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    },
-    {displayName: "VirtualTable"}
-);

package/src/core/VirtualTable/type.ts

@@ -1,59 +0,0 @@
-import type {SafeReactChild, SafeReactChildren} from "../../internal/type";
-
-export type ColumnFixedPosition = "left" | "right";
-
-export interface StickyPosition {
-    value: number;
-    isLast: boolean;
-}
-
-/**
- * Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
- */
-export type VirtualTableRowSelection<RowType extends object> = {
-    width: number;
-    selectedRowKeys: React.Key[];
-    onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
-    /**
-     * Can only sticky in left
-     */
-    fixed?: boolean;
-    isDisabled?: (data: RowType, rowIndex: number) => boolean;
-    isSelectAllDisabled?: boolean;
-    /**
-     * Attention:
-     * If title is provided, the select all checkbox wil be overridden
-     */
-    title?: SafeReactChild;
-};
-
-export type VirtualTableRowExpand<RowType extends object> = {
-    width: number;
-    renderExpandRow: (record: RowType, rowIndex: number) => SafeReactChild;
-    ExpandButton: React.ComponentType<{onClick: () => void}>;
-    title?: SafeReactChild;
-    /**
-     * Can only sticky in right
-     */
-    fixed?: boolean;
-    isDefaultExpanded?: boolean;
-};
-
-export type VirtualTableColumn<RowType extends object> = {
-    title: SafeReactChild;
-    width: number;
-    /**
-     * Attention:
-     * If renderData return null, the corresponding table cell will not render
-     */
-    renderData: (record: RowType, rowIndex: number) => SafeReactChildren | undefined;
-    align?: "left" | "right" | "center";
-    display?: "default" | "hidden";
-    fixed?: "left" | "right";
-    /**
-     * Attention:
-     * The overridden cell should return null in renderData props:
-     * e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
-     */
-    colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
-};

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

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

@@ -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,78 +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?: 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};
-};