@formality-ui/react 0.3.1 → 0.4.0

package/README.md

@@ -67,8 +67,8 @@ function App() {
   return (
     <FormalityProvider inputs={inputs}>
       <Form config={config} onSubmit={(values) => console.log(values)}>
-        {({ methods }) => (
-          <form onSubmit={methods.handleSubmit(console.log)}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit(console.log)}>
             <Field name="name" />
             <Field name="email" />
             <Field name="subscribed" />

package/dist/index.cjs

@@ -279,7 +279,11 @@ function Form({
         for (const field of affected) {
           pendingAffectedFields.current.add(field);
         }
-        const fieldDebounce = inputConfig?.debounce;
+        const fieldConfig = config[name];
+        const fieldDebounce = core.resolveFieldOverType(
+          fieldConfig?.debounce,
+          inputConfig?.debounce
+        );
         if (fieldDebounce === false) {
           executeAutoSaveRef.current?.();
         } else if (typeof fieldDebounce === "number") {
@@ -289,7 +293,7 @@ function Form({
         }
       }
     },
-    [autoSave, getAffectedFields]
+    [autoSave, getAffectedFields, config]
   );
   const setFieldValidating = react.useCallback(
     (name, isValidating) => {
@@ -593,13 +597,17 @@ function transformValuesForSubmit(values, config, inputs) {
     const fieldConfig = config[name];
     const type = fieldConfig?.type ?? "textField";
     const inputConfig = inputs[type];
-    if (inputConfig) {
-      const submitName = core.transformFieldName(name, inputConfig.getSubmitField);
-      const submitValue = core.extractValueField(value, inputConfig.valueField);
-      result[submitName] = submitValue;
-    } else {
-      result[name] = value;
-    }
+    const effectiveGetSubmitField = core.resolveFieldOverType(
+      fieldConfig?.getSubmitField,
+      inputConfig?.getSubmitField
+    );
+    const effectiveValueField = core.resolveFieldOverType(
+      fieldConfig?.valueField,
+      inputConfig?.valueField
+    );
+    const submitName = core.transformFieldName(name, effectiveGetSubmitField);
+    const submitValue = core.extractValueField(value, effectiveValueField);
+    result[submitName] = submitValue;
   }
   return result;
 }
@@ -1076,8 +1084,22 @@ function useField({
     groupContext.state.isVisible
   ]);
   const label = react.useMemo(() => {
-    return core.resolveLabel(name, fieldConfig, fieldSelectProps, restProps);
-  }, [name, fieldConfig, fieldSelectProps, restProps]);
+    return core.resolveLabel(
+      name,
+      fieldConfig,
+      fieldSelectProps,
+      restProps,
+      providerSelectProps,
+      formSelectProps
+    );
+  }, [
+    name,
+    fieldConfig,
+    fieldSelectProps,
+    restProps,
+    providerSelectProps,
+    formSelectProps
+  ]);
   const passSubscriptionsEnabled = fieldConfig.passSubscriptions === true;
   const provideStateEnabled = fieldConfig.provideState === true;
   const subscribedWatchNames = react.useMemo(
@@ -1156,23 +1178,25 @@ function useField({
     name,
     setFieldValidating
   ]);
+  const effectiveParser = react.useMemo(
+    () => core.resolveFieldOverType(fieldConfig.parser, inputConfig.parser),
+    [fieldConfig.parser, inputConfig.parser]
+  );
+  const effectiveFormatter = react.useMemo(
+    () => core.resolveFieldOverType(fieldConfig.formatter, inputConfig.formatter),
+    [fieldConfig.formatter, inputConfig.formatter]
+  );
   const handleChange = react.useCallback(
     (onChange) => (newValue) => {
       const parsedValue = core.parse(
         newValue,
-        inputConfig.parser,
+        effectiveParser,
         providerConfig.parsers
       );
       onChange(parsedValue);
       changeField(name, parsedValue, inputConfig);
     },
-    [
-      inputConfig.parser,
-      providerConfig.parsers,
-      changeField,
-      name,
-      inputConfig
-    ]
+    [effectiveParser, providerConfig.parsers, changeField, name, inputConfig]
   );
   const fieldStateRef = react.useRef(
     {}
@@ -1190,7 +1214,7 @@ function useField({
       render: ({ field, fieldState, formState }) => {
         const formattedValue = core.format(
           field.value,
-          inputConfig.formatter,
+          effectiveFormatter,
           providerConfig.formatters
         );
         const stateInjection = {};