1  import React from 'react';
 2  
 3  import translate from 'translations';
 4  import { UnitDropDown, SendEverything } from 'components';
 5  import { Input } from 'components/ui';
 6  import { AmountFieldFactory } from './AmountFieldFactory';
 7  
 8  interface Props {
 9    hasUnitDropdown?: boolean;
10    hasSendEverything?: boolean;
11    showAllTokens?: boolean;
12    showInvalidWithoutValue?: boolean;
13    customValidator?(rawAmount: string): boolean;
14  }
15  
16  export const AmountField: React.SFC<Props> = ({
17    hasUnitDropdown,
18    hasSendEverything,
19    showAllTokens,
20    customValidator,
21    showInvalidWithoutValue
22  }) => (
23    <AmountFieldFactory
24      withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
25        <div className="AmountField input-group-wrapper">
26          <label className="AmountField-group input-group input-group-inline">
27            <div className="input-group-header">{translate('SEND_AMOUNT_SHORT')}</div>
28            <Input
29              isValid={isAmountValid(raw, customValidator, isValid)}
30              type="number"
31              placeholder="1"
32              value={raw}
33              readOnly={!!readOnly}
34              onChange={onChange}
35              showInvalidWithoutValue={showInvalidWithoutValue}
36            />
37            {hasSendEverything && <SendEverything />}
38            {hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}
39          </label>
40        </div>
41      )}
42    />
43  );
44  
45  const isAmountValid = (
46    raw: string,
47    customValidator: ((rawAmount: string) => boolean) | undefined,
48    isValid: boolean
49  ) => (customValidator ? customValidator(raw) : isValid);