Undo changes to Input and pass down showInvalidWithoutValue

This commit is contained in:
Connor Bryan 2018-06-25 18:35:04 -05:00
parent 2e0dd57d8b
commit f5a9622fd3
4 changed files with 17 additions and 12 deletions

View File

@ -10,13 +10,15 @@ interface Props {
hasSendEverything?: boolean; hasSendEverything?: boolean;
showAllTokens?: boolean; showAllTokens?: boolean;
customValidator?(rawAmount: string): boolean; customValidator?(rawAmount: string): boolean;
showInvalidWithoutValue?: boolean;
} }
export const AmountField: React.SFC<Props> = ({ export const AmountField: React.SFC<Props> = ({
hasUnitDropdown, hasUnitDropdown,
hasSendEverything, hasSendEverything,
showAllTokens, showAllTokens,
customValidator customValidator,
showInvalidWithoutValue
}) => ( }) => (
<AmountFieldFactory <AmountFieldFactory
withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => ( withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
@ -30,7 +32,7 @@ export const AmountField: React.SFC<Props> = ({
value={raw} value={raw}
readOnly={!!readOnly} readOnly={!!readOnly}
onChange={onChange} onChange={onChange}
showInvalidWithoutValue={true} showInvalidWithoutValue={showInvalidWithoutValue}
/> />
{hasSendEverything && <SendEverything />} {hasSendEverything && <SendEverything />}
{hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />} {hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}

View File

@ -40,17 +40,16 @@ class Input extends React.Component<Props, State> {
const hasValue = !!this.props.value && this.props.value.toString().length > 0; const hasValue = !!this.props.value && this.props.value.toString().length > 0;
// Currently we don't ever highlight valid, so go empty string instead // Currently we don't ever highlight valid, so go empty string instead
const validDueToValue = !hasValue && !showInvalidWithoutValue;
const validDueToBlur = !hasBlurred && !showInvalidBeforeBlur;
let validClass = isValid ? '' : 'invalid'; let validClass = isValid ? '' : 'invalid';
if (isStateless) {
// Override validity based on initial conditions.
if (isStateless || validDueToValue || validDueToBlur) {
validClass = ''; validClass = '';
} }
if (!hasValue && !showInvalidWithoutValue) {
// Show an error with no value only after blurring. validClass = '';
if (!isStateless && !validDueToBlur && !hasValue && showInvalidWithoutValue) { } else if (!hasBlurred && !showInvalidBeforeBlur) {
validClass = '';
}
if (!isStateless && !hasValue && showInvalidWithoutValue) {
validClass = 'invalid'; validClass = 'invalid';
} }

View File

@ -54,7 +54,11 @@ class FieldsClass extends Component<StateProps> {
<div <div
className={schedulingAvailable ? 'col-sm-9 col-md-10' : 'col-sm-12 col-md-12'} className={schedulingAvailable ? 'col-sm-9 col-md-10' : 'col-sm-12 col-md-12'}
> >
<AmountField hasUnitDropdown={true} hasSendEverything={true} /> <AmountField
hasUnitDropdown={true}
hasSendEverything={true}
showInvalidWithoutValue={true}
/>
</div> </div>
{schedulingAvailable && ( {schedulingAvailable && (
<div className="col-sm-3 col-md-2"> <div className="col-sm-3 col-md-2">

View File

@ -101,7 +101,7 @@ class RequestPayment extends React.Component<Props, {}> {
<AmountField <AmountField
hasUnitDropdown={true} hasUnitDropdown={true}
showAllTokens={true} showAllTokens={true}
customValidator={isValidAmount(decimal)} showInvalidWithoutValue={true}
/> />
</div> </div>
</div> </div>