1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
Thomas Huang c2218ad941
Continue rm enzyme, unit tests. (#15730)
* Convert Confirm Page Container test to tlr.

Add test ids to associated components.

* Convert Welcome component to tlr.

* Update ui/pages/first-time-flow/welcome/welcome.test.js

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

* Update ui/components/app/confirm-page-container/confirm-page-container-container.test.js

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

* Remove unsused, commented out, lines

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
2022-09-08 10:05:15 -07:00

94 lines
2.5 KiB
JavaScript
Executable File

import React from 'react';
import PropTypes from 'prop-types';
const ConfirmPageContainerNavigation = (props) => {
const {
onNextTx,
totalTx,
positionOfCurrentTx,
nextTxId,
prevTxId,
showNavigation,
firstTx,
lastTx,
ofText,
requestsWaitingText,
} = props;
return (
<div
className="confirm-page-container-navigation"
style={{
display: showNavigation ? 'flex' : 'none',
}}
>
<div
className="confirm-page-container-navigation__container"
data-testid="navigation-container"
style={{
visibility: prevTxId ? 'initial' : 'hidden',
}}
>
<button
className="confirm-page-container-navigation__arrow"
data-testid="first-page"
onClick={() => onNextTx(firstTx)}
>
<i className="fa fa-angle-double-left fa-2x" />
</button>
<button
className="confirm-page-container-navigation__arrow"
data-testid="previous-page"
onClick={() => onNextTx(prevTxId)}
>
<i className="fa fa-angle-left fa-2x" />
</button>
</div>
<div className="confirm-page-container-navigation__textcontainer">
<div className="confirm-page-container-navigation__navtext">
{positionOfCurrentTx} {ofText} {totalTx}
</div>
<div className="confirm-page-container-navigation__longtext">
{requestsWaitingText}
</div>
</div>
<div
className="confirm-page-container-navigation__container"
style={{
visibility: nextTxId ? 'initial' : 'hidden',
}}
>
<button
className="confirm-page-container-navigation__arrow"
data-testid="next-page"
onClick={() => onNextTx(nextTxId)}
>
<i className="fa fa-angle-right fa-2x" />
</button>
<button
className="confirm-page-container-navigation__arrow"
data-testid="last-page"
onClick={() => onNextTx(lastTx)}
>
<i className="fa fa-angle-double-right fa-2x" />
</button>
</div>
</div>
);
};
ConfirmPageContainerNavigation.propTypes = {
totalTx: PropTypes.number,
positionOfCurrentTx: PropTypes.number,
onNextTx: PropTypes.func,
nextTxId: PropTypes.string,
prevTxId: PropTypes.string,
showNavigation: PropTypes.bool,
firstTx: PropTypes.string,
lastTx: PropTypes.string,
ofText: PropTypes.string,
requestsWaitingText: PropTypes.string,
};
export default ConfirmPageContainerNavigation;