@snack-uikit/stepper

Stepper

Компонент отображения состояния пошагового процесса.

Installation

npm i @snack-uikit/stepper

Changelog

Использование

Компонент принимает массив шагов. В проп children принимает render-колбек, в который отдает сам компонент, методы управления и поля состояния. При вызове метода goNext вызывается валидация текущего шага. Функция валидации должна вернуть результат валидации в Promise. При успешной валдиции компонент переходит на следующий шаг, а при ошибке остается на текущем. При вызове метода goPrev компонент переходит на предыдущий шаг.

const steps = [
  { title: 'Step #1', validation: validation1 },
  { title: 'Step #2', validation: validation2 },
  { title: 'Step #3', validation: validation3 },
  { title: 'Step #4', validation: validation4 },
]

<Stepper steps={steps}>
  {({
    stepper, // JSX элемент компонента
    isCompleted, // состояние завершенности всей цепочки
    goNext, // функция перехода к след. шагу
    goPrev, // функция перехода к предыдущему шагу
  }) => (
    <>
      {stepper}

      <button onClick={() => goPrev()}>go back</button>
      <button onClick={() => goNext()}>go next</button>
    </>
  )}
</Stepper>

Stepper

Props

name	type	default value	description
onCompleteChange*	(isCompleted: boolean) => void	-	Колбек изменения завершенности
onChangeCurrentStep*	(newValue: number, prevValue: number) => void	-	Колбек смены текущего степа
children*	({stepper, ...api}) => ReactElement	-	Render function. Принимает аргументы: stepper - JSX-элемент степпера, goNext - перейти на след. шаг, goPrev - перейти на пред. шаг, resetValidation - сбросить состояние валидации для текущего шага, isCompleted - окончен ли процесс, currentStepIndex - индекс текущего шага, stepCount - кол-во шагов.
steps*	StepData[]	-	Массив шагов
defaultCurrentStepIndex	number	-	Индекс текущего шага по-дефолту
className	string	-	CSS-класс