diff options
Diffstat (limited to 'packages/website/ts/components/inputs')
4 files changed, 70 insertions, 7 deletions
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index da6f900e6..cfe75b751 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Toggle from 'material-ui/Toggle'; @@ -30,6 +30,31 @@ interface AllowanceToggleState { prevAllowance: BigNumber; } +const styles: Styles = { + baseThumbStyle: { + height: 10, + width: 10, + top: 6, + backgroundColor: colors.white, + boxShadow: `0px 0px 0px ${colors.allowanceToggleShadow}`, + }, + offThumbStyle: { + left: 4, + }, + onThumbStyle: { + left: 25, + }, + baseTrackStyle: { + width: 25, + }, + offTrackStyle: { + backgroundColor: colors.allowanceToggleOffTrack, + }, + onTrackStyle: { + backgroundColor: colors.allowanceToggleOnTrack, + }, +}; + export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> { constructor(props: AllowanceToggleProps) { super(props); @@ -54,6 +79,10 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow disabled={this.state.isSpinnerVisible || this.props.isDisabled} toggled={this._isAllowanceSet()} onToggle={this._onToggleAllowanceAsync.bind(this)} + thumbStyle={{ ...styles.baseThumbStyle, ...styles.offThumbStyle }} + thumbSwitchedStyle={{ ...styles.baseThumbStyle, ...styles.onThumbStyle }} + trackStyle={{ ...styles.baseTrackStyle, ...styles.offTrackStyle }} + trackSwitchedStyle={{ ...styles.baseTrackStyle, ...styles.onTrackStyle }} /> </div> {this.state.isSpinnerVisible && ( diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 253b01871..e9b8dd369 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -12,6 +12,7 @@ interface BalanceBoundedInputProps { label?: string; balance: BigNumber; amount?: BigNumber; + hintText?: string; onChange: ValidatedBigNumberCallback; shouldShowIncompleteErrs?: boolean; shouldCheckBalance: boolean; @@ -19,6 +20,8 @@ interface BalanceBoundedInputProps { onVisitBalancesPageClick?: () => void; shouldHideVisitBalancesLink?: boolean; isDisabled?: boolean; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; } interface BalanceBoundedInputState { @@ -31,6 +34,9 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp shouldShowIncompleteErrs: false, shouldHideVisitBalancesLink: false, isDisabled: false, + shouldShowErrs: true, + hintText: 'amount', + shouldShowUnderline: true, }; constructor(props: BalanceBoundedInputProps) { super(props); @@ -71,9 +77,12 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp } } public render() { - let errorText = this.state.errMsg; - if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') { - errorText = 'This field is required'; + let errorText; + if (this.props.shouldShowErrs) { + errorText = + this.props.shouldShowIncompleteErrs && this.state.amountString === '' + ? 'This field is required' + : this.state.errMsg; } let label: React.ReactNode | string = ''; if (!_.isUndefined(this.props.label)) { @@ -87,9 +96,10 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp floatingLabelStyle={{ color: colors.grey, width: 206 }} errorText={errorText} value={this.state.amountString} - hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>} + hintText={<span style={{ textTransform: 'capitalize' }}>{this.props.hintText}</span>} onChange={this._onValueChange.bind(this)} underlineStyle={{ width: 'calc(100% + 50px)' }} + underlineShow={this.props.shouldShowUnderline} disabled={this.props.isDisabled} /> ); diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index a66f92c8c..f3a879065 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -10,22 +10,31 @@ interface EthAmountInputProps { label?: string; balance: BigNumber; amount?: BigNumber; + hintText?: string; onChange: ValidatedBigNumberCallback; shouldShowIncompleteErrs: boolean; onVisitBalancesPageClick?: () => void; shouldCheckBalance: boolean; shouldHideVisitBalancesLink?: boolean; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; + style?: React.CSSProperties; } interface EthAmountInputState {} export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> { + public static defaultProps: Partial<EthAmountInputProps> = { + shouldShowErrs: true, + shouldShowUnderline: true, + style: { height: 63 }, + }; public render() { 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={this.props.style}> <BalanceBoundedInput label={this.props.label} balance={this.props.balance} @@ -35,6 +44,9 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink} + hintText={this.props.hintText} + shouldShowErrs={this.props.shouldShowErrs} + shouldShowUnderline={this.props.shouldShowUnderline} /> <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div> </div> diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index b55840fc4..591be7c0c 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -15,12 +15,16 @@ interface TokenAmountInputProps { token: Token; label?: string; amount?: BigNumber; + hintText?: string; shouldShowIncompleteErrs: boolean; shouldCheckBalance: boolean; shouldCheckAllowance: boolean; onChange: ValidatedBigNumberCallback; onVisitBalancesPageClick?: () => void; lastForceTokenStateRefetch: number; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; + style?: React.CSSProperties; } interface TokenAmountInputState { @@ -30,6 +34,10 @@ interface TokenAmountInputState { } export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> { + public static defaultProps: Partial<TokenAmountInputProps> = { + shouldShowErrs: true, + shouldShowUnderline: true, + }; private _isUnmounted: boolean; constructor(props: TokenAmountInputProps) { super(props); @@ -64,8 +72,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) : undefined; const hasLabel = !_.isUndefined(this.props.label); + const style = !_.isUndefined(this.props.style) ? this.props.style : { height: hasLabel ? 84 : 62 }; return ( - <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}> + <div className="flex overflow-hidden" style={style}> <BalanceBoundedInput label={this.props.label} amount={amount} @@ -76,6 +85,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} isDisabled={!this.state.isBalanceAndAllowanceLoaded} + hintText={this.props.hintText} + shouldShowErrs={this.props.shouldShowErrs} + shouldShowUnderline={this.props.shouldShowUnderline} /> <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div> </div> |