fix(project): fix DateField react error

jwplayer · Aug 6, 2021 · 631e932 · 631e932
1 parent 28547dd
commit 631e932
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/src/components/DateField/DateField.tsx b/src/components/DateField/DateField.tsx
@@ -30,7 +30,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   const { t } = useTranslation('common');
   const parsedDate = parseDateString(value);
 
-  const [date, setDate] = useState({
+  const [values, setValues] = useState({
     date: parsedDate?.getDate().toString() || '',
     month: parsedDate ? (parsedDate.getMonth() + 1).toString() : '',
     year: parsedDate?.getFullYear().toString() || '',
@@ -51,7 +51,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Backspace' && date[event.currentTarget.name as 'date' | 'month' | 'year'] === '') {
+    if (event.key === 'Backspace' && values[event.currentTarget.name as 'date' | 'month' | 'year'] === '') {
       (event.currentTarget.previousElementSibling as HTMLElement)?.focus();
 
       return event.preventDefault();
@@ -85,7 +85,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
-    setDate((current) => {
+    setValues((current) => {
       const date = name === 'date' ? parseBlurValue(value, 1, 31) : current.date;
       const month = name === 'month' ? parseBlurValue(value, 1, 12) : current.month;
       const year = name === 'year' ? parseBlurValue(value, 1900, 2100) : current.year;
@@ -98,21 +98,19 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
     const { name, value } = event.target;
     const nextSibling = event.currentTarget?.nextElementSibling as HTMLInputElement;
 
-    setDate((current) => {
-      const date = name === 'date' ? parseInputValue(value, 0, 31) : current.date;
-      const month = name === 'month' ? parseInputValue(value, 0, 12) : current.month;
-      const year = name === 'year' ? parseInputValue(value, 0, 2100).slice(0, 4) : current.year;
+    const date = name === 'date' ? parseInputValue(value, 0, 31) : values.date;
+    const month = name === 'month' ? parseInputValue(value, 0, 12) : values.month;
+    const year = name === 'year' ? parseInputValue(value, 0, 2100).slice(0, 4) : values.year;
 
-      if (onChange) {
-        onChange(date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '');
-      }
+    setValues({ date, month, year });
 
-      if (nextSibling && (name === 'month' && month.length === 2) || ( name === 'date' && date.length === 2)) {
-        setTimeout(() => nextSibling.focus(), 1);
-      }
+    if (onChange) {
+      onChange(date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '');
+    }
 
-      return { date, month, year };
-    });
+    if (nextSibling && (name === 'month' && month.length === 2) || ( name === 'date' && date.length === 2)) {
+      setTimeout(() => nextSibling.focus(), 1);
+    }
   };
 
   return (
@@ -126,7 +124,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           className={styles.input}
           name="date"
           placeholder="dd"
-          value={date.date}
+          value={values.date}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChange={handleChange}
@@ -140,7 +138,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           className={styles.input}
           name="month"
           placeholder="mm"
-          value={date.month}
+          value={values.month}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChange={handleChange}
@@ -154,7 +152,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
           className={styles.input}
           name="year"
           placeholder="yyyy"
-          value={date.year}
+          value={values.year}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChange={handleChange}