Настройте анимацию для Collapse Material-ui - PullRequest
Новая
       22

Настройте анимацию для Collapse Material-ui

0 голосов
/ 07 февраля 2020

Мы недавно перешли на Material-ui из внутренней библиотеки тем и компонентов и пытаемся воспроизвести анимацию и поведение одной из наших кнопок. Кнопка удаления из нашей старой библиотеки будет функционировать следующим образом:

  • Это будет 2 кнопки удаления,
  • Первая была значком tra sh, который при нажатии отображал второй button
  • Вторая кнопка была кнопкой подтверждения, которая обработала бы это фактическое удаление
  • Если кнопка была нажата, был бы переход, где кнопка свернулась бы вправо, тогда новая кнопка расширилась бы left
  • В случае второй кнопки нажатие в любом месте вызвало анимацию (но нажатие на кнопку приведет к выполнению обратного вызова удаления, переданного в свойство onClick)

Наша первая попытка использовать API Свернуть, предоставляемый Material-UI. Это почти идеально, но мы бы хотели переопределить переход по умолчанию, чтобы свернуть вправо и развернуть влево.

Вот пример: 

  export default function SimpleCollapse() {
  const [showButtonOne, setShowButtonOne] = React.useState(true);
  const [showButtonTwo, setShowButtonTwo] = React.useState(false);

  const DeleteButtonOne = () => {
    return (
      <IconButton aria-label="delete" onClick={() => setShowButtonOne(false)}>
        <DeleteIcon />
      </IconButton>
    );
  };

  const DeleteButtonTwo = () => {
    return (
      <Button variant="contained" color="secondary">
        Delete
      </Button>
    );
  };

  const revertBackToDeleteOne = () => {
    setShowButtonTwo(false);
    window.removeEventListener("click", revertBackToDeleteOne);
  };

  const moveToDeleteTwo = () => {
    window.addEventListener("click", revertBackToDeleteOne);
  };

  return (
    <div>
      <Collapse in={showButtonOne} onExited={() => setShowButtonTwo(true)}>
        <DeleteButtonOne />
      </Collapse>
      <Collapse
        in={showButtonTwo}
        onEnter={moveToDeleteTwo}
        onExited={() => setShowButtonOne(true)}
      >
        <DeleteButtonTwo />
      </Collapse>
    </div>
  );
}

Проблема здесь прямо сейчас Свернуть движется вертикально, когда мы хотим, чтобы он двигался горизонтально (сворачивание вправо и расширение влево, если быть точным)

Вот ссылка на мой пример CodeSandbox https://codesandbox.io/s/material-demo-ms0rr?fontsize=14&hidenavigation=1&theme=dark

...