Merge branch 'i3725-refactor-send-component-' of github.com:MetaMask/metamask-extension into i3725-refactor-send-component-

feature/default_network_editable
Dan 7 years ago
commit e869d09c79
  1. 1
      ui/app/components/page-container/index.js
  2. 1
      ui/app/components/page-container/page-container-footer/index.js
  3. 26
      ui/app/components/page-container/page-container-footer/page-container-footer.component.js
  4. 0
      ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
  5. 1
      ui/app/components/page-container/page-container-header/index.js
  6. 57
      ui/app/components/page-container/page-container-header/page-container-header.component.js
  7. 0
      ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
  8. 58
      ui/app/components/page-container/page-container.component.js
  9. 0
      ui/app/components/page-container/tests/page-container.component.test.js
  10. 2
      ui/app/components/send_/send-footer/send-footer.component.js
  11. 2
      ui/app/components/send_/send-header/send-header.component.js
  12. 5
      ui/app/components/send_/send.component.js
  13. 2502
      yarn.lock

@ -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>
)
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save