diff options
author | Leonid Logvinov <logvinov.leon@gmail.com> | 2017-12-22 22:05:32 +0800 |
---|---|---|
committer | Leonid Logvinov <logvinov.leon@gmail.com> | 2018-01-03 18:37:38 +0800 |
commit | e744e4cd989bd3ae1070c59f7baa8097f18b8b06 (patch) | |
tree | a7fde03873f3c1b8689d3991edbb362f8022e5f0 /packages/website/ts/components/inputs | |
parent | 9a96e8c704b6f84e00bbe848159a4819844cf09d (diff) | |
download | dexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.gz dexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.zst dexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.zip |
Apply prettier config
Diffstat (limited to 'packages/website/ts/components/inputs')
9 files changed, 103 insertions, 134 deletions
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index 343eecc42..dd4131140 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,9 +1,9 @@ -import {addressUtils} from '@0xproject/utils'; +import { addressUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; -import {RequiredLabel} from 'ts/components/ui/required_label'; -import {colors} from 'ts/utils/colors'; +import { RequiredLabel } from 'ts/components/ui/required_label'; +import { colors } from 'ts/utils/colors'; interface AddressInputProps { disabled?: boolean; @@ -30,16 +30,14 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu }; } public componentWillReceiveProps(nextProps: AddressInputProps) { - if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && - this.state.address === '') { - this.setState({ - errMsg: 'Address is required', - }); + if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') { + this.setState({ + errMsg: 'Address is required', + }); } } public render() { - const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : - this.props.label; + const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block'; const hintText = this.props.hintText ? this.props.hintText : ''; return ( @@ -50,7 +48,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu fullWidth={true} hintText={hintText} floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey, display: labelDisplay}} + floatingLabelStyle={{ color: colors.grey, display: labelDisplay }} floatingLabelText={label} errorText={this.state.errMsg} value={this.state.address} diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 2404a1e31..05da03f86 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Toggle from 'material-ui/Toggle'; import * as React from 'react'; -import {Blockchain} from 'ts/blockchain'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import {BalanceErrs, Token, TokenState} from 'ts/types'; -import {errorReporter} from 'ts/utils/error_reporter'; -import {utils} from 'ts/utils/utils'; +import { Blockchain } from 'ts/blockchain'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; +import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1); @@ -50,11 +50,11 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow onToggle={this._onToggleAllowanceAsync.bind(this, this.props.token)} /> </div> - {this.state.isSpinnerVisible && - <div className="pl1" style={{paddingTop: 3}}> + {this.state.isSpinnerVisible && ( + <div className="pl1" style={{ paddingTop: 3 }}> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </div> - } + )} </div> ); } diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 91cc36e0c..8a9fcc1c5 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; -import {Link} from 'react-router-dom'; -import {RequiredLabel} from 'ts/components/ui/required_label'; -import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { Link } from 'react-router-dom'; +import { RequiredLabel } from 'ts/components/ui/required_label'; +import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; interface BalanceBoundedInputProps { label?: string; @@ -25,8 +25,7 @@ interface BalanceBoundedInputState { amountString: string; } -export class BalanceBoundedInput extends - React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> { +export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> { public static defaultProps: Partial<BalanceBoundedInputProps> = { shouldShowIncompleteErrs: false, shouldHideVisitBalancesLink: false, @@ -74,37 +73,40 @@ export class BalanceBoundedInput extends if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') { errorText = 'This field is required'; } - let label: React.ReactNode|string = ''; + let label: React.ReactNode | string = ''; if (!_.isUndefined(this.props.label)) { - label = <RequiredLabel label={this.props.label}/>; + label = <RequiredLabel label={this.props.label} />; } return ( <TextField fullWidth={true} floatingLabelText={label} floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey, width: 206}} + floatingLabelStyle={{ color: colors.grey, width: 206 }} errorText={errorText} value={this.state.amountString} - hintText={<span style={{textTransform: 'capitalize'}}>amount</span>} + hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>} onChange={this._onValueChange.bind(this)} - underlineStyle={{width: 'calc(100% + 50px)'}} + underlineStyle={{ width: 'calc(100% + 50px)' }} /> ); } private _onValueChange(e: any, amountString: string) { const errMsg = this._validate(amountString, this.props.balance); - this.setState({ - amountString, - errMsg, - }, () => { - const isValid = _.isUndefined(errMsg); - if (utils.isNumeric(amountString)) { - this.props.onChange(isValid, new BigNumber(amountString)); - } else { - this.props.onChange(isValid); - } - }); + this.setState( + { + amountString, + errMsg, + }, + () => { + const isValid = _.isUndefined(errMsg); + if (utils.isNumeric(amountString)) { + this.props.onChange(isValid, new BigNumber(amountString)); + } else { + this.props.onChange(isValid); + } + }, + ); } private _validate(amountString: string, balance: BigNumber): InputErrMsg { if (!utils.isNumeric(amountString)) { @@ -115,12 +117,7 @@ export class BalanceBoundedInput extends return 'Cannot be zero'; } if (this.props.shouldCheckBalance && amount.gt(balance)) { - return ( - <span> - Insufficient balance.{' '} - {this._renderIncreaseBalanceLink()} - </span> - ); + return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>; } const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); return errMsg; @@ -139,19 +136,13 @@ export class BalanceBoundedInput extends }; if (_.isUndefined(this.props.onVisitBalancesPageClick)) { return ( - <Link - to={`${WebsitePaths.Portal}/balances`} - style={linkStyle} - > + <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}> {increaseBalanceText} </Link> ); } else { return ( - <div - onClick={this.props.onVisitBalancesPageClick} - style={linkStyle} - > + <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}> {increaseBalanceText} </div> ); diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index da5bc9805..855892e28 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -1,10 +1,10 @@ -import {ZeroEx} from '0x.js'; +import { ZeroEx } from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import * as React from 'react'; -import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input'; -import {ValidatedBigNumberCallback} from 'ts/types'; -import {constants} from 'ts/utils/constants'; +import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; +import { ValidatedBigNumberCallback } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface EthAmountInputProps { label?: string; @@ -21,11 +21,11 @@ interface EthAmountInputState {} export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> { public render() { - const amount = this.props.amount ? - ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) : - undefined; + const amount = this.props.amount + ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) + : undefined; return ( - <div className="flex overflow-hidden" style={{height: 63}}> + <div className="flex overflow-hidden" style={{ height: 63 }}> <BalanceBoundedInput label={this.props.label} balance={this.props.balance} @@ -36,16 +36,14 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink} /> - <div style={{paddingTop: _.isUndefined(this.props.label) ? 15 : 40}}> - ETH - </div> + <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div> </div> ); } private _onChange(isValid: boolean, amount?: BigNumber) { - const baseUnitAmountIfExists = _.isUndefined(amount) ? - undefined : - ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); + const baseUnitAmountIfExists = _.isUndefined(amount) + ? undefined + : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); this.props.onChange(isValid, baseUnitAmountIfExists); } } diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index fe471e39b..16aa5aa09 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -4,7 +4,7 @@ import DatePicker from 'material-ui/DatePicker'; import TimePicker from 'material-ui/TimePicker'; import * as moment from 'moment'; import * as React from 'react'; -import {utils} from 'ts/utils/utils'; +import { utils } from 'ts/utils/utils'; interface ExpirationInputProps { orderExpiryTimestamp: BigNumber; @@ -45,10 +45,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir onChange={this._onDateChanged.bind(this)} shouldDisableDate={this._shouldDisableDate.bind(this)} /> - <div - className="absolute" - style={{fontSize: 20, right: 40, top: 13, pointerEvents: 'none'}} - > + <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}> <i className="zmdi zmdi-calendar" /> </div> </div> @@ -60,25 +57,20 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir value={time} onChange={this._onTimeChanged.bind(this)} /> - <div - className="absolute" - style={{fontSize: 20, right: 9, top: 13, pointerEvents: 'none'}} - > + <div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}> <i className="zmdi zmdi-time" /> </div> </div> - <div - onClick={this._clearDates.bind(this)} - className="col col-1 pt2" - style={{textAlign: 'right'}} - > - <i style={{fontSize: 16, cursor: 'pointer'}} className="zmdi zmdi-close" /> + <div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}> + <i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" /> </div> </div> ); } private _shouldDisableDate(date: Date): boolean { - return moment(date).startOf('day').isBefore(this._earliestPickableMoment); + return moment(date) + .startOf('day') + .isBefore(this._earliestPickableMoment); } private _clearDates() { this.setState({ @@ -101,7 +93,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir this.setState({ timeMoment, }); - const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment; + const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment; const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment); this.props.updateOrderExpiry(timestamp); } diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 4dc96a062..5a3d34fe6 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,11 +1,11 @@ -import {Order, ZeroEx} from '0x.js'; +import { Order, ZeroEx } from '0x.js'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); -import {Blockchain} from 'ts/blockchain'; -import {FakeTextField} from 'ts/components/ui/fake_text_field'; -import {HashData, Styles} from 'ts/types'; -import {constants} from 'ts/utils/constants'; +import { Blockchain } from 'ts/blockchain'; +import { FakeTextField } from 'ts/components/ui/fake_text_field'; +import { HashData, Styles } from 'ts/types'; +import { constants } from 'ts/utils/constants'; const styles: Styles = { textField: { @@ -31,11 +31,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { return ( <div> <FakeTextField label={this.props.label}> - <div - style={styles.textField} - data-tip={true} - data-for="hashTooltip" - > + <div style={styles.textField} data-tip={true} data-for="hashTooltip"> {msgHashHex} </div> </FakeTextField> diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx index 0f220f955..4cf9af64d 100644 --- a/packages/website/ts/components/inputs/identicon_address_input.tsx +++ b/packages/website/ts/components/inputs/identicon_address_input.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {AddressInput} from 'ts/components/inputs/address_input'; -import {Identicon} from 'ts/components/ui/identicon'; -import {InputLabel} from 'ts/components/ui/input_label'; -import {RequiredLabel} from 'ts/components/ui/required_label'; +import { AddressInput } from 'ts/components/inputs/address_input'; +import { Identicon } from 'ts/components/ui/identicon'; +import { InputLabel } from 'ts/components/ui/input_label'; +import { RequiredLabel } from 'ts/components/ui/required_label'; interface IdenticonAddressInputProps { initialAddress: string; @@ -24,16 +24,15 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput }; } public render() { - const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : - this.props.label; + const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; return ( - <div className="relative" style={{width: '100%'}}> + <div className="relative" style={{ width: '100%' }}> <InputLabel text={label} /> <div className="flex"> - <div className="col col-1 pb1 pr1" style={{paddingTop: 13}}> + <div className="col col-1 pb1 pr1" style={{ paddingTop: 13 }}> <Identicon address={this.state.address} diameter={26} /> </div> - <div className="col col-11 pb1 pl1" style={{height: 65}}> + <div className="col col-11 pb1 pl1" style={{ height: 65 }}> <AddressInput hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..." shouldHideLabel={true} diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 84117e843..b3ded96c7 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,11 +1,11 @@ -import {ZeroEx} from '0x.js'; +import { ZeroEx } from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import * as React from 'react'; -import {Link} from 'react-router-dom'; -import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input'; -import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { Link } from 'react-router-dom'; +import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; +import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface TokenAmountInputProps { token: Token; @@ -19,16 +19,16 @@ interface TokenAmountInputProps { onVisitBalancesPageClick?: () => void; } -interface TokenAmountInputState {} +interface TokenAmountInputState {} export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> { public render() { - const amount = this.props.amount ? - ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) : - undefined; + const amount = this.props.amount + ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) + : undefined; const hasLabel = !_.isUndefined(this.props.label); return ( - <div className="flex overflow-hidden" style={{height: hasLabel ? 84 : 62}}> + <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}> <BalanceBoundedInput label={this.props.label} amount={amount} @@ -39,9 +39,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} /> - <div style={{paddingTop: hasLabel ? 39 : 14}}> - {this.props.token.symbol} - </div> + <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div> </div> ); } @@ -59,9 +57,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok Insufficient allowance.{' '} <Link to={`${WebsitePaths.Portal}/balances`} - style={{cursor: 'pointer', color: colors.darkestGrey}} + style={{ cursor: 'pointer', color: colors.darkestGrey }} > - Set allowance + Set allowance </Link> </span> ); diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index ba348dade..5df19b28c 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as React from 'react'; -import {Blockchain} from 'ts/blockchain'; -import {AssetPicker} from 'ts/components/generate_order/asset_picker'; -import {InputLabel} from 'ts/components/ui/input_label'; -import {TokenIcon} from 'ts/components/ui/token_icon'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { Blockchain } from 'ts/blockchain'; +import { AssetPicker } from 'ts/components/generate_order/asset_picker'; +import { InputLabel } from 'ts/components/ui/input_label'; +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types'; +import { colors } from 'ts/utils/colors'; const TOKEN_ICON_DIMENSION = 80; @@ -51,18 +51,15 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState </div> <Paper zDepth={1} - style={{cursor: 'pointer'}} + style={{ cursor: 'pointer' }} onMouseEnter={this._onToggleHover.bind(this, true)} onMouseLeave={this._onToggleHover.bind(this, false)} onClick={this._onAssetClicked.bind(this)} > - <div - className="mx-auto pt2" - style={{width: TOKEN_ICON_DIMENSION, ...iconStyles}} - > + <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}> <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} /> </div> - <div className="py1 center" style={{color: colors.grey}}> + <div className="py1 center" style={{ color: colors.grey }}> {token.name} </div> </Paper> |