@snack-uikit/stepper
v0.6.3
Published
Компонент отображения состояния пошагового процесса.
Downloads
322
Readme
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
| - | Колбек изменения завершенности |