1056

pending completion

Build # 1056

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/<a class="double-link" href="https://git"><a class=hub.com/couds/react-bulma-components/commit/<a class="double-link" href="https://git"><a class=hub.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77aab0">e04640170<a href="https://github.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77aab0">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/couds/react-bulma-components/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/couds/react-bulma-components/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77aab0&quot;&gt;e04640170&lt;/a&gt;&lt;a href=&quot;https://github.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77aab0&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b0&lt;/a&gt;8a77aab0&quot;&gt;&quot;&gt;Merge &lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/couds/react-bulma-components/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/couds/react-bulma-components/commit/<a class="double-link" href="https://github.com/couds/react-bulma-components/commit/efe8d7f6e57c88966da8d27186f0274480b6306a">efe8d7f6e</a><a href="https://github.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77aab0">&amp;quot;&amp;gt;efe8d7f6e&amp;lt;/a&amp;gt;&amp;quot;&amp;gt;efe8d7f6e&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/couds/react-bulma-components/commit/e046401702984d440976d633c113d4b08a77a&lt;/a&gt;ab0&quot;&gt; into &lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/couds/react-bulma-components/commit/<a class="double-link" href="https://github.com/couds/react-bulma-components/commit/732e00f37">732e00f37">732e00f37</a>

Pull Request Pull Request #309: Update docs

Run Details

132 of 154 branches covered (85.71%)

Branch coverage included in aggregate %.

149 of 149 new or added lines in 36 files covered. (100.0%)

528 of 542 relevant lines covered (97.42%)

45.6 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"
                    disabled={disabled}
                  >
                    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"
                    disabled={disabled}
                  >
                    {total}
                  </a>
                </li>
              </>
            )}
          </ul>
        </>
      )}
    </Element>
  );
};

Pagination.propTypes = {
  /**
   * This function its called when the user click on ano button that trigger a page change
   * the parameter of the function is the new page number
   */
  onChange: PropTypes.func.isRequired,
  /** 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,
  /** Text of the Next button */
  next: PropTypes.node,
  /** Text of the Previous button */
  previous: PropTypes.node,
  showPrevNext: PropTypes.bool,
  showFirstLast: PropTypes.bool,
  /**
   * If true will hide the pagination if `total == 1`
   */
  autoHide: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  position: PropTypes.oneOf(['center', 'right']),
  rounded: PropTypes.bool,
  renderAs: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.string,
    PropTypes.object,
  ]),
};

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	disabled={disabled}
102	>
103	1
104	</a>
105	</li>
106	<li>
107	<span className="pagination-ellipsis">…</span>
108	</li>
109	</>
110	)}
111	{Array(lastPage - firstPage + 1)
112	.fill(0)
113	.map((_, i) => (
114	// eslint-disable-next-line react/no-array-index-key
115	<li key={i + firstPage}>	22✔
116	<a
117	role="button"
118	tabIndex={0}
119	className={classnames('pagination-link', {
120	'is-current': current === i + firstPage,
121	})}
122	onClick={
123	current === firstPage + i	22✔
124	? undefined
125	: () => onChange(firstPage + i)	×
126	}
127	aria-label={`Page ${i + firstPage}`}
128	aria-current="page"
129	disabled={disabled}
130	>
131	{i + firstPage}
132	</a>
133	</li>
134	))}
135	{showFirstLast && current !== lastPage && total !== lastPage && (	10✔
136	<>
137	<li key={total}>
138	<span className="pagination-ellipsis">…</span>
139	</li>
140	<li>
141	<a
142	role="button"
143	tabIndex={0}
144	className="pagination-link"
145	onClick={() => onChange(total)}	×
146	aria-label={`Page ${total}`}
147	aria-current="page"
148	disabled={disabled}
149	>
150	{total}
151	</a>
152	</li>
153	</>
154	)}
155	</ul>
156	</>
157	)}
158	</Element>
159	);
160	};
161
162	Pagination.propTypes = {	2✔
163	/**
164	* This function its called when the user click on ano button that trigger a page change
165	* the parameter of the function is the new page number
166	*/
167	onChange: PropTypes.func.isRequired,
168	/** Current page */
169	current: PropTypes.number,
170	/** whether to disable the buttons */
171	disabled: PropTypes.bool,
172	/** Total pages in total */
173	total: PropTypes.number,
174	/** 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) */
175	delta: PropTypes.number,
176	/** Text of the Next button */
177	next: PropTypes.node,
178	/** Text of the Previous button */
179	previous: PropTypes.node,
180	showPrevNext: PropTypes.bool,
181	showFirstLast: PropTypes.bool,
182	/**
183	* If true will hide the pagination if `total == 1`
184	*/
185	autoHide: PropTypes.bool,
186	size: PropTypes.oneOf(['small', 'medium', 'large']),
187	position: PropTypes.oneOf(['center', 'right']),
188	rounded: PropTypes.bool,
189	renderAs: PropTypes.oneOfType([
190	PropTypes.func,
191	PropTypes.string,
192	PropTypes.object,
193	]),
194	};
195
196	Pagination.defaultProps = {	2✔
197	total: 1,
198	current: 1,
199	delta: 1,
200	next: 'Next',
201	previous: 'Previous',
202	renderAs: 'nav',
203	showPrevNext: true,
204	autoHide: true,
205	};
206
207	export default Pagination;

couds / react-bulma-components / 1056

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