✨ DateSelector - handle error

ZeroGachis · Jan 30, 2024 · b370f51 · b370f51
1 parent 9640c7e
commit b370f51
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 25 deletions.
diff --git a/Storybook/components/DateSelector/DateSelector.stories.tsx b/Storybook/components/DateSelector/DateSelector.stories.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DateSelector } from '../../../src/components/dateSelector/DateSelector';
 import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
-import { StyleSheet, View } from 'react-native';
-import { action } from '@storybook/addon-actions';
+import { StyleSheet, View, Text } from 'react-native';
 
 export default {
     title: 'components/DateSelector',
@@ -12,6 +11,7 @@ export default {
     },
     args: {
         prefilled: new Date(2023, 0, 8),
+        onUpdatedDate: () => true,
     },
     decorators: [
         (Story) => {
@@ -28,20 +28,35 @@ export default {
 } as ComponentMeta<typeof DateSelector>;
 
 export const Base: ComponentStory<typeof DateSelector> = (args) => {
-    const handleChange = (date: Date) => {
-        action('onChange')(date.toDateString());
-    };
-    return <DateSelector {...args} onChange={handleChange} />;
+    return <DateSelector {...args} />;
 };
+
 export const WithErrorMessage: ComponentStory<typeof DateSelector> = (args) => {
-    const handleChange = (date: Date) => {
-        action('onChange')(date.toDateString());
+    const [error, setError] = useState('');
+
+    const handleUpdatedDate = (date: Date) => {
+        const isGreaterThunberg = isGreaterThan2030(date);
+        if (isGreaterThunberg) {
+            setError('How dare you...');
+        } else {
+            setError('');
+        }
+
+        return !isGreaterThunberg;
     };
+
     return (
-        <DateSelector
-            {...args}
-            onChange={handleChange}
-            errorMessage='Date non valide. Veuillez respecter le format attendu (JJ/MM/AA). '
-        />
+        <View>
+            <Text>Enter a date greater than 2030 to be in error</Text>
+            <DateSelector
+                {...args}
+                onUpdatedDate={handleUpdatedDate}
+                errorMessage={error}
+            />
+        </View>
     );
 };
+
+function isGreaterThan2030(date: Date): boolean {
+    return date.getFullYear() > 2030;
+}
diff --git a/src/__tests__/components/DateSelector.test.tsx b/src/__tests__/components/DateSelector.test.tsx
@@ -11,7 +11,7 @@ beforeEach(() => {
     tree = render(
         <DateSelector
             prefilled={new Date(2003, 1, 1)}
-            onChange={mockOnChange}
+            onUpdatedDate={mockOnChange}
             testID={mockedTestID}
         />,
     );
@@ -73,7 +73,7 @@ describe('MODULE | DateField', () => {
         tree.rerender(
             <DateSelector
                 prefilled={new Date(2003, 1, 1)}
-                onChange={mockOnChange}
+                onUpdatedDate={mockOnChange}
                 testID={mockedTestID}
                 errorMessage='an error'
             />,

diff --git a/src/__tests__/components/__snapshots__/DateField.test.tsx.snap b/src/__tests__/components/__snapshots__/DateField.test.tsx.snap
@@ -252,7 +252,6 @@ exports[`MODULE | DateField component renders correctly in error state 1`] = `
       onChangeText={[Function]}
       onFocus={[Function]}
       placeholder="01"
-      placeholderTextColor="#919EAB"
       selectTextOnFocus={true}
       selectionColor="#18A58629"
       style={

diff --git a/src/components/dateSelector/DateField.tsx b/src/components/dateSelector/DateField.tsx
@@ -20,6 +20,18 @@ export interface DateFieldProps extends TextInputProps {
     hasError?: boolean;
 }
 
+function getPlaceholderColorsStyle(theme: Theme, state: State) {
+    let textColor: string | undefined = theme.sw.colors.neutral[500];
+    if (state === 'error') {
+        textColor = undefined;
+    }
+    if (state === 'empty-focused') {
+        textColor = theme.sw.colors.primary.main;
+    }
+    return {
+        textColor,
+    };
+}
 function getColorsStyle(theme: Theme, state: State) {
     let backgroundColor, borderColor, textColor;
 
@@ -60,6 +72,8 @@ function getStyle(theme: Theme, state: State) {
         state,
     );
 
+    const placeholderColorsStyle = getPlaceholderColorsStyle(theme, state);
+
     const style = StyleSheet.create({
         main: {
             borderRadius: 18,
@@ -76,10 +90,7 @@ function getStyle(theme: Theme, state: State) {
             marginVertical: 0,
         },
         placeholder: {
-            color:
-                state === 'empty-focused'
-                    ? theme.sw.colors.primary.main
-                    : theme.sw.colors.neutral[500],
+            color: placeholderColorsStyle.textColor,
         },
     });
     return style;

diff --git a/src/components/dateSelector/DateSelector.tsx b/src/components/dateSelector/DateSelector.tsx
@@ -13,7 +13,7 @@ import {
 type DateSelectorProps = WithTestID<{
     prefilled: Date;
     errorMessage?: string;
-    onChange: (date: Date) => void;
+    onUpdatedDate: (date: Date) => boolean;
 }>;
 
 interface FieldsValues {
@@ -27,7 +27,7 @@ const MAX_DATE_FIELD_LENGTH = 2;
 export const DateSelector = ({
     prefilled,
     errorMessage,
-    onChange,
+    onUpdatedDate,
     testID,
 }: DateSelectorProps) => {
     const theme = useTheme();
@@ -55,8 +55,8 @@ export const DateSelector = ({
         setMonthField(completeFields.monthField);
         setYearField(completeFields.yearField);
 
-        onChange(fromFieldsToDate(completeFields));
-    }, [prefilledFields, dayField, monthField, yearField, onChange]);
+        onUpdatedDate(fromFieldsToDate(completeFields));
+    }, [prefilledFields, dayField, monthField, yearField, onUpdatedDate]);
 
     useListenerOnKeyboardHiding(leaveDateSelector);
 
@@ -102,6 +102,7 @@ export const DateSelector = ({
                     testID={testID + '/day'}
                     placeholder={prefilledFields.dayField}
                     value={dayField}
+                    hasError={!!errorMessage}
                     onBlur={handleBlurPrefixWith0(setDayField)}
                     onChangeText={handleDayChange}
                 />
@@ -115,6 +116,7 @@ export const DateSelector = ({
                     testID={testID + '/month'}
                     placeholder={prefilledFields.monthField}
                     value={monthField}
+                    hasError={!!errorMessage}
                     onBlur={handleBlurPrefixWith0(setMonthField)}
                     onChangeText={handleMonthChange}
                 />
@@ -128,6 +130,7 @@ export const DateSelector = ({
                     testID={testID + '/year'}
                     placeholder={prefilledFields.yearField}
                     value={yearField}
+                    hasError={!!errorMessage}
                     onBlur={handleBlurPrefixWith0(setYearField)}
                     onChangeText={handleYearChange}
                 />