Merge pull request #37 from DistributedCollective/feat/SOV-680-d-2-address-table-pagination

[AddressTablePagination] - add component

Author: pietro-maximoff

.changeset/green-kiwis-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+SOV-680: add address table pagination component

packages/ui/src/1_atoms/Icon/iconNames.ts

@@ -0,0 +1,26 @@
+export const ARROW_DOWN_WIDE = 'arrow-down-wide';
+export const ARROW_DOWN = 'arrow-down';
+export const ARROW_RIGHT = 'arrow-right';
+export const ARROW_FORWARD = 'arrow-forward';
+export const ARROW_BACK = 'arrow-back';
+export const DEPOSIT = 'deposit';
+export const EDIT = 'edit';
+export const FAILED_TX = 'failed-tx';
+export const INFO = 'info';
+export const MEATBALLS_MENU = 'meatballs-menu';
+export const NEW_TAB = 'new-tab';
+export const NOTIFICATIONS_ACTIVE = 'notifications-active';
+export const NOTIFICATIONS = 'notifications';
+export const PENDING = 'pending';
+export const SEARCH = 'search';
+export const SETTINGS = 'settings';
+export const SUCCESS_ICON = 'success-icon';
+export const SWAP_ARROW = 'swap-arrow';
+export const TRANSFER = 'transfer';
+export const TREND_ARROW_UP = 'trend-arrow-up';
+export const TREND_ARROW_DOWN = 'trend-arrow-down';
+export const WARNING = 'warning';
+export const WITHDRAW = 'withdraw';
+export const X_MARK = 'x-mark';
+export const COPY = 'copy';
+export const EXIT = 'exit';

packages/ui/src/1_atoms/Icon/iconSvgPaths.ts

@@ -10,6 +10,9 @@ export const IconSvgPaths: Record<IconName, string[]> = {
   'arrow-forward': [
     'M5.68329 19.9305L13.8213 11.9975L5.68329 4.06649L7.87301 1.93275L18.2007 11.9995L7.87301 22.0662L5.68329 19.9305Z',
   ],
+  'arrow-back': [
+    'M18.3167 4.06951L10.1787 12.0025L18.3167 19.9335L16.1269 22.0673L5.79922 12.0005L16.1269 1.93378L18.3167 4.06951Z',
+  ],
   'arrow-right': [
     'M16.01 10.9999H4.0001V12.9998H16.01V15.9998L20.0002 12L16.01 7.9999V10.9999Z',
   ],

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.module.css

@@ -0,0 +1,10 @@
+.AddressTablePagination {
+    @apply flex justify-center;
+
+    & > button {
+        @apply mx-8 bg-transparent border-none outline-none cursor-pointer transition-opacity;
+        &:disabled {
+            @apply opacity-50 cursor-not-allowed;
+        }
+    }
+}

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.stories.tsx

@@ -0,0 +1,26 @@
+import { Story } from '@storybook/react';
+
+import React, { ComponentProps } from 'react';
+
+import { AddressTablePagination } from './AddressTablePagination';
+
+export default {
+  title: 'Molecule/AddressTablePagination',
+  component: AddressTablePagination,
+};
+
+const Template: Story<ComponentProps<typeof AddressTablePagination>> = args => (
+  <>
+    <AddressTablePagination
+      {...args}
+      onPageChange={offset => alert('offset - ' + offset)}
+    />
+  </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  className: '',
+  dataLayoutId: '',
+  itemsPerPage: 5,
+};

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React from 'react';
+
+import { AddressTablePagination } from './AddressTablePagination';
+
+describe('AddressTablePagination', () => {
+  it('renders AddressTablePagination', () => {
+    const onPageChange = jest.fn();
+    const { findAllByRole } = render(
+      <AddressTablePagination onPageChange={onPageChange} />,
+    );
+    expect(findAllByRole('svg[data-icon="arrow-back"]')).toBeDefined();
+  });
+
+  it('does not allow to click Previous without clicking Next first', () => {
+    const onPageChange = jest.fn();
+    const { getAllByRole } = render(
+      <AddressTablePagination onPageChange={onPageChange} />,
+    );
+    getAllByRole('button').forEach(element => {
+      userEvent.click(element);
+    });
+    expect(onPageChange).toBeCalledTimes(1);
+  });
+});

packages/ui/src/2_molecules/AddressTablePagination/AddressTablePagination.tsx

@@ -0,0 +1,50 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import classnames from 'classnames';
+
+import { Icon } from '../../1_atoms';
+import styles from './AddressTablePagination.module.css';
+
+type AddressTablePaginationProps = {
+  onPageChange: (value: number) => void;
+  className?: string;
+  dataLayoutId?: string;
+  itemsPerPage?: number;
+};
+
+const DEFAULT_ITEMS_PER_PAGE = 5;
+
+export const AddressTablePagination: FC<AddressTablePaginationProps> = ({
+  onPageChange,
+  className,
+  dataLayoutId,
+  itemsPerPage = DEFAULT_ITEMS_PER_PAGE,
+}) => {
+  const [offset, setOffset] = useState(0);
+
+  const handleClickNext = useCallback(() => {
+    setOffset(offset + itemsPerPage);
+    onPageChange(offset + itemsPerPage);
+  }, [setOffset, offset, itemsPerPage, onPageChange]);
+
+  const handleClickPrevious = useCallback(() => {
+    setOffset(offset - itemsPerPage);
+    onPageChange(offset - itemsPerPage);
+  }, [setOffset, offset, itemsPerPage, onPageChange]);
+
+  const isDisabled = useMemo(() => offset <= 0, [offset]);
+
+  return (
+    <div
+      data-layout-id={dataLayoutId}
+      className={classnames(styles.AddressTablePagination, className)}
+    >
+      <button type="button" disabled={isDisabled} onClick={handleClickPrevious}>
+        <Icon icon="arrow-back" size={12} />
+      </button>
+      <button type="button" onClick={handleClickNext}>
+        <Icon icon="arrow-forward" size={12} />
+      </button>
+    </div>
+  );
+};