Skip to content

Commit 0d75038

Browse files
ethansharethanshar
authored
Support passing a static validation message (#1486)
* Support passing a static validation message regardless to the validate prop * Fix typing * Fix validate typing
1 parent 0bab50b commit 0d75038

File tree

7 files changed

+22
-10
lines changed

7 files changed

+22
-10
lines changed

‎generatedTypes/src/incubator/TextField/Presenter.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import { FieldContextType } from './FieldContext';
22
import { ColorType, Validator } from './types';
33
export declare function getColorByState(color?: ColorType, context?: FieldContextType): string | undefined;
44
export declare function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?];
5-
export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | undefined;
5+
export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | string[] | undefined;

‎generatedTypes/src/incubator/TextField/ValidationMessage.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="react" />
22
import { TextStyle } from 'react-native';
3+
import { FieldStateProps } from './useFieldState';
34
export interface ValidationMessageProps {
45
/**
56
* Should support showing validation error message
@@ -14,9 +15,10 @@ export interface ValidationMessageProps {
1415
*/
1516
validationMessageStyle?: TextStyle;
1617
retainSpace?: boolean;
18+
validate?: FieldStateProps['validate'];
1719
}
1820
declare const ValidationMessage: {
19-
({ validationMessage, enableErrors, validationMessageStyle, retainSpace }: ValidationMessageProps): JSX.Element | null;
21+
({ validationMessage, enableErrors, validationMessageStyle, retainSpace, validate }: ValidationMessageProps): JSX.Element | null;
2022
displayName: string;
2123
};
2224
export default ValidationMessage;

‎generatedTypes/src/incubator/TextField/usePreset.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
149149
validationMessage?: string | string[] | undefined;
150150
validationMessageStyle?: import("react-native").TextStyle | undefined;
151151
retainSpace?: boolean | undefined;
152+
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
152153
showCharCounter?: boolean | undefined;
153154
charCounterStyle?: import("react-native").TextStyle | undefined;
154155
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
155156
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
156-
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
157157
validateOnStart?: boolean | undefined;
158158
validateOnChange?: boolean | undefined;
159159
validateOnBlur?: boolean | undefined;
@@ -481,11 +481,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
481481
validationMessage?: string | string[] | undefined;
482482
validationMessageStyle?: import("react-native").TextStyle | undefined;
483483
retainSpace?: boolean | undefined;
484+
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
484485
showCharCounter?: boolean | undefined;
485486
charCounterStyle?: import("react-native").TextStyle | undefined;
486487
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
487488
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
488-
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
489489
validateOnStart?: boolean | undefined;
490490
validateOnChange?: boolean | undefined;
491491
validateOnBlur?: boolean | undefined;
@@ -1045,11 +1045,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
10451045
validationMessage?: string | string[] | undefined;
10461046
validationMessageStyle?: import("react-native").TextStyle | undefined;
10471047
retainSpace?: boolean | undefined;
1048+
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
10481049
showCharCounter?: boolean | undefined;
10491050
charCounterStyle?: import("react-native").TextStyle | undefined;
10501051
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
10511052
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
1052-
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
10531053
validateOnStart?: boolean | undefined;
10541054
validateOnChange?: boolean | undefined;
10551055
validateOnBlur: boolean;

‎src/incubator/TextField/Presenter.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ export function validate(value?: string, validator?: Validator | Validator[]): [
5050

5151
export function getRelevantValidationMessage(validationMessage: string | string[] | undefined,
5252
failingValidatorIndex: undefined | number) {
53-
if (_.isUndefined(failingValidatorIndex) || _.isUndefined(validationMessage)) {
53+
if (_.isUndefined(failingValidatorIndex)) {
54+
return validationMessage;
55+
} else if (_.isUndefined(validationMessage)) {
5456
return;
5557
}
5658

‎src/incubator/TextField/ValidationMessage.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {TextStyle, StyleSheet} from 'react-native';
33
import Text from '../../components/text';
44
import FieldContext from './FieldContext';
55
import {getRelevantValidationMessage} from './Presenter';
6+
import {FieldStateProps} from './useFieldState';
67

78
export interface ValidationMessageProps {
89
/**
@@ -18,13 +19,15 @@ export interface ValidationMessageProps {
1819
*/
1920
validationMessageStyle?: TextStyle;
2021
retainSpace?: boolean;
22+
validate?: FieldStateProps['validate'];
2123
}
2224

2325
const ValidationMessage = ({
2426
validationMessage,
2527
enableErrors,
2628
validationMessageStyle,
27-
retainSpace
29+
retainSpace,
30+
validate
2831
}: ValidationMessageProps) => {
2932
const context = useContext(FieldContext);
3033

@@ -33,10 +36,11 @@ const ValidationMessage = ({
3336
}
3437

3538
const relevantValidationMessage = getRelevantValidationMessage(validationMessage, context.failingValidatorIndex);
39+
const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
3640

3741
return (
3842
<Text red30 style={[styles.validationMessage, validationMessageStyle]}>
39-
{context.isValid ? '' : relevantValidationMessage}
43+
{showValidationMessage ? relevantValidationMessage : ''}
4044
</Text>
4145
);
4246
};

‎src/incubator/TextField/__tests__/Presenter.spec.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,19 @@ describe('TextField:Presenter', () => {
4444
it('should return undefined when there is no validationMessage', () => {
4545
expect(uut.getRelevantValidationMessage(undefined, 0)).toBeUndefined();
4646
});
47+
48+
it('should return the validation message when there is no validate method', () => {
49+
expect(uut.getRelevantValidationMessage('error message', undefined)).toBe('error message');
50+
});
4751

4852
it('should return the relevant validation message when there is a single message', () => {
4953
expect(uut.getRelevantValidationMessage('error message', 0)).toBe('error message');
50-
expect(uut.getRelevantValidationMessage('error message', undefined)).toBeUndefined();
5154
});
5255

5356
it('should return the relevant validation message when there are multiple messages', () => {
5457
const messages = ['Field is required', 'Email is invalid'];
5558
expect(uut.getRelevantValidationMessage(messages, 0)).toBe(messages[0]);
5659
expect(uut.getRelevantValidationMessage(messages, 1)).toBe(messages[1]);
57-
expect(uut.getRelevantValidationMessage(messages, undefined)).toBeUndefined();
5860
});
5961
});
6062
});

‎src/incubator/TextField/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ const TextField = (props: InternalTextFieldProps) => {
168168
{validationMessagePosition === ValidationMessagePosition.TOP && (
169169
<ValidationMessage
170170
enableErrors={enableErrors}
171+
validate={others.validate}
171172
validationMessage={validationMessage}
172173
validationMessageStyle={validationMessageStyle}
173174
/>
@@ -202,6 +203,7 @@ const TextField = (props: InternalTextFieldProps) => {
202203
{validationMessagePosition === ValidationMessagePosition.BOTTOM && (
203204
<ValidationMessage
204205
enableErrors={enableErrors}
206+
validate={others.validate}
205207
validationMessage={validationMessage}
206208
validationMessageStyle={validationMessageStyle}
207209
retainSpace

0 commit comments

Comments
 (0)