aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs/token_amount_input.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/inputs/token_amount_input.tsx')
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx22
1 files changed, 16 insertions, 6 deletions
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index a5fd86f6c..f040928f1 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -26,6 +26,8 @@ interface TokenAmountInputProps {
shouldShowErrs?: boolean;
shouldShowUnderline?: boolean;
style?: React.CSSProperties;
+ labelStyle?: React.CSSProperties;
+ inputHintStyle?: React.CSSProperties;
}
interface TokenAmountInputState {
@@ -75,12 +77,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
const amount = this.props.amount
? 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 ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
return (
- <div className="flex overflow-hidden" style={style}>
+ <div className="flex overflow-hidden" style={this._getStyle()}>
<BalanceBoundedInput
label={this.props.label}
amount={amount}
@@ -95,8 +93,10 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
hintText={this.props.hintText}
shouldShowErrs={this.props.shouldShowErrs}
shouldShowUnderline={this.props.shouldShowUnderline}
+ inputStyle={this.props.style}
+ inputHintStyle={this.props.inputHintStyle}
/>
- <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
+ <div style={this._getLabelStyle()}>{this.props.token.symbol}</div>
</div>
);
}
@@ -141,4 +141,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
});
}
}
+ private _getStyle(): React.CSSProperties {
+ const hasLabel = !_.isUndefined(this.props.label);
+ return !_.isUndefined(this.props.style)
+ ? this.props.style
+ : { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
+ }
+ private _getLabelStyle(): React.CSSProperties {
+ const hasLabel = !_.isUndefined(this.props.label);
+ return this.props.labelStyle || { paddingTop: hasLabel ? 39 : 14 };
+ }
}