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

A lightweight ui library with ClayW

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

export type ButtonVariant = "default" | "transparent" | "danger" | "success";
export type ButtonSize = "small" | "medium" | "large" | "huge";
export type LoadingMode = boolean | "light" | "dark" | [boolean | "light" | "dark", "light" | "dark"];
export type ButtonI18nKey =
  | "default"
  | "loading"
  | "submit"
  | "confirm"
  | "cancel"
  | "search"
  | "save"
  | "delete"
  | "back"
  | "next"
  | "prev"
  | "add"
  | (string & {});

export type ButtonLocaleText = Partial<
  Record<
    | "default"
    | "loading"
    | "iconAlt"
    | "submit"
    | "confirm"
    | "cancel"
    | "search"
    | "save"
    | "delete"
    | "back"
    | "next"
    | "prev"
    | "add"
    | string,
    string
  >
>;

export interface ButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "style" | "className" | "children"> {
  type?: ButtonVariant;
  size?: ButtonSize;
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  children?: ReactNode;
  disabled?: boolean;
  outline?: boolean;
  icon?: ElementType | ReactNode | string;
  iconPosition?: "left" | "right";
  loading?: LoadingMode;
  i18nKey?: ButtonI18nKey;
  localeText?: ButtonLocaleText;
}

declare function Button(props: ButtonProps): JSX.Element;

// MaterialButton 类型
export type MaterialButtonVariant = "default" | "transparent" | "danger" | "success";
export type MaterialButtonSize = "small" | "medium" | "large" | "huge";

export interface MaterialButtonLocaleText {
  default?: string;
  loading?: string;
  iconAlt?: string;
  [key: string]: string | undefined;
}

export interface MaterialButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "style" | "className" | "children"> {
  type?: MaterialButtonVariant;
  size?: MaterialButtonSize;
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  children?: ReactNode;
  disabled?: boolean;
  outline?: boolean;
  icon?: ElementType | ReactNode | string;
  iconPosition?: "left" | "right";
  loading?: LoadingMode;
  i18nKey?: string;
  localeText?: MaterialButtonLocaleText;
  /** 涟漪颜色，默认使用 --material-button-ripple */
  rippleColor?: string;
}

declare function MaterialButton(props: MaterialButtonProps): JSX.Element;

// antd 风格：Button.MaterialButton / const { MaterialButton } = Button
interface ButtonNamespace {
  (props: ButtonProps): JSX.Element;
  MaterialButton: typeof MaterialButton;
}

declare const ButtonWithType: ButtonNamespace;
export { ButtonWithType as Button };
export { MaterialButton };
export default Button;