@snack-uikit/stepper - npm Package Compare versions

Comparing version 0.5.10-preview-8e2ed733.0 to 0.5.10-preview-e59b2871.0

dist/components/Stepper/Stepper.d.ts

@@ -16,3 +16,3 @@ import { ReactElement } from 'react';
      * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
-     * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `setValidation` - установить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+     * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
      * @type ({stepper, ...api}) => ReactElement
@@ -19,0 +19,0 @@ */

dist/components/Stepper/Stepper.js

@@ -26,2 +26,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+    const [stepsValidator, setStepsValidator] = useState();
     useEffect(() => {
@@ -39,3 +40,3 @@ onCompleteChange === null || onCompleteChange === void 0 ? void 0 : onCompleteChange(isCompleted);
     const goNext = useCallback(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (currentStepIndex >= steps.length || isCompleted) {
@@ -45,5 +46,11 @@ return;
         const currentStep = steps[currentStepIndex];
-        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);
         setCurrentStepState(STEP_STATE.Loading);
-        stepperValidPromise
+        Promise.all([
+            (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(STEP_STATE.Completed),
+            (_c = stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator(currentStepIndex)) !== null && _c !== void 0 ? _c : Promise.resolve(STEP_STATE.Completed),
+        ])
+            .then(results => results.every(result => result === STEP_VALIDATION_RESULT.Completed)
+            ? STEP_VALIDATION_RESULT.Completed
+            : STEP_VALIDATION_RESULT.Rejected)
+            .catch(() => STEP_VALIDATION_RESULT.Rejected)
             .then(validationResult => {
@@ -70,3 +77,3 @@ switch (validationResult) {
             .catch(() => setCurrentStepState(STEP_STATE.Rejected));
-    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps, stepsValidator]);
     const goPrev = useCallback((index = currentStepIndex - 1) => {
@@ -98,14 +105,19 @@ if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
     }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
-    const setValidation = useCallback((isValid) => {
-        const setValidationValue = (isValid) => setCurrentStepState(isValid ? STEP_STATE.Current : STEP_STATE.Rejected);
-        if (isValid instanceof Promise) {
-            setCurrentStepState(STEP_STATE.Loading);
-            isValid.then(setValidationValue).catch(() => setValidationValue(false));
-            return;
+    const resetValidation = useCallback(() => {
+        if (currentStepState === STEP_STATE.Rejected) {
+            setCurrentStepState(STEP_STATE.Current);
         }
-        setValidationValue(isValid);
-    }, []);
+    }, [currentStepState]);
     const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index) => (_jsx(Step, { step: step, "data-test-id": props['data-test-id'], hideTailLine: index === steps.length - 1 }, step.title + index))) })));
-    const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, setValidation, stepCount: steps.length };
-    return _jsx(StepperContext.Provider, { value: stepperApi, children: children(Object.assign({ stepper }, stepperApi)) });
+    const stepperApi = {
+        goNext,
+        goPrev,
+        currentStepIndex,
+        isCompleted,
+        resetValidation,
+        stepCount: steps.length,
+        stepper,
+        setValidator: setStepsValidator,
+    };
+    return _jsx(StepperContext.Provider, { value: stepperApi, children: children(stepperApi) });
 }

dist/StepperContext/StepperContext.js

@@ -0,3 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const StepperContext = createContext({
+    stepper: _jsx(_Fragment, {}),
     stepCount: 0,
@@ -12,6 +14,9 @@ isCompleted: false,
     },
-    setValidation() {
+    resetValidation() {
         /* stub */
     },
+    setValidator() {
+        /* stub */
+    },
 });
 export const useStepperApi = () => useContext(StepperContext);

dist/types.d.ts

@@ -0,1 +1,2 @@
+import { JSX } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
@@ -5,2 +6,3 @@ import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
 export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
+export type StepsValidator = (stepIndex: number) => Promise<StepValidationResult>;
 export type StepData = {
@@ -17,5 +19,7 @@ title: string;
 export type StepperApi = {
+    stepper: JSX.Element;
     goNext(): void;
     goPrev(): void;
-    setValidation(isValid: boolean | Promise<boolean>): void;
+    resetValidation(): void;
+    setValidator(validator: StepsValidator): void;
     isCompleted: boolean;
@@ -22,0 +26,0 @@ currentStepIndex: number;

package.json

@@ -7,3 +7,3 @@ {
   "title": "Stepper",
-  "version": "0.5.10-preview-8e2ed733.0",
+  "version": "0.5.10-preview-e59b2871.0",
   "sideEffects": [
@@ -43,3 +43,3 @@ "*.css",
   },
-  "gitHead": "98c8bfc998da448c39972953e87601d5174e1e23"
+  "gitHead": "1f6f70cea8ded89a952f288fefe362231ea3404b"
 }

README.md

@@ -51,3 +51,3 @@ # Stepper
 |------|------|---------------|-------------|
-| children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `setValidation` - установить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
+| children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
 | steps* | `StepData[]` | - | Массив шагов |
@@ -54,0 +54,0 @@ | defaultCurrentStepIndex | `number` | - | Индекс текущего шага по-дефолту |

src/types.ts

@@ -0,1 +1,3 @@
+import { JSX } from 'react';
+
 import { ValueOf } from '@snack-uikit/utils';
@@ -9,2 +11,4 @@
 
+export type StepsValidator = (stepIndex: number) => Promise<StepValidationResult>;
+
 export type StepData = {
@@ -23,5 +27,7 @@ title: string;
 export type StepperApi = {
+  stepper: JSX.Element;
   goNext(): void;
   goPrev(): void;
-  setValidation(isValid: boolean | Promise<boolean>): void;
+  resetValidation(): void;
+  setValidator(validator: StepsValidator): void;
   isCompleted: boolean;
@@ -28,0 +34,0 @@ currentStepIndex: number;

No alert changes

Improved metrics

Total package byte prevSize

61640

2.62%

Lines of code

739

6.03%

No dependency changes