From 1880c34ce066a8e33047690ef9fb90393100abd9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 26 Oct 2018 13:46:14 -0700 Subject: feat(instant): Disable input when processing --- packages/instant/src/components/erc20_asset_amount_input.tsx | 5 ++++- packages/instant/src/components/scaling_amount_input.tsx | 3 +++ packages/instant/src/components/scaling_input.tsx | 5 ++++- .../src/containers/selected_erc20_asset_amount_input.ts | 10 ++++++++++ 4 files changed, 21 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') 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 { public static defaultProps = { onChange: util.boundNoop, + disabled: false, }; constructor(props: ERC20AssetAmountInputProps) { super(props); @@ -35,9 +37,10 @@ export class ERC20AssetAmountInput extends React.Component - + 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 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 ); } diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index ee76e9d66..6e1957a59 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -25,6 +25,7 @@ interface ConnectedState { assetBuyer?: AssetBuyer; value?: BigNumberInput; asset?: ERC20Asset; + disabled: boolean; } interface ConnectedDispatch { @@ -35,21 +36,29 @@ interface ConnectedProps { value?: BigNumberInput; asset?: ERC20Asset; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; + disabled: boolean; } type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { + const processState = state.buyOrderState.processState; + const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE; + const disabled = !isEnabled; + const selectedAsset = state.selectedAsset; if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) { return { value: state.selectedAssetAmount, + disabled, }; } + return { assetBuyer: state.assetBuyer, value: state.selectedAssetAmount, asset: selectedAsset as ERC20Asset, + disabled, }; }; @@ -114,6 +123,7 @@ const mergeProps = ( onChange: (value, asset) => { connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset); }, + disabled: connectedState.disabled, }; }; -- cgit v1.2.3 From 0e55f76db860962e4ce06866cbfd3e058c0c2984 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 26 Oct 2018 16:24:16 -0700 Subject: fix(instant): refactor some props to use isDisabled instead of disabled --- packages/instant/src/components/erc20_asset_amount_input.tsx | 6 +++--- packages/instant/src/components/scaling_amount_input.tsx | 6 +++--- packages/instant/src/components/scaling_input.tsx | 8 ++++---- .../src/containers/selected_erc20_asset_amount_input.ts | 12 ++++++------ 4 files changed, 16 insertions(+), 16 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 9b32827e7..5abb34c2f 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -17,7 +17,7 @@ export interface ERC20AssetAmountInputProps { onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; - disabled: boolean; + isDisabled: boolean; } export interface ERC20AssetAmountInputState { @@ -27,7 +27,7 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component { public static defaultProps = { onChange: util.boundNoop, - disabled: false, + isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { super(props); @@ -37,7 +37,7 @@ export class ERC20AssetAmountInput extends React.Component diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 8d51d27f9..cfbf3b7cc 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -8,7 +8,7 @@ import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; export interface ScalingAmountInputProps { - disabled: boolean; + isDisabled: boolean; maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; @@ -21,7 +21,7 @@ export class ScalingAmountInput extends React.Component public static defaultProps = { onChange: util.boundNoop, onFontSizeChange: util.boundNoop, - disabled: false, + isDisabled: false, }; public render(): React.ReactNode { const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props; @@ -35,7 +35,7 @@ export class ScalingAmountInput extends React.Component value={!_.isUndefined(value) ? value.toDisplayString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} - disabled={this.props.disabled} + isDisabled={this.props.isDisabled} /> ); } diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 593e55035..11748b729 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -27,7 +27,7 @@ export interface ScalingInputProps { placeholder?: string; maxLength?: number; scalingSettings: ScalingSettings; - disabled: boolean; + isDisabled: boolean; } export interface ScalingInputState { @@ -50,7 +50,7 @@ export class ScalingInput extends React.Component ); } diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 6e1957a59..3d741ae97 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -25,7 +25,7 @@ interface ConnectedState { assetBuyer?: AssetBuyer; value?: BigNumberInput; asset?: ERC20Asset; - disabled: boolean; + isDisabled: boolean; } interface ConnectedDispatch { @@ -36,7 +36,7 @@ interface ConnectedProps { value?: BigNumberInput; asset?: ERC20Asset; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; - disabled: boolean; + isDisabled: boolean; } type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; @@ -44,13 +44,13 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { const processState = state.buyOrderState.processState; const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE; - const disabled = !isEnabled; + const isDisabled = !isEnabled; const selectedAsset = state.selectedAsset; if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) { return { value: state.selectedAssetAmount, - disabled, + isDisabled, }; } @@ -58,7 +58,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP assetBuyer: state.assetBuyer, value: state.selectedAssetAmount, asset: selectedAsset as ERC20Asset, - disabled, + isDisabled, }; }; @@ -123,7 +123,7 @@ const mergeProps = ( onChange: (value, asset) => { connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset); }, - disabled: connectedState.disabled, + isDisabled: connectedState.isDisabled, }; }; -- cgit v1.2.3