aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-27 04:46:14 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-27 04:46:14 +0800
commit1880c34ce066a8e33047690ef9fb90393100abd9 (patch)
treec6facf128bb4af4eadd3b45023b0de209e7d847a /packages/instant
parentaf91a56a5594d07d7da6caaeff79f5a7fb31ff98 (diff)
downloaddexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar.gz
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar.bz2
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar.lz
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar.xz
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.tar.zst
dexon-sol-tools-1880c34ce066a8e33047690ef9fb90393100abd9.zip
feat(instant): Disable input when processing
Diffstat (limited to 'packages/instant')
-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..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}
/>
);
}
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,
};
};