45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { AmountFieldFactory } from './AmountFieldFactory';
|
|
import { UnitDropDown } from 'components';
|
|
import translate, { translateRaw } from 'translations';
|
|
import { Input } from 'components/ui';
|
|
|
|
interface Props {
|
|
hasUnitDropdown?: boolean;
|
|
showAllTokens?: boolean;
|
|
customValidator?(rawAmount: string): boolean;
|
|
}
|
|
|
|
export const AmountField: React.SFC<Props> = ({
|
|
hasUnitDropdown,
|
|
showAllTokens,
|
|
customValidator
|
|
}) => (
|
|
<AmountFieldFactory
|
|
withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
|
|
<div className="input-group-wrapper">
|
|
<label className="input-group input-group-inline-dropdown">
|
|
<div className="input-group-header">{translate('SEND_amount')}</div>
|
|
<Input
|
|
className={`input-group-input ${
|
|
isAmountValid(raw, customValidator, isValid) ? '' : 'invalid'
|
|
}`}
|
|
type="number"
|
|
placeholder={translateRaw('SEND_amount_short')}
|
|
value={raw}
|
|
readOnly={!!readOnly}
|
|
onChange={onChange}
|
|
/>
|
|
{hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}
|
|
</label>
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
|
|
const isAmountValid = (
|
|
raw: string,
|
|
customValidator: ((rawAmount: string) => boolean) | undefined,
|
|
isValid: boolean
|
|
) => (customValidator ? customValidator(raw) : isValid);
|