@tendaui/components 1.0.0

package/dialog/Dialog.tsx

@@ -0,0 +1,254 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { CSSTransition } from "react-transition-group";
+import classNames from "classnames";
+import { isUndefined } from "lodash-es";
+import type { StyledProps } from "../common";
+import Portal from "../common/Portal";
+import useAttach from "../hooks/useAttach";
+import useConfig from "../hooks/useConfig";
+import useDefaultProps from "../hooks/useDefaultProps";
+import useSetState from "../hooks/useSetState";
+// import { useLocaleReceiver } from '../locale/LocalReceiver';
+import { dialogDefaultProps } from "./defaultProps";
+import DialogCard from "./DialogCard";
+import useDialogDrag from "./hooks/useDialogDrag";
+import useDialogEsc from "./hooks/useDialogEsc";
+import useDialogPosition from "./hooks/useDialogPosition";
+import useLockStyle from "./hooks/useLockStyle";
+import type { DialogInstance, TdDialogProps } from "./type";
+import { parseValueToPx } from "./utils";
+
+export interface DialogProps extends TdDialogProps, StyledProps {
+  isPlugin?: boolean; // 是否以插件形式调用
+}
+
+const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
+  const props = useDefaultProps<DialogProps>(originalProps, dialogDefaultProps);
+  const { children, ...restProps } = props;
+  const { classPrefix } = useConfig();
+
+  const componentCls = `${classPrefix}-dialog`;
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const contentClickRef = useRef(false);
+  const dialogCardRef = useRef<HTMLDivElement>(null);
+  const dialogPosition = useRef(null);
+  const portalRef = useRef(null);
+  const maskRef = useRef(null);
+  const [state, setState] = useSetState<DialogProps>({ isPlugin: false, ...restProps });
+  // const [local] = useLocaleReceiver('dialog');
+
+  const {
+    className,
+    dialogClassName,
+    style,
+    width,
+    mode,
+    zIndex,
+    visible,
+    attach,
+    onBeforeOpen,
+    onBeforeClose,
+    onOpened,
+    onCancel,
+    onConfirm,
+    onClose,
+    onClosed,
+    isPlugin,
+    draggable,
+    onOverlayClick,
+    onEscKeydown,
+    closeOnEscKeydown,
+    confirmOnEnter,
+    showOverlay,
+    showInAttachedElement,
+    closeOnOverlayClick,
+    destroyOnClose,
+    preventScrollThrough,
+    onCloseBtnClick,
+    forceRender,
+    lazy,
+    ...restState
+  } = state;
+
+  const dialogAttach = useAttach("dialog", attach);
+
+  useLockStyle({ preventScrollThrough, visible, mode, showInAttachedElement });
+  useDialogEsc(visible, wrapRef);
+  useDialogPosition(visible, dialogCardRef);
+  useDialogDrag({
+    dialogCardRef,
+    canDraggable: draggable && mode === "modeless"
+  });
+
+  useEffect(() => {
+    if (isPlugin) {
+      return;
+    }
+    // 插件式调用不会更新props, 只有组件式调用才会更新props
+    setState((prevState) => ({ ...prevState, ...props }));
+  }, [props, setState, isPlugin]);
+
+  useImperativeHandle(ref, () => ({
+    show() {
+      setState({ visible: true });
+    },
+    hide() {
+      setState({ visible: false });
+    },
+    setConfirmLoading: (loading: boolean) => {
+      setState({ confirmLoading: loading });
+    },
+    destroy() {
+      setState({ visible: false, destroyOnClose: true });
+    },
+    update(newOptions) {
+      setState((prevState) => ({ ...prevState, ...newOptions }));
+    }
+  }));
+
+  const onMaskClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (showOverlay && closeOnOverlayClick) {
+      // 判断点击事件初次点击是否为内容区域
+      if (contentClickRef.current) {
+        contentClickRef.current = false;
+      } else if (e.target === dialogPosition.current) {
+        onOverlayClick?.({ e });
+        onClose?.({ e, trigger: "overlay" });
+      }
+    }
+  };
+
+  const handleCancel = ({ e }) => {
+    onCancel?.({ e });
+    onClose?.({ e, trigger: "cancel" });
+  };
+
+  const handleClose = ({ e }) => {
+    onCloseBtnClick?.({ e });
+    onClose?.({ e, trigger: "close-btn" });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onEscKeydown?.({ e });
+      if (closeOnEscKeydown) {
+        onClose?.({ e, trigger: "esc" });
+      }
+    } else if (e.key === "Enter" || e.key === "NumpadEnter") {
+      // 回车键触发点击确认事件
+      e.stopPropagation();
+      if (confirmOnEnter) {
+        onConfirm?.({ e });
+      }
+    }
+  };
+
+  const onAnimateLeave = () => {
+    onClosed?.();
+
+    if (!wrapRef.current) return;
+    wrapRef.current.style.display = "none";
+  };
+
+  const onAnimateStart = () => {
+    if (!wrapRef.current) return;
+    onBeforeOpen?.();
+    wrapRef.current.style.display = "block";
+  };
+
+  const onInnerAnimateStart = () => {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = "block";
+  };
+
+  const onInnerAnimateLeave = () => {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = "none";
+  };
+
+  const renderMask = () => {
+    if (mode !== "modal") return null;
+
+    return showOverlay ? (
+      <CSSTransition
+        in={visible}
+        appear
+        timeout={300}
+        classNames={`${componentCls}-fade`}
+        mountOnEnter
+        unmountOnExit
+        nodeRef={maskRef}
+      >
+        <div ref={maskRef} className={`${componentCls}__mask`} />
+      </CSSTransition>
+    ) : null;
+  };
+  return (
+    <CSSTransition
+      in={visible}
+      appear
+      timeout={300}
+      mountOnEnter={isUndefined(forceRender) ? lazy : !forceRender}
+      unmountOnExit={destroyOnClose}
+      nodeRef={portalRef}
+      onEnter={onAnimateStart}
+      onEntered={onOpened}
+      onExit={() => onBeforeClose?.()}
+      onExited={onAnimateLeave}
+    >
+      <Portal attach={dialogAttach} ref={portalRef}>
+        <div
+          ref={wrapRef}
+          className={classNames(className, `${componentCls}__ctx`, `${componentCls}__${mode}`, {
+            [`${componentCls}__ctx--fixed`]: !showInAttachedElement,
+            [`${componentCls}__ctx--absolute`]: showInAttachedElement
+          })}
+          style={{ zIndex, display: "none" }}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+        >
+          {renderMask()}
+          <div className={`${componentCls}__wrap`}>
+            <div
+              ref={dialogPosition}
+              className={classNames(`${componentCls}__position`, {
+                [`${componentCls}--top`]: !!props.top || props.placement === "top",
+                [`${componentCls}--center`]: props.placement === "center" && !props.top
+              })}
+              style={{ paddingTop: parseValueToPx(props.top) }}
+              onClick={onMaskClick}
+            >
+              <CSSTransition
+                in={visible}
+                appear
+                timeout={300}
+                classNames={`${componentCls}-zoom`}
+                nodeRef={dialogCardRef}
+                onEnter={onInnerAnimateStart}
+                onExited={onInnerAnimateLeave}
+              >
+                <DialogCard
+                  ref={dialogCardRef}
+                  {...restState}
+                  className={dialogClassName}
+                  style={{ ...style, width: parseValueToPx(width || style?.width) }}
+                  onConfirm={onConfirm}
+                  onCancel={handleCancel}
+                  onCloseBtnClick={handleClose}
+                >
+                  {children as React.ReactNode}
+                </DialogCard>
+              </CSSTransition>
+            </div>
+          </div>
+        </div>
+      </Portal>
+    </CSSTransition>
+  );
+});
+
+Dialog.displayName = "Dialog";
+
+export default Dialog;

package/dialog/DialogCard.tsx

@@ -0,0 +1,152 @@
+import React, { forwardRef, isValidElement } from "react";
+import classNames from "classnames";
+import { isString, isObject, isFunction } from "lodash-es";
+import {
+  IconClose as TdCloseIcon,
+  IconInfoCircle as TdInfoCircleFilledIcon,
+  IconCheckCircleStroked as TdCheckCircleFilledIcon
+} from "@tendaui/icons";
+import Button, { ButtonProps } from "../button";
+import { TdDialogCardProps } from "./type";
+import { StyledProps, TNode } from "../common";
+import parseTNode from "../utils/parseTNode";
+import useConfig from "../hooks/useConfig";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+// import { useLocaleReceiver } from '../locale/LocalReceiver';
+import { dialogCardDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface DialogCardProps extends TdDialogCardProps, StyledProps, React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+const renderDialogButton = (btn: DialogCardProps["cancelBtn"], defaultProps: ButtonProps) => {
+  let result = null;
+
+  if (isString(btn)) {
+    result = <Button {...defaultProps}>{btn as TNode}</Button>;
+  } else if (isValidElement(btn)) {
+    result = btn;
+  } else if (isObject(btn)) {
+    result = <Button {...defaultProps} {...(btn as Record<string, unknown>)} />;
+  } else if (isFunction(btn)) {
+    result = (btn as () => React.ReactNode)();
+  }
+
+  return result;
+};
+
+const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
+  const { classPrefix } = useConfig();
+  const componentCls = `${classPrefix}-dialog`;
+  useGlobalIcon({
+    CloseIcon: TdCloseIcon,
+    InfoCircleFilledIcon: TdInfoCircleFilledIcon,
+    CheckCircleFilledIcon: TdCheckCircleFilledIcon
+  });
+  // const [local, t] = useLocaleReceiver('dialog');
+  // const confirmText = t(local.confirm);
+  // const cancelText = t(local.cancel);
+  const confirmText = "确认";
+  const cancelText = "取消";
+  const {
+    theme,
+    header,
+    closeBtn,
+    footer,
+    body,
+    children,
+    className,
+    onCancel,
+    onConfirm,
+    onCloseBtnClick,
+    cancelBtn = cancelText,
+    confirmBtn = confirmText,
+    confirmLoading,
+    ...otherProps
+  } = useDefaultProps<DialogCardProps>(props, dialogCardDefaultProps);
+
+  const renderHeaderContent = () => {
+    const iconMap = {
+      info: <TdInfoCircleFilledIcon className={`${classPrefix}-is-info`} />,
+      warning: <TdInfoCircleFilledIcon className={`${classPrefix}-is-warning`} />,
+      // error is going to deprecated
+      error: <TdInfoCircleFilledIcon className={`${classPrefix}-is-error`} />,
+      danger: <TdInfoCircleFilledIcon className={`${classPrefix}-is-error`} />,
+      success: <TdCheckCircleFilledIcon className={`${classPrefix}-is-success`} />
+    };
+
+    return (
+      <div className={`${componentCls}__header-content`}>
+        {iconMap[theme]}
+        {header}
+      </div>
+    );
+  };
+
+  const renderCloseBtn = () => {
+    if (!closeBtn) {
+      return null;
+    }
+
+    const closeIcon = () => (closeBtn === true ? <TdCloseIcon /> : closeBtn);
+
+    return (
+      <span
+        className={`${componentCls}__close`}
+        style={{
+          marginLeft: "auto"
+        }}
+        onClick={(e: React.MouseEvent<HTMLDivElement>) => onCloseBtnClick?.({ e })}
+      >
+        {closeIcon() as React.ReactNode}
+      </span>
+    );
+  };
+
+  const renderHeader = () => (
+    <div className={classNames(`${componentCls}__header`)}>
+      {renderHeaderContent()}
+      {renderCloseBtn()}
+    </div>
+  );
+
+  const renderFooter = () => {
+    const defaultFooter = () => {
+      const renderCancelBtn = renderDialogButton(cancelBtn, {
+        variant: "outline",
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => onCancel?.({ e }),
+        className: classNames(
+          `${componentCls}__cancel`,
+          (cancelBtn as { props?: { className?: string } })?.props?.className
+        )
+      });
+      const renderConfirmBtn = renderDialogButton(confirmBtn, {
+        theme: "primary",
+        loading: confirmLoading,
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => onConfirm?.({ e }),
+        className: classNames(`${componentCls}__confirm`, (confirmBtn as { className?: string })?.className)
+      });
+
+      return (
+        <>
+          {renderCancelBtn}
+          {renderConfirmBtn}
+        </>
+      );
+    };
+
+    return <div className={`${componentCls}__footer`}>{parseTNode(footer, null, defaultFooter())}</div>;
+  };
+  return (
+    <div ref={ref} {...otherProps} className={classNames(componentCls, `${componentCls}--default`, className)}>
+      {!!header && renderHeader()}
+      <div className={`${componentCls}__body`}>{(body || children) as React.ReactNode}</div>
+      {!!footer && renderFooter()}
+    </div>
+  );
+});
+
+DialogCard.displayName = "DialogCard";
+
+export default DialogCard;

package/dialog/defaultProps.ts

@@ -0,0 +1,25 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDialogCardProps, TdDialogProps } from "./type";
+
+export const dialogCardDefaultProps: TdDialogCardProps = {
+  closeBtn: true,
+  footer: true,
+  header: true,
+  theme: "default"
+};
+
+export const dialogDefaultProps: TdDialogProps = {
+  closeOnEscKeydown: undefined,
+  closeOnOverlayClick: undefined,
+  destroyOnClose: false,
+  draggable: false,
+  mode: "modal",
+  placement: "top",
+  preventScrollThrough: true,
+  showInAttachedElement: false,
+  showOverlay: true,
+  lazy: true
+};

package/dialog/hooks/useDialogDrag.ts

@@ -0,0 +1,50 @@
+import { RefObject, useRef } from "react";
+import useMouseEvent from "../../hooks/useMouseEvent";
+
+interface DialogDragProps {
+  dialogCardRef: RefObject<HTMLDivElement | null>;
+  canDraggable?: boolean;
+}
+
+const useDialogDrag = (props: DialogDragProps) => {
+  const { dialogCardRef, canDraggable } = props;
+
+  const validWindow = typeof window === "object";
+  const screenHeight = validWindow ? window.innerHeight || document.documentElement.clientHeight : undefined;
+  const screenWidth = validWindow ? window.innerWidth || document.documentElement.clientWidth : undefined;
+
+  const dragOffset = useRef({ x: 0, y: 0 });
+
+  useMouseEvent(dialogCardRef, {
+    enabled: canDraggable,
+    onDown: (e) => {
+      if (!validWindow || screenWidth === undefined || screenHeight === undefined || !dialogCardRef.current) return;
+      const { offsetLeft, offsetTop, offsetWidth, offsetHeight, style } = dialogCardRef.current;
+      if (offsetWidth > screenWidth || offsetHeight > screenHeight) return;
+      style.cursor = "move";
+      dragOffset.current = {
+        x: e.clientX - offsetLeft,
+        y: e.clientY - offsetTop
+      };
+    },
+    onMove: (e) => {
+      if (!validWindow || screenWidth === undefined || screenHeight === undefined || !dialogCardRef.current) return;
+      const { offsetWidth, offsetHeight, style } = dialogCardRef.current;
+      let diffX = e.clientX - dragOffset.current.x;
+      let diffY = e.clientY - dragOffset.current.y;
+      // 拖拽上左边界限制
+      if (diffX < 0) diffX = 0;
+      if (diffY < 0) diffY = 0;
+      if (screenWidth - offsetWidth - diffX < 0) diffX = screenWidth - offsetWidth;
+      if (screenHeight - offsetHeight - diffY < 0) diffY = screenHeight - offsetHeight;
+      style.position = "absolute";
+      style.left = `${diffX}px`;
+      style.top = `${diffY}px`;
+    },
+    onUp: () => {
+      if (dialogCardRef.current) dialogCardRef.current.style.cursor = "default";
+    }
+  });
+};
+
+export default useDialogDrag;

package/dialog/hooks/useDialogEsc.ts

@@ -0,0 +1,31 @@
+import { useEffect, type RefObject } from "react";
+
+const dialogSet: Set<RefObject<HTMLElement | null>> = new Set();
+
+const useDialogEsc = (visible: boolean | undefined, dialog: RefObject<HTMLElement | null>) => {
+  useEffect(() => {
+    if (visible) {
+      // 将 dialog 添加至 Set 对象
+      if (dialog?.current) {
+        dialogSet.add(dialog);
+        dialog?.current?.focus();
+      }
+    } else if (dialogSet.has(dialog)) {
+      // 将 dialog 从 Set 对象删除
+      dialogSet.delete(dialog);
+      const dialogList = [...dialogSet];
+      // 将 Set 对象中最后一个 dialog 设置为 focus
+      dialogList[dialogList.length - 1]?.current?.focus();
+    }
+    return () => {
+      // 从 Set 对象删除无效的 dialog
+      dialogSet.forEach((item) => {
+        if (item?.current === null) {
+          dialogSet.delete(item);
+        }
+      });
+    };
+  }, [visible, dialog]);
+};
+
+export default useDialogEsc;

package/dialog/hooks/useDialogPosition.ts

@@ -0,0 +1,36 @@
+import { RefObject, useEffect, useRef } from "react";
+import useIsomorphicLayoutEffect from "../../hooks/useLayoutEffect";
+type Position = { x: number; y: number };
+export default function useDialogPosition(visible: boolean | undefined, dialogCardRef: RefObject<HTMLElement | null>) {
+  const mousePosRef = useRef<Position>(null);
+
+  const getClickPosition = (e: MouseEvent) => {
+    if (mousePosRef) {
+      mousePosRef.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setTimeout(() => {
+        mousePosRef.current = null;
+      }, 100);
+    }
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    document.addEventListener("click", getClickPosition, true);
+    return () => {
+      document.removeEventListener("click", getClickPosition, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    // 动画渲染初始位置
+    if (mousePosRef.current && dialogCardRef.current) {
+      // eslint-disable-next-line
+      dialogCardRef.current.style.transformOrigin = `${mousePosRef.current.x - dialogCardRef.current.offsetLeft}px ${
+        mousePosRef.current.y - dialogCardRef.current.offsetTop
+      }px`;
+    }
+  }, [visible, dialogCardRef]);
+}

package/dialog/hooks/useLockStyle.ts

@@ -0,0 +1,54 @@
+import { useRef, useCallback } from "react";
+import { getScrollbarWidth } from "../../utils/getScrollbarWidth";
+import useLayoutEffect from "../../hooks/useLayoutEffect";
+import type { TdDialogProps } from "../type";
+let key = 1;
+
+export default function useDialogLockStyle({
+  preventScrollThrough,
+  visible,
+  mode,
+  showInAttachedElement
+}: Partial<TdDialogProps>) {
+  const lockStyleRef = useRef<HTMLStyleElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearStyleFunc = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      lockStyleRef.current?.parentNode?.removeChild?.(lockStyleRef.current);
+    }, 150);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (typeof document === "undefined" || !visible) return;
+    if (!lockStyleRef.current) {
+      lockStyleRef.current = document.createElement("style");
+    }
+    const hasScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    const scrollbarWidth = hasScrollBar ? getScrollbarWidth() : 0;
+
+    lockStyleRef.current.dataset.id = `td_dialog_${+new Date()}_${(key += 1)}`;
+    lockStyleRef.current.innerHTML = `
+      html body {
+        overflow-y: hidden;
+        width: calc(100% - ${scrollbarWidth}px);
+      }
+    `;
+
+    return clearStyleFunc;
+  }, [visible, clearStyleFunc]);
+
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    if (mode !== "modal" || !preventScrollThrough || showInAttachedElement) return;
+
+    if (visible) {
+      if (lockStyleRef.current) document.head.appendChild(lockStyleRef.current);
+    } else {
+      clearStyleFunc();
+    }
+  }, [preventScrollThrough, visible, mode, showInAttachedElement, clearStyleFunc]);
+}

package/dialog/index.ts

@@ -0,0 +1,13 @@
+import _Dialog from "./Dialog";
+import _DialogCard from "./DialogCard";
+import { DialogPlugin as _DialogPlugin } from "./plugin";
+import "./style/index.js";
+
+export type { DialogProps } from "./Dialog";
+export * from "./type";
+export const Dialog = _Dialog;
+export const DialogCard = _DialogCard;
+
+export const dialog = _DialogPlugin;
+export const DialogPlugin = _DialogPlugin;
+export default Dialog;

package/dialog/plugin.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { render } from "../utils/react-render";
+import DialogComponent, { DialogProps } from "./Dialog";
+import { getAttach } from "../utils/dom";
+import { DialogOptions, DialogMethod, DialogConfirmMethod, DialogAlertMethod, DialogInstance } from "./type";
+import PluginContainer from "../common/PluginContainer";
+import ConfigProvider from "../config-provider";
+
+export interface DialogPluginType extends DialogMethod {
+  alert: DialogAlertMethod;
+  confirm: DialogConfirmMethod;
+}
+
+const createDialog: DialogPluginType = (props: DialogOptions): DialogInstance => {
+  const dialogRef = React.createRef<DialogInstance>();
+  const options = { ...props };
+  const { visible = true } = options;
+
+  const fragment = document.createDocumentFragment();
+
+  const dGlobalConfig = ConfigProvider.getGlobalConfig();
+  render(
+    <PluginContainer globalConfig={dGlobalConfig}>
+      <DialogComponent {...(options as DialogProps)} visible={visible} ref={dialogRef} isPlugin />
+    </PluginContainer>,
+    fragment
+  );
+  const container = getAttach(options.attach);
+
+  if (container) {
+    container.appendChild(fragment);
+  } else {
+    console.error("Dialog", "attach is not exist");
+  }
+
+  const dialogNode: DialogInstance = {
+    show: () => {
+      requestAnimationFrame(() => {
+        container?.appendChild(fragment);
+        dialogRef.current?.show();
+      });
+    },
+    hide: () => {
+      requestAnimationFrame(() => {
+        dialogRef.current?.destroy();
+      });
+    },
+    setConfirmLoading: (loading: boolean) => {
+      requestAnimationFrame(() => {
+        dialogRef.current?.setConfirmLoading(loading);
+      });
+    },
+    update: (updateOptions: DialogOptions) => {
+      requestAnimationFrame(() => {
+        dialogRef.current?.update(updateOptions);
+      });
+    },
+    destroy: () => {
+      requestAnimationFrame(() => {
+        dialogRef.current?.destroy();
+      });
+    }
+  };
+  return dialogNode;
+};
+
+const confirm: DialogConfirmMethod = (props: DialogOptions) => createDialog(props);
+
+const alert: DialogAlertMethod = (props: Omit<DialogOptions, "confirmBtn">) => {
+  const options = { ...props };
+  options.cancelBtn = null;
+  return createDialog(options);
+};
+
+createDialog.alert = alert;
+createDialog.confirm = confirm;
+
+export const DialogPlugin = createDialog;