@snack-uikit/stepper NPM

Stepper

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

Installation

npm i @snack-uikit/stepper

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

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

const steps = [
  { title: 'Step #1' },
  { title: 'Step #2' },
  { title: 'Step #3' },
  { title: 'Step #4' },
];

// ...

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

        <button onClick={() => goPrev()}>go back</button>
        <button onClick={() => goNext()}>go next</button>
      </>
    )}
  </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`	-	Колбек изменения завершенности