mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02: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 = {
|
static propTypes = {
|
||||||
onCancel: PropTypes.func,
|
onCancel: PropTypes.func,
|
||||||
|
cancelText: PropTypes.string,
|
||||||
onSubmit: PropTypes.func,
|
onSubmit: PropTypes.func,
|
||||||
|
submitText: PropTypes.string,
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
};
|
}
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
t: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { onCancel, onSubmit, disabled } = this.props
|
const {
|
||||||
|
onCancel,
|
||||||
|
cancelText,
|
||||||
|
onSubmit,
|
||||||
|
submitText,
|
||||||
|
disabled,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page-container__footer">
|
<div className="page-container__footer">
|
||||||
@ -19,15 +31,15 @@ export default class PageContainerFooter extends Component {
|
|||||||
className="btn-secondary--lg page-container__footer-button"
|
className="btn-secondary--lg page-container__footer-button"
|
||||||
onClick={() => onCancel()}
|
onClick={() => onCancel()}
|
||||||
>
|
>
|
||||||
{this.context.t('cancel')}
|
{ this.context.t('cancel') || cancelText }
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn-primary--lg page-container__footer-button"
|
className="btn-primary--lg page-container__footer-button"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onClick={(e) => onSubmit(e)}
|
onClick={e => onSubmit(e)}
|
||||||
>
|
>
|
||||||
{this.context.t('next')}
|
{ this.context.t('next') || submitText }
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</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 React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
import PageContainerHeader from './page-container-header'
|
||||||
|
import PageContainerFooter from './page-container-footer'
|
||||||
|
|
||||||
export default class PageContainer extends Component {
|
export default class PageContainer extends Component {
|
||||||
|
|
||||||
static propTypes = {
|
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 () {
|
render () {
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
onClose,
|
||||||
|
showBackButton,
|
||||||
|
onBackButtonClick,
|
||||||
|
backButtonStyles,
|
||||||
|
backButtonString,
|
||||||
|
ContentComponent,
|
||||||
|
contentComponentProps,
|
||||||
|
onCancel,
|
||||||
|
cancelText,
|
||||||
|
onSubmit,
|
||||||
|
submitText,
|
||||||
|
disabled,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page-container">
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
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'
|
import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes'
|
||||||
|
|
||||||
export default class SendFooter extends Component {
|
export default class SendFooter extends Component {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
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'
|
import { DEFAULT_ROUTE } from '../../../routes'
|
||||||
|
|
||||||
export default class SendHeader extends Component {
|
export default class SendHeader extends Component {
|
||||||
|
@ -6,7 +6,6 @@ import {
|
|||||||
doesAmountErrorRequireUpdate,
|
doesAmountErrorRequireUpdate,
|
||||||
} from './send.utils'
|
} from './send.utils'
|
||||||
|
|
||||||
import PageContainer from '..//page-container/page-container.component'
|
|
||||||
import SendHeader from './send-header/send-header.container'
|
import SendHeader from './send-header/send-header.container'
|
||||||
import SendContent from './send-content/send-content.component'
|
import SendContent from './send-content/send-content.component'
|
||||||
import SendFooter from './send-footer/send-footer.container'
|
import SendFooter from './send-footer/send-footer.container'
|
||||||
@ -128,11 +127,11 @@ export default class SendTransactionScreen extends PersistentForm {
|
|||||||
const { history } = this.props
|
const { history } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContainer>
|
<div className="page-container">
|
||||||
<SendHeader history={history}/>
|
<SendHeader history={history}/>
|
||||||
<SendContent/>
|
<SendContent/>
|
||||||
<SendFooter history={history}/>
|
<SendFooter history={history}/>
|
||||||
</PageContainer>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user