@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 },
];

// ...

return (
  <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-класс