aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/amount_input.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/amount_input.tsx')
-rw-r--r--packages/instant/src/components/amount_input.tsx37
1 files changed, 24 insertions, 13 deletions
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 699541bfb..8fead78ca 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -1,4 +1,5 @@
import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
@@ -12,16 +13,26 @@ export interface AmountInputProps {
onChange?: (value: BigNumber) => void;
}
-export const AmountInput: React.StatelessComponent<AmountInputProps> = props => (
- <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
- <Input
- fontColor={props.fontColor}
- fontSize={props.fontSize}
- value={props.value ? props.value.toString() : undefined}
- placeholder="0.00"
- width="2em"
- />
- </Container>
-);
-
-AmountInput.defaultProps = {};
+export class AmountInput extends React.Component<AmountInputProps> {
+ public render(): React.ReactNode {
+ const { fontColor, fontSize, value } = this.props;
+ return (
+ <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+ <Input
+ fontColor={fontColor}
+ fontSize={fontSize}
+ onChange={this._handleChange}
+ value={value ? value.toString() : undefined}
+ placeholder="0.00"
+ width="2em"
+ />
+ </Container>
+ );
+ }
+ private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+ const bigNumberValue = new BigNumber(event.target.value);
+ if (!_.isUndefined(this.props.onChange)) {
+ this.props.onChange(bigNumberValue);
+ }
+ };
+}