Pagination.stories.jsx

/* eslint-disable no-console */
import React, { useState } from 'react';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { storyDecoratorCase } from '../../../../.storybook';
import Pagination from '../Pagination';
import PaginationView from '../PaginationView';
import PaginationShowMore from '../PaginationShowMore';
import { SomePage, SomePageContent } from './components';
import { usePaginationApiBased } from './hooks';
import styles from './components.scss';

export function InternalHook() {
  const [pageCurrent, setPageCurrent] = useState(1);

  return (
    <Pagination
      separator={text('separator', '...')}
      itemsTotal={number('itemsTotal', 1024)}
      itemsAtPage={number('itemsAtPage', 30)}
      pageLinkPrefix={text('pageLinkPrefix', '?page=')}
      pageLimit={number('pageLimit', 6)}
      pageCurrent={pageCurrent}
      onPageSelect={setPageCurrent}
    />
  );
}

export function ShowMore() {
  const { pageData, pagination } = usePaginationApiBased();

  return (
    <SomePage>
      <SomePageContent list={pageData} />
      {!pagination.isVisibleShowMore ? null : (
        <PaginationShowMore
          className={styles.buttonShowMore}
          onClick={pagination.onShowMore}
        >
          Show more
        </PaginationShowMore>
      )}
    </SomePage>
  );
}

export function PaginationWithShowMore() {
  const { pageData, pagination } = usePaginationApiBased();

  return (
    <SomePage>
      <SomePageContent list={pageData} />
      {!pagination.isVisibleShowMore ? null : (
        <PaginationShowMore
          className={styles.buttonShowMore}
          onClick={pagination.onShowMore}
        >
          Show more
        </PaginationShowMore>
      )}
      <PaginationView
        model={pagination.model}
        onPageSelect={pagination.onPageSelect}
      />
    </SomePage>
  );
}

export default {
  title: 'core/Pagination',
  decorators: [withKnobs, storyDecoratorCase],
};