Extend Portal component with title, buttons & steps (as per Modal) (#4392)
* Allow Portal to take title & buttons props * Fix tests * Portal consistent in screen center * Allow hiding of Close (e.g. FirstRun usage) * Set overflow style on body based on open * Don't lock scroll for child popups (overlaps) * Override buttons to be white * Expose ~/ui/Modal/Title as re-usable component * Use ~/ui/Title to render the Title * Update tests * Added a portal example with buttons and steps * Address PR comments * Fix AddressSelect with new container withing container * Move legend to "buttons" * AddressSelect extra padding
This commit is contained in:
parent
a68ca7444e
commit
c7f5ee481d
@ -20,7 +20,6 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 1.5em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { ContainerTitle, DappCard, Portal, SectionList } from '~/ui';
|
||||
import { DappCard, Portal, SectionList } from '~/ui';
|
||||
import { CheckIcon } from '~/ui/Icons';
|
||||
|
||||
import styles from './addDapps.css';
|
||||
@ -41,15 +41,13 @@ export default class AddDapps extends Component {
|
||||
className={ styles.modal }
|
||||
onClose={ store.closeModal }
|
||||
open
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.add.label'
|
||||
defaultMessage='visible applications'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.add.label'
|
||||
defaultMessage='visible applications'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.warning } />
|
||||
{
|
||||
|
@ -15,12 +15,7 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.modal {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 1.5em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -65,7 +60,6 @@
|
||||
|
||||
.legend {
|
||||
opacity: 0.75;
|
||||
margin-top: 1em;
|
||||
|
||||
span {
|
||||
line-height: 24px;
|
||||
|
@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { AccountCard, ContainerTitle, Portal, SectionList } from '~/ui';
|
||||
import { AccountCard, Portal, SectionList } from '~/ui';
|
||||
import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
|
||||
|
||||
import styles from './dappPermissions.css';
|
||||
@ -38,18 +38,27 @@ export default class DappPermissions extends Component {
|
||||
|
||||
return (
|
||||
<Portal
|
||||
className={ styles.modal }
|
||||
buttons={
|
||||
<div className={ styles.legend }>
|
||||
<FormattedMessage
|
||||
id='dapps.permissions.description'
|
||||
defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
|
||||
values={ {
|
||||
activeIcon: <CheckIcon />,
|
||||
defaultIcon: <StarIcon />
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
onClose={ store.closeModal }
|
||||
open
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.permissions.label'
|
||||
defaultMessage='visible dapp accounts'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.permissions.label'
|
||||
defaultMessage='visible dapp accounts'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className={ styles.container }>
|
||||
<SectionList
|
||||
items={ store.accounts }
|
||||
@ -57,16 +66,6 @@ export default class DappPermissions extends Component {
|
||||
renderItem={ this.renderAccount }
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.legend }>
|
||||
<FormattedMessage
|
||||
id='dapps.permissions.description'
|
||||
defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
|
||||
values={ {
|
||||
activeIcon: <CheckIcon />,
|
||||
defaultIcon: <StarIcon />
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
@ -14,30 +14,36 @@
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.byline, .description {
|
||||
|
||||
$bylineColor: #aaa;
|
||||
$bylineLineHeight: 1.2rem;
|
||||
$bylineMaxHeight: 2.4rem;
|
||||
$titleLineHeight: 2rem;
|
||||
$smallFontSize: 0.75rem;
|
||||
|
||||
.byline,
|
||||
.description {
|
||||
color: $bylineColor;
|
||||
display: -webkit-box;
|
||||
line-height: $bylineLineHeight;
|
||||
max-height: $bylineMaxHeight;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1.2em;
|
||||
max-height: 2.4em;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
color: #aaa;
|
||||
|
||||
* {
|
||||
color: #aaa !important;
|
||||
color: $bylineColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.75em;
|
||||
font-size: $smallFontSize;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
line-height: $titleLineHeight;
|
||||
margin: 0;
|
||||
line-height: 34px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
@ -29,29 +29,41 @@ export default class Title extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { byline, className, title } = this.props;
|
||||
|
||||
const byLine = typeof byline === 'string'
|
||||
? (
|
||||
<span title={ byline }>
|
||||
{ byline }
|
||||
</span>
|
||||
)
|
||||
: byline;
|
||||
const { className, title } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
<h3 className={ styles.title }>
|
||||
{ title }
|
||||
</h3>
|
||||
<div className={ styles.byline }>
|
||||
{ byLine }
|
||||
</div>
|
||||
{ this.renderByline() }
|
||||
{ this.renderDescription() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderByline () {
|
||||
const { byline } = this.props;
|
||||
|
||||
if (!byline) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.byline }>
|
||||
{
|
||||
typeof byline === 'string'
|
||||
? (
|
||||
<span title={ byline }>
|
||||
{ byline }
|
||||
</span>
|
||||
)
|
||||
: byline
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderDescription () {
|
||||
const { description } = this.props;
|
||||
|
||||
@ -59,17 +71,17 @@ export default class Title extends Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
const desc = typeof description === 'string'
|
||||
? (
|
||||
<span title={ description }>
|
||||
{ description }
|
||||
</span>
|
||||
)
|
||||
: description;
|
||||
|
||||
return (
|
||||
<div className={ styles.description }>
|
||||
{ desc }
|
||||
{
|
||||
typeof description === 'string'
|
||||
? (
|
||||
<span title={ description }>
|
||||
{ description }
|
||||
</span>
|
||||
)
|
||||
: description
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -73,6 +73,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: 1rem 0.5rem 0.25em;
|
||||
color: rgba(255, 255, 255, 0.498039);
|
||||
@ -102,14 +108,11 @@
|
||||
}
|
||||
|
||||
.categories {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
margin: 2rem 0 0;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
|
@ -180,34 +180,38 @@ class AddressSelect extends Component {
|
||||
onClose={ this.handleClose }
|
||||
onKeyDown={ this.handleKeyDown }
|
||||
open={ expanded }
|
||||
title={
|
||||
<div className={ styles.title }>
|
||||
<label className={ styles.label } htmlFor={ id }>
|
||||
{ label }
|
||||
</label>
|
||||
<div className={ styles.outerInput }>
|
||||
<input
|
||||
id={ id }
|
||||
className={ styles.input }
|
||||
placeholder={ ilHint }
|
||||
onBlur={ this.handleInputBlur }
|
||||
onFocus={ this.handleInputFocus }
|
||||
onChange={ this.handleChange }
|
||||
ref={ this.setInputRef }
|
||||
/>
|
||||
{ this.renderLoader() }
|
||||
</div>
|
||||
|
||||
<div className={ styles.underline }>
|
||||
<TextFieldUnderline
|
||||
focus={ inputFocused }
|
||||
focusStyle={ BOTTOM_BORDER_STYLE }
|
||||
muiTheme={ muiTheme }
|
||||
style={ BOTTOM_BORDER_STYLE }
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ this.renderCurrentInput() }
|
||||
{ this.renderRegistryValues() }
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<label className={ styles.label } htmlFor={ id }>
|
||||
{ label }
|
||||
</label>
|
||||
<div className={ styles.outerInput }>
|
||||
<input
|
||||
id={ id }
|
||||
className={ styles.input }
|
||||
placeholder={ ilHint }
|
||||
onBlur={ this.handleInputBlur }
|
||||
onFocus={ this.handleInputFocus }
|
||||
onChange={ this.handleChange }
|
||||
ref={ this.setInputRef }
|
||||
/>
|
||||
{ this.renderLoader() }
|
||||
</div>
|
||||
|
||||
<div className={ styles.underline }>
|
||||
<TextFieldUnderline
|
||||
focus={ inputFocused }
|
||||
focusStyle={ BOTTOM_BORDER_STYLE }
|
||||
muiTheme={ muiTheme }
|
||||
style={ BOTTOM_BORDER_STYLE }
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ this.renderCurrentInput() }
|
||||
{ this.renderRegistryValues() }
|
||||
{ this.renderAccounts() }
|
||||
</Portal>
|
||||
);
|
||||
|
@ -47,20 +47,6 @@
|
||||
.title {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
padding: 1em;
|
||||
margin-bottom: 0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.steps {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
.waiting {
|
||||
margin: 1em -1em -1em -1em;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
@ -22,7 +22,7 @@ import { connect } from 'react-redux';
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import Container from '../Container';
|
||||
import Title from './Title';
|
||||
import Title from '../Title';
|
||||
|
||||
const ACTIONS_STYLE = { borderStyle: 'none' };
|
||||
const TITLE_STYLE = { borderStyle: 'none' };
|
||||
@ -63,11 +63,12 @@ class Modal extends Component {
|
||||
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
|
||||
const header = (
|
||||
<Title
|
||||
activeStep={ current }
|
||||
busy={ busy }
|
||||
current={ current }
|
||||
busySteps={ waiting }
|
||||
className={ styles.title }
|
||||
steps={ steps }
|
||||
title={ title }
|
||||
waiting={ waiting }
|
||||
/>
|
||||
);
|
||||
const classes = `${styles.dialog} ${className}`;
|
||||
|
@ -16,13 +16,14 @@
|
||||
*/
|
||||
|
||||
$modalMargin: 1.5em;
|
||||
$modalPadding: 1.5em;
|
||||
$modalBackZ: 2500;
|
||||
|
||||
/* This should be the default case, the Portal used as a stand-alone modal */
|
||||
$modalBottom: 15vh;
|
||||
$modalBottom: $modalMargin;
|
||||
$modalLeft: $modalMargin;
|
||||
$modalRight: $modalMargin;
|
||||
$modalTop: 0;
|
||||
$modalTop: $modalMargin;
|
||||
$modalZ: 3500;
|
||||
|
||||
/* This is the case where popped-up over another modal, Portal or otherwise */
|
||||
@ -55,7 +56,9 @@ $popoverZ: 3600;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: 1.5em;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: $modalPadding;
|
||||
position: fixed;
|
||||
|
||||
* {
|
||||
@ -77,22 +80,48 @@ $popoverZ: 3600;
|
||||
width: calc(100vw - $popoverLeft - $popoverRight);
|
||||
z-index: $popoverZ;
|
||||
}
|
||||
}
|
||||
|
||||
.closeIcon {
|
||||
font-size: 4em;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0.5rem;
|
||||
z-index: 100;
|
||||
.buttonRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
padding: $modalPadding 0 0 0;
|
||||
|
||||
&, * {
|
||||
height: 48px !important;
|
||||
width: 48px !important;
|
||||
button:not([disabled]) {
|
||||
color: white !important;
|
||||
|
||||
svg {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
.childContainer {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.closeIcon {
|
||||
font-size: 4em;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0.5rem;
|
||||
z-index: 100;
|
||||
|
||||
&, * {
|
||||
height: 48px !important;
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.titleRow {
|
||||
margin-bottom: $modalPadding;
|
||||
}
|
||||
}
|
||||
|
@ -16,6 +16,7 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Button } from '~/ui';
|
||||
import PlaygroundExample from '~/playground/playgroundExample';
|
||||
|
||||
import Modal from '../Modal';
|
||||
@ -77,6 +78,29 @@ export default class PortalExample extends Component {
|
||||
</Portal>
|
||||
</div>
|
||||
</PlaygroundExample>
|
||||
|
||||
<PlaygroundExample name='Portal with Buttons'>
|
||||
<div>
|
||||
<button onClick={ this.handleOpen(4) }>Open</button>
|
||||
<Portal
|
||||
activeStep={ 0 }
|
||||
buttons={ [
|
||||
<Button
|
||||
key='close'
|
||||
label='close'
|
||||
onClick={ this.handleClose }
|
||||
/>
|
||||
] }
|
||||
isChildModal
|
||||
open={ open[4] || false }
|
||||
onClose={ this.handleClose }
|
||||
steps={ [ 'step 1', 'step 2' ] }
|
||||
title='Portal with button'
|
||||
>
|
||||
<p>This is the fourth portal</p>
|
||||
</Portal>
|
||||
</div>
|
||||
</PlaygroundExample>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -20,8 +20,10 @@ import ReactDOM from 'react-dom';
|
||||
import ReactPortal from 'react-portal';
|
||||
import keycode from 'keycode';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
import { CloseIcon } from '~/ui/Icons';
|
||||
import ParityBackground from '~/ui/ParityBackground';
|
||||
import Title from '~/ui/Title';
|
||||
|
||||
import styles from './portal.css';
|
||||
|
||||
@ -29,14 +31,35 @@ export default class Portal extends Component {
|
||||
static propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
open: PropTypes.bool.isRequired,
|
||||
activeStep: PropTypes.number,
|
||||
busy: PropTypes.bool,
|
||||
busySteps: PropTypes.array,
|
||||
buttons: PropTypes.array,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
hideClose: PropTypes.bool,
|
||||
isChildModal: PropTypes.bool,
|
||||
onKeyDown: PropTypes.func
|
||||
onKeyDown: PropTypes.func,
|
||||
steps: PropTypes.array,
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
this.setBodyOverflow(this.props.open);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.open !== this.props.open) {
|
||||
this.setBodyOverflow(nextProps.open);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.setBodyOverflow(false);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, isChildModal, open } = this.props;
|
||||
const { activeStep, busy, busySteps, children, className, isChildModal, open, steps, title } = this.props;
|
||||
|
||||
if (!open) {
|
||||
return null;
|
||||
@ -69,32 +92,72 @@ export default class Portal extends Component {
|
||||
onKeyUp={ this.handleKeyUp }
|
||||
/>
|
||||
<ParityBackground className={ styles.parityBackground } />
|
||||
<div
|
||||
className={ styles.closeIcon }
|
||||
onClick={ this.handleClose }
|
||||
>
|
||||
<CloseIcon />
|
||||
{ this.renderClose() }
|
||||
<Title
|
||||
activeStep={ activeStep }
|
||||
busy={ busy }
|
||||
busySteps={ busySteps }
|
||||
className={ styles.titleRow }
|
||||
steps={ steps }
|
||||
title={ title }
|
||||
/>
|
||||
<div className={ styles.childContainer }>
|
||||
{ children }
|
||||
</div>
|
||||
{ children }
|
||||
{ this.renderButtons() }
|
||||
</div>
|
||||
</div>
|
||||
</ReactPortal>
|
||||
);
|
||||
}
|
||||
|
||||
renderButtons () {
|
||||
const { buttons } = this.props;
|
||||
|
||||
if (!buttons) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.buttonRow }>
|
||||
{ buttons }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderClose () {
|
||||
const { hideClose } = this.props;
|
||||
|
||||
if (hideClose) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CloseIcon
|
||||
className={ styles.closeIcon }
|
||||
onClick={ this.handleClose }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
stopEvent = (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.props.onClose();
|
||||
const { hideClose, onClose } = this.props;
|
||||
|
||||
if (!hideClose) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown = (event) => {
|
||||
const { onKeyDown } = this.props;
|
||||
|
||||
event.persist();
|
||||
|
||||
return onKeyDown
|
||||
? onKeyDown(event)
|
||||
: false;
|
||||
@ -111,10 +174,11 @@ export default class Portal extends Component {
|
||||
}
|
||||
|
||||
handleDOMAction = (ref, method) => {
|
||||
const refItem = typeof ref === 'string'
|
||||
? this.refs[ref]
|
||||
: ref;
|
||||
const element = ReactDOM.findDOMNode(refItem);
|
||||
const element = ReactDOM.findDOMNode(
|
||||
typeof ref === 'string'
|
||||
? this.refs[ref]
|
||||
: ref
|
||||
);
|
||||
|
||||
if (!element || typeof element[method] !== 'function') {
|
||||
console.warn('could not find', ref, 'or method', method);
|
||||
@ -123,4 +187,12 @@ export default class Portal extends Component {
|
||||
|
||||
return element[method]();
|
||||
}
|
||||
|
||||
setBodyOverflow (open) {
|
||||
if (!this.props.isChildModal) {
|
||||
document.body.style.overflow = open
|
||||
? 'hidden'
|
||||
: null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -44,4 +44,21 @@ describe('ui/Portal', () => {
|
||||
it('renders defaults', () => {
|
||||
expect(component).to.be.ok;
|
||||
});
|
||||
|
||||
describe('title rendering', () => {
|
||||
const TITLE = 'some test title';
|
||||
let title;
|
||||
|
||||
beforeEach(() => {
|
||||
title = render({ title: TITLE }).find('Title');
|
||||
});
|
||||
|
||||
it('renders the specified title', () => {
|
||||
expect(title).to.have.length(1);
|
||||
});
|
||||
|
||||
it('renders the passed title', () => {
|
||||
expect(title.props().title).to.equal(TITLE);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
26
js/src/ui/Title/title.css
Normal file
26
js/src/ui/Title/title.css
Normal file
@ -0,0 +1,26 @@
|
||||
/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
/* This file is part of Parity.
|
||||
/*
|
||||
/* Parity is free software: you can redistribute it and/or modify
|
||||
/* it under the terms of the GNU General Public License as published by
|
||||
/* the Free Software Foundation, either version 3 of the License, or
|
||||
/* (at your option) any later version.
|
||||
/*
|
||||
/* Parity is distributed in the hope that it will be useful,
|
||||
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
/* GNU General Public License for more details.
|
||||
/*
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.title {
|
||||
.steps {
|
||||
margin: -0.5em 0 -1em 0;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
margin: 1em -1em -1em -1em;
|
||||
}
|
||||
}
|
@ -14,35 +14,49 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { LinearProgress } from 'material-ui';
|
||||
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
// TODO: It would make sense (going forward) to replace all uses of
|
||||
// ContainerTitle with this component. In that case the styles for the
|
||||
// h3 (title) can be pulled from there. (As it stands the duplication
|
||||
// between the 2 has been removed, but as a short-term DRY only)
|
||||
import { Title as ContainerTitle } from '~/ui/Container';
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import styles from '../modal.css';
|
||||
import styles from './title.css';
|
||||
|
||||
export default class Title extends Component {
|
||||
static propTypes = {
|
||||
activeStep: PropTypes.number,
|
||||
busy: PropTypes.bool,
|
||||
current: PropTypes.number,
|
||||
busySteps: PropTypes.array,
|
||||
className: PropTypes.string,
|
||||
steps: PropTypes.array,
|
||||
waiting: PropTypes.array,
|
||||
title: nodeOrStringProptype()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { current, steps, title } = this.props;
|
||||
const { activeStep, className, steps, title } = this.props;
|
||||
|
||||
if (!title && !steps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.title }>
|
||||
<h3>
|
||||
{
|
||||
<div
|
||||
className={
|
||||
[styles.title, className].join(' ')
|
||||
}
|
||||
>
|
||||
<ContainerTitle
|
||||
title={
|
||||
steps
|
||||
? steps[current]
|
||||
? steps[activeStep || 0]
|
||||
: title
|
||||
}
|
||||
</h3>
|
||||
/>
|
||||
{ this.renderSteps() }
|
||||
{ this.renderWaiting() }
|
||||
</div>
|
||||
@ -50,7 +64,7 @@ export default class Title extends Component {
|
||||
}
|
||||
|
||||
renderSteps () {
|
||||
const { current, steps } = this.props;
|
||||
const { activeStep, steps } = this.props;
|
||||
|
||||
if (!steps) {
|
||||
return;
|
||||
@ -58,7 +72,7 @@ export default class Title extends Component {
|
||||
|
||||
return (
|
||||
<div className={ styles.steps }>
|
||||
<Stepper activeStep={ current }>
|
||||
<Stepper activeStep={ activeStep }>
|
||||
{ this.renderTimeline() }
|
||||
</Stepper>
|
||||
</div>
|
||||
@ -80,8 +94,8 @@ export default class Title extends Component {
|
||||
}
|
||||
|
||||
renderWaiting () {
|
||||
const { current, busy, waiting } = this.props;
|
||||
const isWaiting = busy || (waiting || []).includes(current);
|
||||
const { activeStep, busy, busySteps } = this.props;
|
||||
const isWaiting = busy || (busySteps || []).includes(activeStep);
|
||||
|
||||
if (!isWaiting) {
|
||||
return null;
|
@ -55,6 +55,7 @@ import SectionList from './SectionList';
|
||||
import ShortenedHash from './ShortenedHash';
|
||||
import SignerIcon from './SignerIcon';
|
||||
import Tags from './Tags';
|
||||
import Title from './Title';
|
||||
import Tooltips, { Tooltip } from './Tooltips';
|
||||
import TxHash from './TxHash';
|
||||
import TxList from './TxList';
|
||||
@ -119,6 +120,7 @@ export {
|
||||
SectionList,
|
||||
SignerIcon,
|
||||
Tags,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltips,
|
||||
TxHash,
|
||||
|
Loading…
Reference in New Issue
Block a user