aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-10-27 10:22:26 +0800
committerGitHub <noreply@github.com>2018-10-27 10:22:26 +0800
commitae6202ed3d777605a3fd02cd29141a3ba40f4b34 (patch)
tree6877f9d954a4495eb40afd3fc43144bfe466a024
parente73fceaa20738175e660caf4dee442d4c598c1b5 (diff)
parent0e55f76db860962e4ce06866cbfd3e058c0c2984 (diff)
downloaddexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar.gz
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar.bz2
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar.lz
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar.xz
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.tar.zst
dexon-sol-tools-ae6202ed3d777605a3fd02cd29141a3ba40f4b34.zip
Merge pull request #1194 from 0xProject/feature/instant/input-to-fixed
[instant] Disable input when processing
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx5
-rw-r--r--packages/instant/src/components/scaling_amount_input.tsx3
-rw-r--r--packages/instant/src/components/scaling_input.tsx5
-rw-r--r--packages/instant/src/containers/selected_erc20_asset_amount_input.ts10
4 files changed, 21 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..5abb34c2f 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;
+ isDisabled: 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,
+ isDisabled: 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.isDisabled ? '' : `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..cfbf3b7cc 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 {
+ isDisabled: 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,
+ isDisabled: 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}
+ isDisabled={this.props.isDisabled}
/>
);
}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 34cb0b5fd..11748b729 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;
+ isDisabled: boolean;
}
export interface ScalingInputState {
@@ -49,6 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
onFontSizeChange: util.boundNoop,
maxLength: 7,
scalingSettings: defaultScalingSettings,
+ isDisabled: 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 { isDisabled, 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={isDisabled}
/>
);
}
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..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,6 +25,7 @@ interface ConnectedState {
assetBuyer?: AssetBuyer;
value?: BigNumberInput;
asset?: ERC20Asset;
+ isDisabled: boolean;
}
interface ConnectedDispatch {
@@ -35,21 +36,29 @@ interface ConnectedProps {
value?: BigNumberInput;
asset?: ERC20Asset;
onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+ isDisabled: 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 isDisabled = !isEnabled;
+
const selectedAsset = state.selectedAsset;
if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
return {
value: state.selectedAssetAmount,
+ isDisabled,
};
}
+
return {
assetBuyer: state.assetBuyer,
value: state.selectedAssetAmount,
asset: selectedAsset as ERC20Asset,
+ isDisabled,
};
};
@@ -114,6 +123,7 @@ const mergeProps = (
onChange: (value, asset) => {
connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
},
+ isDisabled: connectedState.isDisabled,
};
};