zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'feature/modal' of github.com:andrerfneves/zcash-reference-wallet into feature/transactions-details

This commit is contained in:
George Lima 2018-12-19 14:24:51 -03:00
parent 7a394a48bb bdb4680057
commit fee6dca6dc
4 changed files with 103 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/dropdown.js
View File

@ -90,7 +90,7 @@ export class DropdownComponent extends Component<Props, State> {
</MenuItem>
)}
{options.map(({ label: optionLabel, onClick }) => (
<MenuItem onClick={onClick}>
<MenuItem onClick={onClick} key={optionLabel}>
<TextComponent value={optionLabel} />
</MenuItem>
))}

98
app/components/modal.js Normal file
View File

@ -0,0 +1,98 @@
// @flow
import React, { PureComponent, Fragment, type Element } from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';
const ModalWrapper = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.4);
`;
const ChildrenWrapper = styled.div`
z-index: 90;
`;
type Props = {
renderTrigger: (() => void) => Element<*>,
children: Element<*>,
};
type State = {
isVisible: boolean,
};
const modalRoot = document.getElementById('modal-root');
export class ModalComponent extends PureComponent<Props, State> {
element = document.createElement('div');
state = {
isVisible: false,
};
componentDidMount() {
window.addEventListener('keydown', this.handleEscPress);
}
componentWillUnmount() {
window.removeEventListener('keydown', this.handleEscPress);
}
handleEscPress = (event: Object) => {
const { isVisible } = this.state;
if (event.key === 'Escape' && isVisible) {
this.close();
}
};
open = () => {
this.setState(
() => ({ isVisible: true }),
() => {
if (modalRoot) modalRoot.appendChild(this.element);
},
);
};
close = () => {
this.setState(
() => ({ isVisible: false }),
() => {
if (modalRoot) modalRoot.removeChild(this.element);
},
);
};
render() {
const { renderTrigger, children } = this.props;
const { isVisible } = this.state;
return (
<Fragment>
{renderTrigger(isVisible ? this.close : this.open)}
{isVisible
? createPortal(
<ModalWrapper
id='modal-portal-wrapper'
onClick={(event) => {
if (event.target.id === 'modal-portal-wrapper') this.close();
}}
>
<ChildrenWrapper>{children}</ChildrenWrapper>
</ModalWrapper>,
this.element,
)
: null}
</Fragment>
);
}
}

6
app/components/transaction-daily.js
View File

@ -1,5 +1,5 @@
// @flow
import React from 'react';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { TransactionItemComponent, type Transaction } from './transaction-item';
import { TextComponent } from './text';
@ -49,7 +49,7 @@ export const TransactionDailyComponent = ({
{transactions.map(({
date, type, address, amount,
}, idx) => (
<div>
<Fragment key={`${address}-${type}-${amount}-${date}`}>
<TransactionItemComponent
type={type}
date={date}
@ -58,7 +58,7 @@ export const TransactionDailyComponent = ({
zecPrice={zecPrice}
/>
{idx < transactions.length - 1 && <Divider />}
</div>
</Fragment>
))}
</TransactionsWrapper>
</Wrapper>

3
public/index.html
View File

@ -13,8 +13,7 @@
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<!-- React App Inject -->
<div id="root"></div>
<!-- End React App Inject -->
<div id="modal-root"></div>
</body>
</html>