LinearProgress -> Progress

js/src/shell/Application/Requests/requests.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactDOM from 'react-dom';
@@ -22,7 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { hideRequest } from '~/redux/providers/requestsActions';
-import { MethodDecoding, IdentityIcon, ScrollableText, ShortenedHash } from '~/ui';
+import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '~/ui';
 
 import styles from './requests.css';
 
@@ -100,7 +99,7 @@ class Requests extends Component {
           state.type === ERROR_STATE
             ? null
             : (
-              <LinearProgress
+              <Progress
                 max={ 6 }
                 mode={ state.type === WAITING_STATE ? 'indeterminate' : 'determinate' }
                 value={ state.type === DONE_STATE ? request.blockHeight.toNumber() : 6 }

js/src/ui/Form/PasswordStrength/passwordStrength.js

@@ -16,10 +16,11 @@
 
 import React, { Component, PropTypes } from 'react';
 import { debounce } from 'lodash';
-import { LinearProgress } from 'material-ui';
 import { FormattedMessage } from 'react-intl';
 import zxcvbn from 'zxcvbn';
 
+import Progress from '~/ui/Progress';
+
 import styles from './passwordStrength.css';
 
 const BAR_STYLE = {
@@ -80,9 +81,9 @@ export default class PasswordStrength extends Component {
             defaultMessage='password strength'
           />
         </label>
-        <LinearProgress
+        <Progress
           color={ color }
-          mode='determinate'
+          determinate
           style={ BAR_STYLE }
           value={ value }
         />

js/src/ui/Form/PasswordStrength/passwordStrength.spec.js

@@ -36,25 +36,25 @@ describe('ui/Form/PasswordStrength', () => {
     });
 
     it('renders a linear progress', () => {
-      expect(render({ input: INPUT_A }).find('LinearProgress')).to.be.ok;
+      expect(render({ input: INPUT_A }).find('Progress')).to.be.ok;
     });
 
     describe('compute strength', () => {
       it('has low score with empty input', () => {
         expect(
-          render({ input: INPUT_NULL }).find('LinearProgress').props().value
+          render({ input: INPUT_NULL }).find('Progress').props().value
         ).to.equal(20);
       });
 
       it('has medium score', () => {
         expect(
-          render({ input: INPUT_A }).find('LinearProgress').props().value
+          render({ input: INPUT_A }).find('Progress').props().value
         ).to.equal(60);
       });
 
       it('has high score', () => {
         expect(
-          render({ input: INPUT_B }).find('LinearProgress').props().value
+          render({ input: INPUT_B }).find('Progress').props().value
         ).to.equal(100);
       });
     });

js/src/ui/Progress/index.js

@@ -0,0 +1,17 @@
+// 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/>.
+
+export default from './progress';

js/src/ui/Progress/progress.js

@@ -0,0 +1,50 @@
+// 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/>.
+
+import { LinearProgress } from 'material-ui';
+import React, { PropTypes } from 'react';
+
+export default function Progress ({ className, color, determinate, max, min, style, value }) {
+  return (
+    <LinearProgress
+      className={ className }
+      color={ color }
+      max={ max }
+      min={ min }
+      mode={
+        determinate
+          ? 'determinate'
+          : 'indeterminate'
+      }
+      style={ style }
+      value={ value }
+    />
+  );
+}
+
+Progress.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  determinate: PropTypes.bool,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  style: PropTypes.object,
+  value: PropTypes.number
+};
+
+Progress.defaultProps = {
+  determinate: false
+};

js/src/ui/Title/title.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress } from 'material-ui';
 import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
 import React, { Component, PropTypes } from 'react';
 
@@ -23,6 +22,7 @@ import React, { Component, PropTypes } from 'react';
 // 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 Progress from '~/ui/Progress';
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './title.css';
@@ -113,7 +113,7 @@ export default class Title extends Component {
 
     return (
       <div className={ styles.waiting }>
-        <LinearProgress />
+        <Progress />
       </div>
     );
   }

js/src/ui/Title/title.spec.js

@@ -82,8 +82,8 @@ describe('ui/Title', () => {
         waiting = shallow(instance.renderWaiting());
       });
 
-      it('renders the LinearProgress', () => {
+      it('renders the Progress', () => {
-        expect(waiting.find('LinearProgress').get(0)).to.be.ok;
+        expect(waiting.find('Progress').get(0)).to.be.ok;
       });
     });
   });

js/src/ui/TxHash/txHash.js

@@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import BigNumber from 'bignumber.js';
-import { LinearProgress } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
@@ -24,7 +23,9 @@ import { txLink } from '~/3rdparty/etherscan/links';
 import Warning from '~/ui/Warning';
 import { DEFAULT_GAS } from '~/util/constants';
 
-import ShortenedHash from '../ShortenedHash';
+import Progress from '~/ui/Progress';
+import ShortenedHash from '~/ui/ShortenedHash';
+
 import styles from './txHash.css';
 
 class TxHash extends Component {
@@ -180,10 +181,9 @@ class TxHash extends Component {
     if (!(transactionReceipt && transactionReceipt.blockNumber && transactionReceipt.blockNumber.gt(0))) {
       return (
         <div className={ styles.confirm }>
-          <LinearProgress
+          <Progress
             className={ styles.progressbar }
             color='white'
-            mode='indeterminate'
           />
           <div className={ styles.progressinfo }>
             <FormattedMessage
@@ -206,13 +206,13 @@ class TxHash extends Component {
 
     return (
       <div className={ styles.confirm }>
-        <LinearProgress
+        <Progress
           className={ styles.progressbar }
           min={ 0 }
           max={ maxConfirmations }
           value={ value }
           color='white'
-          mode='determinate'
+          determinate
         />
         <div className={ styles.progressinfo }>
           <abbr title={ `block #${blockNumber.toFormat(0)}` }>

js/src/ui/TxHash/txHash.spec.js

@@ -114,7 +114,7 @@ describe('ui/TxHash', () => {
       });
 
       it('renders indeterminate progressbar', () => {
-        expect(child.find('LinearProgress[mode="indeterminate"]')).to.have.length(1);
+        expect(child.find('Progress')).to.have.length(1);
       });
 
       it('renders waiting text', () => {
@@ -132,7 +132,7 @@ describe('ui/TxHash', () => {
       });
 
       it('renders determinate progressbar', () => {
-        expect(child.find('LinearProgress[mode="determinate"]')).to.have.length(1);
+        expect(child.find('Progress[determinate]')).to.have.length(1);
       });
 
       it('renders confirmation text', () => {

js/src/ui/index.js

@@ -47,6 +47,7 @@ export ModalBox from './ModalBox';
 export muiTheme from './Theme';
 export Page from './Page';
 export Portal from './Portal';
+export Progress from './Progress';
 export QrCode from './QrCode';
 export QrScan from './QrScan';
 export ScrollableText from './ScrollableText';

js/src/views/Contract/Queries/inputQuery.js

@@ -17,13 +17,12 @@
 import { isEqual } from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, TypedInput } from '~/ui';
+import { Button, Progress, TypedInput } from '~/ui';
 import { arrayOrObjectProptype } from '~/util/proptypes';
 import { parseAbiType } from '~/util/abi';
 
@@ -126,7 +125,7 @@ class InputQuery extends Component {
 
     if (isLoading) {
       return (
-        <LinearProgress mode='indeterminate' />
+        <Progress />
       );
     }
 

js/src/views/Wallet/Confirmations/confirmations.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress, MenuItem, IconMenu } from 'material-ui';
+import { MenuItem, IconMenu } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
@@ -24,7 +24,7 @@ import { bindActionCreators } from 'redux';
 import { bytesToHex } from '@parity/api/util/format';
 
 import { confirmOperation, revokeOperation } from '~/redux/providers/walletActions';
-import { Container, InputAddress, Button, IdentityIcon } from '~/ui';
+import { Button, Container, InputAddress, IdentityIcon, Progress } from '~/ui';
 import TxRow from '~/ui/TxList/TxRow';
 
 import styles from '../wallet.css';
@@ -319,16 +319,15 @@ class WalletConfirmation extends Component {
             {
               pending
               ? (
-                <LinearProgress
+                <Progress
                   key={ `pending_${operation}` }
-                  mode='indeterminate'
                   style={ style }
                 />
               )
               : (
-                <LinearProgress
+                <Progress
                   key={ `unpending_${operation}` }
-                  mode='determinate'
+                  determinate
                   min={ 0 }
                   max={ require.toNumber() }
                   value={ confirmedBy.length }