[WIP] Remove react-transition-group

Author: dananjohnson

client/src/backend/components/project-collection/AddButton.js

@@ -2,10 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import startsWith from "lodash/startsWith";
 import classNames from "classnames";
-import {
-  TransitionGroup as ReactTransitionGroup,
-  CSSTransition
-} from "react-transition-group";
 import IconComposer from "global/components/utility/IconComposer";
 import { withTranslation } from "react-i18next";
 
@@ -35,14 +31,6 @@ class ProjectCollectionAddButton extends Component {
     return { view };
   }
 
-  get transitionProps() {
-    return {
-      mountOnEnter: true,
-      timeout: 600,
-      classNames: "collecting-toggle__text"
-    };
-  }
-
   get selected() {
     return this.props.selected;
   }
@@ -145,11 +133,9 @@ class ProjectCollectionAddButton extends Component {
     const { key, text } = this.determineText();
 
     return (
-      <ReactTransitionGroup>
-        <CSSTransition key={key} {...this.transitionProps}>
-          <span className="collecting-toggle__text">{text}</span>
-        </CSSTransition>
-      </ReactTransitionGroup>
+      <span key={key} className="collecting-toggle__text">
+        {text}
+      </span>
     );
   }
 

client/src/frontend/components/collecting/Toggle/Text.js

@@ -1,10 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
-import {
-  TransitionGroup as ReactTransitionGroup,
-  CSSTransition
-} from "react-transition-group";
 
 function determineText(view, t) {
   switch (view) {
@@ -35,20 +31,12 @@ function determineText(view, t) {
 function ToggleText({ view }) {
   const { t } = useTranslation();
 
-  const transitionProps = {
-    mountOnEnter: true,
-    classNames: "collecting-toggle__text",
-    timeout: { enter: 0, exit: 200 }
-  };
-
   const { key, text } = determineText(view, t);
 
   return (
-    <ReactTransitionGroup>
-      <CSSTransition key={key} {...transitionProps}>
-        <span className="collecting-toggle__text">{text}</span>
-      </CSSTransition>
-    </ReactTransitionGroup>
+    <span key={key} className="collecting-toggle__text">
+      {text}
+    </span>
   );
 }
 

client/src/frontend/components/resource-list/SlideShow/DirectionalButton/styles.js

@@ -52,5 +52,6 @@ export const PrevIconSm = styled(IconSm)`
 `;
 
 export const Text = styled.span`
+  transform: translateY(-8%);
   ${respond(`display: none;`, 60)}
 `;

client/src/frontend/components/resource-list/SlideShow/index.js

@@ -1,11 +1,7 @@
 import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
-import {
-  TransitionGroup as ReactTransitionGroup,
-  CSSTransition
-} from "react-transition-group";
-import { Swipeable } from "react-swipeable";
 import includes from "lodash/includes";
+import debounce from "lodash/debounce";
 import ResourceSlide from "frontend/components/resource-slide";
 import { resourceCollectionsAPI, requests } from "api";
 import { entityStoreActions } from "actions";
@@ -53,6 +49,9 @@ class ResourceSlideshow extends PureComponent {
       props.pagination
     );
     this.state.totalCount = props.pagination.totalCount || 0;
+
+    this.sliderRef = React.createRef(null);
+    this.debouncedScroll = debounce(this.bindScroll, 100);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -73,16 +72,36 @@ class ResourceSlideshow extends PureComponent {
 
   componentDidMount() {
     document.addEventListener("keyup", this.bindKeyboard, false);
+
+    if (this.sliderRef.current) {
+      this.sliderRef.current.addEventListener("scroll", this.debouncedScroll);
+    }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.props.collectionResources !== prevProps.collectionResources) {
       this.updateMap(this.props.collectionResources, this.props.pagination);
     }
+
+    if (prevState.position !== this.state.position && this.sliderRef.current) {
+      const clientWidth = this.sliderRef.current.clientWidth;
+
+      this.sliderRef.current.scrollTo({
+        left: (this.state.position - 1) * clientWidth,
+        top: 0
+      });
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener("keyup", this.bindKeyboard, false);
+
+    if (this.sliderRef.current) {
+      this.sliderRef.current.removeEventListener(
+        "scroll",
+        this.debouncedScroll
+      );
+    }
   }
 
   getFigureByType(resource) {
@@ -109,6 +128,18 @@ class ResourceSlideshow extends PureComponent {
     }
   };
 
+  bindScroll = event => {
+    const boundary = event.target.getBoundingClientRect();
+    const scrollLeft = Math.round(event.target.scrollLeft);
+    const width = Math.round(boundary.width);
+    const activeCalc = Math.round(scrollLeft / width);
+    const active = scrollLeft === 0 || activeCalc < 0 ? 0 : activeCalc;
+
+    if (active + 1 !== this.state.position) {
+      this.updatePosition(active + 1);
+    }
+  };
+
   handleUnloadedSlide = position => {
     const page = this.positionToPage(position, this.props.pagination.perPage);
     if (!this.isPageLoaded(page)) {
@@ -167,10 +198,11 @@ class ResourceSlideshow extends PureComponent {
     this.setState({ map });
   }
 
-  updatePosition(newPosition) {
+  async updatePosition(newPosition) {
     if (!this.isLoaded(newPosition)) {
       this.handleUnloadedSlide(newPosition);
     }
+
     this.setState({ position: newPosition });
   }
 
@@ -183,40 +215,33 @@ class ResourceSlideshow extends PureComponent {
     return { ...this.state.map, ...updates };
   }
 
-  renderSlideShow() {
+  renderSlideShow(slides) {
     const position = this.state.position;
-    const collectionResource = this.state.map[position];
 
-    return (
-      <CSSTransition
-        key={position}
-        classNames={this.state.slideDirection}
-        timeout={{ enter: 500, exit: 500 }}
+    return slides.map((slide, index) => (
+      <Styled.Slide
+        key={slide.id}
+        id={slide.id}
+        data-active={index === position - 1}
+        style={{
+          viewTimeline: `--slide-${slide.id} x`,
+          animationTimeline: `--slide-${slide.id}`
+        }}
       >
-        <Styled.Slide>
-          {this.isLoaded(position) ? (
-            this.getFigureByType(collectionResource)
-          ) : (
-            <ResourceSlide.SlideLoading />
-          )}
-        </Styled.Slide>
-      </CSSTransition>
-    );
+        {this.isLoaded(position) ? (
+          this.getFigureByType(slide)
+        ) : (
+          <ResourceSlide.SlideLoading />
+        )}
+      </Styled.Slide>
+    ));
   }
 
   renderPlaceholder() {
     return (
-      <CSSTransition
-        key="placeholder"
-        classNames={this.state.slideDirection}
-        timeout={{ enter: 500, exit: 500 }}
-      >
-        <div>
-          <Styled.Slide>
-            <ResourceSlide.SlidePlaceholder />
-          </Styled.Slide>
-        </div>
-      </CSSTransition>
+      <Styled.Slide data-active>
+        <ResourceSlide.SlidePlaceholder />
+      </Styled.Slide>
     );
   }
 
@@ -226,21 +251,19 @@ class ResourceSlideshow extends PureComponent {
     const collectionResource = this.state.map[position];
     const collectionResourcesCount = this.props.collectionResources.length;
     const t = this.props.t;
+    const slides = Object.values(this.state.map);
 
     return (
-      <Styled.SlideShow>
-        <Swipeable
-          onSwipedLeft={this.handleSlideNext}
-          onSwipedRight={this.handleSlidePrev}
-        >
-          <Styled.SlidesWrapper>
-            <ReactTransitionGroup>
-              {collectionResourcesCount > 0
-                ? this.renderSlideShow()
-                : this.renderPlaceholder()}
-            </ReactTransitionGroup>
-          </Styled.SlidesWrapper>
-        </Swipeable>
+      <Styled.SlideShow
+        style={{
+          timelineScope: slides.map(slide => `--slide-${slide.id}`).join(",")
+        }}
+      >
+        <Styled.SlidesWrapper ref={this.sliderRef}>
+          {collectionResourcesCount > 0
+            ? this.renderSlideShow(slides)
+            : this.renderPlaceholder()}
+        </Styled.SlidesWrapper>
         <Styled.Footer>
           {this.isLoaded(position) ? (
             <ResourceSlide.Caption