mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge branch 'i3725-refactor-send-component-' of github.com:MetaMask/metamask-extension into i3725-refactor-send-component-
This commit is contained in:
commit
e869d09c79
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'
|
@ -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,15 +31,15 @@ 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>
|
||||
@ -35,7 +47,3 @@ export default class PageContainerFooter extends Component {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
PageContainerFooter.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
@ -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,16 +1,70 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import PageContainerFooter from '../../page-container/page-container-footer.component'
|
||||
import PageContainerFooter from '../../page-container/page-container-footer'
|
||||
import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes'
|
||||
|
||||
export default class SendFooter extends Component {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import PageContainerHeader from '../../page-container/page-container-header.component'
|
||||
import PageContainerHeader from '../../page-container/page-container-header'
|
||||
import { DEFAULT_ROUTE } from '../../../routes'
|
||||
|
||||
export default class SendHeader extends Component {
|
||||
|
@ -6,7 +6,6 @@ import {
|
||||
doesAmountErrorRequireUpdate,
|
||||
} from './send.utils'
|
||||
|
||||
import PageContainer from '..//page-container/page-container.component'
|
||||
import SendHeader from './send-header/send-header.container'
|
||||
import SendContent from './send-content/send-content.component'
|
||||
import SendFooter from './send-footer/send-footer.container'
|
||||
@ -128,11 +127,11 @@ export default class SendTransactionScreen extends PersistentForm {
|
||||
const { history } = this.props
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className="page-container">
|
||||
<SendHeader history={history}/>
|
||||
<SendContent/>
|
||||
<SendFooter history={history}/>
|
||||
</PageContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user