MyCrypto/common/components/AmountField.tsx

32 lines
920 B
TypeScript

import React from 'react';
import { AmountFieldFactory } from './AmountFieldFactory';
import { Aux } from 'components/ui';
import { UnitDropDown } from 'components';
import translate, { translateRaw } from 'translations';
interface Props {
hasUnitDropdown?: boolean;
}
export const AmountField: React.SFC<Props> = ({ hasUnitDropdown }) => (
<AmountFieldFactory
withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
<Aux>
<label>{translate('SEND_amount')}</label>
<div className="input-group">
<input
className={`form-control ${isValid ? 'is-valid' : 'is-invalid'}`}
type="number"
placeholder={translateRaw('SEND_amount_short')}
value={raw}
readOnly={!!readOnly}
onChange={onChange}
/>
{hasUnitDropdown && <UnitDropDown />}
</div>
</Aux>
)}
/>
);