@transferwise/components 0.0.0-experimental-dad811d → 0.0.0-experimental-5ea6623

package/src/sizeSwapper/SizeSwapper.js

@@ -1,69 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { forwardRef, useRef } from 'react';
-
-import { Breakpoint } from '../common';
-import { useClientWidth } from '../common/hooks';
-
-const Layout = { COLUMN: 'COLUMN' };
-
-const SizeSwapper = forwardRef(({ items, inline }, reference) => {
-  const parentReference = useRef(null);
-  const [clientWidth] = useClientWidth({ ref: reference || parentReference });
-
-  if (!items || items.length === 0) {
-    return null;
-  }
-  // If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
-  // Do not use deconstruct here to get items and layout.
-  let itemsToRender = [];
-
-  if (clientWidth) {
-    itemsToRender = items.filter(({ breakpoint = 0 }) => clientWidth >= breakpoint).pop();
-  } else {
-    // On SSR environments useClientWidth returns null because ref is undefined so we render
-    // all elements by default.
-    // If there's no SSR and on first Hydration only the right elements are going to be rendered.
-    // If clientWidth is null or zero all elements render like a responsive technique would do.
-    itemsToRender.items = items.map(({ items }) => Object.values(items));
-  }
-
-  // Always return parent container even if there are no items to display to
-  // keep the ref on DOM and let clientWidth be calculated properly.
-  return (
-    <div
-      ref={parentReference}
-      className={classNames('np-size-swapper', {
-        'd-flex': !inline,
-        'd-inline-flex': inline,
-        'flex-column': itemsToRender && itemsToRender.layout === Layout.COLUMN,
-        'flex-wrap': itemsToRender && itemsToRender.wrap,
-      })}
-      style={{ visibility: clientWidth ? 'visible' : 'hidden' }}
-    >
-      {itemsToRender && itemsToRender.items}
-    </div>
-  );
-});
-
-SizeSwapper.Breakpoint = Breakpoint;
-SizeSwapper.Layout = Layout;
-
-SizeSwapper.propTypes = {
-  inline: PropTypes.bool,
-  /** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout  */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      items: PropTypes.arrayOf(PropTypes.element),
-      breakpoint: PropTypes.number,
-      layout: PropTypes.oneOf([SizeSwapper.Layout.COLUMN]),
-      wrap: PropTypes.bool,
-    }),
-  ).isRequired,
-};
-
-SizeSwapper.defaultProps = {
-  inline: false,
-};
-
-export default SizeSwapper;

package/src/sizeSwapper/SizeSwapper.spec.js

@@ -1,100 +0,0 @@
-import '@testing-library/jest-dom';
-import { Breakpoint } from '../common';
-import { render, fireEvent, screen } from '../test-utils';
-
-import SizeSwapper from '.';
-
-jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
-
-describe('SizeSwapper', () => {
-  const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
-  };
-  const breakpoints = [0, Breakpoint.EXTRA_SMALL];
-
-  const items = breakpoints.map((bp) => ({
-    items: [...new Array(2)].map((_, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <div key={`${index}-${bp}`}>
-        element-{index + 1}-{bp}
-      </div>
-    )),
-    layout: SizeSwapper.Layout.COLUMN,
-    breakpoint: bp,
-  }));
-
-  afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
-  });
-
-  it('renders all elements and hides sizeswapper if clientWidth is not defined', () => {
-    const { container } = render(<SizeSwapper items={items} />);
-
-    expect(screen.getByText('element-1-0')).toBeInTheDocument();
-    expect(screen.getByText('element-2-0')).toBeInTheDocument();
-    expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-    expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: hidden`);
-  });
-
-  it('changes visibility when clientWidth is set', () => {
-    const { container } = render(<SizeSwapper items={items} />);
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: hidden`);
-
-    resetClientWidth(breakpoints[1]);
-    fireEvent(window, new Event('resize'));
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: visible`);
-  });
-
-  it('switches elements according to breakpoints', () => {
-    render(<SizeSwapper items={items} />);
-    resetClientWidth(breakpoints[1] - 1);
-    fireEvent(window, new Event('resize'));
-
-    expect(screen.getByText(`element-1-0`)).toBeInTheDocument();
-    expect(screen.getByText(`element-2-0`)).toBeInTheDocument();
-    expect(screen.queryByText(`element-1-${breakpoints[1]}`)).not.toBeInTheDocument();
-    expect(screen.queryByText(`element-2-${breakpoints[1]}`)).not.toBeInTheDocument();
-
-    // resetClientWidth(breakpoints[1]);
-    // fireEvent(window, new Event('resize'));
-
-    // expect(screen.queryByText(`element-1-${breakpoints[0]}`)).not.toBeInTheDocument();
-    // expect(screen.queryByText(`element-2-${breakpoints[0]}`)).not.toBeInTheDocument();
-    // expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-    // expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-  });
-
-  describe('when ref is window', () => {
-    it('switches elements according to breakpoints', () => {
-      render(<SizeSwapper ref={window} items={items} />);
-      global.innerWidth = breakpoints[1] - 1;
-      fireEvent(window, new Event('resize'));
-
-      expect(screen.getByText(`element-1-0`)).toBeInTheDocument();
-      expect(screen.getByText(`element-2-0`)).toBeInTheDocument();
-      expect(screen.queryByText(`element-1-${breakpoints[1]}`)).not.toBeInTheDocument();
-      expect(screen.queryByText(`element-2-${breakpoints[1]}`)).not.toBeInTheDocument();
-
-      [, global.innerWidth] = breakpoints;
-
-      fireEvent(window, new Event('resize'));
-
-      expect(screen.queryByText(`element-1-${breakpoints[0]}`)).not.toBeInTheDocument();
-      expect(screen.queryByText(`element-2-${breakpoints[0]}`)).not.toBeInTheDocument();
-      expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-      expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-    });
-  });
-});

package/src/sizeSwapper/SizeSwapper.story.js

@@ -1,34 +0,0 @@
-import SizeSwapper from './SizeSwapper';
-
-export default {
-  component: SizeSwapper,
-  title: 'Internal/SizeSwapper',
-};
-
-export const Basic = () => {
-  const breakpoints = [
-    0,
-    SizeSwapper.Breakpoint.EXTRA_SMALL,
-    SizeSwapper.Breakpoint.SMALL,
-    SizeSwapper.Breakpoint.MEDIUM,
-    SizeSwapper.Breakpoint.LARGE,
-    SizeSwapper.Breakpoint.EXTRA_LARGE,
-  ];
-
-  const items = breakpoints.map((bp, key) => {
-    const isColumn = (key + 1) % 2 === 0;
-
-    return {
-      items: [...new Array(4)].map((value, key2) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={`el-${key2}-${key}`} className="p-a-3 well m-x-2">
-          Element shown from {bp}px {isColumn && `in ${SizeSwapper.Layout.COLUMN} mode`}
-        </div>
-      )),
-      layout: isColumn ? SizeSwapper.Layout.COLUMN : null,
-      breakpoint: bp,
-    };
-  });
-
-  return <SizeSwapper items={items} />;
-};

package/src/sizeSwapper/index.js

@@ -1 +0,0 @@
-export { default } from './SizeSwapper';