Hacktoberfest #1: вклад в Telescope

Это было хорошее начало моей первой недели на Hacktoberfest. Я решил взломать Telescope, чья кодовая база мне знакома, так как я уже вносил свой вклад в прошлом.

Проблема

Проблема была #2223, остановка анимации навигационной панели при переключении темы. Вопрос был открыт мной после комментария Дэвида по связанному вопросу.

После расследования проблема, похоже, заключается в том, как React отображает компоненты. В интерфейсе Telescope все компоненты функциональны; при изменении реквизита запускается повторный рендеринг. В этом случае при смене темы навбар перерисовывается и его анимация перезапускается. Чтобы избежать этого, я подключил популярную библиотеку React, react-transition-group. Преимущество react-transition-group в том, что он показывает этапы перехода и применяет классы полезными способами, делая визуальные переходы программируемыми и более согласованными.

Пиар

PR удалил существующие анимации CSS и указал стили для каждого состояния перехода.

const slideTransition = useMemo(
    () => ({
      entered: { ... },
      entering: { ... },
      exited: { ... },
      exiting: { ... },
    }),
    [desktop]
);
return (
    <Transition in={!disabled} timeout={300} unmountOnExit>
      {(state) => (
        <div style={{ ...slideTransition[state] }} className={classes.root}>
          <AppBar className={classes.appBar} position="static">
            ....
          </AppBar>
        </div>
      )}
    </Transition>
)

Ближайшие недели

Цель Hacktoberfest — повысить свой опыт, компетентность и уверенность в себе. Следующий PR должен быть построен на предыдущем. На следующей неделе я хотел бы заняться более крупным проектом, который займет у меня больше времени, чтобы начать.