@conform-to/react 0.1.1 → 0.2.0

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getFieldElements, setFieldState, isFieldElement, getName, createFieldConfig, shouldSkipValidate, reportValidity, createControlButton } from '@conform-to/dom';
+import { getFieldElements, isFieldElement, getName, getFieldProps, setFieldState, shouldSkipValidate, reportValidity, getControlButtonProps, applyControlCommand } from '@conform-to/dom';
 import { useRef, useState, useEffect, useReducer, useMemo, createElement } from 'react';
 
 function useForm() {
@@ -45,7 +45,7 @@ function useForm() {
     var handleChange = event => {
       var _event$target;
 
-      if (!isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
+      if (!ref.current || !isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
         return;
       }
 
@@ -55,15 +55,13 @@ function useForm() {
         });
       }
 
-      if (ref.current) {
-        reportValidity(ref.current);
-      }
+      reportValidity(ref.current);
     };
 
     var handleBlur = event => {
       var _event$target2;
 
-      if (!isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
+      if (!ref.current || !isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
         return;
       }
 
@@ -73,16 +71,14 @@ function useForm() {
         });
       }
 
-      if (ref.current) {
-        reportValidity(ref.current);
-      }
+      reportValidity(ref.current);
     };
 
-    document.body.addEventListener('input', handleChange);
-    document.body.addEventListener('focusout', handleBlur);
+    document.addEventListener('input', handleChange);
+    document.addEventListener('focusout', handleBlur);
     return () => {
-      document.body.removeEventListener('input', handleChange);
-      document.body.removeEventListener('focusout', handleBlur);
+      document.removeEventListener('input', handleChange);
+      document.removeEventListener('focusout', handleBlur);
     };
   }, [noValidate, initialReport]);
   return {
@@ -198,6 +194,27 @@ function useFieldset(schema) {
         fieldset
       }
     });
+
+    var resetHandler = e => {
+      if (e.target !== fieldset.form) {
+        return;
+      }
+
+      dispatch({
+        type: 'reset'
+      });
+      setTimeout(() => {
+        var _schema$validate2;
+
+        // Delay revalidation until reset is completed
+        (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      }, 0);
+    };
+
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('reset', resetHandler);
+    };
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [schema.validate]);
   useEffect(() => {
@@ -215,10 +232,10 @@ function useFieldset(schema) {
     form: config.form,
 
     onInput(e) {
-      var _schema$validate2;
+      var _schema$validate3;
 
       var fieldset = e.currentTarget;
-      (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      (_schema$validate3 = schema.validate) === null || _schema$validate3 === void 0 ? void 0 : _schema$validate3.call(schema, fieldset);
       dispatch({
         type: 'cleanup',
         payload: {
@@ -227,15 +244,6 @@ function useFieldset(schema) {
       });
     },
 
-    onReset(e) {
-      setFieldState(e.currentTarget, {
-        touched: false
-      });
-      dispatch({
-        type: 'reset'
-      });
-    },
-
     onInvalid(e) {
       var element = isFieldElement(e.target) ? e.target : null;
       var key = Object.keys(schema.fields).find(key => (element === null || element === void 0 ? void 0 : element.name) === getName([e.currentTarget.name, key]));
@@ -255,45 +263,69 @@ function useFieldset(schema) {
       });
     }
 
-  }, createFieldConfig(schema, _objectSpread2(_objectSpread2({}, config), {}, {
+  }, getFieldProps(schema, _objectSpread2(_objectSpread2({}, config), {}, {
     error: Object.assign({}, config.error, errorMessage)
   }))];
 }
-function useFieldList(config) {
-  var _config$initialValue$, _config$initialValue;
+function useFieldList(props) {
+  var [entries, setEntries] = useState(() => {
+    var _props$defaultValue;
 
-  var size = (_config$initialValue$ = (_config$initialValue = config.initialValue) === null || _config$initialValue === void 0 ? void 0 : _config$initialValue.length) !== null && _config$initialValue$ !== void 0 ? _config$initialValue$ : 1;
-  var [keys, setKeys] = useState(() => [...Array(size).keys()]);
-  var list = useMemo(() => keys.map((key, index) => {
-    var _config$initialValue2, _config$error2;
+    return Object.entries((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : [undefined]);
+  });
+  var list = entries.map((_ref, index) => {
+    var _props$defaultValue2, _props$error;
 
+    var [key, defaultValue] = _ref;
     return {
       key: "".concat(key),
-      config: _objectSpread2(_objectSpread2({}, config), {}, {
-        name: "".concat(config.name, "[").concat(index, "]"),
-        initialValue: (_config$initialValue2 = config.initialValue) === null || _config$initialValue2 === void 0 ? void 0 : _config$initialValue2[index],
-        error: (_config$error2 = config.error) === null || _config$error2 === void 0 ? void 0 : _config$error2[index],
-        constraint: _objectSpread2(_objectSpread2({}, config.constraint), {}, {
-          multiple: false
-        })
+      props: _objectSpread2(_objectSpread2({}, props), {}, {
+        name: "".concat(props.name, "[").concat(index, "]"),
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_props$defaultValue2 = props.defaultValue) === null || _props$defaultValue2 === void 0 ? void 0 : _props$defaultValue2[index],
+        error: (_props$error = props.error) === null || _props$error === void 0 ? void 0 : _props$error[index],
+        multiple: false
       })
     };
-  }), [keys, config]);
+  });
   var controls = {
-    prepend() {
-      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'prepend', {})), {}, {
+    prepend(defaultValue) {
+      return _objectSpread2(_objectSpread2({}, getControlButtonProps(props.name, 'prepend', {
+        defaultValue
+      })), {}, {
+        onClick(e) {
+          setEntries(entries => applyControlCommand([...entries], 'prepend', {
+            defaultValue: ["".concat(Date.now()), defaultValue]
+          }));
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    append(defaultValue) {
+      return _objectSpread2(_objectSpread2({}, getControlButtonProps(props.name, 'append', {
+        defaultValue
+      })), {}, {
         onClick(e) {
-          setKeys(keys => [Date.now(), ...keys]);
+          setEntries(entries => applyControlCommand([...entries], 'append', {
+            defaultValue: ["".concat(Date.now()), defaultValue]
+          }));
           e.preventDefault();
         }
 
       });
     },
 
-    append() {
-      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'append', {})), {}, {
+    replace(index, defaultValue) {
+      return _objectSpread2(_objectSpread2({}, getControlButtonProps(props.name, 'replace', {
+        index,
+        defaultValue
+      })), {}, {
         onClick(e) {
-          setKeys(keys => [...keys, Date.now()]);
+          setEntries(entries => applyControlCommand([...entries], 'replace', {
+            defaultValue: ["".concat(Date.now()), defaultValue],
+            index
+          }));
           e.preventDefault();
         }
 
@@ -301,11 +333,32 @@ function useFieldList(config) {
     },
 
     remove(index) {
-      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'remove', {
+      return _objectSpread2(_objectSpread2({}, getControlButtonProps(props.name, 'remove', {
         index
       })), {}, {
         onClick(e) {
-          setKeys(keys => [...keys.slice(0, index), ...keys.slice(index + 1)]);
+          setEntries(entries => applyControlCommand([...entries], 'remove', {
+            index
+          }));
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    reorder(fromIndex, toIndex) {
+      return _objectSpread2(_objectSpread2({}, getControlButtonProps(props.name, 'reorder', {
+        from: fromIndex,
+        to: toIndex
+      })), {}, {
+        onClick(e) {
+          if (fromIndex !== toIndex) {
+            setEntries(entries => applyControlCommand([...entries], 'reorder', {
+              from: fromIndex,
+              to: toIndex
+            }));
+          }
+
           e.preventDefault();
         }
 
@@ -314,60 +367,49 @@ function useFieldList(config) {
 
   };
   useEffect(() => {
-    setKeys(keys => {
-      if (keys.length === size) {
-        return keys;
-      }
+    var _props$defaultValue3;
 
-      return [...Array(size).keys()];
-    });
-  }, [size]);
+    setEntries(Object.entries((_props$defaultValue3 = props.defaultValue) !== null && _props$defaultValue3 !== void 0 ? _props$defaultValue3 : [undefined]));
+  }, [props.defaultValue]);
   return [list, controls];
 }
 function useControlledInput(field) {
-  var _field$initialValue;
+  var _ref$current$value, _ref$current, _field$defaultValue;
 
-  var [value, setValue] = useState("".concat((_field$initialValue = field.initialValue) !== null && _field$initialValue !== void 0 ? _field$initialValue : ''));
-  var [shouldBlur, setShouldBlur] = useState(false);
   var ref = useRef(null);
-  var input = useMemo(() => /*#__PURE__*/createElement('input', _objectSpread2(_objectSpread2({}, field.constraint), {}, {
+  var input = useMemo(() => /*#__PURE__*/createElement('input', {
     ref,
     name: field.name,
-    defaultValue: field.initialValue,
-    style: {
-      display: 'none'
-    },
+    form: field.form,
+    defaultValue: field.defaultValue,
+    required: field.required,
+    minLength: field.minLength,
+    maxLength: field.maxLength,
+    min: field.min,
+    max: field.max,
+    step: field.step,
+    pattern: field.pattern,
+    hidden: true,
     'aria-hidden': true
-  })), [field.constraint, field.name, field.initialValue]);
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    ref.current.value = value;
-    ref.current.dispatchEvent(new InputEvent('input', {
-      bubbles: true
-    }));
-  }, [value]);
-  useEffect(() => {
-    var _ref$current;
-
-    if (!shouldBlur) {
-      return;
-    }
-
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('focusout', {
-      bubbles: true
-    }));
-    setShouldBlur(false);
-  }, [shouldBlur]);
+  }), [field.name, field.form, field.defaultValue, field.required, field.minLength, field.maxLength, field.min, field.max, field.step, field.pattern]);
   return [input, {
-    value,
+    value: (_ref$current$value = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.value) !== null && _ref$current$value !== void 0 ? _ref$current$value : "".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''),
     onChange: value => {
-      setValue(value);
+      if (!ref.current) {
+        return;
+      }
+
+      ref.current.value = value;
+      ref.current.dispatchEvent(new InputEvent('input', {
+        bubbles: true
+      }));
     },
     onBlur: () => {
-      setShouldBlur(true);
+      var _ref$current2;
+
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.dispatchEvent(new FocusEvent('focusout', {
+        bubbles: true
+      }));
     }
   }];
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.1.1"
+		"@conform-to/dom": "0.2.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"