| 1 | import type React from 'react';
|
| 2 | import type { CommonProps } from '../util';
|
| 3 | type HTMLAttributesWeak<T> = Omit<React.HTMLAttributes<T>, 'content' | 'onClick' | 'title' | 'direction'>;
|
| 4 | /**
|
| 5 | * @api
|
| 6 | */
|
| 7 | export type StepDirection = 'hoz' | 'ver';
|
| 8 | /**
|
| 9 | * @api
|
| 10 | */
|
| 11 | export type StepStatus = 'wait' | 'process' | 'finish';
|
| 12 | /**
|
| 13 | * @api
|
| 14 | */
|
| 15 | export type StepShape = 'circle' | 'arrow' | 'dot';
|
| 16 | /**
|
| 17 | * Step.Item 继承自 Step 的私有的属性
|
| 18 | */
|
| 19 | export interface ItemPrivateProps {
|
| 20 | index?: number;
|
| 21 | shape?: StepShape;
|
| 22 | direction?: StepDirection;
|
| 23 | onResize?: () => void;
|
| 24 | stretch?: boolean;
|
| 25 | labelPlacement?: StepDirection;
|
| 26 | readOnly?: boolean;
|
| 27 | parentWidth?: number;
|
| 28 | parentHeight?: number;
|
| 29 | parentLeft?: number;
|
| 30 | parentTop?: number;
|
| 31 | parentRight?: number;
|
| 32 | parentBottom?: number;
|
| 33 | animation?: boolean;
|
| 34 | current?: number;
|
| 35 | total?: number;
|
| 36 | }
|
| 37 | /**
|
| 38 | * @api Step.Item
|
| 39 | */
|
| 40 | export interface ItemProps<T = HTMLElement> extends HTMLAttributesWeak<T>, CommonProps, ItemPrivateProps {
|
| 41 | /**
|
| 42 | * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成
|
| 43 | * @en The status of a step, if not passed, is generated based on the current attribute of the outer Step
|
| 44 | */
|
| 45 | status?: StepStatus;
|
| 46 | /**
|
| 47 | * 标题
|
| 48 | * @en Title
|
| 49 | */
|
| 50 | title?: React.ReactNode;
|
| 51 | /**
|
| 52 | * 图标
|
| 53 | * @en Icon
|
| 54 | */
|
| 55 | icon?: string;
|
| 56 | /**
|
| 57 | * 内容填充，shape 为 arrow 时无效
|
| 58 | * @en Content for vertical content filling, invalid when shape is arrow
|
| 59 | */
|
| 60 | content?: React.ReactNode;
|
| 61 | /**
|
| 62 | * StepItem 的自定义渲染，会覆盖父节点设置的 itemRender
|
| 63 | * @en Custom node render function (it will overwirde Step's itemRender)
|
| 64 | * @param index - 节点索引 - node index
|
| 65 | * @param status - 节点状态 - node status
|
| 66 | * @param title - 节点标题，仅在 `shape='circle'` 时会传递 - node title（only for `shape='circle'`）
|
| 67 | * @param content - 节点内容，仅在 `shape='circle'` 时会传递 - node content（only for `shape='circle'`）
|
| 68 | * @returns 节点的渲染结果 - render content of the node
|
| 69 | */
|
| 70 | itemRender?: (index: number, status: StepStatus, title?: React.ReactNode, content?: React.ReactNode) => React.ReactNode;
|
| 71 | /**
|
| 72 | * 百分比
|
| 73 | * @en Percent
|
| 74 | */
|
| 75 | percent?: number;
|
| 76 | /**
|
| 77 | * 是否禁用
|
| 78 | * @en disabled
|
| 79 | */
|
| 80 | disabled?: boolean;
|
| 81 | /**
|
| 82 | * 点击步骤时的回调
|
| 83 | * @en Callback when clicking on the step
|
| 84 | * @param index - 节点索引 - node index
|
| 85 | */
|
| 86 | onClick?: (index: number) => unknown;
|
| 87 | }
|
| 88 | /**
|
| 89 | * @api Step
|
| 90 | */
|
| 91 | export interface StepProps extends Omit<React.HTMLAttributes<HTMLElement>, 'type' | 'direction'>, CommonProps {
|
| 92 | /**
|
| 93 | * 当前步骤
|
| 94 | * @en Current step
|
| 95 | * @defaultValue 0
|
| 96 | */
|
| 97 | current?: number;
|
| 98 | /**
|
| 99 | * 类型
|
| 100 | * @en Shape
|
| 101 | * @defaultValue 'circle'
|
| 102 | */
|
| 103 | shape?: StepShape;
|
| 104 | /**
|
| 105 | * 展示方向
|
| 106 | * @en Direction
|
| 107 | * @defaultValue 'hoz'
|
| 108 | */
|
| 109 | direction?: StepDirection;
|
| 110 | /**
|
| 111 | * 横向布局时的内容排列方式
|
| 112 | * @en Content arrangement in horizontal layout
|
| 113 | * @defaultValue 'ver'
|
| 114 | */
|
| 115 | labelPlacement?: StepDirection;
|
| 116 | /**
|
| 117 | * 是否只读模式
|
| 118 | * @en Read only mode
|
| 119 | */
|
| 120 | readOnly?: boolean;
|
| 121 | /**
|
| 122 | * 是否开启动效
|
| 123 | * @en Enable animation
|
| 124 | * @defaultValue true
|
| 125 | */
|
| 126 | animation?: boolean;
|
| 127 | /**
|
| 128 | * 自定义渲染节点
|
| 129 | * @en Custom node render function
|
| 130 | * @param index - 节点索引 - node index
|
| 131 | * @param status - 节点状态 - node status
|
| 132 | * @param title - 节点标题，仅在 `shape='circle'` 时会传递 - node title（only for `shape='circle'`）
|
| 133 | * @param content - 节点内容，仅在 `shape='circle'` 时会传递 - node content（only for `shape='circle'`）
|
| 134 | * @returns 节点的渲染结果 - render content of the node
|
| 135 | */
|
| 136 | itemRender?: (index: number, status: StepStatus, title?: React.ReactNode, content?: React.ReactNode) => React.ReactNode;
|
| 137 | /**
|
| 138 | * 宽度是否横向拉伸
|
| 139 | * @en Stretch the width
|
| 140 | * @defaultValue false
|
| 141 | */
|
| 142 | stretch?: boolean;
|
| 143 | }
|
| 144 | export interface StepState {
|
| 145 | parentWidth: string | number;
|
| 146 | parentHeight: string | number;
|
| 147 | currentfocus: number;
|
| 148 | }
|
| 149 | export interface DeprecatedStepProps extends Omit<StepProps, 'direction' | 'labelPlacement'> {
|
| 150 | /**
|
| 151 | * @deprecated Use shape instead
|
| 152 | */
|
| 153 | type?: 'circle' | 'arrow' | 'dot';
|
| 154 | /**
|
| 155 | * @deprecated Available enums: 'hoz' | 'ver'
|
| 156 | */
|
| 157 | direction?: 'hoz' | 'ver' | 'horizontal' | 'vertical';
|
| 158 | /**
|
| 159 | * @deprecated Available enums: 'hoz' | 'ver'
|
| 160 | */
|
| 161 | labelPlacement?: 'hoz' | 'ver' | 'horizontal' | 'vertical';
|
| 162 | }
|
| 163 | export {};
|