@akinon/ui-steps 0.5.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.d.ts +16 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +303 -137
- package/dist/cjs/types.d.ts +44 -7
- package/dist/esm/index.d.ts +16 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +303 -137
- package/dist/esm/types.d.ts +44 -7
- package/package.json +6 -6
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { IStepProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
5
|
+
*
|
|
6
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
7
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
8
|
+
* icons and titles for each step.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - Horizontal and vertical orientations.
|
|
12
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
13
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
14
|
+
* - Progress dot style for streamlined visual designs.
|
|
15
|
+
* - Navigation-type steps for guiding users through processes.
|
|
16
|
+
*
|
|
17
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
18
|
+
*/
|
|
3
19
|
export declare const Steps: ({ items, manyItems, ...restStepsProps }: IStepProps) => React.JSX.Element;
|
|
4
20
|
export type { IStepProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,KAAK,4CAIf,UAAU,sBA+VZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -17,6 +17,22 @@ const ui_theme_1 = require("@akinon/ui-theme");
|
|
|
17
17
|
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
18
18
|
const antd_1 = require("antd");
|
|
19
19
|
const React = require("react");
|
|
20
|
+
/**
|
|
21
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
22
|
+
*
|
|
23
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
24
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
25
|
+
* icons and titles for each step.
|
|
26
|
+
*
|
|
27
|
+
* Features:
|
|
28
|
+
* - Horizontal and vertical orientations.
|
|
29
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
30
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
31
|
+
* - Progress dot style for streamlined visual designs.
|
|
32
|
+
* - Navigation-type steps for guiding users through processes.
|
|
33
|
+
*
|
|
34
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
35
|
+
*/
|
|
20
36
|
const Steps = (_a) => {
|
|
21
37
|
var { items = [], manyItems = false } = _a, restStepsProps = __rest(_a, ["items", "manyItems"]);
|
|
22
38
|
const stepsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(icons_1.Icon, { icon: item.icon }) : undefined })));
|
|
@@ -25,175 +41,325 @@ const Steps = (_a) => {
|
|
|
25
41
|
const stepToken = token.Steps;
|
|
26
42
|
const prefixWithoutHash = `${getPrefixCls()}-steps`;
|
|
27
43
|
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
44
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
28
45
|
const stepsClassName = `${prefixWithoutHash} ${manyItems ? 'many-items' : ''}`;
|
|
46
|
+
const customTokens = theme.CustomTokens || {};
|
|
29
47
|
const useStyle = (0, cssinjs_1.useStyleRegister)({
|
|
30
48
|
token: token,
|
|
31
49
|
path: ['Steps'],
|
|
32
50
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
33
51
|
theme: theme
|
|
34
52
|
}, () => {
|
|
35
|
-
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-steps`;
|
|
36
53
|
return {
|
|
37
|
-
[prefixCls]: {
|
|
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
|
-
: stepToken.zero
|
|
67
|
-
},
|
|
68
|
-
[`&-title`]: {
|
|
69
|
-
lineHeight: 1,
|
|
70
|
-
fontSize: stepToken.titleFontSize,
|
|
71
|
-
fontWeight: '600 !important',
|
|
72
|
-
paddingInlineEnd: manyItems
|
|
73
|
-
? stepToken.zero
|
|
74
|
-
: stepToken.paddingInlineEnd,
|
|
75
|
-
['&::after']: {
|
|
76
|
-
display: stepToken.none
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[`&-icon`]: {
|
|
80
|
-
lineHeight: 1,
|
|
81
|
-
width: manyItems
|
|
82
|
-
? stepToken.manyItemsIconWidthHeight
|
|
83
|
-
: stepToken.iconWidthHeight,
|
|
84
|
-
height: manyItems
|
|
85
|
-
? stepToken.manyItemsIconWidthHeight
|
|
86
|
-
: stepToken.iconWidthHeight,
|
|
87
|
-
marginInlineEnd: stepToken.zero,
|
|
88
|
-
['span']: {
|
|
89
|
-
borderRadius: '50%',
|
|
90
|
-
display: stepToken.flex,
|
|
91
|
-
width: stepToken.full,
|
|
92
|
-
height: stepToken.full
|
|
93
|
-
},
|
|
94
|
-
['svg']: {
|
|
95
|
-
width: stepToken.iconSize,
|
|
96
|
-
height: stepToken.iconSize,
|
|
97
|
-
margin: stepToken.auto,
|
|
98
|
-
color: stepToken.iconColor,
|
|
99
|
-
display: manyItems ? stepToken.none : 'inline-block'
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
[`&-tail`]: {
|
|
103
|
-
display: 'block !important',
|
|
104
|
-
zIndex: -1,
|
|
105
|
-
top: manyItems ? stepToken.auto : stepToken.tailTop,
|
|
106
|
-
bottom: manyItems
|
|
107
|
-
? stepToken.manyItemsTailBottom
|
|
108
|
-
: stepToken.auto,
|
|
109
|
-
['::after']: {
|
|
54
|
+
[prefixCls]: {
|
|
55
|
+
[`&${prefixClsWithoutHash}`]: {
|
|
56
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
57
|
+
paddingInlineStart: customTokens.sizing.valueZero,
|
|
58
|
+
flex: '1 !important',
|
|
59
|
+
[`&-container`]: {
|
|
60
|
+
display: customTokens.layout.displayFlex,
|
|
61
|
+
flexDirection: manyItems
|
|
62
|
+
? customTokens.layout.flexDirectionColumnReverse
|
|
63
|
+
: customTokens.layout.flexDirectionColumn,
|
|
64
|
+
alignItems: manyItems
|
|
65
|
+
? customTokens.layout.flexCenter
|
|
66
|
+
: customTokens.layout.flexCenter,
|
|
67
|
+
justifyContent: manyItems
|
|
68
|
+
? customTokens.layout.flexCenter
|
|
69
|
+
: customTokens.layout.flexCenter,
|
|
70
|
+
rowGap: stepToken.rowGap
|
|
71
|
+
},
|
|
72
|
+
[`&-content`]: {
|
|
73
|
+
flexDirection: customTokens.layout.flexDirectionColumn,
|
|
74
|
+
transform: manyItems
|
|
75
|
+
? stepToken.manyItemsTransform
|
|
76
|
+
: customTokens.layout.displayNone,
|
|
77
|
+
width: manyItems
|
|
78
|
+
? stepToken.manyItemsWidth
|
|
79
|
+
: customTokens.sizing.valueAuto,
|
|
80
|
+
paddingInlineEnd: manyItems
|
|
81
|
+
? stepToken.paddingInlineEnd
|
|
82
|
+
: customTokens.sizing.valueZero,
|
|
110
83
|
height: manyItems
|
|
111
|
-
? stepToken.
|
|
112
|
-
:
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
84
|
+
? stepToken.manyItemsHeight
|
|
85
|
+
: customTokens.sizing.valueAuto,
|
|
86
|
+
whiteSpace: manyItems
|
|
87
|
+
? customTokens.typography.whiteSpaceBreakSpaces
|
|
88
|
+
: customTokens.layout.displayNone,
|
|
89
|
+
display: customTokens.layout.displayFlex,
|
|
90
|
+
alignItems: customTokens.layout.flexCenter,
|
|
91
|
+
wordBreak: customTokens.typography.wordBreak,
|
|
92
|
+
marginInlineStart: manyItems
|
|
93
|
+
? stepToken.manyItemsMarginInlineStart
|
|
94
|
+
: customTokens.sizing.valueZero
|
|
95
|
+
},
|
|
96
|
+
[`&-title`]: {
|
|
97
|
+
display: customTokens.layout.displayFlex,
|
|
98
|
+
flexDirection: customTokens.layout.flexDirectionColumn,
|
|
99
|
+
textAlign: customTokens.typography.textAlignCenter,
|
|
100
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
101
|
+
fontSize: stepToken.titleFontSize,
|
|
102
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
103
|
+
paddingInlineEnd: manyItems
|
|
104
|
+
? customTokens.sizing.valueZero
|
|
105
|
+
: stepToken.paddingInlineEnd,
|
|
118
106
|
['&::after']: {
|
|
119
|
-
|
|
107
|
+
display: customTokens.layout.displayNone
|
|
120
108
|
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
109
|
+
},
|
|
110
|
+
['&-subtitle']: {
|
|
111
|
+
margin: '10px 0',
|
|
112
|
+
fontSize: '12px'
|
|
113
|
+
},
|
|
114
|
+
['&-description']: {
|
|
115
|
+
marginTop: '10px',
|
|
116
|
+
maxWidth: customTokens.sizing.valueFull
|
|
117
|
+
},
|
|
118
|
+
[`&-icon`]: {
|
|
119
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
120
|
+
zIndex: 1,
|
|
121
|
+
width: manyItems
|
|
122
|
+
? stepToken.manyItemsIconWidthHeight
|
|
123
|
+
: stepToken.iconWidthHeight,
|
|
124
|
+
height: manyItems
|
|
125
|
+
? stepToken.manyItemsIconWidthHeight
|
|
126
|
+
: stepToken.iconWidthHeight,
|
|
127
|
+
marginInlineEnd: customTokens.sizing.valueZero,
|
|
128
|
+
['span']: {
|
|
129
|
+
borderRadius: customTokens.sizing.valueHalf,
|
|
130
|
+
display: customTokens.layout.displayFlex,
|
|
131
|
+
width: `${customTokens.sizing.valueFull} !important`,
|
|
132
|
+
height: `${customTokens.sizing.valueFull} !important`
|
|
133
|
+
},
|
|
134
|
+
['svg']: {
|
|
135
|
+
width: stepToken.iconSize,
|
|
136
|
+
height: stepToken.iconSize,
|
|
137
|
+
margin: customTokens.sizing.valueAuto,
|
|
138
|
+
color: stepToken.iconColor,
|
|
139
|
+
display: manyItems
|
|
140
|
+
? customTokens.layout.displayNone
|
|
141
|
+
: customTokens.layout.displayInlineBlock
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
[`&-tail`]: {
|
|
145
|
+
display: `${customTokens.layout.displayBlock} !important`,
|
|
146
|
+
zIndex: customTokens.sizing.valueZero,
|
|
147
|
+
top: manyItems
|
|
148
|
+
? customTokens.sizing.valueAuto
|
|
149
|
+
: stepToken.tailTop,
|
|
150
|
+
bottom: manyItems
|
|
151
|
+
? stepToken.manyItemsTailBottom
|
|
152
|
+
: customTokens.sizing.valueAuto,
|
|
153
|
+
['::after']: {
|
|
154
|
+
height: manyItems
|
|
155
|
+
? stepToken.manyItemsTailHeight
|
|
156
|
+
: stepToken.tailHeight,
|
|
157
|
+
borderRadius: customTokens.sizing.valueZero
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
[`&:first-child`]: {
|
|
161
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
162
|
+
['&::after']: {
|
|
163
|
+
background: stepToken.tailFirstChildColor
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
[`&:last-child`]: {
|
|
168
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
169
|
+
['&::after']: {
|
|
170
|
+
background: stepToken.tailLastChildColor
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
[`&:not(.${prefixClsWithoutHash}-item-finish, .${prefixClsWithoutHash}-item-process):last-child`]: {
|
|
175
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
176
|
+
['&::after']: {
|
|
177
|
+
background: stepToken.tailColor
|
|
178
|
+
}
|
|
127
179
|
}
|
|
128
180
|
}
|
|
129
181
|
},
|
|
130
|
-
[
|
|
131
|
-
[`${prefixClsWithoutHash}-item-
|
|
132
|
-
|
|
133
|
-
|
|
182
|
+
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
183
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
184
|
+
backgroundColor: stepToken.finishIconBgColor
|
|
185
|
+
},
|
|
186
|
+
['&:not(:last-child, :first-child)']: {
|
|
187
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
188
|
+
['&::after']: {
|
|
189
|
+
background: stepToken.finishTailColor
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
194
|
+
['&:not(:last-child, :first-child)']: {
|
|
195
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
196
|
+
['&::after']: {
|
|
197
|
+
background: stepToken.tailLastChildColor
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
[`&:first-child`]: {
|
|
202
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
203
|
+
['&::after']: {
|
|
204
|
+
background: customTokens.layout.displayNone
|
|
205
|
+
}
|
|
206
|
+
}
|
|
134
207
|
}
|
|
135
208
|
}
|
|
136
|
-
}
|
|
137
|
-
},
|
|
138
|
-
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
139
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
140
|
-
backgroundColor: stepToken.finishIconBgColor
|
|
141
209
|
},
|
|
142
|
-
[
|
|
143
|
-
[`${prefixClsWithoutHash}-item-
|
|
144
|
-
|
|
145
|
-
|
|
210
|
+
[`${prefixClsWithoutHash}-item-process`]: {
|
|
211
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
212
|
+
backgroundColor: stepToken.processIconBgColor
|
|
213
|
+
},
|
|
214
|
+
['&:not(:last-child, :first-child)']: {
|
|
215
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
216
|
+
['&::after']: {
|
|
217
|
+
background: stepToken.tailProcessColor
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
['&:first-child']: {
|
|
222
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
223
|
+
['&::after']: {
|
|
224
|
+
background: stepToken.tailProcessFirstChildColor
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
['&:last-child']: {
|
|
229
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
230
|
+
['&::after']: {
|
|
231
|
+
background: stepToken.tailLastChildColor
|
|
232
|
+
}
|
|
146
233
|
}
|
|
147
234
|
}
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
|
-
[`${prefixClsWithoutHash}-item-process`]: {
|
|
151
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
152
|
-
backgroundColor: stepToken.processIconBgColor
|
|
153
235
|
},
|
|
154
|
-
[
|
|
155
|
-
[`${prefixClsWithoutHash}-item-
|
|
156
|
-
|
|
157
|
-
|
|
236
|
+
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
237
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
238
|
+
backgroundColor: stepToken.waitIconBgColor,
|
|
239
|
+
['svg']: {
|
|
240
|
+
color: stepToken.waitIconColor
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
[`${prefixClsWithoutHash}-item-title`]: {
|
|
244
|
+
color: stepToken.waitTitleColor
|
|
245
|
+
},
|
|
246
|
+
['&:not(:last-child, :first-child)']: {
|
|
247
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
248
|
+
['&::after']: {
|
|
249
|
+
backgroundColor: stepToken.waitTailColor
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
[`&:last-child`]: {
|
|
254
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
255
|
+
['&::after']: {
|
|
256
|
+
background: stepToken.tailWaitLastChildColor
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
261
|
+
['&:not(:first-child)']: {
|
|
262
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
263
|
+
['&::after']: {
|
|
264
|
+
background: stepToken.tailWaitMiddleChildColor
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
[`&:first-child`]: {
|
|
269
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
270
|
+
['&::after']: {
|
|
271
|
+
background: customTokens.layout.displayNone
|
|
272
|
+
}
|
|
273
|
+
}
|
|
158
274
|
}
|
|
159
275
|
}
|
|
160
276
|
},
|
|
161
|
-
[
|
|
162
|
-
[`${prefixClsWithoutHash}-item-
|
|
163
|
-
|
|
164
|
-
|
|
277
|
+
[`${prefixClsWithoutHash}-item-error`]: {
|
|
278
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
279
|
+
backgroundColor: stepToken.errorIconBgColor
|
|
280
|
+
},
|
|
281
|
+
['&:not(:last-child, :first-child)']: {
|
|
282
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
283
|
+
['&::after']: {
|
|
284
|
+
background: stepToken.tailErrorChildColor
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
[`&:first-child`]: {
|
|
289
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
290
|
+
['&::after']: {
|
|
291
|
+
background: customTokens.layout.displayNone
|
|
292
|
+
}
|
|
165
293
|
}
|
|
166
294
|
}
|
|
167
295
|
},
|
|
168
|
-
[
|
|
169
|
-
[`${prefixClsWithoutHash}-item
|
|
170
|
-
['
|
|
171
|
-
|
|
296
|
+
[`&${prefixClsWithoutHash}-small`]: {
|
|
297
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
298
|
+
['&-container']: {
|
|
299
|
+
rowGap: customTokens.sizing.valueZero
|
|
300
|
+
},
|
|
301
|
+
[`&-icon`]: {
|
|
302
|
+
scale: '0.8'
|
|
303
|
+
},
|
|
304
|
+
['&-tail']: {
|
|
305
|
+
top: '18px'
|
|
172
306
|
}
|
|
173
307
|
}
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
177
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
178
|
-
backgroundColor: stepToken.waitIconBgColor,
|
|
179
|
-
['svg']: {
|
|
180
|
-
color: stepToken.waitIconColor
|
|
181
|
-
}
|
|
182
308
|
},
|
|
183
|
-
[
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
309
|
+
[`&${prefixClsWithoutHash}-dot`]: {
|
|
310
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
311
|
+
overflow: customTokens.overflow.overflowHidden,
|
|
312
|
+
[`&-icon`]: {
|
|
313
|
+
width: '10px !important',
|
|
314
|
+
height: '10px !important',
|
|
315
|
+
marginInlineStart: customTokens.sizing.valueZero,
|
|
316
|
+
['span']: {
|
|
317
|
+
color: customTokens.sizing.valueInherit,
|
|
318
|
+
background: customTokens.sizing.valueInherit
|
|
319
|
+
}
|
|
320
|
+
},
|
|
321
|
+
[`&${prefixClsWithoutHash}-icon`]: {
|
|
322
|
+
background: customTokens.sizing.valueInherit,
|
|
323
|
+
[`&${prefixClsWithoutHash}-icon-dot`]: {
|
|
324
|
+
background: customTokens.sizing.valueInherit
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
['&-title']: {
|
|
328
|
+
paddingInlineEnd: customTokens.sizing.valueZero
|
|
329
|
+
},
|
|
330
|
+
['&-tail']: {
|
|
331
|
+
top: '3px',
|
|
332
|
+
marginInline: customTokens.sizing.valueZero,
|
|
333
|
+
['&::after']: {
|
|
334
|
+
width: `${customTokens.sizing.valueFull} !important`,
|
|
335
|
+
marginInlineStart: customTokens.sizing.valueZero
|
|
336
|
+
}
|
|
190
337
|
}
|
|
191
338
|
}
|
|
192
339
|
},
|
|
193
|
-
[
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
340
|
+
[`&${prefixClsWithoutHash}-vertical`]: {
|
|
341
|
+
rowGap: '30px',
|
|
342
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
343
|
+
['&-container']: {
|
|
344
|
+
flexDirection: customTokens.layout.flexDirectionRow,
|
|
345
|
+
justifyContent: customTokens.layout.flexStart,
|
|
346
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
347
|
+
top: '30px',
|
|
348
|
+
insetInlineStart: '18px',
|
|
349
|
+
height: '45px',
|
|
350
|
+
['&::after']: {
|
|
351
|
+
width: '3px',
|
|
352
|
+
background: '#4482ff'
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
[`&-content`]: {
|
|
357
|
+
minHeight: customTokens.sizing.valueAuto
|
|
358
|
+
},
|
|
359
|
+
['&:last-child']: {
|
|
360
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
361
|
+
display: customTokens.layout.displayNone
|
|
362
|
+
}
|
|
197
363
|
}
|
|
198
364
|
}
|
|
199
365
|
}
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -5,70 +5,107 @@ import { ReactNode } from 'react';
|
|
|
5
5
|
export type TStepDirectionAndPlacement = 'horizontal' | 'vertical';
|
|
6
6
|
export type TSize = 'default' | 'small';
|
|
7
7
|
export type TStepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
8
|
-
export type TStepType = 'default' | 'navigation'
|
|
9
|
-
export type TStepProgressDot = (
|
|
10
|
-
iconDot,
|
|
11
|
-
{ index, status, title, description }
|
|
12
|
-
) => ReactNode;
|
|
8
|
+
export type TStepType = 'default' | 'navigation';
|
|
13
9
|
|
|
14
|
-
type
|
|
10
|
+
type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
15
11
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
16
12
|
React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
17
13
|
|
|
18
|
-
export interface IStepProps extends
|
|
14
|
+
export interface IStepProps extends SMergedHTMLAttributes {
|
|
19
15
|
/**
|
|
20
16
|
* The current step index.
|
|
21
17
|
* @default 0
|
|
22
18
|
*/
|
|
23
19
|
current?: number;
|
|
20
|
+
|
|
24
21
|
/**
|
|
25
22
|
* The initial step index.
|
|
26
23
|
* @default 0
|
|
27
24
|
*/
|
|
28
25
|
initial?: number;
|
|
26
|
+
|
|
29
27
|
/**
|
|
30
28
|
* Whether the steps are responsive.
|
|
31
29
|
* @default true
|
|
32
30
|
*/
|
|
33
31
|
responsive?: boolean;
|
|
32
|
+
|
|
34
33
|
/**
|
|
35
34
|
* The status of the steps.
|
|
35
|
+
* @default 'process'
|
|
36
36
|
*/
|
|
37
37
|
status?: TStepStatus;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Trigger when Step is changed
|
|
41
|
+
*/
|
|
38
42
|
onChange?: (current) => void;
|
|
43
|
+
|
|
39
44
|
/**
|
|
40
45
|
* The steps items.
|
|
46
|
+
* @default []
|
|
41
47
|
*/
|
|
42
48
|
items?: {
|
|
43
49
|
/**
|
|
44
50
|
* The description of the step.
|
|
45
51
|
*/
|
|
46
52
|
description?: ReactNode;
|
|
53
|
+
|
|
47
54
|
/**
|
|
48
55
|
* Whether the step is disabled.
|
|
49
56
|
*/
|
|
50
57
|
disabled?: boolean;
|
|
58
|
+
|
|
51
59
|
/**
|
|
52
60
|
* The status of the step.
|
|
53
61
|
*/
|
|
54
62
|
status?: TStepStatus;
|
|
63
|
+
|
|
55
64
|
/**
|
|
56
65
|
* The subtitle of the step.
|
|
57
66
|
*/
|
|
58
67
|
subTitle?: ReactNode;
|
|
68
|
+
|
|
59
69
|
/**
|
|
60
70
|
* The title of the step.
|
|
61
71
|
*/
|
|
62
72
|
title: ReactNode;
|
|
73
|
+
|
|
63
74
|
/**
|
|
64
75
|
* The icon of the step.
|
|
65
76
|
*/
|
|
66
77
|
icon?: IconName;
|
|
67
78
|
}[];
|
|
79
|
+
|
|
68
80
|
/**
|
|
69
81
|
* Convert to multiple views.
|
|
70
82
|
*/
|
|
71
83
|
manyItems?: boolean;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* To specify the direction of the step bar, horizontal or vertical
|
|
87
|
+
* @default 'horizontal'
|
|
88
|
+
*/
|
|
89
|
+
direction?: TStepDirectionAndPlacement;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
progressDot?: boolean;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* To specify the size of the step bar, default and small are currently supported
|
|
99
|
+
* @default 'default'
|
|
100
|
+
*/
|
|
101
|
+
size?: TSize;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Type of steps, can be set to one of the following values: default navigation inline
|
|
105
|
+
* @default 'default'
|
|
106
|
+
*/
|
|
107
|
+
type?: TStepType;
|
|
108
|
+
|
|
72
109
|
/**
|
|
73
110
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
74
111
|
* @ignore
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { IStepProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
5
|
+
*
|
|
6
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
7
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
8
|
+
* icons and titles for each step.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - Horizontal and vertical orientations.
|
|
12
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
13
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
14
|
+
* - Progress dot style for streamlined visual designs.
|
|
15
|
+
* - Navigation-type steps for guiding users through processes.
|
|
16
|
+
*
|
|
17
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
18
|
+
*/
|
|
3
19
|
export declare const Steps: ({ items, manyItems, ...restStepsProps }: IStepProps) => React.JSX.Element;
|
|
4
20
|
export type { IStepProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,KAAK,4CAIf,UAAU,sBA+VZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -14,6 +14,22 @@ import { useToken } from '@akinon/ui-theme';
|
|
|
14
14
|
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
15
15
|
import { ConfigProvider, Steps as AntSteps } from 'antd';
|
|
16
16
|
import * as React from 'react';
|
|
17
|
+
/**
|
|
18
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
19
|
+
*
|
|
20
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
21
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
22
|
+
* icons and titles for each step.
|
|
23
|
+
*
|
|
24
|
+
* Features:
|
|
25
|
+
* - Horizontal and vertical orientations.
|
|
26
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
27
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
28
|
+
* - Progress dot style for streamlined visual designs.
|
|
29
|
+
* - Navigation-type steps for guiding users through processes.
|
|
30
|
+
*
|
|
31
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
32
|
+
*/
|
|
17
33
|
export const Steps = (_a) => {
|
|
18
34
|
var { items = [], manyItems = false } = _a, restStepsProps = __rest(_a, ["items", "manyItems"]);
|
|
19
35
|
const stepsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(Icon, { icon: item.icon }) : undefined })));
|
|
@@ -22,175 +38,325 @@ export const Steps = (_a) => {
|
|
|
22
38
|
const stepToken = token.Steps;
|
|
23
39
|
const prefixWithoutHash = `${getPrefixCls()}-steps`;
|
|
24
40
|
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
41
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
25
42
|
const stepsClassName = `${prefixWithoutHash} ${manyItems ? 'many-items' : ''}`;
|
|
43
|
+
const customTokens = theme.CustomTokens || {};
|
|
26
44
|
const useStyle = useStyleRegister({
|
|
27
45
|
token: token,
|
|
28
46
|
path: ['Steps'],
|
|
29
47
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
30
48
|
theme: theme
|
|
31
49
|
}, () => {
|
|
32
|
-
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-steps`;
|
|
33
50
|
return {
|
|
34
|
-
[prefixCls]: {
|
|
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
|
-
: stepToken.zero
|
|
64
|
-
},
|
|
65
|
-
[`&-title`]: {
|
|
66
|
-
lineHeight: 1,
|
|
67
|
-
fontSize: stepToken.titleFontSize,
|
|
68
|
-
fontWeight: '600 !important',
|
|
69
|
-
paddingInlineEnd: manyItems
|
|
70
|
-
? stepToken.zero
|
|
71
|
-
: stepToken.paddingInlineEnd,
|
|
72
|
-
['&::after']: {
|
|
73
|
-
display: stepToken.none
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
[`&-icon`]: {
|
|
77
|
-
lineHeight: 1,
|
|
78
|
-
width: manyItems
|
|
79
|
-
? stepToken.manyItemsIconWidthHeight
|
|
80
|
-
: stepToken.iconWidthHeight,
|
|
81
|
-
height: manyItems
|
|
82
|
-
? stepToken.manyItemsIconWidthHeight
|
|
83
|
-
: stepToken.iconWidthHeight,
|
|
84
|
-
marginInlineEnd: stepToken.zero,
|
|
85
|
-
['span']: {
|
|
86
|
-
borderRadius: '50%',
|
|
87
|
-
display: stepToken.flex,
|
|
88
|
-
width: stepToken.full,
|
|
89
|
-
height: stepToken.full
|
|
90
|
-
},
|
|
91
|
-
['svg']: {
|
|
92
|
-
width: stepToken.iconSize,
|
|
93
|
-
height: stepToken.iconSize,
|
|
94
|
-
margin: stepToken.auto,
|
|
95
|
-
color: stepToken.iconColor,
|
|
96
|
-
display: manyItems ? stepToken.none : 'inline-block'
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
[`&-tail`]: {
|
|
100
|
-
display: 'block !important',
|
|
101
|
-
zIndex: -1,
|
|
102
|
-
top: manyItems ? stepToken.auto : stepToken.tailTop,
|
|
103
|
-
bottom: manyItems
|
|
104
|
-
? stepToken.manyItemsTailBottom
|
|
105
|
-
: stepToken.auto,
|
|
106
|
-
['::after']: {
|
|
51
|
+
[prefixCls]: {
|
|
52
|
+
[`&${prefixClsWithoutHash}`]: {
|
|
53
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
54
|
+
paddingInlineStart: customTokens.sizing.valueZero,
|
|
55
|
+
flex: '1 !important',
|
|
56
|
+
[`&-container`]: {
|
|
57
|
+
display: customTokens.layout.displayFlex,
|
|
58
|
+
flexDirection: manyItems
|
|
59
|
+
? customTokens.layout.flexDirectionColumnReverse
|
|
60
|
+
: customTokens.layout.flexDirectionColumn,
|
|
61
|
+
alignItems: manyItems
|
|
62
|
+
? customTokens.layout.flexCenter
|
|
63
|
+
: customTokens.layout.flexCenter,
|
|
64
|
+
justifyContent: manyItems
|
|
65
|
+
? customTokens.layout.flexCenter
|
|
66
|
+
: customTokens.layout.flexCenter,
|
|
67
|
+
rowGap: stepToken.rowGap
|
|
68
|
+
},
|
|
69
|
+
[`&-content`]: {
|
|
70
|
+
flexDirection: customTokens.layout.flexDirectionColumn,
|
|
71
|
+
transform: manyItems
|
|
72
|
+
? stepToken.manyItemsTransform
|
|
73
|
+
: customTokens.layout.displayNone,
|
|
74
|
+
width: manyItems
|
|
75
|
+
? stepToken.manyItemsWidth
|
|
76
|
+
: customTokens.sizing.valueAuto,
|
|
77
|
+
paddingInlineEnd: manyItems
|
|
78
|
+
? stepToken.paddingInlineEnd
|
|
79
|
+
: customTokens.sizing.valueZero,
|
|
107
80
|
height: manyItems
|
|
108
|
-
? stepToken.
|
|
109
|
-
:
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
81
|
+
? stepToken.manyItemsHeight
|
|
82
|
+
: customTokens.sizing.valueAuto,
|
|
83
|
+
whiteSpace: manyItems
|
|
84
|
+
? customTokens.typography.whiteSpaceBreakSpaces
|
|
85
|
+
: customTokens.layout.displayNone,
|
|
86
|
+
display: customTokens.layout.displayFlex,
|
|
87
|
+
alignItems: customTokens.layout.flexCenter,
|
|
88
|
+
wordBreak: customTokens.typography.wordBreak,
|
|
89
|
+
marginInlineStart: manyItems
|
|
90
|
+
? stepToken.manyItemsMarginInlineStart
|
|
91
|
+
: customTokens.sizing.valueZero
|
|
92
|
+
},
|
|
93
|
+
[`&-title`]: {
|
|
94
|
+
display: customTokens.layout.displayFlex,
|
|
95
|
+
flexDirection: customTokens.layout.flexDirectionColumn,
|
|
96
|
+
textAlign: customTokens.typography.textAlignCenter,
|
|
97
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
98
|
+
fontSize: stepToken.titleFontSize,
|
|
99
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
100
|
+
paddingInlineEnd: manyItems
|
|
101
|
+
? customTokens.sizing.valueZero
|
|
102
|
+
: stepToken.paddingInlineEnd,
|
|
115
103
|
['&::after']: {
|
|
116
|
-
|
|
104
|
+
display: customTokens.layout.displayNone
|
|
117
105
|
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
106
|
+
},
|
|
107
|
+
['&-subtitle']: {
|
|
108
|
+
margin: '10px 0',
|
|
109
|
+
fontSize: '12px'
|
|
110
|
+
},
|
|
111
|
+
['&-description']: {
|
|
112
|
+
marginTop: '10px',
|
|
113
|
+
maxWidth: customTokens.sizing.valueFull
|
|
114
|
+
},
|
|
115
|
+
[`&-icon`]: {
|
|
116
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
117
|
+
zIndex: 1,
|
|
118
|
+
width: manyItems
|
|
119
|
+
? stepToken.manyItemsIconWidthHeight
|
|
120
|
+
: stepToken.iconWidthHeight,
|
|
121
|
+
height: manyItems
|
|
122
|
+
? stepToken.manyItemsIconWidthHeight
|
|
123
|
+
: stepToken.iconWidthHeight,
|
|
124
|
+
marginInlineEnd: customTokens.sizing.valueZero,
|
|
125
|
+
['span']: {
|
|
126
|
+
borderRadius: customTokens.sizing.valueHalf,
|
|
127
|
+
display: customTokens.layout.displayFlex,
|
|
128
|
+
width: `${customTokens.sizing.valueFull} !important`,
|
|
129
|
+
height: `${customTokens.sizing.valueFull} !important`
|
|
130
|
+
},
|
|
131
|
+
['svg']: {
|
|
132
|
+
width: stepToken.iconSize,
|
|
133
|
+
height: stepToken.iconSize,
|
|
134
|
+
margin: customTokens.sizing.valueAuto,
|
|
135
|
+
color: stepToken.iconColor,
|
|
136
|
+
display: manyItems
|
|
137
|
+
? customTokens.layout.displayNone
|
|
138
|
+
: customTokens.layout.displayInlineBlock
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
[`&-tail`]: {
|
|
142
|
+
display: `${customTokens.layout.displayBlock} !important`,
|
|
143
|
+
zIndex: customTokens.sizing.valueZero,
|
|
144
|
+
top: manyItems
|
|
145
|
+
? customTokens.sizing.valueAuto
|
|
146
|
+
: stepToken.tailTop,
|
|
147
|
+
bottom: manyItems
|
|
148
|
+
? stepToken.manyItemsTailBottom
|
|
149
|
+
: customTokens.sizing.valueAuto,
|
|
150
|
+
['::after']: {
|
|
151
|
+
height: manyItems
|
|
152
|
+
? stepToken.manyItemsTailHeight
|
|
153
|
+
: stepToken.tailHeight,
|
|
154
|
+
borderRadius: customTokens.sizing.valueZero
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
[`&:first-child`]: {
|
|
158
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
159
|
+
['&::after']: {
|
|
160
|
+
background: stepToken.tailFirstChildColor
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
[`&:last-child`]: {
|
|
165
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
166
|
+
['&::after']: {
|
|
167
|
+
background: stepToken.tailLastChildColor
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
[`&:not(.${prefixClsWithoutHash}-item-finish, .${prefixClsWithoutHash}-item-process):last-child`]: {
|
|
172
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
173
|
+
['&::after']: {
|
|
174
|
+
background: stepToken.tailColor
|
|
175
|
+
}
|
|
124
176
|
}
|
|
125
177
|
}
|
|
126
178
|
},
|
|
127
|
-
[
|
|
128
|
-
[`${prefixClsWithoutHash}-item-
|
|
129
|
-
|
|
130
|
-
|
|
179
|
+
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
180
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
181
|
+
backgroundColor: stepToken.finishIconBgColor
|
|
182
|
+
},
|
|
183
|
+
['&:not(:last-child, :first-child)']: {
|
|
184
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
185
|
+
['&::after']: {
|
|
186
|
+
background: stepToken.finishTailColor
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
191
|
+
['&:not(:last-child, :first-child)']: {
|
|
192
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
193
|
+
['&::after']: {
|
|
194
|
+
background: stepToken.tailLastChildColor
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
[`&:first-child`]: {
|
|
199
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
200
|
+
['&::after']: {
|
|
201
|
+
background: customTokens.layout.displayNone
|
|
202
|
+
}
|
|
203
|
+
}
|
|
131
204
|
}
|
|
132
205
|
}
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
136
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
137
|
-
backgroundColor: stepToken.finishIconBgColor
|
|
138
206
|
},
|
|
139
|
-
[
|
|
140
|
-
[`${prefixClsWithoutHash}-item-
|
|
141
|
-
|
|
142
|
-
|
|
207
|
+
[`${prefixClsWithoutHash}-item-process`]: {
|
|
208
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
209
|
+
backgroundColor: stepToken.processIconBgColor
|
|
210
|
+
},
|
|
211
|
+
['&:not(:last-child, :first-child)']: {
|
|
212
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
213
|
+
['&::after']: {
|
|
214
|
+
background: stepToken.tailProcessColor
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
['&:first-child']: {
|
|
219
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
220
|
+
['&::after']: {
|
|
221
|
+
background: stepToken.tailProcessFirstChildColor
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
['&:last-child']: {
|
|
226
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
227
|
+
['&::after']: {
|
|
228
|
+
background: stepToken.tailLastChildColor
|
|
229
|
+
}
|
|
143
230
|
}
|
|
144
231
|
}
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
[`${prefixClsWithoutHash}-item-process`]: {
|
|
148
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
149
|
-
backgroundColor: stepToken.processIconBgColor
|
|
150
232
|
},
|
|
151
|
-
[
|
|
152
|
-
[`${prefixClsWithoutHash}-item-
|
|
153
|
-
|
|
154
|
-
|
|
233
|
+
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
234
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
235
|
+
backgroundColor: stepToken.waitIconBgColor,
|
|
236
|
+
['svg']: {
|
|
237
|
+
color: stepToken.waitIconColor
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
[`${prefixClsWithoutHash}-item-title`]: {
|
|
241
|
+
color: stepToken.waitTitleColor
|
|
242
|
+
},
|
|
243
|
+
['&:not(:last-child, :first-child)']: {
|
|
244
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
245
|
+
['&::after']: {
|
|
246
|
+
backgroundColor: stepToken.waitTailColor
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
[`&:last-child`]: {
|
|
251
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
252
|
+
['&::after']: {
|
|
253
|
+
background: stepToken.tailWaitLastChildColor
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
258
|
+
['&:not(:first-child)']: {
|
|
259
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
260
|
+
['&::after']: {
|
|
261
|
+
background: stepToken.tailWaitMiddleChildColor
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
[`&:first-child`]: {
|
|
266
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
267
|
+
['&::after']: {
|
|
268
|
+
background: customTokens.layout.displayNone
|
|
269
|
+
}
|
|
270
|
+
}
|
|
155
271
|
}
|
|
156
272
|
}
|
|
157
273
|
},
|
|
158
|
-
[
|
|
159
|
-
[`${prefixClsWithoutHash}-item-
|
|
160
|
-
|
|
161
|
-
|
|
274
|
+
[`${prefixClsWithoutHash}-item-error`]: {
|
|
275
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
276
|
+
backgroundColor: stepToken.errorIconBgColor
|
|
277
|
+
},
|
|
278
|
+
['&:not(:last-child, :first-child)']: {
|
|
279
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
280
|
+
['&::after']: {
|
|
281
|
+
background: stepToken.tailErrorChildColor
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
[`&:first-child`]: {
|
|
286
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
287
|
+
['&::after']: {
|
|
288
|
+
background: customTokens.layout.displayNone
|
|
289
|
+
}
|
|
162
290
|
}
|
|
163
291
|
}
|
|
164
292
|
},
|
|
165
|
-
[
|
|
166
|
-
[`${prefixClsWithoutHash}-item
|
|
167
|
-
['
|
|
168
|
-
|
|
293
|
+
[`&${prefixClsWithoutHash}-small`]: {
|
|
294
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
295
|
+
['&-container']: {
|
|
296
|
+
rowGap: customTokens.sizing.valueZero
|
|
297
|
+
},
|
|
298
|
+
[`&-icon`]: {
|
|
299
|
+
scale: '0.8'
|
|
300
|
+
},
|
|
301
|
+
['&-tail']: {
|
|
302
|
+
top: '18px'
|
|
169
303
|
}
|
|
170
304
|
}
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
174
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
175
|
-
backgroundColor: stepToken.waitIconBgColor,
|
|
176
|
-
['svg']: {
|
|
177
|
-
color: stepToken.waitIconColor
|
|
178
|
-
}
|
|
179
305
|
},
|
|
180
|
-
[
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
306
|
+
[`&${prefixClsWithoutHash}-dot`]: {
|
|
307
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
308
|
+
overflow: customTokens.overflow.overflowHidden,
|
|
309
|
+
[`&-icon`]: {
|
|
310
|
+
width: '10px !important',
|
|
311
|
+
height: '10px !important',
|
|
312
|
+
marginInlineStart: customTokens.sizing.valueZero,
|
|
313
|
+
['span']: {
|
|
314
|
+
color: customTokens.sizing.valueInherit,
|
|
315
|
+
background: customTokens.sizing.valueInherit
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
[`&${prefixClsWithoutHash}-icon`]: {
|
|
319
|
+
background: customTokens.sizing.valueInherit,
|
|
320
|
+
[`&${prefixClsWithoutHash}-icon-dot`]: {
|
|
321
|
+
background: customTokens.sizing.valueInherit
|
|
322
|
+
}
|
|
323
|
+
},
|
|
324
|
+
['&-title']: {
|
|
325
|
+
paddingInlineEnd: customTokens.sizing.valueZero
|
|
326
|
+
},
|
|
327
|
+
['&-tail']: {
|
|
328
|
+
top: '3px',
|
|
329
|
+
marginInline: customTokens.sizing.valueZero,
|
|
330
|
+
['&::after']: {
|
|
331
|
+
width: `${customTokens.sizing.valueFull} !important`,
|
|
332
|
+
marginInlineStart: customTokens.sizing.valueZero
|
|
333
|
+
}
|
|
187
334
|
}
|
|
188
335
|
}
|
|
189
336
|
},
|
|
190
|
-
[
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
337
|
+
[`&${prefixClsWithoutHash}-vertical`]: {
|
|
338
|
+
rowGap: '30px',
|
|
339
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
340
|
+
['&-container']: {
|
|
341
|
+
flexDirection: customTokens.layout.flexDirectionRow,
|
|
342
|
+
justifyContent: customTokens.layout.flexStart,
|
|
343
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
344
|
+
top: '30px',
|
|
345
|
+
insetInlineStart: '18px',
|
|
346
|
+
height: '45px',
|
|
347
|
+
['&::after']: {
|
|
348
|
+
width: '3px',
|
|
349
|
+
background: '#4482ff'
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
[`&-content`]: {
|
|
354
|
+
minHeight: customTokens.sizing.valueAuto
|
|
355
|
+
},
|
|
356
|
+
['&:last-child']: {
|
|
357
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
358
|
+
display: customTokens.layout.displayNone
|
|
359
|
+
}
|
|
194
360
|
}
|
|
195
361
|
}
|
|
196
362
|
}
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -5,70 +5,107 @@ import { ReactNode } from 'react';
|
|
|
5
5
|
export type TStepDirectionAndPlacement = 'horizontal' | 'vertical';
|
|
6
6
|
export type TSize = 'default' | 'small';
|
|
7
7
|
export type TStepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
8
|
-
export type TStepType = 'default' | 'navigation'
|
|
9
|
-
export type TStepProgressDot = (
|
|
10
|
-
iconDot,
|
|
11
|
-
{ index, status, title, description }
|
|
12
|
-
) => ReactNode;
|
|
8
|
+
export type TStepType = 'default' | 'navigation';
|
|
13
9
|
|
|
14
|
-
type
|
|
10
|
+
type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
15
11
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
16
12
|
React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
17
13
|
|
|
18
|
-
export interface IStepProps extends
|
|
14
|
+
export interface IStepProps extends SMergedHTMLAttributes {
|
|
19
15
|
/**
|
|
20
16
|
* The current step index.
|
|
21
17
|
* @default 0
|
|
22
18
|
*/
|
|
23
19
|
current?: number;
|
|
20
|
+
|
|
24
21
|
/**
|
|
25
22
|
* The initial step index.
|
|
26
23
|
* @default 0
|
|
27
24
|
*/
|
|
28
25
|
initial?: number;
|
|
26
|
+
|
|
29
27
|
/**
|
|
30
28
|
* Whether the steps are responsive.
|
|
31
29
|
* @default true
|
|
32
30
|
*/
|
|
33
31
|
responsive?: boolean;
|
|
32
|
+
|
|
34
33
|
/**
|
|
35
34
|
* The status of the steps.
|
|
35
|
+
* @default 'process'
|
|
36
36
|
*/
|
|
37
37
|
status?: TStepStatus;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Trigger when Step is changed
|
|
41
|
+
*/
|
|
38
42
|
onChange?: (current) => void;
|
|
43
|
+
|
|
39
44
|
/**
|
|
40
45
|
* The steps items.
|
|
46
|
+
* @default []
|
|
41
47
|
*/
|
|
42
48
|
items?: {
|
|
43
49
|
/**
|
|
44
50
|
* The description of the step.
|
|
45
51
|
*/
|
|
46
52
|
description?: ReactNode;
|
|
53
|
+
|
|
47
54
|
/**
|
|
48
55
|
* Whether the step is disabled.
|
|
49
56
|
*/
|
|
50
57
|
disabled?: boolean;
|
|
58
|
+
|
|
51
59
|
/**
|
|
52
60
|
* The status of the step.
|
|
53
61
|
*/
|
|
54
62
|
status?: TStepStatus;
|
|
63
|
+
|
|
55
64
|
/**
|
|
56
65
|
* The subtitle of the step.
|
|
57
66
|
*/
|
|
58
67
|
subTitle?: ReactNode;
|
|
68
|
+
|
|
59
69
|
/**
|
|
60
70
|
* The title of the step.
|
|
61
71
|
*/
|
|
62
72
|
title: ReactNode;
|
|
73
|
+
|
|
63
74
|
/**
|
|
64
75
|
* The icon of the step.
|
|
65
76
|
*/
|
|
66
77
|
icon?: IconName;
|
|
67
78
|
}[];
|
|
79
|
+
|
|
68
80
|
/**
|
|
69
81
|
* Convert to multiple views.
|
|
70
82
|
*/
|
|
71
83
|
manyItems?: boolean;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* To specify the direction of the step bar, horizontal or vertical
|
|
87
|
+
* @default 'horizontal'
|
|
88
|
+
*/
|
|
89
|
+
direction?: TStepDirectionAndPlacement;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
progressDot?: boolean;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* To specify the size of the step bar, default and small are currently supported
|
|
99
|
+
* @default 'default'
|
|
100
|
+
*/
|
|
101
|
+
size?: TSize;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Type of steps, can be set to one of the following values: default navigation inline
|
|
105
|
+
* @default 'default'
|
|
106
|
+
*/
|
|
107
|
+
type?: TStepType;
|
|
108
|
+
|
|
72
109
|
/**
|
|
73
110
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
74
111
|
* @ignore
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-steps",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"antd": "5.
|
|
13
|
-
"@akinon/
|
|
14
|
-
"@akinon/
|
|
12
|
+
"antd": "5.22.6",
|
|
13
|
+
"@akinon/ui-theme": "1.0.1",
|
|
14
|
+
"@akinon/icons": "1.0.1"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"clean-package": "2.2.0",
|
|
18
18
|
"copyfiles": "^2.4.1",
|
|
19
19
|
"rimraf": "^5.0.5",
|
|
20
|
-
"typescript": "
|
|
21
|
-
"@akinon/typescript-config": "0.
|
|
20
|
+
"typescript": "*",
|
|
21
|
+
"@akinon/typescript-config": "1.0.1"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": ">=18",
|