PullToRefresh

Компонент для обновления контента жестом “потянуть вниз”. Работает на сенсорных устройствах и поддерживает управление состоянием загрузки.

Обязательные свойства

Обработчик `onRefresh`

Функция обновления данных (прим.: функция должна быть мемоизированным обработчиком)

Особенности работы

Управление состоянием

Устанавливайте isFetching={true} при начале загрузки.
Устанавливайте isFetching={false} после завершения загрузки.

Жест «потянуть вниз» недоступен пользователям ассистивных технологий: в VoiceOver смахивание тремя пальцами вниз не вызывает PullToRefresh.

Вместо жеста компонент отрисовывает скрытую кнопку «Обновить». Она в таб-фокусе, срабатывает с клавиатуры (Enter/Space) и объявляется скринридером. Кнопка вызывает тот же onRefresh и блокируется на время обновления. Состояние загрузки озвучивается через aria-busy и aria-live="polite".

Чтобы зрячий пользователь, навигирующийся с клавиатуры, видел, где оказался, кнопка (на базе Button) раскрывается во всплывающую при фокусе и скрывается при потере фокуса.

Тексты для скринридера переопределяются свойствами:

<PullToRefresh
  onRefresh={onRefresh}
  isFetching={fetching}
  accessibilityLabel="Лента пользователей"
  refreshLabel="Обновить ленту"
>
  {content}
</PullToRefresh>

accessibilityLabel — подпись области (по умолчанию «Обновление контента»).
refreshLabel — текст кнопки (по умолчанию «Обновить»).

Свойства и методы

Свойство	Описание
`accessibilityLabel`	`string` Текст, объявляемый скринридером для области обновления. ℹ️ Жест «потянуть вниз» недоступен для пользователей ассистивных технологий, поэтому компонент предоставляет скрытую кнопку «Обновить», доступную с клавиатуры и скринридера. По умолчанию: `Обновление контента`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`document`	`Document` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`isFetching`	`boolean` Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`. По умолчанию: `-`
`noSlideClick`	`boolean` Блокировать click-события после распознавания свайпа. По умолчанию: `-`
`onEnd`	`CustomTouchEventHandler` Общий обработчик завершения взаимодействия. По умолчанию: `-`
`onEndX`	`CustomTouchEventHandler` Обработчик завершения горизонтального свайпа. По умолчанию: `-`
`onEndY`	`CustomTouchEventHandler` Обработчик завершения вертикального свайпа. По умолчанию: `-`
`onEnter`	`HoverHandler` Обработчик входа курсора в область. По умолчанию: `-`
`onLeave`	`HoverHandler` Обработчик выхода курсора из области. По умолчанию: `-`
`onMove`	`CustomTouchEventHandler` Общий обработчик перемещения. По умолчанию: `-`
`onMoveX`	`CustomTouchEventHandler` Обработчик горизонтального перемещения. По умолчанию: `-`
`onMoveY`	`CustomTouchEventHandler` Обработчик вертикального перемещения. По умолчанию: `-`
`onRefresh`	`AnyFunction` Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным обработчиком). По умолчанию: `-`
`onStart`	`CustomTouchEventHandler` Общий обработчик начала взаимодействия. По умолчанию: `-`
`onStartX`	`CustomTouchEventHandler` Обработчик начала горизонтального перемещения. По умолчанию: `-`
`onStartY`	`CustomTouchEventHandler` Обработчик начала вертикального перемещения. По умолчанию: `-`
`refreshLabel`	`string` Текст скрытой кнопки, запускающей обновление для пользователей ассистивных технологий. По умолчанию: `Обновить`
`scroll`	`ScrollContextInterface` По умолчанию: `-`
`slideThreshold`	`number` Порог расстояния в пикселях для активации свайпа. По умолчанию: `5`
`slotProps`	`{ controls?: Pick<CSSProperties, "zIndex">; } \| undefined` Свойства, которые можно прокинуть внутрь компонента: `controls`: свойства контейнера спиннера. По умолчанию: `-`
`stopPropagation`	`boolean` Останавливать всплытие событий. По умолчанию: `-`
`useCapture`	`boolean` Использовать фазу capture для событий. По умолчанию: `-`
`usePointerHover`	`boolean` Использовать pointer-events для hover-состояний. Работает на отключенных элементах (disabled inputs). По умолчанию: `-`
`window`	`Window` По умолчанию: `-`

Progress

ScreenSpinner