diff options
Diffstat (limited to 'packages/instant/src/components')
3 files changed, 11 insertions, 2 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 583fad28b..9b32827e7 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -17,6 +17,7 @@ export interface ERC20AssetAmountInputProps { onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; + disabled: boolean; } export interface ERC20AssetAmountInputState { @@ -26,6 +27,7 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> { public static defaultProps = { onChange: util.boundNoop, + disabled: false, }; constructor(props: ERC20AssetAmountInputProps) { super(props); @@ -35,9 +37,10 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput } public render(): React.ReactNode { const { asset, onChange, ...rest } = this.props; + const amountBorderBottom = this.props.disabled ? '' : `1px solid ${transparentWhite}`; return ( <Container whiteSpace="nowrap"> - <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block"> + <Container borderBottom={amountBorderBottom} display="inline-block"> <ScalingAmountInput {...rest} textLengthThreshold={this._textLengthThresholdForAsset(asset)} diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 655ae2b74..8d51d27f9 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -8,6 +8,7 @@ import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; export interface ScalingAmountInputProps { + disabled: boolean; maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; @@ -20,6 +21,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> public static defaultProps = { onChange: util.boundNoop, onFontSizeChange: util.boundNoop, + disabled: false, }; public render(): React.ReactNode { const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props; @@ -33,6 +35,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> value={!_.isUndefined(value) ? value.toDisplayString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} + disabled={this.props.disabled} /> ); } diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 34cb0b5fd..593e55035 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -27,6 +27,7 @@ export interface ScalingInputProps { placeholder?: string; maxLength?: number; scalingSettings: ScalingSettings; + disabled: boolean; } export interface ScalingInputState { @@ -49,6 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu onFontSizeChange: util.boundNoop, maxLength: 7, scalingSettings: defaultScalingSettings, + disabled: false, }; public state: ScalingInputState = { inputWidthPxAtPhaseChange: undefined, @@ -121,7 +123,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu } } public render(): React.ReactNode { - const { fontColor, onChange, placeholder, value, maxLength } = this.props; + const { disabled, fontColor, onChange, placeholder, value, maxLength } = this.props; const phase = ScalingInput.getPhaseFromProps(this.props); return ( <Input @@ -133,6 +135,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu fontSize={`${this._calculateFontSize(phase)}px`} width={this._calculateWidth(phase)} maxLength={maxLength} + disabled={disabled} /> ); } |