Skip to content

Commit

Permalink
refactor(pagination): discovery 154 pf4 pagination (#129)
Browse files Browse the repository at this point in the history 
* styling, temp adjustments
* viewPaginationRow, pf4 component
* viewPaginationConstants, updated types
* viewOptionsReducer, focus paging, clean up
  • Loading branch information
@jenny-s51
jenny-s51 authored Aug 8, 2022
1 parent ceca4e3 commit cec3e45
Show file tree
Hide file tree
Showing 11 changed files with 290 additions and 544 deletions.
1 change: 0 additions & 1 deletion src/components/scans/__tests__/__snapshots__/scans.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ exports[`Scans Component should render a non-connected component: non-connected
pageSize={0}
selectedItems={Array []}
totalCount={0}
totalPages={0}
viewType="SCANS_VIEW"
/>
<div
Expand Down
1 change: 0 additions & 1 deletion src/components/sources/__tests__/__snapshots__/sources.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,6 @@ exports[`Sources Component should render a non-connected component: non-connecte
pageSize={0}
selectedItems={Array []}
totalCount={0}
totalPages={0}
viewType="SOURCES_VIEW"
/>
<div
Expand Down
325 changes: 164 additions & 161 deletions src/components/viewPaginationRow/__tests__/__snapshots__/viewPaginationRow.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,196 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ViewPaginationRow Component should render 1`] = `
<form
class="content-view-pf-pagination list-view-pagination-top list-view-pf-pagination clearfix"
<div
class="pf-c-pagination pf-m-bottom quipucords-view__pagination"
data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
data-ouia-component-type="PF4/Pagination"
data-ouia-safe="true"
id="pagination-options-menu-0"
style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
>
<div
class="form-group"
class="pf-c-options-menu"
data-ouia-component-type="PF4/PaginationOptionsMenu"
data-ouia-safe="true"
>
<div
class="dropdown pagination-pf-pagesize btn-group"
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label=""
class=" pf-c-options-menu__toggle pf-m-plain pf-m-text"
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
data-ouia-component-type="PF4/DropdownToggle"
data-ouia-safe="true"
id="pagination-options-menu-toggle-0"
type="button"
>
<button
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle btn btn-default"
id="pagination-row-dropdown"
role="button"
type="button"
>
10
<span
class="caret"
/>
</button>
<ul
aria-labelledby="pagination-row-dropdown"
class="dropdown-menu"
role="menu"
>
<li
class="active"
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
10
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
15
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
25
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
50
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
100
</a>
</li>
</ul>
</div>
<span>
per page
</span>
</div>
<div
class="form-group"
>
<span>
<span
class="pagination-pf-items-current"
class="pf-c-options-menu__toggle-text"
>
1-10
<b>
1 - 10
</b>
of
<b>
200
</b>
</span>
 of 
<span
class="pagination-pf-items-total"
class="pf-c-options-menu__toggle-icon"
>
200
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
</span>
</span>
<ul
class="pagination pagination-pf-back"
</button>
</div>
<nav
aria-label="Pagination"
class="pf-c-pagination__nav"
>
<div
class="pf-c-pagination__nav-control pf-m-first"
>
<li
class="disabled"
<button
aria-disabled="true"
aria-label="Go to first page"
class="pf-c-button pf-m-plain pf-m-disabled"
data-action="first"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
disabled=""
type="button"
>
<a
href="#"
title="First Page"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 448 512"
width="1em"
>
<span
aria-hidden="true"
class="fa fa-angle-double-left i"
<path
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
/>
</a>
</li>
<li
class="disabled"
</svg>
</button>
</div>
<div
class="pf-c-pagination__nav-control"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="pf-c-button pf-m-plain pf-m-disabled"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
disabled=""
type="button"
>
<a
href="#"
title="Previous Page"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 256 512"
width="1em"
>
<span
aria-hidden="true"
class="fa fa-angle-left i"
<path
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
/>
</a>
</li>
</ul>
<label
class="sr-only control-label"
</svg>
</button>
</div>
<div
class="pf-c-pagination__nav-page-select"
>
Current Page
</label>
<input
class="pagination-pf-page form-control"
type="text"
value="1"
/>
<span>
 of 
<input
aria-label="Current page"
class="pf-c-form-control"
max="20"
min="1"
type="number"
value="1"
/>
<span
class="pagination-pf-pages"
aria-hidden="true"
>
20
of 20
</span>
</span>
<ul
class="pagination pagination-pf-forward"
</div>
<div
class="pf-c-pagination__nav-control"
>
<li
class=""
<button
aria-disabled="false"
aria-label="Go to next page"
class="pf-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-3"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
<a
href="#"
title="Next Page"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 256 512"
width="1em"
>
<span
aria-hidden="true"
class="fa fa-angle-right i"
<path
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
/>
</a>
</li>
<li
class=""
</svg>
</button>
</div>
<div
class="pf-c-pagination__nav-control pf-m-last"
>
<button
aria-disabled="false"
aria-label="Go to last page"
class="pf-c-button pf-m-plain"
data-action="last"
data-ouia-component-id="OUIA-Generated-Button-plain-4"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
<a
href="#"
title="Last Page"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 448 512"
width="1em"
>
<span
aria-hidden="true"
class="fa fa-angle-double-right i"
<path
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
/>
</a>
</li>
</ul>
</div>
</form>
</svg>
</button>
</div>
</nav>
</div>
`;
Loading

0 comments on commit cec3e45

Please sign in to comment.