@snack-uikit/stepper 0.3.1 → 0.4.0
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/CHANGELOG.md +11 -0
- package/README.md +21 -17
- package/dist/StepperContext/StepperContext.d.ts +1 -0
- package/dist/StepperContext/StepperContext.js +2 -1
- package/dist/components/Stepper/Stepper.d.ts +0 -4
- package/dist/components/Stepper/Stepper.js +17 -18
- package/dist/constants.d.ts +11 -11
- package/dist/constants.js +11 -13
- package/dist/helperComponents/Icon/Icon.d.ts +1 -1
- package/dist/helperComponents/Icon/Icon.js +5 -5
- package/dist/helperComponents/Step/Step.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/types.d.ts +4 -1
- package/package.json +6 -6
- package/src/StepperContext/StepperContext.ts +3 -1
- package/src/components/Stepper/Stepper.tsx +19 -21
- package/src/constants.ts +11 -11
- package/src/helperComponents/Icon/Icon.tsx +6 -5
- package/src/helperComponents/Step/Step.tsx +4 -10
- package/src/index.ts +1 -1
- package/src/types.ts +7 -1
- package/dist/hooks.d.ts +0 -1
- package/dist/hooks.js +0 -3
- package/src/hooks.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 0.4.0 (2023-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### BREAKING CHANGES
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 0.3.1 (2023-12-06)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -20,23 +20,27 @@ const steps = [
|
|
|
20
20
|
{ title: 'Step #2', validation: validation2 },
|
|
21
21
|
{ title: 'Step #3', validation: validation3 },
|
|
22
22
|
{ title: 'Step #4', validation: validation4 },
|
|
23
|
-
]
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</
|
|
23
|
+
];
|
|
24
|
+
|
|
25
|
+
// ...
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<Stepper steps={steps}>
|
|
29
|
+
{({
|
|
30
|
+
stepper, // JSX элемент компонента
|
|
31
|
+
isCompleted, // состояние завершенности всей цепочки
|
|
32
|
+
goNext, // функция перехода к след. шагу
|
|
33
|
+
goPrev, // функция перехода к предыдущему шагу
|
|
34
|
+
}) => (
|
|
35
|
+
<>
|
|
36
|
+
{stepper}
|
|
37
|
+
|
|
38
|
+
<button onClick={() => goPrev()}>go back</button>
|
|
39
|
+
<button onClick={() => goNext()}>go next</button>
|
|
40
|
+
</>
|
|
41
|
+
)}
|
|
42
|
+
</Stepper>
|
|
43
|
+
)
|
|
40
44
|
```
|
|
41
45
|
[//]: DOCUMENTATION_SECTION_START
|
|
42
46
|
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext } from 'react';
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
2
|
export const StepperContext = createContext({
|
|
3
3
|
stepCount: 0,
|
|
4
4
|
isCompleted: false,
|
|
@@ -13,3 +13,4 @@ export const StepperContext = createContext({
|
|
|
13
13
|
/* stub */
|
|
14
14
|
},
|
|
15
15
|
});
|
|
16
|
+
export const useStepperApi = () => useContext(StepperContext);
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
|
-
import { StepValidationResult } from '../../constants';
|
|
4
3
|
import { StepData, StepperApi } from '../../types';
|
|
5
4
|
export type StepperState = StepperApi & {
|
|
6
5
|
stepper: ReactElement;
|
|
@@ -24,6 +23,3 @@ export type StepperProps = WithSupportProps<{
|
|
|
24
23
|
onCompleteChange: (isCompleted: boolean) => void;
|
|
25
24
|
}>;
|
|
26
25
|
export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export declare namespace Stepper {
|
|
28
|
-
var validationResults: typeof StepValidationResult;
|
|
29
|
-
}
|
|
@@ -13,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import cn from 'classnames';
|
|
14
14
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
15
15
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
16
|
-
import {
|
|
16
|
+
import { STEP_STATE, STEP_VALIDATION_RESULT } from '../../constants';
|
|
17
17
|
import { Step } from '../../helperComponents';
|
|
18
18
|
import { StepperContext } from '../../StepperContext';
|
|
19
19
|
import styles from './styles.module.css';
|
|
20
20
|
export function Stepper(_a) {
|
|
21
21
|
var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0 } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex"]);
|
|
22
22
|
const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
|
|
23
|
-
const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ?
|
|
23
|
+
const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
|
|
24
24
|
const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
|
|
25
25
|
const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
|
|
26
26
|
useEffect(() => {
|
|
@@ -40,30 +40,30 @@ export function Stepper(_a) {
|
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
42
42
|
const currentStep = steps[currentStepIndex];
|
|
43
|
-
const stepperValidPromise = (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(
|
|
44
|
-
setCurrentStepState(
|
|
43
|
+
const stepperValidPromise = (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(STEP_STATE.Completed);
|
|
44
|
+
setCurrentStepState(STEP_STATE.Loading);
|
|
45
45
|
stepperValidPromise
|
|
46
46
|
.then(validationResult => {
|
|
47
47
|
switch (validationResult) {
|
|
48
|
-
case
|
|
48
|
+
case STEP_VALIDATION_RESULT.Completed:
|
|
49
49
|
if (currentStepIndex === steps.length - 1) {
|
|
50
50
|
// завершился последний шаг
|
|
51
|
-
setCurrentStepState(
|
|
51
|
+
setCurrentStepState(STEP_STATE.Completed);
|
|
52
52
|
setIsCompleted(true);
|
|
53
53
|
}
|
|
54
54
|
else {
|
|
55
55
|
setCurrentStepIndex(currentStepIndex + 1);
|
|
56
|
-
setCurrentStepState(
|
|
56
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
57
57
|
}
|
|
58
58
|
return;
|
|
59
|
-
case
|
|
60
|
-
setCurrentStepState(
|
|
59
|
+
case STEP_VALIDATION_RESULT.Rejected:
|
|
60
|
+
setCurrentStepState(STEP_STATE.Rejected);
|
|
61
61
|
return;
|
|
62
62
|
default:
|
|
63
|
-
setCurrentStepState(
|
|
63
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
64
64
|
}
|
|
65
65
|
})
|
|
66
|
-
.catch(() => setCurrentStepState(
|
|
66
|
+
.catch(() => setCurrentStepState(STEP_STATE.Rejected));
|
|
67
67
|
}, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
|
|
68
68
|
const goPrev = useCallback((index = currentStepIndex - 1) => {
|
|
69
69
|
if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
|
|
@@ -76,28 +76,27 @@ export function Stepper(_a) {
|
|
|
76
76
|
setIsCompleted(false);
|
|
77
77
|
}
|
|
78
78
|
setCurrentStepIndex(index);
|
|
79
|
-
setCurrentStepState(
|
|
79
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
80
80
|
}, [currentStepIndex, isCompleted, setCurrentStepIndex]);
|
|
81
81
|
const stepsView = useMemo(() => steps.map((step, index) => {
|
|
82
82
|
const number = index + 1;
|
|
83
83
|
if (index < currentStepIndex) {
|
|
84
|
-
return Object.assign(Object.assign({}, step), { number, state:
|
|
84
|
+
return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Completed, onClick: () => goPrev(index) });
|
|
85
85
|
}
|
|
86
86
|
if (index === currentStepIndex) {
|
|
87
87
|
return Object.assign(Object.assign({}, step), { number, state: currentStepState, onClick: isCompleted ? () => goPrev(index) : undefined });
|
|
88
88
|
}
|
|
89
89
|
if (index - 1 === currentStepIndex) {
|
|
90
|
-
return Object.assign(Object.assign({}, step), { number, state:
|
|
90
|
+
return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting, onClick: () => goNext() });
|
|
91
91
|
}
|
|
92
|
-
return Object.assign(Object.assign({}, step), { number, state:
|
|
92
|
+
return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting });
|
|
93
93
|
}), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
|
|
94
94
|
const resetValidation = useCallback(() => {
|
|
95
|
-
if (currentStepState ===
|
|
96
|
-
setCurrentStepState(
|
|
95
|
+
if (currentStepState === STEP_STATE.Rejected) {
|
|
96
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
97
97
|
}
|
|
98
98
|
}, [currentStepState]);
|
|
99
99
|
const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index, all) => (_jsx(Step, { step: step, isLast: all.length - 1 === index, "data-test-id": props['data-test-id'] }, step.title + index))) })));
|
|
100
100
|
const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, resetValidation, stepCount: steps.length };
|
|
101
101
|
return _jsx(StepperContext.Provider, Object.assign({ value: stepperApi }, { children: children(Object.assign({ stepper }, stepperApi)) }));
|
|
102
102
|
}
|
|
103
|
-
Stepper.validationResults = StepValidationResult;
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export declare
|
|
2
|
-
Completed
|
|
3
|
-
Current
|
|
4
|
-
Loading
|
|
5
|
-
Waiting
|
|
6
|
-
Rejected
|
|
7
|
-
}
|
|
8
|
-
export declare
|
|
9
|
-
Completed
|
|
10
|
-
Rejected
|
|
11
|
-
}
|
|
1
|
+
export declare const STEP_STATE: {
|
|
2
|
+
readonly Completed: "completed";
|
|
3
|
+
readonly Current: "current";
|
|
4
|
+
readonly Loading: "loading";
|
|
5
|
+
readonly Waiting: "waiting";
|
|
6
|
+
readonly Rejected: "rejected";
|
|
7
|
+
};
|
|
8
|
+
export declare const STEP_VALIDATION_RESULT: {
|
|
9
|
+
readonly Completed: "completed";
|
|
10
|
+
readonly Rejected: "rejected";
|
|
11
|
+
};
|
package/dist/constants.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
StepValidationResult["Rejected"] = "rejected";
|
|
13
|
-
})(StepValidationResult || (StepValidationResult = {}));
|
|
1
|
+
export const STEP_STATE = {
|
|
2
|
+
Completed: 'completed',
|
|
3
|
+
Current: 'current',
|
|
4
|
+
Loading: 'loading',
|
|
5
|
+
Waiting: 'waiting',
|
|
6
|
+
Rejected: 'rejected',
|
|
7
|
+
};
|
|
8
|
+
export const STEP_VALIDATION_RESULT = {
|
|
9
|
+
Completed: 'completed',
|
|
10
|
+
Rejected: 'rejected',
|
|
11
|
+
};
|
|
@@ -4,16 +4,16 @@ import { useMemo } from 'react';
|
|
|
4
4
|
import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
|
|
5
5
|
import { Sun } from '@snack-uikit/loaders';
|
|
6
6
|
import { Typography } from '@snack-uikit/typography';
|
|
7
|
-
import {
|
|
7
|
+
import { STEP_STATE } from '../../constants';
|
|
8
8
|
import styles from './styles.module.css';
|
|
9
9
|
function getContent(state, number) {
|
|
10
10
|
switch (state) {
|
|
11
|
-
case
|
|
11
|
+
case STEP_STATE.Completed:
|
|
12
12
|
return _jsx(CheckSVG, {});
|
|
13
|
-
case
|
|
13
|
+
case STEP_STATE.Rejected:
|
|
14
14
|
return _jsx(CrossSVG, {});
|
|
15
|
-
case
|
|
16
|
-
return _jsx(Sun, { size:
|
|
15
|
+
case STEP_STATE.Loading:
|
|
16
|
+
return _jsx(Sun, { size: 's' });
|
|
17
17
|
default:
|
|
18
18
|
return number;
|
|
19
19
|
}
|
|
@@ -14,7 +14,7 @@ import cn from 'classnames';
|
|
|
14
14
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
15
15
|
import { Typography } from '@snack-uikit/typography';
|
|
16
16
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
17
|
-
import {
|
|
17
|
+
import { STEP_STATE } from '../../constants';
|
|
18
18
|
import { getTestIdBuilder } from '../../utils';
|
|
19
19
|
import { Icon } from '../Icon';
|
|
20
20
|
import styles from './styles.module.css';
|
|
@@ -22,5 +22,5 @@ const getTailTestId = getTestIdBuilder('_element-tail');
|
|
|
22
22
|
const getStepTestId = getTestIdBuilder('_element-step');
|
|
23
23
|
export function Step(_a) {
|
|
24
24
|
var { step, className, isLast, 'data-test-id': testId } = _a, props = __rest(_a, ["step", "className", "isLast", 'data-test-id']);
|
|
25
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("button", Object.assign({ className: styles.content, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state }, { children: [_jsx(Icon, Object.assign({}, step, { className: styles.icon })), _jsx(Typography, Object.assign({ className: styles.title, tag:
|
|
25
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("button", Object.assign({ className: styles.content, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state }, { children: [_jsx(Icon, Object.assign({}, step, { className: styles.icon })), _jsx(Typography.SansBodyM, Object.assign({ className: styles.title, tag: 'div' }, { children: _jsx(TruncateString, { text: step.title }) }))] })), !isLast && (_jsx("div", Object.assign({ className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId) }, { children: _jsx("div", { className: styles.tailLine }) })))] })));
|
|
26
26
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './components';
|
|
2
|
-
export
|
|
2
|
+
export { useStepperApi } from './StepperContext';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './components';
|
|
2
|
-
export
|
|
2
|
+
export { useStepperApi } from './StepperContext';
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ValueOf } from '@snack-uikit/utils';
|
|
2
|
+
import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
|
|
3
|
+
export type StepState = ValueOf<typeof STEP_STATE>;
|
|
4
|
+
export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
|
|
2
5
|
export type StepData = {
|
|
3
6
|
title: string;
|
|
4
7
|
validation?(): Promise<StepValidationResult>;
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Stepper",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.4.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@snack-uikit/icons": "0.19.0",
|
|
36
|
-
"@snack-uikit/loaders": "0.
|
|
37
|
-
"@snack-uikit/truncate-string": "0.
|
|
38
|
-
"@snack-uikit/typography": "0.
|
|
39
|
-
"@snack-uikit/utils": "3.
|
|
36
|
+
"@snack-uikit/loaders": "0.5.0",
|
|
37
|
+
"@snack-uikit/truncate-string": "0.4.0",
|
|
38
|
+
"@snack-uikit/typography": "0.6.0",
|
|
39
|
+
"@snack-uikit/utils": "3.2.0",
|
|
40
40
|
"classnames": "2.3.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
|
|
43
43
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext } from 'react';
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
2
|
|
|
3
3
|
import { StepperApi } from '../types';
|
|
4
4
|
|
|
@@ -18,3 +18,5 @@ export const StepperContext = createContext<StepperApi>({
|
|
|
18
18
|
/* stub */
|
|
19
19
|
},
|
|
20
20
|
});
|
|
21
|
+
|
|
22
|
+
export const useStepperApi = () => useContext(StepperContext);
|
|
@@ -3,10 +3,10 @@ import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import { STEP_STATE, STEP_VALIDATION_RESULT } from '../../constants';
|
|
7
7
|
import { Step } from '../../helperComponents';
|
|
8
8
|
import { StepperContext } from '../../StepperContext';
|
|
9
|
-
import { StepData, StepperApi, StepViewData } from '../../types';
|
|
9
|
+
import { StepData, StepperApi, StepState, StepViewData } from '../../types';
|
|
10
10
|
import styles from './styles.module.scss';
|
|
11
11
|
|
|
12
12
|
export type StepperState = StepperApi & {
|
|
@@ -42,8 +42,8 @@ export function Stepper({
|
|
|
42
42
|
...props
|
|
43
43
|
}: StepperProps) {
|
|
44
44
|
const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
|
|
45
|
-
const [currentStepState, setCurrentStepState] = useState(
|
|
46
|
-
isCompletedByDefault ?
|
|
45
|
+
const [currentStepState, setCurrentStepState] = useState<StepState>(
|
|
46
|
+
isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current,
|
|
47
47
|
);
|
|
48
48
|
const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
|
|
49
49
|
const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
|
|
@@ -71,31 +71,31 @@ export function Stepper({
|
|
|
71
71
|
|
|
72
72
|
const currentStep = steps[currentStepIndex];
|
|
73
73
|
|
|
74
|
-
const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(
|
|
74
|
+
const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(STEP_STATE.Completed);
|
|
75
75
|
|
|
76
|
-
setCurrentStepState(
|
|
76
|
+
setCurrentStepState(STEP_STATE.Loading);
|
|
77
77
|
|
|
78
78
|
stepperValidPromise
|
|
79
79
|
.then(validationResult => {
|
|
80
80
|
switch (validationResult) {
|
|
81
|
-
case
|
|
81
|
+
case STEP_VALIDATION_RESULT.Completed:
|
|
82
82
|
if (currentStepIndex === steps.length - 1) {
|
|
83
83
|
// завершился последний шаг
|
|
84
|
-
setCurrentStepState(
|
|
84
|
+
setCurrentStepState(STEP_STATE.Completed);
|
|
85
85
|
setIsCompleted(true);
|
|
86
86
|
} else {
|
|
87
87
|
setCurrentStepIndex(currentStepIndex + 1);
|
|
88
|
-
setCurrentStepState(
|
|
88
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
89
89
|
}
|
|
90
90
|
return;
|
|
91
|
-
case
|
|
92
|
-
setCurrentStepState(
|
|
91
|
+
case STEP_VALIDATION_RESULT.Rejected:
|
|
92
|
+
setCurrentStepState(STEP_STATE.Rejected);
|
|
93
93
|
return;
|
|
94
94
|
default:
|
|
95
|
-
setCurrentStepState(
|
|
95
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
96
96
|
}
|
|
97
97
|
})
|
|
98
|
-
.catch(() => setCurrentStepState(
|
|
98
|
+
.catch(() => setCurrentStepState(STEP_STATE.Rejected));
|
|
99
99
|
}, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
|
|
100
100
|
|
|
101
101
|
const goPrev = useCallback(
|
|
@@ -113,7 +113,7 @@ export function Stepper({
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
setCurrentStepIndex(index);
|
|
116
|
-
setCurrentStepState(
|
|
116
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
117
117
|
},
|
|
118
118
|
[currentStepIndex, isCompleted, setCurrentStepIndex],
|
|
119
119
|
);
|
|
@@ -124,7 +124,7 @@ export function Stepper({
|
|
|
124
124
|
const number = index + 1;
|
|
125
125
|
|
|
126
126
|
if (index < currentStepIndex) {
|
|
127
|
-
return { ...step, number, state:
|
|
127
|
+
return { ...step, number, state: STEP_STATE.Completed, onClick: () => goPrev(index) };
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
if (index === currentStepIndex) {
|
|
@@ -132,17 +132,17 @@ export function Stepper({
|
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
if (index - 1 === currentStepIndex) {
|
|
135
|
-
return { ...step, number, state:
|
|
135
|
+
return { ...step, number, state: STEP_STATE.Waiting, onClick: () => goNext() };
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
return { ...step, number, state:
|
|
138
|
+
return { ...step, number, state: STEP_STATE.Waiting };
|
|
139
139
|
}),
|
|
140
140
|
[steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext],
|
|
141
141
|
);
|
|
142
142
|
|
|
143
143
|
const resetValidation = useCallback(() => {
|
|
144
|
-
if (currentStepState ===
|
|
145
|
-
setCurrentStepState(
|
|
144
|
+
if (currentStepState === STEP_STATE.Rejected) {
|
|
145
|
+
setCurrentStepState(STEP_STATE.Current);
|
|
146
146
|
}
|
|
147
147
|
}, [currentStepState]);
|
|
148
148
|
|
|
@@ -163,5 +163,3 @@ export function Stepper({
|
|
|
163
163
|
|
|
164
164
|
return <StepperContext.Provider value={stepperApi}>{children({ stepper, ...stepperApi })}</StepperContext.Provider>;
|
|
165
165
|
}
|
|
166
|
-
|
|
167
|
-
Stepper.validationResults = StepValidationResult;
|
package/src/constants.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export
|
|
2
|
-
Completed
|
|
3
|
-
Current
|
|
4
|
-
Loading
|
|
5
|
-
Waiting
|
|
6
|
-
Rejected
|
|
7
|
-
}
|
|
1
|
+
export const STEP_STATE = {
|
|
2
|
+
Completed: 'completed',
|
|
3
|
+
Current: 'current',
|
|
4
|
+
Loading: 'loading',
|
|
5
|
+
Waiting: 'waiting',
|
|
6
|
+
Rejected: 'rejected',
|
|
7
|
+
} as const;
|
|
8
8
|
|
|
9
|
-
export
|
|
10
|
-
Completed
|
|
11
|
-
Rejected
|
|
12
|
-
}
|
|
9
|
+
export const STEP_VALIDATION_RESULT = {
|
|
10
|
+
Completed: 'completed',
|
|
11
|
+
Rejected: 'rejected',
|
|
12
|
+
} as const;
|
|
@@ -5,7 +5,8 @@ import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
|
|
|
5
5
|
import { Sun } from '@snack-uikit/loaders';
|
|
6
6
|
import { Typography } from '@snack-uikit/typography';
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { STEP_STATE } from '../../constants';
|
|
9
|
+
import { StepState } from '../../types';
|
|
9
10
|
import styles from './styles.module.scss';
|
|
10
11
|
|
|
11
12
|
export type IconProps = {
|
|
@@ -16,12 +17,12 @@ export type IconProps = {
|
|
|
16
17
|
|
|
17
18
|
function getContent(state: StepState, number: number) {
|
|
18
19
|
switch (state) {
|
|
19
|
-
case
|
|
20
|
+
case STEP_STATE.Completed:
|
|
20
21
|
return <CheckSVG />;
|
|
21
|
-
case
|
|
22
|
+
case STEP_STATE.Rejected:
|
|
22
23
|
return <CrossSVG />;
|
|
23
|
-
case
|
|
24
|
-
return <Sun size=
|
|
24
|
+
case STEP_STATE.Loading:
|
|
25
|
+
return <Sun size='s' />;
|
|
25
26
|
default:
|
|
26
27
|
return number;
|
|
27
28
|
}
|
|
@@ -4,7 +4,7 @@ import { TruncateString } from '@snack-uikit/truncate-string';
|
|
|
4
4
|
import { Typography } from '@snack-uikit/typography';
|
|
5
5
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { STEP_STATE } from '../../constants';
|
|
8
8
|
import { StepViewData } from '../../types';
|
|
9
9
|
import { getTestIdBuilder } from '../../utils';
|
|
10
10
|
import { Icon } from '../Icon';
|
|
@@ -30,20 +30,14 @@ export function Step({ step, className, isLast, 'data-test-id': testId, ...props
|
|
|
30
30
|
data-state={step.state}
|
|
31
31
|
>
|
|
32
32
|
<Icon {...step} className={styles.icon} />
|
|
33
|
-
<Typography
|
|
34
|
-
className={styles.title}
|
|
35
|
-
tag={Typography.tags.div}
|
|
36
|
-
family={Typography.families.Sans}
|
|
37
|
-
role={Typography.roles.Body}
|
|
38
|
-
size={Typography.sizes.M}
|
|
39
|
-
>
|
|
33
|
+
<Typography.SansBodyM className={styles.title} tag='div'>
|
|
40
34
|
<TruncateString text={step.title} />
|
|
41
|
-
</Typography>
|
|
35
|
+
</Typography.SansBodyM>
|
|
42
36
|
</button>
|
|
43
37
|
{!isLast && (
|
|
44
38
|
<div
|
|
45
39
|
className={styles.tail}
|
|
46
|
-
data-completed={step.state ===
|
|
40
|
+
data-completed={step.state === STEP_STATE.Completed || undefined}
|
|
47
41
|
data-test-id={getTailTestId(testId)}
|
|
48
42
|
>
|
|
49
43
|
<div className={styles.tailLine} />
|
package/src/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './components';
|
|
2
|
-
export
|
|
2
|
+
export { useStepperApi } from './StepperContext';
|
package/src/types.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ValueOf } from '@snack-uikit/utils';
|
|
2
|
+
|
|
3
|
+
import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
|
|
4
|
+
|
|
5
|
+
export type StepState = ValueOf<typeof STEP_STATE>;
|
|
6
|
+
|
|
7
|
+
export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
|
|
2
8
|
|
|
3
9
|
export type StepData = {
|
|
4
10
|
title: string;
|
package/dist/hooks.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useStepperApi: () => import("./types").StepperApi;
|
package/dist/hooks.js
DELETED