@snack-uikit/stepper 0.5.10-preview-8e2ed733.0 → 0.5.10-preview-e59b2871.0

package/README.md

@@ -48,7 +48,7 @@ return (
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| 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[]` | - | Массив шагов |
 | defaultCurrentStepIndex | `number` | - | Индекс текущего шага по-дефолту |
 | className | `string` | - | CSS-класс |

package/dist/StepperContext/StepperContext.js

@@ -1,5 +1,7 @@
+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,
     isCompleted: false,
     currentStepIndex: 0,
@@ -9,7 +11,10 @@ export const StepperContext = createContext({
     goPrev() {
         /* stub */
     },
-    setValidation() {
+    resetValidation() {
+        /* stub */
+    },
+    setValidator() {
         /* stub */
     },
 });

package/dist/components/Stepper/Stepper.d.ts

@@ -13,7 +13,7 @@ export type StepperProps = WithSupportProps<{
     className?: string;
     /**
      * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
-     * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `setValidation` - установить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+     * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
      * @type ({stepper, ...api}) => ReactElement
      */
     children: (params: StepperState) => ReactElement;

package/dist/components/Stepper/Stepper.js

@@ -23,6 +23,7 @@ export function Stepper(_a) {
     const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
     const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
     const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+    const [stepsValidator, setStepsValidator] = useState();
     useEffect(() => {
         onCompleteChange === null || onCompleteChange === void 0 ? void 0 : onCompleteChange(isCompleted);
     }, [isCompleted, onCompleteChange]);
@@ -35,14 +36,20 @@ export function Stepper(_a) {
         });
     }, [onChangeCurrentStep]);
     const goNext = useCallback(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (currentStepIndex >= steps.length || isCompleted) {
             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 => {
             switch (validationResult) {
                 case STEP_VALIDATION_RESULT.Completed:
@@ -64,7 +71,7 @@ export function Stepper(_a) {
             }
         })
             .catch(() => setCurrentStepState(STEP_STATE.Rejected));
-    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps, stepsValidator]);
     const goPrev = useCallback((index = currentStepIndex - 1) => {
         if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
             return;
@@ -91,16 +98,21 @@ export function Stepper(_a) {
         }
         return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting });
     }), [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) });
 }

package/dist/types.d.ts

@@ -1,7 +1,9 @@
+import { JSX } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
 import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
 export type StepState = ValueOf<typeof STEP_STATE>;
 export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
+export type StepsValidator = (stepIndex: number) => Promise<StepValidationResult>;
 export type StepData = {
     title: string;
     description?: string;
@@ -13,9 +15,11 @@ export type StepViewData = StepData & {
     number: number;
 };
 export type StepperApi = {
+    stepper: JSX.Element;
     goNext(): void;
     goPrev(): void;
-    setValidation(isValid: boolean | Promise<boolean>): void;
+    resetValidation(): void;
+    setValidator(validator: StepsValidator): void;
     isCompleted: boolean;
     currentStepIndex: number;
     stepCount: number;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.5.10-preview-8e2ed733.0",
+  "version": "0.5.10-preview-e59b2871.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "98c8bfc998da448c39972953e87601d5174e1e23"
+  "gitHead": "1f6f70cea8ded89a952f288fefe362231ea3404b"
 }

package/src/StepperContext/{StepperContext.ts → StepperContext.tsx}

@@ -5,6 +5,7 @@ import { StepperApi } from '../types';
 export type StepperContextValue = StepperApi;
 
 export const StepperContext = createContext<StepperApi>({
+  stepper: <></>,
   stepCount: 0,
   isCompleted: false,
   currentStepIndex: 0,
@@ -14,7 +15,10 @@ export const StepperContext = createContext<StepperApi>({
   goPrev() {
     /* stub */
   },
-  setValidation() {
+  resetValidation() {
+    /* stub */
+  },
+  setValidator() {
     /* stub */
   },
 });

package/src/components/Stepper/Stepper.tsx

@@ -6,7 +6,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { STEP_STATE, STEP_VALIDATION_RESULT } from '../../constants';
 import { Step } from '../../helperComponents';
 import { StepperContext } from '../../StepperContext';
-import { StepData, StepperApi, StepState, StepViewData } from '../../types';
+import { StepData, StepperApi, StepState, StepsValidator, StepViewData } from '../../types';
 import styles from './styles.module.scss';
 
 export type StepperState = StepperApi & {
@@ -22,7 +22,7 @@ export type StepperProps = WithSupportProps<{
   className?: string;
   /**
    * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
-   * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `setValidation` - установить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+   * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
    * @type ({stepper, ...api}) => ReactElement
    */
   children: (params: StepperState) => ReactElement;
@@ -47,6 +47,7 @@ export function Stepper({
   );
   const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
   const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+  const [stepsValidator, setStepsValidator] = useState<StepsValidator>();
 
   useEffect(() => {
     onCompleteChange?.(isCompleted);
@@ -71,11 +72,18 @@ export function Stepper({
 
     const currentStep = steps[currentStepIndex];
 
-    const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(STEP_STATE.Completed);
-
     setCurrentStepState(STEP_STATE.Loading);
 
-    stepperValidPromise
+    Promise.all([
+      currentStep.validation?.() ?? Promise.resolve(STEP_STATE.Completed),
+      stepsValidator?.(currentStepIndex) ?? 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 => {
         switch (validationResult) {
           case STEP_VALIDATION_RESULT.Completed:
@@ -96,7 +104,7 @@ export function Stepper({
         }
       })
       .catch(() => setCurrentStepState(STEP_STATE.Rejected));
-  }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
+  }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps, stepsValidator]);
 
   const goPrev = useCallback(
     (index: number = currentStepIndex - 1) => {
@@ -140,18 +148,11 @@ export function Stepper({
     [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext],
   );
 
-  const setValidation = useCallback((isValid: boolean | Promise<boolean>) => {
-    const setValidationValue = (isValid: boolean) =>
-      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 = (
     <div className={cn(styles.stepper, className)} {...extractSupportProps(props)}>
@@ -166,7 +167,16 @@ export function Stepper({
     </div>
   );
 
-  const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, setValidation, stepCount: steps.length };
-
-  return <StepperContext.Provider value={stepperApi}>{children({ stepper, ...stepperApi })}</StepperContext.Provider>;
+  const stepperApi = {
+    goNext,
+    goPrev,
+    currentStepIndex,
+    isCompleted,
+    resetValidation,
+    stepCount: steps.length,
+    stepper,
+    setValidator: setStepsValidator,
+  };
+
+  return <StepperContext.Provider value={stepperApi}>{children(stepperApi)}</StepperContext.Provider>;
 }

package/src/types.ts

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+
 import { ValueOf } from '@snack-uikit/utils';
 
 import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
@@ -6,6 +8,8 @@ export type StepState = ValueOf<typeof STEP_STATE>;
 
 export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
 
+export type StepsValidator = (stepIndex: number) => Promise<StepValidationResult>;
+
 export type StepData = {
   title: string;
   description?: string;
@@ -19,9 +23,11 @@ export type StepViewData = StepData & {
 };
 
 export type StepperApi = {
+  stepper: JSX.Element;
   goNext(): void;
   goPrev(): void;
-  setValidation(isValid: boolean | Promise<boolean>): void;
+  resetValidation(): void;
+  setValidator(validator: StepsValidator): void;
   isCompleted: boolean;
   currentStepIndex: number;
   stepCount: number;