@transferwise/components 46.124.1 → 46.125.0

package/src/tabs/Tabs.tsx

@@ -1,21 +1,18 @@
-import { Spring, animated } from '@react-spring/web';
 import { clsx } from 'clsx';
 import clamp from 'lodash.clamp';
-import { Component, createRef, Fragment } from 'react';
+import { Component, createRef } from 'react';
 
-import { Size, Width, Direction } from '../common';
+import { 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';
 
@@ -27,52 +24,29 @@ 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>;
 
@@ -82,17 +56,10 @@ 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,
     };
   }
 
@@ -102,10 +69,6 @@ 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;
   }
@@ -115,13 +78,13 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
     this.setTabWidth();
     this.switchTab(clamp(selected, MIN_INDEX, this.MAX_INDEX));
-    this.animateToTab(clamp(selected, MIN_INDEX, this.MAX_INDEX), true);
+    this.animateLine(clamp(selected, MIN_INDEX, this.MAX_INDEX));
     document.body.addEventListener('touchmove', this.disableScroll, { passive: false });
     document.body.addEventListener('touchforcechange', this.disableScroll, { passive: false });
     window.addEventListener('resize', this.handleResize);
   }
 
-  componentDidUpdate(previousProps: TabsProps, previousState: TabsState) {
+  componentDidUpdate(previousProps: TabsProps) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
@@ -134,8 +97,6 @@ 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 ||
@@ -149,10 +110,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       currentDisabledTabsLength !== previousDisabledTabsLength ||
       currentSelectedTabIsDisabled !== previousSelectedTabIsDisabled
     ) {
-      this.animateToTab(
-        clamp(currentSelected, MIN_INDEX, this.MAX_INDEX),
-        currentSelected === previousSelected || instantOnClick,
-      );
+      this.animateLine(clamp(currentSelected, MIN_INDEX, this.MAX_INDEX));
     }
   }
 
@@ -164,10 +122,6 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
   handleResize = () => {
     this.setContainerWidth(this.container);
-
-    this.setState(({ selectedTabIndex }) => ({
-      translateTo: -(this.containerWidth * selectedTabIndex),
-    }));
   };
 
   setContainerRefAndWidth = (node: HTMLDivElement | null) => {
@@ -272,51 +226,11 @@ 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
@@ -325,21 +239,6 @@ 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;
 
@@ -366,10 +265,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     };
     this.setState({
       start,
-      currentSwipe: [start],
     });
-
-    event.persist();
   };
 
   handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (event) => {
@@ -379,7 +275,6 @@ 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,
@@ -389,8 +284,6 @@ 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;
@@ -406,23 +299,6 @@ 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,
-      }));
     }
   };
 
@@ -439,16 +315,9 @@ 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);
@@ -456,12 +325,8 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
       if (nextSelected !== selected) {
         this.switchTab(nextSelected);
-
-        this.setState({
-          lastSwipeVelocity: velocity,
-        });
       } else {
-        this.animateToTab(nextSelected);
+        this.animateLine(nextSelected);
       }
     }
 
@@ -469,47 +334,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   render() {
-    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',
-          }}
-        />
-      );
+    const { tabs, changeTabOnSwipe, name, selected, className, headerWidth } = this.props;
+    const { translateLineX, fullWidthTabs } = this.state;
+
+    const selectedTab = tabs[selected];
 
     return (
       <DirectionContext.Consumer>
@@ -565,64 +393,19 @@ export default class Tabs extends Component<TabsProps, TabsState> {
                   />
                 ) : null}
               </TabList>
-              <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 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>
             </div>
           );

package/src/tabs/utils.test.ts

@@ -0,0 +1,68 @@
+import {
+  swipedLeftToRight,
+  swipedRightToLeft,
+  getSwipeDifference,
+  swipeShouldChangeTab,
+  Swipe,
+} from './utils';
+
+describe('Tabs Utility', () => {
+  let start: Swipe;
+  let end: Swipe;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when the ending x axis is greater than the starting x axis', () => {
+    beforeEach(() => {
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 50, y: 0, time: 1569538800300 };
+    });
+
+    it('determines that the swipe was left to right', () => {
+      expect(swipedLeftToRight(start, end)).toBe(true);
+      expect(swipedRightToLeft(start, end)).toBe(false);
+    });
+
+    it('calculates the correct swipe difference', () => {
+      expect(getSwipeDifference(start, end)).toBe(50);
+    });
+  });
+
+  describe('when the ending x axis is less than the starting x axis', () => {
+    beforeEach(() => {
+      start = { x: 50, y: 0, time: 1569538800000 };
+      end = { x: 0, y: 0, time: 1569538800300 };
+    });
+
+    it('determines that the swipe was right to left', () => {
+      expect(swipedRightToLeft(start, end)).toBe(true);
+      expect(swipedLeftToRight(start, end)).toBe(false);
+    });
+
+    it('calculates the correct swipe difference', () => {
+      expect(getSwipeDifference(start, end)).toBe(50);
+    });
+  });
+
+  describe('checking if a swipe should change tabs', () => {
+    it('should change tab when the difference and velocity are significant', () => {
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 100, y: 0, time: 1569538800001 };
+      expect(swipeShouldChangeTab(start, end)).toBe(true);
+    });
+
+    it('should not change tab when the difference is small', () => {
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 1, y: 0, time: 1569538800001 };
+      expect(swipeShouldChangeTab(start, end)).toBe(false);
+    });
+
+    it('should not change tab when the velocity is small', () => {
+      start = { x: 0, y: 0, time: 1569538800000 };
+      end = { x: 100, y: 0, time: 1569538900000 };
+      expect(swipeShouldChangeTab(start, end)).toBe(false);
+    });
+  });
+});

package/src/tabs/utils.ts

@@ -35,23 +35,3 @@ 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));

package/src/tooltip/Tooltip.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import Button from '../button';
 
 import Tooltip from './Tooltip';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Tooltip,
@@ -40,10 +40,5 @@ export const OpenedTooltip: Story = {
 
 export const OpenedTooltipDark: Story = {
   ...OpenedTooltip,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], OpenedTooltip),
 };

package/src/tabs/utils.spec.ts

@@ -1,126 +0,0 @@
-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();
-  });
-
-  describe('when the ending x axis is greater than the starting x axis', () => {
-    beforeEach(() => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 50, y: 0, time: 1569538800300 };
-    });
-
-    it('determines that the swipe was left to right', () => {
-      expect(swipedLeftToRight(start, end)).toBe(true);
-      expect(swipedRightToLeft(start, end)).toBe(false);
-    });
-
-    it('calculates the correct swipe difference', () => {
-      expect(getSwipeDifference(start, end)).toBe(50);
-    });
-  });
-
-  describe('when the ending x axis is less than the starting x axis', () => {
-    beforeEach(() => {
-      start = { x: 50, y: 0, time: 1569538800000 };
-      end = { x: 0, y: 0, time: 1569538800300 };
-    });
-
-    it('determines that the swipe was right to left', () => {
-      expect(swipedRightToLeft(start, end)).toBe(true);
-      expect(swipedLeftToRight(start, end)).toBe(false);
-    });
-
-    it('calculates the correct swipe difference', () => {
-      expect(getSwipeDifference(start, end)).toBe(50);
-    });
-  });
-
-  describe('checking if a swipe should change tabs', () => {
-    it('should change tab when the difference and velocity are significant', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 100, y: 0, time: 1569538800001 };
-      expect(swipeShouldChangeTab(start, end)).toBe(true);
-    });
-
-    it('should not change tab when the difference is small', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 1, y: 0, time: 1569538800001 };
-      expect(swipeShouldChangeTab(start, end)).toBe(false);
-    });
-
-    it('should not change tab when the velocity is small', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 100, y: 0, time: 1569538900000 };
-      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));