mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Refactor page-container component structure
This commit is contained in:
parent
284dd85a99
commit
f96c13d616
1
ui/app/components/page-container/index.js
Normal file
1
ui/app/components/page-container/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './page-container.component'
|
@ -1,18 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
export default class PageContainerContent extends Component {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="page-container__content">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1 @@
|
||||
export { default } from './page-container-footer.component'
|
@ -5,12 +5,24 @@ export default class PageContainerFooter extends Component {
|
||||
|
||||
static propTypes = {
|
||||
onCancel: PropTypes.func,
|
||||
cancelText: PropTypes.string,
|
||||
onSubmit: PropTypes.func,
|
||||
submitText: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onCancel, onSubmit, disabled } = this.props
|
||||
const {
|
||||
onCancel,
|
||||
cancelText,
|
||||
onSubmit,
|
||||
submitText,
|
||||
disabled,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div className="page-container__footer">
|
||||
@ -19,23 +31,19 @@ export default class PageContainerFooter extends Component {
|
||||
className="btn-secondary--lg page-container__footer-button"
|
||||
onClick={() => onCancel()}
|
||||
>
|
||||
{this.context.t('cancel')}
|
||||
{ this.context.t('cancel') || cancelText }
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn-primary--lg page-container__footer-button"
|
||||
disabled={disabled}
|
||||
onClick={(e) => onSubmit(e)}
|
||||
onClick={e => onSubmit(e)}
|
||||
>
|
||||
{this.context.t('next')}
|
||||
{ this.context.t('next') || submitText }
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
PageContainerFooter.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
@ -1,35 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
export default class PageContainerHeader extends Component {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { title, subtitle, onClose } = this.props
|
||||
|
||||
return (
|
||||
<div className="page-container__header">
|
||||
|
||||
<div className="page-container__title">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="page-container__subtitle">
|
||||
{subtitle}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="page-container__header-close"
|
||||
onClick={() => onClose()}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1 @@
|
||||
export { default } from './page-container-header.component'
|
@ -0,0 +1,57 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
export default class PageContainerHeader extends Component {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
subtitle: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
showBackButton: PropTypes.bool,
|
||||
onBackButtonClick: PropTypes.func,
|
||||
backButtonStyles: PropTypes.object,
|
||||
backButtonString: PropTypes.string,
|
||||
};
|
||||
|
||||
renderHeaderRow () {
|
||||
const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
|
||||
|
||||
return showBackButton && (
|
||||
<div className="page-container__header-row">
|
||||
<span
|
||||
className="page-container__back-button"
|
||||
onClick={onBackButtonClick}
|
||||
style={backButtonStyles}
|
||||
>
|
||||
{ backButtonString || 'Back' }
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { title, subtitle, onClose } = this.props
|
||||
|
||||
return (
|
||||
<div className="page-container__header">
|
||||
|
||||
{ this.renderHeaderRow() }
|
||||
|
||||
<div className="page-container__title">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="page-container__subtitle">
|
||||
{subtitle}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="page-container__header-close"
|
||||
onClick={() => onClose()}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
@ -1,18 +1,72 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import PageContainerHeader from './page-container-header'
|
||||
import PageContainerFooter from './page-container-footer'
|
||||
|
||||
export default class PageContainer extends Component {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
// PageContainerHeader props
|
||||
title: PropTypes.string.isRequired,
|
||||
subtitle: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
showBackButton: PropTypes.bool,
|
||||
onBackButtonClick: PropTypes.func,
|
||||
backButtonStyles: PropTypes.object,
|
||||
backButtonString: PropTypes.string,
|
||||
// Content props
|
||||
ContentComponent: PropTypes.func,
|
||||
contentComponentProps: PropTypes.object,
|
||||
// PageContainerFooter props
|
||||
onCancel: PropTypes.func,
|
||||
cancelText: PropTypes.string,
|
||||
onSubmit: PropTypes.func,
|
||||
submitText: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
render () {
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
onClose,
|
||||
showBackButton,
|
||||
onBackButtonClick,
|
||||
backButtonStyles,
|
||||
backButtonString,
|
||||
ContentComponent,
|
||||
contentComponentProps,
|
||||
onCancel,
|
||||
cancelText,
|
||||
onSubmit,
|
||||
submitText,
|
||||
disabled,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
{this.props.children}
|
||||
<PageContainerHeader
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
onClose={onClose}
|
||||
showBackButton={showBackButton}
|
||||
onBackButtonClick={onBackButtonClick}
|
||||
backButtonStyles={backButtonStyles}
|
||||
backButtonString={backButtonString}
|
||||
/>
|
||||
<div className="page-container__content">
|
||||
<ContentComponent { ...contentComponentProps } />
|
||||
</div>
|
||||
);
|
||||
<PageContainerFooter
|
||||
onCancel={onCancel}
|
||||
cancelText={cancelText}
|
||||
onSubmit={onSubmit}
|
||||
submitText={submitText}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -53,6 +53,7 @@ function mapStateToProps (state) {
|
||||
tokenContract: getSelectedTokenContract(state),
|
||||
unapprovedTxs: state.metamask.unapprovedTxs,
|
||||
network: state.metamask.network,
|
||||
isToken: Boolean(getSelectedToken(state)),
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -31,10 +31,10 @@ const {
|
||||
} = require('./components/send/send-utils')
|
||||
const { isValidAddress } = require('./util')
|
||||
|
||||
import PageContainer from './components/page-container/page-container.component'
|
||||
import SendHeader from './components/send_/send-header/send-header.container'
|
||||
import PageContainerContent from './components/page-container/page-container-content.component'
|
||||
import PageContainerFooter from './components/page-container/page-container-footer.component'
|
||||
import PageContainer from './components/page-container'
|
||||
// import SendHeader from './components/send_/send-header/send-header.container'
|
||||
// import PageContainerContent from './components/page-container/page-container-content.component'
|
||||
// import PageContainerFooter from './components/page-container/page-container-footer.component'
|
||||
|
||||
SendTransactionScreen.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
@ -500,16 +500,44 @@ SendTransactionScreen.prototype.renderFooter = function () {
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.render = function () {
|
||||
const {
|
||||
isToken,
|
||||
clearSend,
|
||||
goHome,
|
||||
gasTotal,
|
||||
tokenBalance,
|
||||
selectedToken,
|
||||
errors: { amount: amountError, to: toError },
|
||||
} = this.props
|
||||
|
||||
const missingTokenBalance = selectedToken && !tokenBalance
|
||||
const noErrors = !amountError && toError === null
|
||||
|
||||
return (
|
||||
|
||||
h(PageContainer, [
|
||||
h(PageContainer, {
|
||||
title: isToken ? this.context.t('sendTokens') : this.context.t('sendETH'),
|
||||
subtitle: this.context.t('onlySendToEtherAddress'),
|
||||
onClose: () => {
|
||||
clearSend()
|
||||
goHome()
|
||||
},
|
||||
ContentComponent: this.renderForm,
|
||||
onCancel: () => {
|
||||
clearSend()
|
||||
goHome()
|
||||
},
|
||||
onSubmit: e => this.onSubmit(e),
|
||||
disabled: !noErrors || !gasTotal || missingTokenBalance,
|
||||
})
|
||||
// , [
|
||||
|
||||
h(SendHeader),
|
||||
// h(SendHeader),
|
||||
|
||||
this.renderForm(),
|
||||
// this.renderForm(),
|
||||
|
||||
this.renderFooter(),
|
||||
])
|
||||
// this.renderFooter(),
|
||||
// ])
|
||||
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user