@tendaui/components 1.0.0 → 1.0.2

package/drawer/Drawer.tsx

@@ -0,0 +1,264 @@
+import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import { IconClose as TdCloseIcon } from "@tendaui/icons";
+import classnames from "classnames";
+import { isFunction, isObject, isString, isUndefined } from "lodash-es";
+import parseTNode from "../utils/parentTNode";
+import Button, { type ButtonProps } from "../button";
+import Portal from "../common/Portal";
+import useAttach from "../hooks/useAttach";
+import useConfig from "../hooks/useConfig";
+import useDeepEffect from "../hooks/useDeepEffect";
+import useDefaultProps from "../hooks/useDefaultProps";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import useSetState from "../hooks/useSetState";
+import { drawerDefaultProps } from "./defaultProps";
+import useDrag from "./hooks/useDrag";
+import { useLockStyle } from "./hooks/useLockStyle";
+import { useLocaleReceiver } from "../locale/LocalReceiver";
+
+import type { StyledProps } from "../common";
+import type { DrawerEventSource, DrawerInstance, TdDrawerProps } from "./type";
+
+export const CloseTriggerType: { [key: string]: DrawerEventSource } = {
+  CLICK_OVERLAY: "overlay",
+  CLICK_CLOSE_BTN: "close-btn",
+  CLICK_CANCEL_BTN: "cancel",
+  KEYDOWN_ESC: "esc"
+};
+
+export interface DrawerProps extends TdDrawerProps, StyledProps {
+  isPlugin?: boolean; // 是否以插件形式调用
+}
+
+const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
+  // 国际化文本初始化
+  const [local, t] = useLocaleReceiver("drawer");
+  const { CloseIcon } = useGlobalIcon({ CloseIcon: TdCloseIcon });
+  const confirmText = t(local.confirm);
+  const cancelText = t(local.cancel);
+
+  const props = useDefaultProps<DrawerProps>(originalProps, drawerDefaultProps);
+  const { body, children, header, footer, ...restProps } = props;
+  const [state, setState] = useSetState<DrawerProps>({ isPlugin: false, ...restProps });
+  const {
+    className,
+    style,
+    visible,
+    attach,
+    showOverlay,
+    size: propsSize,
+    placement,
+    onBeforeOpen,
+    onBeforeClose,
+    onCancel,
+    onConfirm,
+    onClose,
+    onCloseBtnClick,
+    onOverlayClick,
+    onEscKeydown,
+    onSizeDragEnd,
+    showInAttachedElement,
+    closeOnOverlayClick,
+    closeOnEscKeydown,
+    closeBtn,
+    cancelBtn = cancelText,
+    confirmBtn = confirmText,
+    zIndex,
+    destroyOnClose,
+    sizeDraggable,
+    forceRender,
+    isPlugin,
+    lazy
+  } = state;
+
+  const size = propsSize;
+  const { classPrefix } = useConfig();
+  const drawerAttach = useAttach("drawer", attach);
+  const maskRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const drawerWrapperRef = useRef<HTMLElement>(null); // 即最终的 attach dom，默认为 document.body
+  const prefixCls = `${classPrefix}-drawer`;
+
+  const closeIcon = isValidElement(closeBtn) ? closeBtn : <CloseIcon />;
+  const { dragSizeValue, enableDrag, draggableLineStyles, draggingStyles } = useDrag(
+    placement,
+    sizeDraggable,
+    onSizeDragEnd
+  );
+  const [animationStart, setAnimationStart] = useState(visible);
+
+  const sizeValue = useMemo(() => {
+    const sizeMap = { small: "300px", medium: "500px", large: "760px" };
+    return dragSizeValue || sizeMap[size] || size;
+  }, [dragSizeValue, size]);
+
+  useLockStyle({ ...state, sizeValue, drawerWrapper: drawerWrapperRef.current });
+  useImperativeHandle(ref, () => ({
+    show() {
+      setState({ visible: true });
+    },
+    hide() {
+      setState({ visible: false });
+    },
+    destroy() {
+      setState({ visible: false, destroyOnClose: true });
+    },
+    update(options) {
+      setState((prevState) => ({ ...prevState, ...options }));
+    }
+  }));
+
+  useEffect(() => {
+    if (visible) {
+      // 聚焦到 Drawer 最外层元素即 containerRef.current，KeyDown 事件才有效。
+      containerRef.current?.focus?.();
+    }
+  }, [visible]);
+
+  useDeepEffect(() => {
+    // 非插件式调用 更新props
+    if (isPlugin) return;
+    setState((prevState) => ({ ...prevState, ...props }));
+  }, [props, setState]);
+
+  function onMaskClick(e: React.MouseEvent<HTMLDivElement>) {
+    onOverlayClick?.({ e });
+    closeOnOverlayClick && onClose?.({ e, trigger: CloseTriggerType.CLICK_OVERLAY });
+  }
+  function onClickCloseBtn(e: React.MouseEvent<HTMLDivElement>) {
+    onCloseBtnClick?.({ e });
+    onClose?.({ e, trigger: CloseTriggerType.CLICK_CLOSE_BTN });
+  }
+  function onKeyDownEsc(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key !== "Escape") return;
+
+    onEscKeydown?.({ e });
+    closeOnEscKeydown && onClose?.({ e, trigger: CloseTriggerType.KEYDOWN_ESC });
+  }
+  function onCancelClick(e: React.MouseEvent<HTMLButtonElement>) {
+    onCancel?.({ e });
+    onClose?.({ e, trigger: CloseTriggerType.CLICK_CANCEL_BTN });
+  }
+  function onConfirmClick(e: React.MouseEvent<HTMLButtonElement>) {
+    onConfirm?.({ e });
+  }
+
+  const contentWrapperStyle = useMemo(
+    () => ({
+      transform: visible && animationStart ? "translateX(0)" : undefined,
+      width: ["left", "right"].includes(placement) ? sizeValue : "",
+      height: ["top", "bottom"].includes(placement) ? sizeValue : ""
+    }),
+    [visible, placement, sizeValue, animationStart]
+  );
+
+  const renderDrawerButton = (btn: DrawerProps["cancelBtn"], defaultProps: ButtonProps) => {
+    let result = null;
+
+    if (isString(btn)) {
+      result = <Button {...defaultProps}>{btn}</Button>;
+    } else if (isValidElement(btn)) {
+      result = btn;
+    } else if (isObject(btn)) {
+      result = <Button {...defaultProps} {...(btn as {})} />;
+    } else if (isFunction(btn)) {
+      result = btn();
+    }
+
+    return result;
+  };
+
+  const renderFooter = () => {
+    const defaultFooter = () => {
+      const renderCancelBtn = renderDrawerButton(cancelBtn, {
+        theme: "default",
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => onCancelClick?.(e),
+        className: `${prefixCls}__cancel`
+      });
+      const renderConfirmBtn = renderDrawerButton(confirmBtn, {
+        theme: "primary",
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => onConfirmClick?.(e),
+        className: `${prefixCls}__confirm`
+      });
+
+      const footerStyle = {
+        display: "flex",
+        justifyContent: placement === "right" ? "flex-start" : "flex-end"
+      };
+
+      return (
+        <div style={footerStyle}>
+          {placement === "right" ? (
+            <>
+              {renderConfirmBtn} {renderCancelBtn}
+            </>
+          ) : (
+            <>
+              {renderCancelBtn} {renderConfirmBtn}
+            </>
+          )}
+        </div>
+      );
+    };
+
+    return <div className={`${prefixCls}__footer`}>{parseTNode(footer, null, defaultFooter())}</div>;
+  };
+
+  const renderOverlay = showOverlay && (
+    <CSSTransition in={visible} timeout={200} classNames={`${prefixCls}-fade`} nodeRef={maskRef}>
+      <div ref={maskRef} className={`${prefixCls}__mask`} onClick={onMaskClick} />
+    </CSSTransition>
+  );
+  const renderCloseBtn = closeBtn && (
+    <div onClick={onClickCloseBtn} className={`${prefixCls}__close-btn`}>
+      {closeIcon}
+    </div>
+  );
+  const renderHeader = header && <div className={`${prefixCls}__header`}>{header}</div>;
+  const renderBody = <div className={`${prefixCls}__body`}>{body || children}</div>;
+
+  return (
+    <CSSTransition
+      in={visible}
+      nodeRef={drawerWrapperRef}
+      mountOnEnter={isUndefined(forceRender) ? lazy : !forceRender}
+      unmountOnExit={destroyOnClose}
+      timeout={{ appear: 10, enter: 10, exit: 300 }}
+      onEnter={() => onBeforeOpen?.()}
+      onEntered={() => setAnimationStart(true)}
+      onExit={() => onBeforeClose?.()}
+      onExited={() => setAnimationStart(false)}
+    >
+      <Portal attach={drawerAttach} ref={drawerWrapperRef}>
+        <div
+          ref={containerRef}
+          className={classnames(prefixCls, className, `${prefixCls}--${placement}`, {
+            [`${prefixCls}--open`]: visible,
+            [`${prefixCls}--attach`]: showInAttachedElement,
+            [`${prefixCls}--without-mask`]: !showOverlay
+          })}
+          style={{ zIndex, ...style }}
+          tabIndex={-1} // https://stackoverflow.com/questions/43503964/onkeydown-event-not-working-on-divs-in-react
+          onKeyDown={onKeyDownEsc}
+        >
+          {renderOverlay}
+          <div
+            className={classnames(`${prefixCls}__content-wrapper`, `${prefixCls}__content-wrapper--${placement}`)}
+            style={{ ...contentWrapperStyle, ...draggingStyles }}
+          >
+            {renderCloseBtn}
+            {renderHeader}
+            {renderBody}
+            {!!footer && renderFooter()}
+            {sizeDraggable && <div style={draggableLineStyles} onMouseDown={enableDrag}></div>}
+          </div>
+        </div>
+      </Portal>
+    </CSSTransition>
+  );
+});
+
+Drawer.displayName = "Drawer";
+
+export default Drawer;

package/drawer/defaultProps.ts

@@ -0,0 +1,19 @@
+import { TdDrawerProps } from "./type";
+
+export const drawerDefaultProps: TdDrawerProps = {
+  closeOnEscKeydown: undefined,
+  closeOnOverlayClick: undefined,
+  closeBtn: true,
+  destroyOnClose: false,
+  footer: true,
+  header: true,
+  lazy: true,
+  mode: "overlay",
+  placement: "right",
+  preventScrollThrough: true,
+  showInAttachedElement: false,
+  showOverlay: true,
+  size: undefined,
+  sizeDraggable: false,
+  visible: false
+};

package/drawer/hooks/useDrag.ts

@@ -0,0 +1,98 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { getSizeDraggable, calcMoveSize } from "../utils";
+
+import type { TdDrawerProps } from "../type";
+import type { Styles } from "../../common";
+
+const useDrag = (
+  placement: TdDrawerProps["placement"],
+  sizeDraggable: TdDrawerProps["sizeDraggable"],
+  onSizeDragEnd: TdDrawerProps["onSizeDragEnd"]
+) => {
+  const [dragSizeValue, changeDragSizeValue] = useState<string>(null);
+  // 使用 ref 来存储当前拖拽的宽度值
+  const dragSizeRef = useRef<number>(0);
+  const [isSizeDragging, toggleSizeDragging] = useState(false);
+
+  const handleMousemove = useCallback(
+    (e: MouseEvent) => {
+      // 如果 sizeDraggable 是 boolean 值的 false，则不进行后续的计算
+      if (sizeDraggable === false) return;
+
+      // 鼠标移动时计算draggedSizeValue的值
+      const { x, y } = e;
+
+      const maxHeight = document.documentElement.clientHeight;
+      const maxWidth = document.documentElement.clientWidth;
+      const offsetHeight = 8;
+      const offsetWidth = 8;
+      // x 轴方向使用最大宽度，y轴方向使用最大高度
+      const max = placement === "left" || placement === "right" ? maxWidth : maxHeight;
+      // x 轴方向使用默认最小宽度，y轴方向使用默认最小高度
+      const min = placement === "left" || placement === "right" ? offsetWidth : offsetHeight;
+
+      const { max: limitMax, min: limitMin } = getSizeDraggable(sizeDraggable, { max, min });
+
+      const moveSize = calcMoveSize(placement, {
+        x,
+        y,
+        maxWidth,
+        maxHeight,
+        max: limitMax,
+        min: limitMin
+      });
+
+      if (typeof moveSize === "undefined") return;
+      changeDragSizeValue(`${moveSize}px`);
+      dragSizeRef.current = moveSize;
+    },
+    [placement, sizeDraggable]
+  );
+
+  const draggableLineStyles: Styles = useMemo(() => {
+    // 设置拖拽control的样式
+    const isHorizontal = ["right", "left"].includes(placement);
+    const oppositeMap = {
+      left: "right",
+      right: "left",
+      top: "bottom",
+      bottom: "top"
+    };
+    return {
+      zIndex: 1,
+      position: "absolute",
+      background: "transparent",
+      [oppositeMap[placement]]: 0,
+      width: isHorizontal ? "16px" : "100%",
+      height: isHorizontal ? "100%" : "16px",
+      cursor: isHorizontal ? "col-resize" : "row-resize"
+    };
+  }, [placement]);
+
+  const handleMouseup = useCallback(
+    (e: MouseEvent) => {
+      document.removeEventListener("mouseup", handleMouseup, true);
+      document.removeEventListener("mousemove", handleMousemove, true);
+      onSizeDragEnd?.({
+        e,
+        // 此处不要使用 dragSizeValue，useState 的更新是异步的，在鼠标拖拽的同步操作中取不到最新的值
+        size: dragSizeRef.current
+      });
+      toggleSizeDragging(false);
+    },
+    [handleMousemove, onSizeDragEnd]
+  );
+
+  const enableDrag = useCallback(() => {
+    // mousedown 绑定 mousemove 和 mouseup 事件
+    document.addEventListener("mouseup", handleMouseup, true);
+    document.addEventListener("mousemove", handleMousemove, true);
+    toggleSizeDragging(true);
+  }, [handleMousemove, handleMouseup]);
+
+  const draggingStyles: Styles = isSizeDragging ? { userSelect: "none" } : {};
+
+  return { dragSizeValue, enableDrag, draggableLineStyles, draggingStyles };
+};
+
+export default useDrag;

package/drawer/hooks/useLockStyle.ts

@@ -0,0 +1,36 @@
+import { useRef, useCallback, useLayoutEffect } from "react";
+let key = 1;
+export const useLockStyle = (props) => {
+  const { visible } = props;
+  const drawerLockStyleRef = useRef<HTMLStyleElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clearStyleFunc = useCallback(() => {
+    console.log("clearStyleFunc");
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      drawerLockStyleRef.current.parentNode?.removeChild?.(drawerLockStyleRef.current);
+    }, 150);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (typeof document === "undefined" || !visible) return;
+    if (!drawerLockStyleRef.current) {
+      drawerLockStyleRef.current = document.createElement("style");
+    }
+    drawerLockStyleRef.current.dataset.id = `td_drawer_${+new Date()}_${key++}`;
+    drawerLockStyleRef.current.innerHTML = `
+      html body {
+        overflow-y: hidden;
+      }
+    `;
+  }, [visible]);
+
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    if (visible) {
+      if (drawerLockStyleRef.current) document.head.appendChild(drawerLockStyleRef.current);
+    } else {
+      clearStyleFunc();
+    }
+  }, [visible, clearStyleFunc]);
+};

package/drawer/index.ts

@@ -0,0 +1,5 @@
+import _Drawer from "./Drawer";
+import "./style/index";
+export type { TdDrawerProps } from "./type";
+export const Drawer = _Drawer;
+export default Drawer;

package/drawer/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/drawer/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/drawer/_index.scss";

package/drawer/type.ts

@@ -0,0 +1,193 @@
+import { ButtonProps } from "../button";
+import { TNode, Styles, AttachNode } from "../common";
+import { MouseEvent, KeyboardEvent } from "react";
+export interface TdDrawerProps {
+  /**
+   * 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   */
+  attach?: AttachNode;
+  /**
+   * 抽屉内容
+   */
+  body?: TNode;
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
+   */
+  cancelBtn?: FooterButton;
+  /**
+   * 抽屉内容，同 body
+   */
+  children?: TNode;
+  /**
+   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
+   */
+  closeBtn?: TNode;
+  /**
+   * 按下 ESC 时是否触发抽屉关闭事件
+   */
+  closeOnEscKeydown?: boolean;
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
+   */
+  confirmBtn?: FooterButton;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容
+   * @default true
+   */
+  footer?: TNode;
+  /**
+   * 是否强制渲染Drawer
+   * @default false
+   */
+  forceRender?: boolean;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容
+   * @default true
+   */
+  header?: TNode;
+  /**
+   * 是否启用抽屉懒加载，启用时抽屉的内容不渲染
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 展开方式，有两种：直接展示在内容上方 和 推开内容区域
+   * @default overlay
+   */
+  mode?: "overlay" | "push";
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: "left" | "right" | "top" | "bottom";
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+   * @default false
+   */
+  showInAttachedElement?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 尺寸，支持 'small', 'medium', 'large'，'35px', '30%',  '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度
+   */
+  size?: string;
+  /**
+   * 抽屉大小可拖拽调整，横向抽屉调整宽度
+   * @default false
+   */
+  sizeDraggable?: boolean | SizeDragLimit;
+  /**
+   * 组件是否可见
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
+   */
+  onCancel?: (context: { e: MouseEvent<HTMLDivElement | HTMLButtonElement> }) => void;
+  /**
+   * 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发
+   */
+  onClose?: (context: DrawerCloseContext) => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
+   */
+  onCloseBtnClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 如果“确认”按钮存在，则点击“确认”按钮时触发
+   */
+  onConfirm?: (context: { e: MouseEvent<HTMLDivElement | HTMLButtonElement> }) => void;
+  /**
+   * 按下 ESC 键时触发
+   */
+  onEscKeydown?: (context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 抽屉大小调整结束事件
+   */
+  onSizeDragEnd?: (context: { e: globalThis.MouseEvent; size: number }) => void;
+}
+
+export interface DrawerOptions extends Omit<TdDrawerProps, "attach"> {
+  /**
+   * 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: Styles;
+}
+
+export interface DrawerInstance {
+  /**
+   * 销毁抽屉
+   */
+  destroy?: () => void;
+  /**
+   * 隐藏抽屉
+   */
+  hide?: () => void;
+  /**
+   * 显示抽屉
+   */
+  show?: () => void;
+  /**
+   * 更新抽屉内容
+   */
+  update?: (props: DrawerOptions) => void;
+}
+
+export type FooterButton = string | ButtonProps | TNode;
+
+export interface SizeDragLimit {
+  max: number;
+  min: number;
+}
+
+export type DrawerEventSource = "esc" | "close-btn" | "cancel" | "overlay";
+
+export interface DrawerCloseContext {
+  trigger: DrawerEventSource;
+  e: MouseEvent<HTMLDivElement | HTMLButtonElement> | KeyboardEvent<HTMLDivElement>;
+}
+
+export type DrawerMethod = (options?: DrawerOptions) => DrawerInstance;

package/drawer/utils/index.ts

@@ -0,0 +1,76 @@
+type Placement = "left" | "right" | "top" | "bottom";
+
+interface SizeDragLimit {
+  max: number;
+  min: number;
+}
+
+export function getSizeDraggable(sizeDraggable: boolean | SizeDragLimit, limit: { max: number; min: number }) {
+  if (typeof sizeDraggable === "boolean") {
+    return {
+      allowSizeDraggable: sizeDraggable,
+      max: limit.max,
+      min: limit.min
+    };
+  }
+
+  return {
+    allowSizeDraggable: true,
+    max: sizeDraggable.max,
+    min: sizeDraggable.min
+  };
+}
+
+type IOptions = {
+  x: number;
+  y: number;
+  maxWidth: number;
+  maxHeight: number;
+  min: number;
+  max: number;
+};
+
+// > min && < max
+function calcSizeRange(size: number, min: number, max: number) {
+  return Math.min(Math.max(size, min), max);
+}
+
+export function calcMoveSize(placement: Placement, opts: IOptions) {
+  const { x, y, max, min, maxWidth, maxHeight } = opts;
+  let moveSize: number | undefined;
+  switch (placement) {
+    case "right":
+      // |<---  x  --->|      |
+      // |     maxWidth       |
+      //               | size |  > min && < max
+      moveSize = calcSizeRange(maxWidth - x, min, max);
+      break;
+    case "left":
+      // |<--  x -->|  |
+      // x > min && < max
+      moveSize = calcSizeRange(x, min, max);
+      break;
+    case "top":
+      // - - - - - - - -
+      // |     y        |
+      // |              |
+      // - - - - - - - -
+      //  > min && < max
+      // moveSize = Math.min(Math.max(y, min), max);
+      moveSize = calcSizeRange(y, min, max);
+      break;
+    case "bottom":
+      // - - - - - - - -
+      // |     y        |
+      // |              |  maxHeight
+      // - - - - - - - -
+      // |    size      |
+      //  > min && < max
+      moveSize = calcSizeRange(maxHeight - y, min, max);
+      break;
+    default:
+      // 参数缺失直接返回
+      return moveSize;
+  }
+  return moveSize;
+}