@alifd/next/lib/step/index.d.ts

A configurable component library for web built on React.

/// <reference types="react" />

import * as React from "react";

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  title?: any;
  onClick?: any;
}

export interface ItemProps extends HTMLAttributesWeak {
  /**
   * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
   */
  status?: "wait" | "process" | "finish";

  /**
   * 标题
   */
  title?: React.ReactNode;

  /**
   * 图标
   */
  icon?: string;

  /**
   * 内容，用于垂直状态下的内容填充
   */
  content?: React.ReactNode;

  /**
   * StepItem 的自定义渲染, 会覆盖父节点设置的itemRender
   */
  itemRender?: (index: number, status: string) => React.ReactNode;

  /**
   * 百分比
   */
  percent?: number;

  /**
   * 是否禁用
   */
  disabled?: boolean;

  /**
   * 点击步骤时的回调
   */
  onClick?: (index: number) => void;

  /**
   * 自定义样式
   */
  className?: string;
}

export class Item extends React.Component<ItemProps, any> {}
export interface StepProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 当前步骤
   */
  current?: number;

  /**
   * 展示方向
   */
  direction?: "hoz" | "ver";

  /**
   * 横向布局时的内容排列
   */
  labelPlacement?: "hoz" | "ver";

  /**
   * 类型
   */
  shape?: "circle" | "arrow" | "dot";

  /**
   * 是否只读模式
   */
  readOnly?: boolean;

  /**
   * 是否开启动效
   */
  animation?: boolean;

  /**
   * 自定义样式名
   */
  className?: string;

  /**
   * StepItem 的自定义渲染
   */
  itemRender?: (index: number, status: string) => React.ReactNode;
}

export default class Step extends React.Component<StepProps, any> {
  static Item: typeof Item;
}