MUI SwipeableDrawer остается наполовину открытым

На чтение 2 мин Опубликовано 02.10.2024

Вопрос или проблема

Когда я пытаюсь предотвратить закрытие выдвижного ящика при свайпе (на основе логики), он остается наполовину открытым и не восстанавливает свои первоначальные размеры.

const [open, setOpen] = useState(false)

<SwipeableDrawer
    anchor="bottom"
    open={open}
    onClose={() => {
      if (logic) {
        setOpen(false)
      }
    }}
    onOpen={() => setOpen(true)}
>
...
</SwipeableDrawer>

При свайпе для закрытия, если логика не выполнена, он остается наполовину открытым.

Как я могу заставить его восстановить свои первоначальные размеры, если закрытие предотвращено?

Не хочу инициировать это, изменяя его React key.

Версия MUI: 5.6.0

Ответ или решение

Чтобы решить проблему с компонентом SwipeableDrawer, который остается наполовину открытым при попытке его закрыть на основании некоторой логики, можно использовать обработчик события onSwipeEnd. В этом обработчике вы сможете вернуть состояние дровера в оригинальное положение, если логика не выполнена.

Вот пример того, как можно реализовать данный подход:

import React, { useState } from 'react';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';

const MyComponent = () => {
    const [open, setOpen] = useState(false);

    const handleClose = () => {
        // Здесь проверьте вашу логику
        if (logic) {
            setOpen(false);
        }
        // Если логика не выполнена, мы здесь ничего не делаем
    };

    const handleSwipeEnd = (event) => {
        // Проверяем состояние о том, был ли дровер открыт или закрыт
        if (!open) {
            setOpen(false); // Если он был закрыт, не нужно ничего делать
        } else {
            // Если он был открыт, поднимаем его снова
            setOpen(true); // Возвращаем дровер в исходное состояние
        }
    };

    return (
        <SwipeableDrawer
            anchor="bottom"
            open={open}
            onClose={handleClose}
            onOpen={() => setOpen(true)}
            onSwipeEnd={handleSwipeEnd} // Добавляем обработчик события окончательной прокрутки
        >
            {/* Ваше содержимое дровера здесь */}
        </SwipeableDrawer>
    );
};

export default MyComponent;

В этом примере мы добавили обработчик onSwipeEnd, который проверяет, было ли состояние дровера открытым или закрытым. Если дровер был открыт, и логика для его закрытия не выполнена, мы вызываем setOpen(true), чтобы вернуть дровер в открытое состояние. Если же дровер был закрыт, нам не нужно ничего делать.

Важно отметить, что данный подход позволяет избежать изменения ключа React, что может вызвать дополнительную перерисовку компонента и снизить производительность. Используя обработку событий, мы можем управлять состоянием дровера более изящно и эффективно.