Fix React type issue breaking nested objects

openizr · Aug 18, 2022 · 1ab3b46 · 1ab3b46
1 parent 5fb7897
commit 1ab3b46
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 128 deletions.
diff --git a/library/package.json b/library/package.json
@@ -144,4 +144,4 @@
       "optional": true
     }
   }
-}
+}
diff --git a/library/src/scripts/react/Components.tsx b/library/src/scripts/react/Components.tsx
@@ -35,9 +35,8 @@ const nestedFields = (type: 'array' | 'object' | 'dynamicObject'): CustomCompone
         ? field.i18n(componentProps.addTextfieldProps.placeholder, field.allValues)
         : null,
     };
-    const JSXNestedFields = NestedFields as JSXElement;
     return (
-      <JSXNestedFields
+      <NestedFields
         type={type}
         t={field.i18n}
         path={field.path}
@@ -72,9 +71,8 @@ export default {
   DynamicObject: nestedFields('dynamicObject'),
   Message(field) {
     const { componentProps } = field;
-    const JSXMessage = Message as JSXElement;
     return (
-      <JSXMessage
+      <Message
         label={field.label}
         id={field.path.replace(/\./g, '__')}
         modifiers={`${field.status} ${componentProps.modifiers || ''}`}
@@ -83,9 +81,8 @@ export default {
   },
   Link(field) {
     const { componentProps } = field;
-    const JSXUILink = biuty.UILink as JSXElement;
     return (
-      <JSXUILink
+      <biuty.UILink
         label={field.label || ''}
         rel={componentProps.rel}
         href={componentProps.href}
@@ -146,9 +143,8 @@ export default {
     const placeholder = (componentProps.placeholder !== undefined)
       ? field.i18n(componentProps.placeholder, field.allValues)
       : null;
-    const JSXTextfield = biuty.UITextfield as JSXElement;
     return (
-      <JSXTextfield
+      <biuty.UITextfield
         name={field.path}
         label={field.label}
         helper={field.message}
@@ -188,9 +184,8 @@ export default {
     const placeholder = (componentProps.placeholder !== undefined)
       ? field.i18n(componentProps.placeholder, field.allValues)
       : null;
-    const JSXTextfield = biuty.UITextfield as JSXElement;
     return (
-      <JSXTextfield
+      <biuty.UITextfield
         maxlength={10}
         name={field.path}
         label={field.label}
@@ -257,9 +252,8 @@ export default {
     const placeholder = (componentProps.placeholder !== undefined)
       ? field.i18n(componentProps.placeholder, field.allValues)
       : null;
-    const JSXTextarea = biuty.UITextarea as JSXElement;
     return (
-      <JSXTextarea
+      <biuty.UITextarea
         name={field.path}
         label={field.label}
         helper={field.message}
@@ -287,22 +281,21 @@ export default {
     const placeholder = (componentProps.placeholder !== undefined)
       ? field.i18n(componentProps.placeholder, field.allValues)
       : null;
-    const JSXUIFilePicker = biuty.UIFilePicker as JSXElement;
     return (
-      <JSXUIFilePicker
+      <biuty.UIFilePicker
         name={field.path}
         label={field.label}
-        value={field.value}
         helper={field.message}
         icon={componentProps.icon}
         placeholder={placeholder}
+        value={field.value as File[]}
         accept={componentProps.accept}
         onFocus={componentProps.onFocus}
         multiple={componentProps.multiple}
         id={field.path.replace(/\./g, '__')}
         iconPosition={componentProps.iconPosition}
         modifiers={`${field.status} ${componentProps.modifiers || ''}`}
-        onChange={(value: File): void => onUserAction('input', field.path, value)}
+        onChange={(value: File[]): void => onUserAction('input', field.path, value)}
       />
     );
   },

diff --git a/library/src/scripts/react/Field.tsx b/library/src/scripts/react/Field.tsx
@@ -118,4 +118,4 @@ function Field(props: FieldProps): JSX.Element {
   return actualField as JSXElement;
 }
 
-export default React.memo(Field as JSXElement);
+export default React.memo(Field) as JSXElement;
diff --git a/library/src/scripts/react/Form.tsx b/library/src/scripts/react/Form.tsx
@@ -12,8 +12,6 @@ import Engine from 'scripts/core/Engine';
 import useStore from 'diox/connectors/react';
 import { StateState } from 'scripts/core/state';
 
-const JSXStep = Step as JSXElement;
-
 interface FormProps {
   /** Form's active step's id. */
   activeStep?: string | null;
@@ -68,7 +66,7 @@ function Form({
               : index === state.steps.length - 1;
 
             return (
-              <JSXStep
+              <Step
                 key={key}
                 step={step}
                 i18n={i18n}
@@ -79,8 +77,8 @@ function Form({
                 userInputs={state.userInputs}
                 customComponents={customComponents}
               />
-            ) as JSXElement;
-          }) as JSXElement}
+            );
+          })}
 
           {state.loading && loader}
         </div> as JSXElement
@@ -89,9 +87,9 @@ function Form({
   );
 }
 
-export default React.memo(Form as JSXElement, (prevProps, nextProps) => (
+export default React.memo(Form, (prevProps, nextProps) => (
   prevProps.loader === nextProps.loader
   && prevProps.i18n === nextProps.i18n
   && prevProps.activeStep === nextProps.activeStep
   && prevProps.customComponents === nextProps.customComponents
-));
+)) as JSXElement;
diff --git a/library/src/scripts/react/Message.tsx b/library/src/scripts/react/Message.tsx
@@ -29,4 +29,4 @@ function Message({ id, label = '', modifiers = '' }: MessageProps): JSX.Element
   );
 }
 
-export default React.memo(Message as JSXElement);
+export default React.memo(Message) as JSXElement;
diff --git a/library/src/scripts/react/NestedFields.tsx b/library/src/scripts/react/NestedFields.tsx
@@ -10,8 +10,6 @@ import * as React from 'react';
 import Field from 'scripts/react/Field';
 import { buildClass, UIButton, UITextfield } from 'biuty/react';
 
-const JSXField = Field as JSXElement;
-
 interface NestedFieldsProps {
   t: I18n;
   id?: string;
@@ -161,7 +159,7 @@ function NestedFields({
 
   return (
     <div id={id} className={className}>
-      {(label !== undefined) && <span className="ui-nested-fields__label">{label}</span> as JSXElement}
+      {(label !== undefined) && <span className="ui-nested-fields__label">{label}</span>}
 
       {fields.map((field, index) => {
         if (field === null) {
@@ -181,9 +179,9 @@ function NestedFields({
                 onFocus={removeButtonProps.onFocus}
                 modifiers={removeButtonProps.modifiers}
                 iconPosition={removeButtonProps.iconPosition}
-              /> as JSXElement
+              />
             )}
-            <JSXField
+            <Field
               i18n={t}
               field={field}
               isActive={isActive}
@@ -195,7 +193,7 @@ function NestedFields({
             />
           </div>
         );
-      }) as JSXElement}
+      })}
 
       {(type !== 'object') && (
         <div className="ui-nested-fields__add">
@@ -225,7 +223,7 @@ function NestedFields({
               debounceTimeout={(addTextfieldProps.debounceTimeout !== undefined)
                 ? addTextfieldProps.debounceTimeout
                 : 100}
-            /> as JSXElement
+            />
           )}
           {!isAddButtonDisabled && (
             <UIButton
@@ -236,13 +234,13 @@ function NestedFields({
               onFocus={addButtonProps.onFocus}
               iconPosition={addButtonProps.iconPosition}
               modifiers={`${addButtonDisabledModifier} ${addButtonProps.modifiers || ''}`}
-            /> as JSXElement
+            />
           )}
         </div>
-      ) as JSXElement}
-      {(helper !== undefined) && <span className="ui-nested-fields__helper">{helper}</span> as JSXElement}
-    </div> as JSXElement
-  ) as JSXElement;
+      )}
+      {(helper !== undefined) && <span className="ui-nested-fields__helper">{helper}</span>}
+    </div>
+  );
 }
 
-export default React.memo(NestedFields as JSXElement);
+export default React.memo(NestedFields) as JSXElement;
diff --git a/library/src/scripts/react/Step.tsx b/library/src/scripts/react/Step.tsx
@@ -10,8 +10,6 @@ import * as React from 'react';
 import Field from 'scripts/react/Field';
 import { buildClass } from 'biuty/react';
 
-const JSXField = Field as JSXElement;
-
 interface StepProps {
   i18n: I18n;
   step: Step;
@@ -39,7 +37,7 @@ function Step(props: StepProps): JSX.Element {
           {/* Key is composed of both step and field ids, in order to ensure each field is correctly
          reset when user changes his journey in previous steps. */}
           {step.fields.map((field) => ((field === null) ? null : (
-            <JSXField
+            <Field
               i18n={i18n}
               field={field}
               isActive={isActive}
@@ -50,11 +48,11 @@ function Step(props: StepProps): JSX.Element {
               key={`${step.id}.${index}.${field.id}`}
               path={`${step.id}.${index}.${field.id}`}
             />
-          ))) as JSXElement}
-        </div> as JSXElement
+          )))}
+        </div>
       }
     </div>
   );
 }
 
-export default React.memo(Step as JSXElement);
+export default React.memo(Step) as JSXElement;