feat(Pagination): initial

e2e/__tests__/pagination.test.js

@@ -0,0 +1,12 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/Pagination', 'common'),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+

src/components/Pagination/Pagination.js

@@ -0,0 +1,162 @@
+// @flow
+
+import React from 'react';
+import memoize from 'lodash/memoize';
+import { css } from 'emotion';
+
+import { Select } from '../Select';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme, PaginationTag, PaginationItemsTag, PaginationItemTag } from './Pagination.theme';
+
+type PaginationProps = {
+  page?: number,
+  pageSize?: number,
+  defaultPage: number,
+  defaultPageSize: number,
+  total: number,
+  showSizeChanger?: boolean,
+  pageSizeOptions?: number[],
+  onChange?: (page: number, pageSize: number) => any,
+};
+
+type PaginationState = {
+  page: number,
+  pageSize: number,
+};
+
+const VISIBLE_RANGE = 2;
+
+const formatter = new Intl.NumberFormat('en-EN', { useGrouping: true, maximumFractionDigits: 0 });
+
+class Pagination extends React.Component<PaginationProps, PaginationState> {
+  static defaultProps = {
+    defaultPage: 1,
+    defaultPageSize: 10,
+    total: 0,
+    showSizeChanger: false,
+    pageSizeOptions: [10, 20, 30, 40],
+  };
+
+  constructor(props: PaginationProps) {
+    super(props);
+
+    this.state = {
+      page: props.defaultPage,
+      pageSize: props.defaultPageSize,
+    };
+  }
+
+  // $FlowFixMe
+  createOnChange = memoize((page) => () => {
+    const { onChange, pageSize: pageSizeFormProps } = this.props;
+    const { pageSize: pageSizeFromState } = this.state;
+
+    const pageSize = pageSizeFormProps || pageSizeFromState;
+
+    this.setState(() => ({ page }));
+
+    if (typeof onChange === 'function') {
+      onChange(page, pageSize);
+    }
+  });
+
+  onChangePageSize = (value: mixed) => {
+    const pageSize = parseInt(value, 10);
+
+    const { total, onChange } = this.props;
+    const { page } = this.state;
+
+    const nextPage = Math.min(page, Math.round(total / pageSize));
+
+    this.setState(() => ({ pageSize, page: nextPage }));
+
+    if (typeof onChange === 'function') {
+      onChange(nextPage, pageSize);
+    }
+  };
+
+  // $FlowFixMe
+  getPageSizeOptions = (pageSizeOptions: number[]) => pageSizeOptions.map((value) => ({ value, label: String(value) }));
+
+  render() {
+    const { page: pageFromProps, pageSize: pageSizeFormProps, total, pageSizeOptions = [], showSizeChanger } = this.props;
+    const { page: pageFromState, pageSize: pageSizeFromState } = this.state;
+
+    const page = pageFromProps || pageFromState;
+    const pageSize = pageSizeFormProps || pageSizeFromState;
+
+    const numberOfPages = Math.ceil(total / pageSize);
+
+    const leftSide = Math.min(page - VISIBLE_RANGE, numberOfPages - VISIBLE_RANGE * 2);
+    const rightSide = page + VISIBLE_RANGE;
+
+    const showLeftMore = leftSide > 2;
+    const showRightMore = rightSide < numberOfPages - 1;
+
+    const start = leftSide > 1 ? leftSide : 1;
+
+    const pages = [...Array(VISIBLE_RANGE * 2 + 1).keys()].slice(0, numberOfPages);
+
+    const firstRecordIndex = (page - 1) * pageSize + 1;
+    const lastRecordIndex = Math.min(total, page * pageSize);
+
+    return (
+      <PaginationTag tagName="div">
+        <Button size="sm" className={ css`flex-shrink: 0;` } onClick={ this.createOnChange(page - 1) } color="neutral" variant="outlined" squared disabled={ page <= 1 }>
+          <Icon name="ChevronLeft" size="xs" />
+        </Button>
+
+        <PaginationItemsTag>
+          <If condition={ leftSide > 1 }>
+            <PaginationItemTag active={ page === 1 } onClick={ this.createOnChange(1) }>1</PaginationItemTag>
+          </If>
+
+          <If condition={ showLeftMore }>
+            <PaginationItemTag disabled>
+              <Icon name="More" />
+            </PaginationItemTag>
+          </If>
+
+          {
+            pages.map((index) => (
+              <PaginationItemTag key={ index + start } active={ index + start === page } onClick={ this.createOnChange(index + start) }>
+                { index + start }
+              </PaginationItemTag>
+            ))
+          }
+
+          <If condition={ showRightMore }>
+            <PaginationItemTag disabled>
+              <Icon name="More" />
+            </PaginationItemTag>
+          </If>
+
+          <If condition={ rightSide < numberOfPages }>
+            <PaginationItemTag active={ page === numberOfPages } onClick={ this.createOnChange(numberOfPages) }>{ numberOfPages }</PaginationItemTag>
+          </If>
+        </PaginationItemsTag>
+
+        <Button size="sm" className={ css`flex-shrink: 0;` } onClick={ this.createOnChange(page + 1) } color="neutral" variant="outlined" squared disabled={ page >= numberOfPages }>
+          <Icon name="ChevronRight" size="xs" />
+        </Button>
+
+        <If condition={ !!showSizeChanger }>
+          <Select
+            className={ css`width: 64px; margin-left: 12px;` }
+            value={ pageSize }
+            options={ this.getPageSizeOptions(pageSizeOptions) }
+            onChange={ this.onChangePageSize }
+          />
+        </If>
+
+        <Text className={ css`margin-left: 12px;` }>
+          { formatter.format(firstRecordIndex) } - { formatter.format(lastRecordIndex) } of { formatter.format(total) } records
+        </Text>
+      </PaginationTag>
+    );
+  }
+}
+
+export { Pagination, theme };

src/components/Pagination/Pagination.stories.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-alert */
+
+import React from 'react';
+
+export default (asStory) => {
+  asStory('Components/Pagination', module, (story, { Pagination, Column }) => {
+    story
+      .add('common', () => (
+        <Column gap="lg">
+          <Pagination defaultPage={ 1 } total={ 500 } />
+          <Pagination defaultPage={ 2 } total={ 500 } />
+          <Pagination defaultPage={ 3 } total={ 500 } />
+          <Pagination defaultPage={ 4 } total={ 500 } />
+          <Pagination defaultPage={ 5 } total={ 500 } />
+          <Pagination defaultPage={ 46 } total={ 500 } />
+          <Pagination defaultPage={ 47 } total={ 500 } />
+          <Pagination defaultPage={ 48 } total={ 500 } />
+          <Pagination defaultPage={ 49 } total={ 500 } />
+          <Pagination defaultPage={ 50 } total={ 500 } />
+          <Pagination defaultPage={ 50 } total={ 50000 } showSizeChanger />
+        </Column>
+      ));
+  });
+};

src/components/Pagination/Pagination.test.js

@@ -0,0 +1,103 @@
+// @flow
+import React from 'react';
+import Select from 'react-select';
+import { Pagination } from './Pagination';
+
+import { PaginationItemTag } from './Pagination.theme';
+
+import { ButtonTag } from '../Button/Button.theme';
+
+describe('<Pagination />', () => {
+  it('should trigger onChange with next page by clicking on next button', () => {
+    const onChange = jest.fn();
+
+    const pagination = mount(
+      <Pagination onChange={ onChange } defaultPage={ 5 } total={ 500 } />,
+    );
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"1345675041 - 50 of 500 records"',
+    );
+
+    pagination
+      .find(ButtonTag)
+      .at(1)
+      .simulate('click');
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"1456785051 - 60 of 500 records"',
+    );
+    expect(onChange.mock.calls).toEqual([[6, 10]]);
+  });
+
+  it('should trigger onChange with prev page by clicking on prev button', () => {
+    const onChange = jest.fn();
+
+    const pagination = mount(
+      <Pagination onChange={ onChange } defaultPage={ 5 } total={ 500 } />,
+    );
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"1345675041 - 50 of 500 records"',
+    );
+
+    pagination
+      .find(ButtonTag)
+      .at(0)
+      .simulate('click');
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"1234565031 - 40 of 500 records"',
+    );
+    expect(onChange.mock.calls).toEqual([[4, 10]]);
+  });
+
+  it('should trigger onChange with last page by clicking on last page', () => {
+    const onChange = jest.fn();
+
+    const pagination = mount(
+      <Pagination onChange={ onChange } defaultPage={ 5 } total={ 500 } />,
+    );
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"1345675041 - 50 of 500 records"',
+    );
+
+    pagination
+      .find(PaginationItemTag)
+      .at(8)
+      .simulate('click');
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"14647484950491 - 500 of 500 records"',
+    );
+    expect(onChange.mock.calls).toEqual([[50, 10]]);
+  });
+
+  it('should trigger onChange with new page size by changing page size', () => {
+    const onChange = jest.fn();
+
+    const pagination = mount(
+      <Pagination
+        onChange={ onChange }
+        defaultPage={ 5 }
+        total={ 500 }
+        showSizeChanger
+      />,
+    );
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"134567501041 - 50 of 500 records"',
+    );
+
+    pagination
+      .find(Select)
+      .props()
+      .onChange({ value: 20, label: '20' });
+
+    expect(pagination.text()).toMatchInlineSnapshot(
+      '"134567252081 - 100 of 500 records"',
+    );
+    expect(onChange.mock.calls).toEqual([[5, 20]]);
+  });
+});

src/components/Pagination/Pagination.theme.js

@@ -0,0 +1,80 @@
+//@flow
+
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'pagination';
+
+const [PaginationTag, themePagination] = createThemeTag(name, () => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  modifiers: {
+  },
+}));
+
+const [PaginationItemTag, themePaginationItem] = createThemeTag(`${name}Item`, ({ COLORS }: *) => ({
+  root: {
+    height: 36,
+    marginRight: 24,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    flexShrink: 0,
+    color: COLORS.GRAY5,
+    cursor: 'pointer',
+    userSelect: 'none',
+
+    '&:hover': {
+      color: COLORS.DARK_GRAY1,
+    },
+
+    '&:last-child': {
+      marginRight: 0,
+    },
+  },
+  modifiers: {
+    active: {
+      fontSize: 14,
+      color: COLORS.WHITE,
+      pointerEvents: 'none',
+
+      '&:before': {
+        content: '\'\'',
+        backgroundColor: COLORS.LIGHT_BLUE,
+        borderRadius: 18,
+        position: 'absolute',
+        left: '- calc((28px - 100%) / 2)',
+        top: 4,
+        width: 28,
+        height: 28,
+        zIndex: -1,
+      },
+    },
+    disabled: {
+      pointerEvents: 'none',
+    },
+  },
+}));
+
+const [PaginationItemsTag, themePaginationItems] = createThemeTag(`${name}Items`, () => ({
+  root: {
+    display: 'flex',
+    padding: '0 24px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  modifiers: {
+  },
+}));
+
+const theme = {
+  ...themePagination,
+  ...themePaginationItem,
+  ...themePaginationItems,
+};
+
+export { theme, PaginationTag, PaginationItemsTag, PaginationItemTag };
+

src/components/Pagination/index.js

@@ -0,0 +1 @@
+export * from './Pagination';