1052

pending completion

Build # 1052

Build Type

Pull #309

travis-ci

Committed by

web-flow

Commit Message

<a href="https://github.com/couds/react-bulma-components/commit/<a class=hub.com/couds/react-bulma-components/commit/43357779f109a2bee5b3bf31b7b8923e9aeeb587">43357779f<a href="https://github.com/couds/react-bulma-components/commit/43357779f109a2bee5b3bf31b7b8923e9aeeb587">">Merge </a><a class="double-link" href="https://github.com/couds/react-bulma-components/commit/<a class="double-link" href="https://github.com/couds/react-bulma-components/commit/ae2e4bbce6998a2760ef463407e6a33761673296">ae2e4bbce</a>">ae2e4bbce</a><a href="https://github.com/couds/react-bulma-components/commit/43357779f109a2bee5b3bf31b7b8923e9aeeb587"> into 732e00f37">732e00f37</a>

Pull Request Pull Request #309: Update docs

Run Details

132 of 154 branches covered (85.71%)

Branch coverage included in aggregate %.

147 of 147 new or added lines in 34 files covered. (100.0%)

528 of 542 relevant lines covered (97.42%)

45.61 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.48

/src/components/pagination/pagination.js

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { normalizeAlign } from '../../services/normalizer';

import Element from '../element';

const getFirstPage = (current, last, delta) => {
  if (current === 1) {
    return 1;
  }

  const minPage = last - delta * 2;
  const page = Math.min(current - delta, minPage);

  return page <= 0 ? 1 : page;
};

const getLastPage = (current, total, delta) => {
  if (current === total) {
    return total;
  }

  const maxPage = delta * 2 + 1;
  const page = Math.max(current + delta, maxPage);
  return page > total ? total : page;
};

const Pagination = ({
  current,
  disabled,
  total,
  next,
  previous,
  showPrevNext,
  showFirstLast,
  delta,
  autoHide,
  className,
  size,
  position,
  rounded,
  onChange,
  ...props
}) => {
  if ((total <= 1 && autoHide) || current > total) {
    return null;
  }

  const lastPage = getLastPage(current, total, delta);
  const firstPage = getFirstPage(current, lastPage, delta);
  const prevDisabled = current === 1 || disabled;
  const nextDisabled = current === total || disabled;

  return (
    <Element
      {...props}
      className={classnames('pagination', className, {
        [`is-${size}`]: size,
        [`is-${normalizeAlign(position)}`]: position,
        'is-rounded': rounded,
      })}
      aria-label="pagination"
    >
      {showPrevNext && (
        <>
          <a
            role="button"
            tabIndex={0}
            onClick={prevDisabled ? undefined : () => onChange(current - 1)}
            className="pagination-previous"
            title="This is the first page"
            disabled={prevDisabled}
          >
            {previous}
          </a>
          <a
            role="button"
            tabIndex={0}
            onClick={nextDisabled ? undefined : () => onChange(current + 1)}
            className="pagination-next"
            disabled={nextDisabled}
          >
            {next}
          </a>
        </>
      )}
      {delta > 0 && (
        <>
          <ul className="pagination-list">
            {showFirstLast && current !== 1 && firstPage !== 1 && (
              <>
                <li key={1}>
                  <a
                    role="button"
                    tabIndex={0}
                    className="pagination-link"
                    onClick={() => onChange(1)}
                    aria-label="Page 1"
                    aria-current="page"
                  >
                    1
                  </a>
                </li>
                <li>
                  <span className="pagination-ellipsis">&hellip;</span>
                </li>
              </>
            )}
            {Array(lastPage - firstPage + 1)
              .fill(0)
              .map((_, i) => (
                // eslint-disable-next-line react/no-array-index-key
                <li key={i + firstPage}>
                  <a
                    role="button"
                    tabIndex={0}
                    className={classnames('pagination-link', {
                      'is-current': current === i + firstPage,
                    })}
                    onClick={
                      current === firstPage + i
                        ? undefined
                        : () => onChange(firstPage + i)
                    }
                    aria-label={`Page ${i + firstPage}`}
                    aria-current="page"
                    disabled={disabled}
                  >
                    {i + firstPage}
                  </a>
                </li>
              ))}
            {showFirstLast && current !== lastPage && total !== lastPage && (
              <>
                <li key={total}>
                  <span className="pagination-ellipsis">&hellip;</span>
                </li>
                <li>
                  <a
                    role="button"
                    tabIndex={0}
                    className="pagination-link"
                    onClick={() => onChange(total)}
                    aria-label={`Page ${total}`}
                    aria-current="page"
                  >
                    {total}
                  </a>
                </li>
              </>
            )}
          </ul>
        </>
      )}
    </Element>
  );
};

Pagination.propTypes = {
  /** Current page */
  current: PropTypes.number,
  /** whether to disable the buttons */
  disabled: PropTypes.bool,
  /** Total pages in total */
  total: PropTypes.number,
  /** Amount og pages to display at the left and right of the current (if delta 2 and current page is 3, the paginator will display pages from 1 to 5) */
  delta: PropTypes.number,
  onChange: PropTypes.func,
  /** Text of the Next button */
  next: PropTypes.node,
  /** Text of the Previous button */
  previous: PropTypes.node,
  showPrevNext: PropTypes.bool,
  showFirstLast: PropTypes.bool,
  autoHide: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  position: PropTypes.oneOf(['center', 'right']),
  rounded: PropTypes.bool,
};

Pagination.defaultProps = {
  total: 1,
  current: 1,
  delta: 1,
  next: 'Next',
  previous: 'Previous',
  renderAs: 'nav',
  showPrevNext: true,
  autoHide: true,
};

export default Pagination;

1	import React from 'react';
2	import PropTypes from 'prop-types';
3	import classnames from 'classnames';
4	import { normalizeAlign } from '../../services/normalizer';
5
6	import Element from '../element';
7
8	const getFirstPage = (current, last, delta) => {	2✔
9	if (current === 1) {	8✔
10	return 1;	4✔
11	}
12
13	const minPage = last - delta * 2;	4✔
14	const page = Math.min(current - delta, minPage);	4✔
15
16	return page <= 0 ? 1 : page;	4✔
17	};
18
19	const getLastPage = (current, total, delta) => {	2✔
20	if (current === total) {	8✔
21	return total;	3✔
22	}
23
24	const maxPage = delta * 2 + 1;	5✔
25	const page = Math.max(current + delta, maxPage);	5✔
26	return page > total ? total : page;	5✔
27	};
28
29	const Pagination = ({	2✔
30	current,
31	disabled,
32	total,
33	next,
34	previous,
35	showPrevNext,
36	showFirstLast,
37	delta,
38	autoHide,
39	className,
40	size,
41	position,
42	rounded,
43	onChange,
44	...props
45	}) => {
46	if ((total <= 1 && autoHide) \|\| current > total) {	10✔
47	return null;	2✔
48	}
49
50	const lastPage = getLastPage(current, total, delta);	8✔
51	const firstPage = getFirstPage(current, lastPage, delta);	8✔
52	const prevDisabled = current === 1 \|\| disabled;	8✔
53	const nextDisabled = current === total \|\| disabled;	8✔
54
55	return (	8✔
56	<Element
57	{...props}
58	className={classnames('pagination', className, {
59	[`is-${size}`]: size,
60	[`is-${normalizeAlign(position)}`]: position,
61	'is-rounded': rounded,
62	})}
63	aria-label="pagination"
64	>
65	{showPrevNext && (	15✔
66	<>
67	<a
68	role="button"
69	tabIndex={0}
70	onClick={prevDisabled ? undefined : () => onChange(current - 1)}	✔
71	className="pagination-previous"
72	title="This is the first page"
73	disabled={prevDisabled}
74	>
75	{previous}
76	</a>
77	<a
78	role="button"
79	tabIndex={0}
80	onClick={nextDisabled ? undefined : () => onChange(current + 1)}	1✔
81	className="pagination-next"
82	disabled={nextDisabled}
83	>
84	{next}
85	</a>
86	</>
87	)}
88	{delta > 0 && (	15✔
89	<>
90	<ul className="pagination-list">
91	{showFirstLast && current !== 1 && firstPage !== 1 && (	8!
92	<>
93	<li key={1}>
94	<a
95	role="button"
96	tabIndex={0}
97	className="pagination-link"
98	onClick={() => onChange(1)}	×
99	aria-label="Page 1"
100	aria-current="page"
101	>
102	1
103	</a>
104	</li>
105	<li>
106	<span className="pagination-ellipsis">…</span>
107	</li>
108	</>
109	)}
110	{Array(lastPage - firstPage + 1)
111	.fill(0)
112	.map((_, i) => (
113	// eslint-disable-next-line react/no-array-index-key
114	<li key={i + firstPage}>	22✔
115	<a
116	role="button"
117	tabIndex={0}
118	className={classnames('pagination-link', {
119	'is-current': current === i + firstPage,
120	})}
121	onClick={
122	current === firstPage + i	22✔
123	? undefined
124	: () => onChange(firstPage + i)	×
125	}
126	aria-label={`Page ${i + firstPage}`}
127	aria-current="page"
128	disabled={disabled}
129	>
130	{i + firstPage}
131	</a>
132	</li>
133	))}
134	{showFirstLast && current !== lastPage && total !== lastPage && (	10✔
135	<>
136	<li key={total}>
137	<span className="pagination-ellipsis">…</span>
138	</li>
139	<li>
140	<a
141	role="button"
142	tabIndex={0}
143	className="pagination-link"
144	onClick={() => onChange(total)}	×
145	aria-label={`Page ${total}`}
146	aria-current="page"
147	>
148	{total}
149	</a>
150	</li>
151	</>
152	)}
153	</ul>
154	</>
155	)}
156	</Element>
157	);
158	};
159
160	Pagination.propTypes = {	2✔
161	/** Current page */
162	current: PropTypes.number,
163	/** whether to disable the buttons */
164	disabled: PropTypes.bool,
165	/** Total pages in total */
166	total: PropTypes.number,
167	/** Amount og pages to display at the left and right of the current (if delta 2 and current page is 3, the paginator will display pages from 1 to 5) */
168	delta: PropTypes.number,
169	onChange: PropTypes.func,
170	/** Text of the Next button */
171	next: PropTypes.node,
172	/** Text of the Previous button */
173	previous: PropTypes.node,
174	showPrevNext: PropTypes.bool,
175	showFirstLast: PropTypes.bool,
176	autoHide: PropTypes.bool,
177	size: PropTypes.oneOf(['small', 'medium', 'large']),
178	position: PropTypes.oneOf(['center', 'right']),
179	rounded: PropTypes.bool,
180	};
181
182	Pagination.defaultProps = {	2✔
183	total: 1,
184	current: 1,
185	delta: 1,
186	next: 'Next',
187	previous: 'Previous',
188	renderAs: 'nav',
189	showPrevNext: true,
190	autoHide: true,
191	};
192
193	export default Pagination;

couds / react-bulma-components / 1052

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous