migration

Author: MacKentoch

front/src/components/backToTop/BackToTop.js

@@ -0,0 +1,100 @@
+/* eslint-disable no-undefined */
+import React, { useState, useEffect } from 'react';
+import BackToTopButton from './backToTopButton/BackToTopButton';
+import { Motion, spring, presets } from 'react-motion';
+
+// #region types
+type Props = {
+  minScrollY: number,
+  scrollTo?: string,
+  onScrollDone?: () => any,
+};
+// #endregion
+
+function BackToTop({ minScrollY = 120, onScrollDone = () => {} }: Props) {
+  const [showBackButton, setShowBackButton] = useState(false);
+  const [windowScrollY, setWindowScrollY] = useState(0);
+  const [tickingScollObserve, setTickingScollObserve] = useState(false);
+
+  // #region on windows scroll callback
+  const handleWindowScroll = () => {
+    if (!window) {
+      return;
+    }
+
+    /* eslint-disable no-undefined */
+    const currentWindowScrollY =
+      window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (
+            document.documentElement ||
+            document.body.parentNode ||
+            document.body
+          ).scrollTop;
+    /* eslint-enable no-undefined */
+
+    // scroll event fires to often, using window.requestAnimationFrame to limit computations
+    if (!tickingScollObserve) {
+      window.requestAnimationFrame(() => {
+        if (windowScrollY !== currentWindowScrollY) {
+          const shouldShowBackButton =
+            currentWindowScrollY >= minScrollY ? true : false;
+
+          setWindowScrollY(currentWindowScrollY);
+          setShowBackButton(shouldShowBackButton);
+        }
+        setTickingScollObserve(false);
+      });
+    }
+
+    setTickingScollObserve(true);
+  };
+  // #endregion
+
+  // #region on button click (smooth scroll)
+  const handlesOnBackButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    event && event.preventDefault();
+    if (window && windowScrollY && windowScrollY > minScrollY) {
+      // using here smoothscroll-polyfill
+      window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+      typeof onScrollDone === 'function' && onScrollDone();
+    }
+  };
+  // #endregion
+
+  // #region mount and unmount subscrubstions
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', handleWindowScroll);
+    }
+
+    return function unsubscribeEvents() {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('scroll', handleWindowScroll);
+      }
+    };
+  });
+  // #endregion
+
+  return (
+    // @ts-ignore
+    <Motion style={{ x: spring(showBackButton ? 0 : 120, presets.stiff) }}>
+      {({ x }) => (
+        <BackToTopButton
+          position={'bottom-right'}
+          onClick={handlesOnBackButtonClick}
+          motionStyle={{
+            WebkitTransform: `translate3d(${x}px, 0, 0)`,
+            transform: `translate3d(${x}px, 0, 0)`,
+          }}
+        />
+      )}
+    </Motion>
+  );
+}
+
+BackToTop.displayName = 'BackToTop';
+
+export default BackToTop;

front/src/components/backToTop/BackToTop.tsx

@@ -1,19 +1,15 @@
-// @flow
-
-// #region imports
 import React from 'react';
 import cx from 'classnames';
 import UpIcon from './UpIcon';
 import WithRightMargin from './styled/WithRightMargin';
-// #endregion
 
-// #region flow types
+// #region types
+export type BackButtonPosition = 'bottom-left' | 'bottom-right';
 type Props = {
-  position: 'bottom-left' | 'bottom-right',
-  onClick: (event: SyntheticEvent<>) => any,
-  children: any,
-  motionStyle: any,
-  ...any,
+  position: BackButtonPosition;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => any;
+  children?: any;
+  motionStyle: any;
 };
 // #endregion
 
@@ -34,11 +30,30 @@ const defaultStyle = {
   opacity: defaultOpacity,
   backgroundColor: defaultBackGroundColor,
 };
+
+function setPosition(position = 'bottom-right', refStyle = defaultStyle): any {
+  const style = { ...refStyle };
+
+  switch (position) {
+    case 'bottom-right':
+      style.right = sideOffset;
+      style.left = '';
+      return style;
+
+    case 'bottom-left':
+      style.right = '';
+      style.left = sideOffset;
+      return style;
+
+    default:
+      return refStyle;
+  }
+}
 // #endregion
 
 const BackToTopButton = ({
   onClick,
-  position,
+  position = 'bottom-right',
   children,
   motionStyle,
 }: Props) => {
@@ -65,33 +80,6 @@ const BackToTopButton = ({
   );
 };
 
-// #region statics
-BackToTopButton.defaultProps = {
-  position: 'bottom-right',
-};
-
 BackToTopButton.displayName = 'BackToTopButton';
-// #endregion
-
-// #region helpers
-function setPosition(position = 'bottom-right', refStyle = defaultStyle): any {
-  const style = { ...refStyle };
-
-  switch (position) {
-    case 'bottom-right':
-      style.right = sideOffset;
-      style.left = '';
-      return style;
-
-    case 'bottom-left':
-      style.right = '';
-      style.left = sideOffset;
-      return style;
-
-    default:
-      return refStyle;
-  }
-}
-// #endregion
 
 export default BackToTopButton;

front/src/components/backToTop/backToTopButton/BackToTopButton.js renamed to front/src/components/backToTop/backToTopButton/BackToTopButton.tsx

@@ -1,12 +1,8 @@
-// @flow
-
-// #region imports
 import React from 'react';
-// #endregion
 
-// #region flow types
+// #region types
 type Props = {
-  color: string,
+  color: string;
 };
 // #endregion
 

front/src/components/backToTop/backToTopButton/UpIcon.js renamed to front/src/components/backToTop/backToTopButton/UpIcon.tsx

@@ -1,8 +1,4 @@
-// @flow
-
-// #region imports
 import styled from 'styled-components';
-// #endregion
 
 const WithRightMargin = styled.div`
   margin-right: 10px;