Stepper

Installation

npm i @snack-uikit/stepper

Changelog

Description

• Пакет @snack-uikit/stepper предоставляет компонент Stepper для отображения состояния пошагового процесса и управления навигацией между шагами.
• Компонент использует паттерн render prop: принимает функцию-колбек в пропе children, которая получает JSX-элемент степпера, методы управления навигацией (goNext, goPrev) и состояние процесса (isCompleted, currentStepIndex, stepCount).
• Поддерживает валидацию шагов через асинхронную функцию-валидатор (validator), которая вызывается при переходе на следующий шаг и должна вернуть Promise<boolean>: при успешной валидации происходит переход, при ошибке шаг остаётся в состоянии отклонения (rejected).
• Каждый шаг может находиться в одном из состояний: completed (завершён), current (текущий), loading (идёт валидация), waiting (ожидает выполнения) или rejected (отклонён).
• Позволяет навигироваться между шагами программно через методы API или кликом по шагам: можно перейти на следующий шаг, вернуться на предыдущий, а также кликнуть на завершённый шаг для возврата к нему.
• Поддерживает отслеживание завершённости всего процесса, сброс состояния валидации для текущего шага и динамическое переопределение валидатора через setValidator.
• Каждый шаг может содержать заголовок (title) и описание (description), которые отображаются в визуальном представлении степпера.
• Figma: Stepper.

Example

import { Stepper } from '@snack-uikit/stepper';

function Example() {
  const steps = [
    { title: 'First step', description: 'First step long description two lines truncated' },
    { title: 'Second step', description: 'Second step long description two lines truncated' },
    { title: 'Third step', description: 'Third step long description two lines truncated' },
    { title: 'Fourth step', description: 'Fourth step long description two lines truncated' },
  ];

  const validator = (currentStepIndex: number, newStepIndex: number) => {
    // Асинхронная валидация текущего шага
    return new Promise<boolean>(resolve => {
      setTimeout(() => {
        resolve(true); // или false при ошибке валидации
      }, 1000);
    });
  };

  return (
    <Stepper steps={steps} validator={validator}>
      {({ stepper, isCompleted, goNext, goPrev, resetValidation, currentStepIndex }) => (
        <>
          {stepper}
          <div>
            <button onClick={() => goPrev()}>Назад</button>
            <button onClick={() => goNext()}>Далее</button>
            <button onClick={resetValidation}>Сбросить валидацию</button>
          </div>
          <div>Текущий шаг: {currentStepIndex + 1}</div>
          <div>Процесс завершён: {isCompleted ? 'да' : 'нет'}</div>
        </>
      )}
    </Stepper>
  );
}

Stepper

Props

| name | type | default value | description | |------|------|---------------|-------------| | 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 | - | Колбек изменения завершенности | | allowFreeNavigation | boolean | - | Позволяет свободно переключаться между разными шагами без валидации |