tango-ui-cw/dist/component/TDrawer/index.d.ts

A lightweight ui library with ClayW

import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import type { SxValue } from "../CSSFab";

export type DrawerType = "top" | "bottom" | "left" | "right";

export type DrawerI18nKey = "title" | "okText" | "cancelText" | "closeAriaLabel" | (string & {});

export type DrawerLocaleText = Partial<{
  title: string;
  okText: string;
  cancelText: string;
  closeAriaLabel: string;
}>;

export type DrawerFooterButton = {
  key: string;
  text: string;
  onClick: () => void;
};

export interface DrawerProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style" | "className"> {
  /** 抽屉内容 */
  children?: ReactNode;
  /** 标题，优先级高于 i18n */
  title?: string;
  /** 确定按钮文案，优先级高于 i18n */
  okText?: string;
  /** 取消按钮文案，优先级高于 i18n */
  cancelText?: string;
  /** 是否打开 */
  open?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
  /** 确定回调，若未传则默认调用 onClose */
  onOk?: () => void;
  /** 抽屉方向 */
  type?: DrawerType;
  /** 容器宽度（left/right 生效） */
  width?: string | number;
  /** 容器高度（top/bottom 生效） */
  height?: string | number;
  /** Style extension via CSSFab sx */
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  /** 点击遮罩是否关闭 */
  maskClosable?: boolean;
  /** 自定义底部按钮，传入后替代默认的取消/确定 */
  footerButtons?: DrawerFooterButton[];
  /** 覆盖 locale 文案 */
  localeText?: DrawerLocaleText;
}

declare function Drawer(props: DrawerProps): JSX.Element;

export { Drawer };
export default Drawer;