next/components/timeline/types.ts at master · alibaba-fusion/next · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React from 'react';
import { CommonProps } from '../util';

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {}

/**
 * @api Timeline.Item
 * @order 1
 */
export interface ItemProps extends Omit<HTMLAttributesWeak, 'content' | 'title'>, CommonProps {
    /**
     * 节点状态
     * @en node state
     * @defaultValue 'done'
     */
    state?: 'done' | 'process' | 'error' | 'success';

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

    /**
     * 自定义时间轴节点
     * @en custom dot
     */
    dot?: React.ReactNode;

    /**
     * 格式化后的时间
     * @en formatted time
     */
    time?: React.ReactNode;

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

    /**
     * 左侧时间
     * @en left time
     */
    timeLeft?: React.ReactNode;

    /**
     * 右侧内容
     * @en right content
     */
    content?: React.ReactNode;

    /**
     * 展示动画
     * @en show animation
     * @defaultValue true
     */
    animation?: boolean;
    /**
     * 展示的模式，left 为左，alternate 为交替显示
     * @en show mode
     * @defaultValue 'left'
     * @version 1.23.18
     */
    mode?: 'left' | 'alternate';
    /**
     * 折叠回调
     * @en fold callback
     * @skip
     */
    toggleFold?: (foldIndex: number) => void;
    /**
     * @skip
     */
    index?: number;
    /**
     * @skip
     */
    total?: number;
    /**
     * @skip
     */
    folderIndex?: number;
    /**
     * @skip
     */
    foldShow?: boolean;
}

export type FoldItem = {
    /**
     * [startIndex, endIndex] or [startIndex] 到最后一个节点
     */
    foldArea?: Array<number>;
    foldShow?: boolean;
};

/**
 * @api Timeline
 * @order 0
 */
export interface TimelineProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
    /**
     * 自定义折叠选项
     * @en custom folding options
     * @example `[{foldArea: [startIndex, endIndex], foldShow: boolean}]`
     */
    fold?: Array<FoldItem>;
    /**
     * 自定义类名
     * @en custom className
     */
    className?: string;
    /**
     * 展示动画
     * @en show animation
     * @defaultValue true
     */
    animation?: boolean;
    /**
     * 展示的模式，left 为左，alternate 为交替显示
     * @en show mode
     * @defaultValue 'left'
     * @version 1.23.18
     */
    mode?: 'left' | 'alternate';
}

export interface TimelineState {
    fold: NonNullable<TimelineProps['fold']>;
    innerUpdate?: boolean;
}