@snack-uikit/stepper 0.5.10-preview-96ca8003.0 → 0.5.10-preview-fa22a93d.0

package/README.md

@@ -10,27 +10,28 @@
 #### Использование
 
 Компонент принимает массив шагов. В проп children принимает render-колбек, в который отдает сам компонент, методы управления и поля состояния.
-При вызове метода `goNext` вызывается валидация текущего шага. Функция валидации должна вернуть результат валидации в Promise. При успешной валдиции компонент переходит на следующий шаг, а при ошибке остается на текущем.
+При вызове метода `goNext` вызывается валидация текущего шага. Функция валидации принимает индекс текущего шага и должна вернуть результат валидации в Promise<boolean>. При успешной валдиции компонент переходит на следующий шаг, а при ошибке остается на текущем.
 При вызове метода `goPrev` компонент переходит на предыдущий шаг.
 
 
 ```tsx
 const steps = [
-  { title: 'Step #1', validation: validation1 },
-  { title: 'Step #2', validation: validation2 },
-  { title: 'Step #3', validation: validation3 },
-  { title: 'Step #4', validation: validation4 },
+  { title: 'Step #1' },
+  { title: 'Step #2' },
+  { title: 'Step #3' },
+  { title: 'Step #4' },
 ];
 
 // ...
 
 return (
-  <Stepper steps={steps}>
+  <Stepper steps={steps} validator={validatorFunction}>
     {({
         stepper, // JSX элемент компонента
         isCompleted, // состояние завершенности всей цепочки
         goNext, // функция перехода к след. шагу
         goPrev, // функция перехода к предыдущему шагу
+        setValidator, // функция установки валидатора
       }) => (
       <>
         {stepper}
@@ -48,9 +49,10 @@ return (
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
+| children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext(stepIndex?: number)` - перейти на след. шаг, `goPrev(stepIndex?: number)` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` переопределяет функцию-валидатор, которая принимает в параметры индекс текущего шага и индекс нового, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
 | steps* | `StepData[]` | - | Массив шагов |
 | defaultCurrentStepIndex | `number` | - | Индекс текущего шага по-дефолту |
+| validator | `StepsValidator` | - | Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым - индекс нового шага. |
 | className | `string` | - | CSS-класс |
 | onChangeCurrentStep | `(newValue: number, prevValue: number) => void` | - | Колбек смены текущего степа |
 | onCompleteChange | `(isCompleted: boolean) => void` | - | Колбек изменения завершенности |

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { StepData, StepperApi } from '../../types';
+import { StepData, StepperApi, StepsValidator } from '../../types';
 export type StepperState = StepperApi & {
     stepper: ReactElement;
 };
@@ -9,11 +9,13 @@ export type StepperProps = WithSupportProps<{
     steps: StepData[];
     /** Индекс текущего шага по-дефолту */
     defaultCurrentStepIndex: number;
+    /** Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым - индекс нового шага.  */
+    validator?: StepsValidator;
     /** CSS-класс */
     className?: string;
     /**
      * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
-     * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+     * `goNext(stepIndex?: number)` - перейти на след. шаг, `goPrev(stepIndex?: number)` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` переопределяет функцию-валидатор, которая принимает в параметры индекс текущего шага и индекс нового, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
      * @type ({stepper, ...api}) => ReactElement
      */
     children: (params: StepperState) => ReactElement;
@@ -22,4 +24,4 @@ export type StepperProps = WithSupportProps<{
     /** Колбек изменения завершенности */
     onCompleteChange?: (isCompleted: boolean) => void;
 }>;
-export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,8 +26,9 @@ import { STEP_STATE } from '../../constants';
 import { Step } from '../../helperComponents';
 import { StepperContext } from '../../StepperContext';
 import styles from './styles.module.css';
+const DEFAULT_VALIDATOR = () => __awaiter(void 0, void 0, void 0, function* () { return true; });
 export function Stepper(_a) {
-    var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0 } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex"]);
+    var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0, validator: validatorProp = DEFAULT_VALIDATOR } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator"]);
     const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
     const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
     const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
@@ -35,18 +45,14 @@ export function Stepper(_a) {
             return newValue;
         });
     }, [onChangeCurrentStep]);
-    const goNext = useCallback(() => {
-        var _a, _b, _c;
-        if (currentStepIndex >= steps.length || isCompleted) {
+    const goNext = useCallback((newStepIndexUnsafety = currentStepIndex + 1) => {
+        if (currentStepIndex >= steps.length || isCompleted || newStepIndexUnsafety <= currentStepIndex) {
             return;
         }
-        const currentStep = steps[currentStepIndex];
+        const newStepIndex = Math.min(steps.length - 1, newStepIndexUnsafety);
         setCurrentStepState(STEP_STATE.Loading);
-        Promise.all([
-            (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(true),
-            (_c = stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value(currentStepIndex)) !== null && _c !== void 0 ? _c : Promise.resolve(true),
-        ])
-            .then(results => results.every(isValid => isValid))
+        const validator = (stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value) || validatorProp;
+        validator(currentStepIndex, newStepIndex)
             .catch(() => false)
             .then(isValid => {
             if (!isValid) {
@@ -59,11 +65,11 @@ export function Stepper(_a) {
                 setIsCompleted(true);
             }
             else {
-                setCurrentStepIndex(currentStepIndex + 1);
+                setCurrentStepIndex(newStepIndex);
                 setCurrentStepState(STEP_STATE.Current);
             }
         });
-    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps, stepsValidator]);
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value, validatorProp]);
     const goPrev = useCallback((index = currentStepIndex - 1) => {
         if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
             return;

package/dist/types.d.ts

@@ -2,11 +2,10 @@ import { JSX } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
 import { STEP_STATE } from './constants';
 export type StepState = ValueOf<typeof STEP_STATE>;
-export type StepsValidator = (stepIndex: number) => Promise<boolean>;
+export type StepsValidator = (prevStepIndex: number, newStepIndex: number) => Promise<boolean>;
 export type StepData = {
     title: string;
     description?: string;
-    validation?(): Promise<boolean>;
 };
 export type StepViewData = StepData & {
     onClick?(): void;
@@ -15,8 +14,8 @@ export type StepViewData = StepData & {
 };
 export type StepperApi = {
     stepper: JSX.Element;
-    goNext(): void;
-    goPrev(): void;
+    goNext(stepIndex?: number): void;
+    goPrev(stepIndex?: number): void;
     resetValidation(): void;
     setValidator(validator: StepsValidator): void;
     isCompleted: boolean;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.5.10-preview-96ca8003.0",
+  "version": "0.5.10-preview-fa22a93d.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "f34f4124d15e2215a4eca379bb530b21cf63b87b"
+  "gitHead": "8bc73eadbb15f1db5f9778820a423c54170732f9"
 }

package/src/components/Stepper/Stepper.tsx

@@ -18,11 +18,13 @@ export type StepperProps = WithSupportProps<{
   steps: StepData[];
   /** Индекс текущего шага по-дефолту */
   defaultCurrentStepIndex: number;
+  /** Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым - индекс нового шага.  */
+  validator?: StepsValidator;
   /** CSS-класс */
   className?: string;
   /**
    * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
-   * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` добавляет функцию-валидатор, которая принимает в параметры индекс текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+   * `goNext(stepIndex?: number)` - перейти на след. шаг, `goPrev(stepIndex?: number)` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` переопределяет функцию-валидатор, которая принимает в параметры индекс текущего шага и индекс нового, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
    * @type ({stepper, ...api}) => ReactElement
    */
   children: (params: StepperState) => ReactElement;
@@ -32,6 +34,8 @@ export type StepperProps = WithSupportProps<{
   onCompleteChange?: (isCompleted: boolean) => void;
 }>;
 
+const DEFAULT_VALIDATOR = async () => true;
+
 export function Stepper({
   children,
   steps,
@@ -39,6 +43,7 @@ export function Stepper({
   onChangeCurrentStep,
   onCompleteChange,
   defaultCurrentStepIndex = 0,
+  validator: validatorProp = DEFAULT_VALIDATOR,
   ...props
 }: StepperProps) {
   const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
@@ -65,37 +70,38 @@ export function Stepper({
     [onChangeCurrentStep],
   );
 
-  const goNext = useCallback(() => {
-    if (currentStepIndex >= steps.length || isCompleted) {
-      return;
-    }
-
-    const currentStep = steps[currentStepIndex];
-
-    setCurrentStepState(STEP_STATE.Loading);
-
-    Promise.all([
-      currentStep.validation?.() ?? Promise.resolve(true),
-      stepsValidator?.value(currentStepIndex) ?? Promise.resolve(true),
-    ])
-      .then(results => results.every(isValid => isValid))
-      .catch(() => false)
-      .then(isValid => {
-        if (!isValid) {
-          setCurrentStepState(STEP_STATE.Rejected);
-          return;
-        }
+  const goNext = useCallback(
+    (newStepIndexUnsafety: number = currentStepIndex + 1) => {
+      if (currentStepIndex >= steps.length || isCompleted || newStepIndexUnsafety <= currentStepIndex) {
+        return;
+      }
 
-        if (currentStepIndex === steps.length - 1) {
-          // завершился последний шаг
-          setCurrentStepState(STEP_STATE.Completed);
-          setIsCompleted(true);
-        } else {
-          setCurrentStepIndex(currentStepIndex + 1);
-          setCurrentStepState(STEP_STATE.Current);
-        }
-      });
-  }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps, stepsValidator]);
+      const newStepIndex = Math.min(steps.length - 1, newStepIndexUnsafety);
+
+      setCurrentStepState(STEP_STATE.Loading);
+
+      const validator = stepsValidator?.value || validatorProp;
+
+      validator(currentStepIndex, newStepIndex)
+        .catch(() => false)
+        .then(isValid => {
+          if (!isValid) {
+            setCurrentStepState(STEP_STATE.Rejected);
+            return;
+          }
+
+          if (currentStepIndex === steps.length - 1) {
+            // завершился последний шаг
+            setCurrentStepState(STEP_STATE.Completed);
+            setIsCompleted(true);
+          } else {
+            setCurrentStepIndex(newStepIndex);
+            setCurrentStepState(STEP_STATE.Current);
+          }
+        });
+    },
+    [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator?.value, validatorProp],
+  );
 
   const goPrev = useCallback(
     (index: number = currentStepIndex - 1) => {

package/src/types.ts

@@ -6,12 +6,11 @@ import { STEP_STATE } from './constants';
 
 export type StepState = ValueOf<typeof STEP_STATE>;
 
-export type StepsValidator = (stepIndex: number) => Promise<boolean>;
+export type StepsValidator = (prevStepIndex: number, newStepIndex: number) => Promise<boolean>;
 
 export type StepData = {
   title: string;
   description?: string;
-  validation?(): Promise<boolean>;
 };
 
 export type StepViewData = StepData & {
@@ -22,8 +21,8 @@ export type StepViewData = StepData & {
 
 export type StepperApi = {
   stepper: JSX.Element;
-  goNext(): void;
-  goPrev(): void;
+  goNext(stepIndex?: number): void;
+  goPrev(stepIndex?: number): void;
   resetValidation(): void;
   setValidator(validator: StepsValidator): void;
   isCompleted: boolean;