Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support passing a static validation message #1486

Merged
merged 4 commits into from
Aug 24, 2021
Merged

Support passing a static validation message #1486

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f188128
Support passing a static validation message regardless to the validat…
ethanshar Aug 22, 2021
210c75a
Merge branch 'master' into feat/TextField_staticValidationMessage
ethanshar Aug 24, 2021
8133d71
Fix typing
ethanshar Aug 24, 2021
b31cb3f
Fix validate typing
ethanshar Aug 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion generatedTypes/src/incubator/TextField/Presenter.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { FieldContextType } from './FieldContext';
import { ColorType, Validator } from './types';
export declare function getColorByState(color?: ColorType, context?: FieldContextType): string | undefined;
export declare function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?];
export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | undefined;
export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | string[] | undefined;
4 changes: 3 additions & 1 deletion generatedTypes/src/incubator/TextField/ValidationMessage.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="react" />
import { TextStyle } from 'react-native';
import { FieldStateProps } from './useFieldState';
export interface ValidationMessageProps {
/**
* Should support showing validation error message
Expand All @@ -14,9 +15,10 @@ export interface ValidationMessageProps {
*/
validationMessageStyle?: TextStyle;
retainSpace?: boolean;
validate: FieldStateProps['validateOnChange'];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
validate: FieldStateProps['validateOnChange'];
validate?: FieldStateProps['validateOnChange'];

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somehow this FieldStateProps['validateOnChange'] is a boolean value, and it creates typing errors in the demo-screen on validate prop, that getting there an array of strings

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

}
declare const ValidationMessage: {
({ validationMessage, enableErrors, validationMessageStyle, retainSpace }: ValidationMessageProps): JSX.Element | null;
({ validationMessage, enableErrors, validationMessageStyle, retainSpace, validate }: ValidationMessageProps): JSX.Element | null;
displayName: string;
};
export default ValidationMessage;
6 changes: 3 additions & 3 deletions generatedTypes/src/incubator/TextField/usePreset.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
validationMessage?: string | string[] | undefined;
validationMessageStyle?: import("react-native").TextStyle | undefined;
retainSpace?: boolean | undefined;
validate: (boolean & (import("./types").Validator | import("./types").Validator[])) | undefined;
showCharCounter?: boolean | undefined;
charCounterStyle?: import("react-native").TextStyle | undefined;
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
validateOnStart?: boolean | undefined;
validateOnChange?: boolean | undefined;
validateOnBlur?: boolean | undefined;
Expand Down Expand Up @@ -481,11 +481,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
validationMessage?: string | string[] | undefined;
validationMessageStyle?: import("react-native").TextStyle | undefined;
retainSpace?: boolean | undefined;
validate: (boolean & (import("./types").Validator | import("./types").Validator[])) | undefined;
showCharCounter?: boolean | undefined;
charCounterStyle?: import("react-native").TextStyle | undefined;
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
validateOnStart?: boolean | undefined;
validateOnChange?: boolean | undefined;
validateOnBlur?: boolean | undefined;
Expand Down Expand Up @@ -1045,11 +1045,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
validationMessage?: string | string[] | undefined;
validationMessageStyle?: import("react-native").TextStyle | undefined;
retainSpace?: boolean | undefined;
validate: (boolean & (import("./types").Validator | import("./types").Validator[])) | undefined;
showCharCounter?: boolean | undefined;
charCounterStyle?: import("react-native").TextStyle | undefined;
leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
validate?: import("./types").Validator | import("./types").Validator[] | undefined;
validateOnStart?: boolean | undefined;
validateOnChange?: boolean | undefined;
validateOnBlur: boolean;
Expand Down
4 changes: 3 additions & 1 deletion src/incubator/TextField/Presenter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ export function validate(value?: string, validator?: Validator | Validator[]): [

export function getRelevantValidationMessage(validationMessage: string | string[] | undefined,
failingValidatorIndex: undefined | number) {
if (_.isUndefined(failingValidatorIndex) || _.isUndefined(validationMessage)) {
if (_.isUndefined(failingValidatorIndex)) {
return validationMessage;
} else if (_.isUndefined(validationMessage)) {
return;
}

Expand Down
8 changes: 6 additions & 2 deletions src/incubator/TextField/ValidationMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {TextStyle, StyleSheet} from 'react-native';
import Text from '../../components/text';
import FieldContext from './FieldContext';
import {getRelevantValidationMessage} from './Presenter';
import {FieldStateProps} from './useFieldState';

export interface ValidationMessageProps {
/**
Expand All @@ -18,13 +19,15 @@ export interface ValidationMessageProps {
*/
validationMessageStyle?: TextStyle;
retainSpace?: boolean;
validate: FieldStateProps['validateOnChange'];
}

const ValidationMessage = ({
validationMessage,
enableErrors,
validationMessageStyle,
retainSpace
retainSpace,
validate
}: ValidationMessageProps) => {
const context = useContext(FieldContext);

Expand All @@ -33,10 +36,11 @@ const ValidationMessage = ({
}

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

return (
<Text red30 style={[styles.validationMessage, validationMessageStyle]}>
{context.isValid ? '' : relevantValidationMessage}
{showValidationMessage ? relevantValidationMessage : ''}
</Text>
);
};
Expand Down
6 changes: 4 additions & 2 deletions src/incubator/TextField/__tests__/Presenter.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,19 @@ describe('TextField:Presenter', () => {
it('should return undefined when there is no validationMessage', () => {
expect(uut.getRelevantValidationMessage(undefined, 0)).toBeUndefined();
});

it('should return the validation message when there is no validate method', () => {
expect(uut.getRelevantValidationMessage('error message', undefined)).toBe('error message');
});

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

it('should return the relevant validation message when there are multiple messages', () => {
const messages = ['Field is required', 'Email is invalid'];
expect(uut.getRelevantValidationMessage(messages, 0)).toBe(messages[0]);
expect(uut.getRelevantValidationMessage(messages, 1)).toBe(messages[1]);
expect(uut.getRelevantValidationMessage(messages, undefined)).toBeUndefined();
});
});
});
2 changes: 2 additions & 0 deletions src/incubator/TextField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ const TextField = (props: InternalTextFieldProps) => {
{validationMessagePosition === ValidationMessagePosition.TOP && (
<ValidationMessage
enableErrors={enableErrors}
validate={others.validate}
validationMessage={validationMessage}
validationMessageStyle={validationMessageStyle}
/>
Expand Down Expand Up @@ -202,6 +203,7 @@ const TextField = (props: InternalTextFieldProps) => {
{validationMessagePosition === ValidationMessagePosition.BOTTOM && (
<ValidationMessage
enableErrors={enableErrors}
validate={others.validate}
validationMessage={validationMessage}
validationMessageStyle={validationMessageStyle}
retainSpace
Expand Down