@transferwise/components 0.0.0-experimental-358e009 → 0.0.0-experimental-220b657

package/src/tabs/Tabs.tsx

@@ -1,18 +1,21 @@
+import { Spring, animated } from '@react-spring/web';
 import { clsx } from 'clsx';
 import clamp from 'lodash.clamp';
-import { Component, createRef } from 'react';
+import { Component, createRef, Fragment } from 'react';
 
-import { Width, Direction } from '../common';
+import { Size, Width, Direction } from '../common';
 import { DirectionContext } from '../provider/direction';
 
 import Tab from './Tab';
 import TabList from './TabList';
 import TabPanel from './TabPanel';
 import {
+  getElasticDragDifference,
   getSwipeDifference,
   swipedLeftToRight,
   swipedRightToLeft,
   swipeShouldChangeTab,
+  getVelocity,
   Swipe,
 } from './utils';
 
@@ -24,29 +27,52 @@ export interface TabItem {
   disabled: boolean;
 }
 
+type TabsTransitionSpacing =
+  | 'default'
+  | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+
 export interface TabsProps {
   tabs: TabItem[];
   selected: number;
   name: string;
+  animatePanelsOnClick?: boolean;
   changeTabOnSwipe?: boolean;
   className?: string;
+  transitionSpacing?: TabsTransitionSpacing;
   headerWidth?: `${Width}`;
+  id?: string;
   onTabSelect: (index: number) => void;
 }
 
 interface TabsState {
   start: Swipe | null;
+  translateX: number;
+  translateFrom: number;
+  translateTo: number;
   translateLineX: string | null;
+  isAnimating: boolean;
   isSwiping: boolean;
   isScrolling: boolean;
+  lastSwipeVelocity: number;
   fullWidthTabs: boolean;
+  currentSwipe: Swipe[];
+  selectedTabIndex: number;
 }
 
+const SpacerWidth = {
+  default: 0,
+  xs: 8,
+  sm: 16,
+  md: 24,
+  lg: 32,
+} satisfies Record<TabsTransitionSpacing, number>;
+
 export default class Tabs extends Component<TabsProps, TabsState> {
   declare props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
 
   static defaultProps = {
     changeTabOnSwipe: true,
+    transitionSpacing: 'default',
     headerWidth: Width.BLOCK,
   } satisfies Partial<TabsProps>;
 
@@ -56,10 +82,17 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     super(props);
     this.state = {
       start: null,
+      translateX: 0,
+      translateFrom: 0,
+      translateTo: 0,
       translateLineX: null,
+      isAnimating: false,
       isSwiping: false,
       isScrolling: false,
+      lastSwipeVelocity: 0,
       fullWidthTabs: props.headerWidth === Width.BLOCK,
+      currentSwipe: [],
+      selectedTabIndex: props.selected,
     };
   }
 
@@ -69,6 +102,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
   tabRefs: (HTMLLIElement | null)[] = [];
 
+  get filteredTabsLength() {
+    return this.props.tabs.filter((tab) => !tab.disabled).length;
+  }
+
   get MAX_INDEX() {
     return this.props.tabs.length - 1;
   }
@@ -78,13 +115,13 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
     this.setTabWidth();
     this.switchTab(clamp(selected, MIN_INDEX, this.MAX_INDEX));
-    this.animateLine(clamp(selected, MIN_INDEX, this.MAX_INDEX));
+    this.animateToTab(clamp(selected, MIN_INDEX, this.MAX_INDEX), true);
     document.body.addEventListener('touchmove', this.disableScroll, { passive: false });
     document.body.addEventListener('touchforcechange', this.disableScroll, { passive: false });
     window.addEventListener('resize', this.handleResize);
   }
 
-  componentDidUpdate(previousProps: TabsProps) {
+  componentDidUpdate(previousProps: TabsProps, previousState: TabsState) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
@@ -97,6 +134,8 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     const previousDisabledTabsLength = previousProps.tabs.filter((tab) => !tab.disabled).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
+    const { animatePanelsOnClick } = this.props;
+    const instantOnClick = !animatePanelsOnClick && !previousState.isSwiping;
 
     if (
       currentHeaderWidth !== previousFullHeaderWidth ||
@@ -110,7 +149,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       currentDisabledTabsLength !== previousDisabledTabsLength ||
       currentSelectedTabIsDisabled !== previousSelectedTabIsDisabled
     ) {
-      this.animateLine(clamp(currentSelected, MIN_INDEX, this.MAX_INDEX));
+      this.animateToTab(
+        clamp(currentSelected, MIN_INDEX, this.MAX_INDEX),
+        currentSelected === previousSelected || instantOnClick,
+      );
     }
   }
 
@@ -122,6 +164,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
   handleResize = () => {
     this.setContainerWidth(this.container);
+
+    this.setState(({ selectedTabIndex }) => ({
+      translateTo: -(this.containerWidth * selectedTabIndex),
+    }));
   };
 
   setContainerRefAndWidth = (node: HTMLDivElement | null) => {
@@ -226,11 +272,51 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
   swipedOverHalfOfContainer = (difference: number) => difference / this.containerWidth >= 0.5;
 
+  calculateApplicableDragDifference = ({
+    currentSelected,
+    nextSelected,
+    start,
+    end,
+  }: {
+    currentSelected: number;
+    nextSelected: number;
+    start: Swipe;
+    end: Swipe;
+  }) => {
+    const difference = getSwipeDifference(start, end);
+    const elasticDrag = getElasticDragDifference(difference);
+
+    if (swipedLeftToRight(start, end)) {
+      if (currentSelected > MIN_INDEX && currentSelected !== nextSelected) {
+        return Math.min(difference, this.containerWidth);
+      }
+      return elasticDrag;
+    }
+    if (swipedRightToLeft(start, end)) {
+      if (currentSelected < this.MAX_INDEX && currentSelected !== nextSelected) {
+        return -Math.min(difference, this.containerWidth);
+      }
+      return -elasticDrag;
+    }
+
+    return false;
+  };
+
   switchTab = (index: number) => {
     const { onTabSelect } = this.props;
     onTabSelect(index);
   };
 
+  getTabIndexWithoutDisabledTabs(index: number) {
+    return index - this.props.tabs.slice(0, index).filter((tab) => tab.disabled).length;
+  }
+
+  animateToTab = (index: number, instant?: boolean) => {
+    this.animateLine(index);
+
+    this.animatePanel(this.getTabIndexWithoutDisabledTabs(index), instant);
+  };
+
   animateLine = (index: number) => {
     this.setState((previousState) => ({
       translateLineX: previousState.fullWidthTabs
@@ -239,6 +325,21 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     }));
   };
 
+  // Pass `instant` to set the `translateX` to the new panel with no transition
+  animatePanel = (index: number, instant = false) => {
+    const { translateTo: currentTranslateTo } = this.state;
+
+    const translateFrom = currentTranslateTo;
+    const translateTo = -(this.containerWidth * index);
+
+    this.setState({
+      selectedTabIndex: index,
+      isAnimating: !instant && translateFrom !== translateTo,
+      translateFrom,
+      translateTo,
+    });
+  };
+
   disableScroll = (event: Event) => {
     const { isSwiping } = this.state;
 
@@ -265,7 +366,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     };
     this.setState({
       start,
+      currentSwipe: [start],
     });
+
+    event.persist();
   };
 
   handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (event) => {
@@ -275,6 +379,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     }
 
     const { selected: currentSelectedFromProps } = this.props;
+    const selected = this.getTabIndexWithoutDisabledTabs(currentSelectedFromProps);
     const end: Swipe = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
@@ -284,6 +389,8 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     const yAxisDifference = getSwipeDifference(start, end, 'y');
     let { isScrolling, isSwiping } = this.state;
 
+    event.persist();
+
     if (!isScrolling && !isSwiping) {
       if (difference > yAxisDifference) {
         isSwiping = true;
@@ -299,6 +406,23 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       this.animateLine(
         this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps,
       );
+
+      const dragDifference = this.calculateApplicableDragDifference({
+        currentSelected: currentSelectedFromProps,
+        nextSelected,
+        start,
+        end,
+      });
+
+      const translateX = dragDifference
+        ? -(this.containerWidth * selected) + dragDifference
+        : false;
+
+      this.setState((state) => ({
+        currentSwipe: [...state.currentSwipe, end],
+        translateFrom: translateX || state.translateFrom,
+        translateTo: translateX || state.translateTo,
+      }));
     }
   };
 
@@ -315,9 +439,16 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       time: Date.now(),
     };
     const difference = getSwipeDifference(start, end);
+    const velocity = getVelocity([...this.state.currentSwipe, end]);
+
+    this.setState({
+      currentSwipe: [],
+    });
 
     let nextSelected = selected;
 
+    event.persist();
+
     if (isSwiping) {
       if (swipeShouldChangeTab(start, end) || this.swipedOverHalfOfContainer(difference)) {
         nextSelected = this.getTabToSelect(nextSelected, start, end);
@@ -325,8 +456,12 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
       if (nextSelected !== selected) {
         this.switchTab(nextSelected);
+
+        this.setState({
+          lastSwipeVelocity: velocity,
+        });
       } else {
-        this.animateLine(nextSelected);
+        this.animateToTab(nextSelected);
       }
     }
 
@@ -334,10 +469,47 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   render() {
-    const { tabs, changeTabOnSwipe, name, selected, className, headerWidth } = this.props;
-    const { translateLineX, fullWidthTabs } = this.state;
-
-    const selectedTab = tabs[selected];
+    const { tabs, changeTabOnSwipe, name, selected, className, transitionSpacing, headerWidth } =
+      this.props;
+    const {
+      isSwiping,
+      translateLineX,
+      isAnimating,
+      translateFrom,
+      translateTo,
+      lastSwipeVelocity,
+      fullWidthTabs,
+    } = this.state;
+
+    const spacer = SpacerWidth[transitionSpacing];
+
+    const tabsLength = this.filteredTabsLength;
+
+    const distanceSwiped = Math.abs(-translateFrom - this.containerWidth * selected);
+
+    const remainingContainerToTravel = isSwiping
+      ? 1 - distanceSwiped / this.containerWidth
+      : 1 - Math.abs(distanceSwiped / this.containerWidth - 1);
+
+    const restrictedVelocity =
+      (Number.isNaN(remainingContainerToTravel) ? 0 : remainingContainerToTravel) *
+      Math.min(10 * Math.E, lastSwipeVelocity * 10 * Math.E);
+
+    const hidePanelOverflow = isAnimating || isSwiping;
+
+    const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
+
+    // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
+    const Spacer = ({ id }: { id: string }) =>
+      spacer > 0 && (
+        <div
+          key={id}
+          style={{
+            width: spacer,
+            display: hidePanelOverflow ? 'block' : 'none',
+          }}
+        />
+      );
 
     return (
       <DirectionContext.Consumer>
@@ -393,19 +565,64 @@ export default class Tabs extends Component<TabsProps, TabsState> {
                   />
                 ) : null}
               </TabList>
-              <div ref={this.setContainerRefAndWidth} className="tabs__panel-container">
-                {selectedTab && !selectedTab.disabled ? (
-                  <TabPanel
-                    key={selectedTab.title}
-                    tabId={`${name}-tab-${selected}`}
-                    id={`${name}-panel-${selected}`}
-                    style={{
-                      width: '100%',
-                    }}
-                  >
-                    {selectedTab.content}
-                  </TabPanel>
-                ) : null}
+              <div
+                ref={this.setContainerRefAndWidth}
+                className="tabs__panel-container"
+                style={{
+                  overflow: hidePanelOverflow ? 'hidden' : 'visible',
+                }}
+              >
+                <Spring
+                  from={{
+                    transform: `translateX(${translateFrom - spacer}px)`,
+                  }}
+                  to={{
+                    transform: `translateX(${translateTo - spacer}px)`,
+                  }}
+                  config={{
+                    precision: isSwiping ? 1 : 0.01,
+                    velocity: !isSwiping ? restrictedVelocity : 0,
+                    clamp: true,
+                  }}
+                  onRest={() => {
+                    if (isAnimating) {
+                      this.setState({
+                        isAnimating: false,
+                        lastSwipeVelocity: 0,
+                      });
+                    }
+                  }}
+                >
+                  {(props) => (
+                    <animated.div
+                      className="tabs__slider"
+                      style={{
+                        width: hidePanelOverflow ? `${sliderWidth}px` : '100%',
+                        transform: hidePanelOverflow ? props.transform : 'translateX(0px)',
+                      }}
+                    >
+                      {tabs.map(({ content, disabled }, index) =>
+                        !disabled ? (
+                          <Fragment key={`${tabs[index].title}-fragment`}>
+                            {index === selected && <Spacer id="left-spacer" />}
+                            <TabPanel
+                              key={tabs[index].title}
+                              tabId={`${name}-tab-${index}`}
+                              id={`${name}-panel-${index}`}
+                              style={{
+                                width: hidePanelOverflow ? `${this.containerWidth}px` : '100%',
+                                display: hidePanelOverflow || index === selected ? 'block' : 'none',
+                              }}
+                            >
+                              {content}
+                            </TabPanel>
+                            {index === selected && <Spacer id="right-spacer" />}
+                          </Fragment>
+                        ) : null,
+                      )}
+                    </animated.div>
+                  )}
+                </Spring>
               </div>
             </div>
           );

package/src/tabs/utils.spec.ts

@@ -1,14 +1,17 @@
 import {
+  getElasticDragDifference,
   swipedLeftToRight,
   swipedRightToLeft,
   getSwipeDifference,
   swipeShouldChangeTab,
+  getVelocity,
   Swipe,
 } from './utils';
 
 describe('Tabs Utility', () => {
   let start: Swipe;
   let end: Swipe;
+  let coords: Swipe[];
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -65,4 +68,59 @@ describe('Tabs Utility', () => {
       expect(swipeShouldChangeTab(start, end)).toBe(false);
     });
   });
+
+  describe('checking for velocity against an array of touches', () => {
+    beforeEach(() => {
+      coords = [
+        { x: 0, y: 0, time: 1569538800000 },
+        { x: 100, y: 0, time: 1569538825000 },
+        { x: 200, y: 0, time: 1569538850000 },
+        { x: 300, y: 0, time: 1569538875000 },
+        { x: 400, y: 0, time: 1569538900000 },
+      ];
+    });
+
+    it('should return the difference in velocity between the first and last touch in an array', () => {
+      expect(getVelocity(coords)).toBe(0.004);
+    });
+
+    it('should only take into account the last 5 coordinates', () => {
+      coords.unshift(
+        { x: 10000, y: 0, time: 1569538800000 },
+        { x: 100000, y: 0, time: 1569538800000 },
+      );
+      expect(getVelocity(coords)).toBe(0.004);
+    });
+
+    it('returns a default 0 if there are any issues with the touches passed in', () => {
+      expect(getVelocity([])).toBe(0);
+    });
+  });
+
+  describe('applying elasticity to a drag event', () => {
+    it('gradually reduces the amount of difference returned toward a maximum distance', () => {
+      global.innerWidth = 375;
+      const maximumDraggableDistance = 125;
+
+      expect(getElasticDragDifference(0)).toBe(0);
+      expect(getApproximateElasticDragDifference(50)).toBe(28);
+      expect(getApproximateElasticDragDifference(100)).toBe(49);
+      expect(getApproximateElasticDragDifference(150)).toBe(66);
+      expect(getApproximateElasticDragDifference(200)).toBe(79);
+      expect(getApproximateElasticDragDifference(250)).toBe(89);
+      expect(getApproximateElasticDragDifference(300)).toBe(97);
+      expect(getApproximateElasticDragDifference(350)).toBe(103);
+
+      expect(getElasticDragDifference(10000)).toBe(maximumDraggableDistance);
+    });
+
+    it('limits the maximum dragable distance on larger screens', () => {
+      global.innerWidth = 1024;
+      const maximumDraggableDistance = 150;
+      expect(getElasticDragDifference(10000)).toBe(maximumDraggableDistance);
+    });
+  });
 });
+
+const getApproximateElasticDragDifference = (difference: number) =>
+  Math.round(getElasticDragDifference(difference));

package/src/tabs/utils.ts

@@ -35,3 +35,23 @@ export const swipeShouldChangeTab = (start: Swipe, end: Swipe) => {
 
   return swipedSignificantDistance(difference) && swipedWithSignificantVelocity(velocity);
 };
+
+export function getVelocity(coords: Swipe[]) {
+  try {
+    const relevant = coords.slice(Math.max(coords.length - 5, 1));
+    const first = relevant[0];
+    const last = relevant[relevant.length - 1];
+
+    return Math.abs(first.x - last.x) / (last.time - first.time);
+  } catch {
+    return 0;
+  }
+}
+
+/*
+  `elasticDrag` is the translateX value, which slows down as the difference increases
+  `1 - Math.E ** (-0.005 * difference)` provides a % value of how far we want to translate (0.005 being the rate)
+  `Math.min(150, window.innerWidth / 3)` provides the maximum translate value
+*/
+export const getElasticDragDifference = (difference: number) =>
+  Math.min(150, window.innerWidth / 3) * (1 - Math.E ** (-0.005 * difference));