@ultraviolet/form 1.0.0

package/dist/hooks/useFormField.js

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useField } from 'react-final-form';
+import { useValidation } from './useValidation.js';
+import { pickValidators } from '../helpers/pickValidators.js';
+
+const useFormField = (name, _ref) => {
+  let {
+    afterSubmit,
+    disabled,
+    allowNull,
+    beforeSubmit,
+    defaultValue,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    multiple,
+    parse,
+    subscription,
+    type,
+    validate,
+    validateFields,
+    value,
+    max,
+    maxLength,
+    min,
+    minLength,
+    regex,
+    required,
+    maxDate,
+    minDate
+  } = _ref;
+  const serializedRegex = useMemo(() => regex?.toString(), [regex]);
+  const validators = useMemo(() => pickValidators({
+    max,
+    maxDate,
+    maxLength,
+    min,
+    minDate,
+    minLength,
+    regex,
+    required
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [max, maxLength, min, minLength, required, serializedRegex, maxDate, minDate]);
+  const validateFn = useValidation({
+    validate,
+    validators
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const data = useMemo(() => ({
+    key: Math.random()
+  }), [validateFn, disabled]);
+  return useField(name, {
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    defaultValue,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    multiple,
+    parse,
+    subscription,
+    type,
+    validate: disabled ? undefined : validateFn,
+    validateFields,
+    value,
+    data
+  });
+};
+
+export { useFormField };

package/dist/hooks/useOnFieldChange.js

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from 'react';
+import { useFormState, useField } from 'react-final-form';
+
+const useOnFieldChange = function (name, callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  const {
+    values
+  } = useFormState();
+  const {
+    input: {
+      value
+    }
+  } = useField(name, {
+    allowNull: true,
+    subscription: {
+      value: true
+    }
+  });
+  const previousValues = useRef(value);
+  useEffect(() => {
+    if (previousValues.current !== value && enabled) {
+      previousValues.current = value;
+      callback(value, values);
+    }
+  }, [value, values, callback, enabled]);
+};
+
+export { useOnFieldChange };

package/dist/hooks/useValidation.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+const useValidation = _ref => {
+  let {
+    validators,
+    validate
+  } = _ref;
+  return useCallback((value, allValues, meta) => {
+    if (validate) {
+      const validateErr = validate(value, allValues, meta);
+      if (validateErr !== undefined && validateErr !== true) {
+        return validateErr;
+      }
+    }
+    const errors = validators.filter(validator => !validator.validate(value, allValues, meta)).map(_ref2 => {
+      let {
+        error
+      } = _ref2;
+      return error;
+    });
+    return errors.length > 0 ? errors : undefined;
+  }, [validate, validators]);
+};
+
+export { useValidation };