react-f0rm 0.1.0 → 0.2.0

package/dist/index.cjs.js

@@ -0,0 +1,667 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function getSet(ee, key) {
+  var set = ee.get(key);
+  if (set) return set;
+  var newSet = new Set();
+  ee.set(key, newSet);
+  return newSet;
+}
+function create$2() {
+  return new Map();
+}
+function emit$1(ee, key) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+  (ee.get(key) || []).forEach(function (h) {
+    return h.apply(void 0, args);
+  });
+}
+function on(ee, key, handler) {
+  var set = getSet(ee, key);
+  set.add(handler);
+  return function () {
+    return set.delete(handler);
+  };
+}
+
+function normalizePath(path) {
+  if (Array.isArray(path)) return path;
+  return path.split(/\.|\[/).map((prop) => prop.endsWith("]") ? Number.parseInt(prop, 10) : prop);
+}
+function get(values, path) {
+  return path.reduce((current, p) => {
+    if (current == null) return void 0;
+    return current[p];
+  }, values);
+}
+function set(values, path, value) {
+  if (!path.length) return value;
+  const [prop, ...props] = path;
+  if (typeof prop === "number") {
+    const arr = Array.isArray(values) ? values.slice() : [];
+    arr[prop] = set(arr[prop], props, value);
+    return arr;
+  }
+  return { ...values, [prop]: set(values && values[prop], props, value) };
+}
+function isPromise(value) {
+  return value && typeof value.then === "function";
+}
+function waitUntil(emitter, event, isResolve, isReject) {
+  return new Promise((resolve, reject) => {
+    if (isReject()) return void reject();
+    if (isResolve()) return void resolve();
+    const off = on(emitter, event, () => {
+      if (isReject()) {
+        off();
+        reject();
+        return;
+      }
+      if (isResolve()) return;
+      off();
+      resolve();
+    });
+  });
+}
+
+function create$1(name) {
+  const value = normalizePath(name);
+  return { value, key: JSON.stringify(value) };
+}
+
+const emit = emit$1;
+function create(options) {
+  const emitter = create$2();
+  return {
+    emitter,
+    revalidateOnChange: true,
+    ...options,
+    initialValues: options?.initialValues ?? {},
+    values: /* @__PURE__ */ new Map(),
+    errors: /* @__PURE__ */ new Map(),
+    touched: /* @__PURE__ */ new Set(),
+    validators: /* @__PURE__ */ new Map(),
+    validating: /* @__PURE__ */ new Set(),
+    isSubmitting: false,
+    submitCount: 0,
+    isSubmitSuccessful: void 0
+  };
+}
+function getValues(form) {
+  return Array.from(form.values.keys()).reduce(
+    (v, k) => set(v, JSON.parse(k), form.values.get(k)),
+    form.initialValues
+  );
+}
+function getValue(form, name) {
+  return getValueByPath(form, create$1(name));
+}
+function getValueByPath({ initialValues, values }, path) {
+  if (values.has(path.key)) return values.get(path.key);
+  return get(initialValues, path.value);
+}
+function setValue(form, name, value) {
+  setValueByPath(form, create$1(name), value);
+}
+function setValueByPath({ emitter, values }, path, value) {
+  values.set(path.key, value);
+  emit(emitter, "change", path);
+}
+function getError(form, name) {
+  return getErrorByPath(form, create$1(name));
+}
+function getErrorByPath({ errors }, path) {
+  return errors.get(path.key);
+}
+function getErrors({ errors }) {
+  return Array.from(errors.values());
+}
+function getFirstError({ errors }) {
+  return errors.values().next().value;
+}
+function unsetValidatingByPath({ emitter, validating }, { key }) {
+  validating.delete(key);
+  emit(emitter, "validating");
+}
+function setValidatingByPath({ emitter, validating }, { key }) {
+  validating.add(key);
+  emit(emitter, "validating");
+}
+function setError(form, name, error) {
+  setErrorByPath(form, create$1(name), error);
+}
+function setErrorByPath({ emitter, errors }, path, error) {
+  if (error) {
+    errors.set(path.key, error);
+  } else {
+    errors.delete(path.key);
+  }
+  emit(emitter, "errors");
+}
+function clearErrors({ emitter, errors }) {
+  errors.clear();
+  emit(emitter, "errors");
+}
+function setTouched(form, name) {
+  setTouchedByPath(form, create$1(name));
+}
+function setTouchedByPath({ emitter, touched }, { key }) {
+  if (touched.has(key)) return;
+  touched.add(key);
+  emit(emitter, "touched");
+}
+function hasTouched(form, name) {
+  return hasTouchedByPath(form, create$1(name));
+}
+function hasTouchedByPath({ touched }, path) {
+  return touched.has(path.key);
+}
+function isDirty({ initialValues, values }) {
+  for (const [key, value] of values) {
+    const path = JSON.parse(key);
+    if (get(initialValues, path) !== value) return true;
+  }
+  return false;
+}
+function isTouched({ touched }) {
+  return touched.size > 0;
+}
+function removeField(form, name) {
+  removeFieldByPath(form, create$1(name));
+}
+function removeFieldByPath(form, { key }) {
+  const { emitter, values, touched, errors, validating } = form;
+  values.delete(key);
+  touched.delete(key);
+  errors.delete(key);
+  validating.delete(key);
+  emit(emitter, "change");
+  emit(emitter, "touched");
+  emit(emitter, "errors");
+  emit(emitter, "validating");
+}
+function setInitialValues(form, initialValues) {
+  if (form.initialValues === initialValues) return;
+  form.initialValues = initialValues;
+  form.values.clear();
+  emit(form.emitter, "change");
+}
+function reset(form, initialValues) {
+  form.initialValues = initialValues;
+  clearErrors(form);
+  const { emitter, touched, values } = form;
+  values.clear();
+  touched.clear();
+  emit(emitter, "change");
+  emit(emitter, "touched");
+  emit(emitter, "reset");
+}
+function hasErrors({ errors }) {
+  return errors.size > 0;
+}
+function trigger(form) {
+  form.validators.forEach((validator) => validator());
+}
+async function ensureValidate(form) {
+  form.validators.forEach((validator) => validator());
+  await waitUntil(
+    form.emitter,
+    "validating",
+    () => !form.validating.size,
+    () => hasErrors(form)
+  ).catch(() => {
+    throw new Error(getFirstError(form));
+  });
+  if (form.validate) {
+    const result = await form.validate(getValues(form));
+    const entries = result ? Object.entries(result) : [];
+    if (entries.length) {
+      entries.forEach(([field, error]) => {
+        setError(form, field, error);
+      });
+      throw new Error(getFirstError(form));
+    }
+  }
+}
+async function validate(form) {
+  return ensureValidate(form).catch((e) => e.message);
+}
+function setIsSubmitting(form, value) {
+  form.isSubmitting = value;
+  emit(form.emitter, "submitting");
+}
+function incrementSubmitCount(form) {
+  form.submitCount++;
+  emit(form.emitter, "submitCount");
+}
+function setSubmitSuccessful(form, value) {
+  form.isSubmitSuccessful = value;
+  emit(form.emitter, "submitSuccessful");
+}
+
+const FormContext = React.createContext(null);
+const FormProvider = FormContext.Provider;
+function useFormContext() {
+  const form = React.useContext(FormContext);
+  if (!form) throw new Error("no form provided");
+  return form;
+}
+const CheckboxGroupContext = React.createContext(null);
+const CheckboxGroupProvider = CheckboxGroupContext.Provider;
+function useCheckboxGroupContext() {
+  const group = React.useContext(CheckboxGroupContext);
+  if (!group) throw new Error("no group provided");
+  return group;
+}
+
+function useForm(options) {
+  const ref = React.useRef(null);
+  const form = ref.current = ref.current || create(options);
+  const initialValues = options && options.initialValues;
+  React.useEffect(() => {
+    setInitialValues(form, initialValues);
+  }, [initialValues]);
+  return form;
+}
+function useWatch(emitter, event, getter) {
+  const [value, syncValue] = React.useReducer(getter, void 0, getter);
+  React.useEffect(() => on(emitter, event, syncValue), [emitter, event]);
+  return value;
+}
+function useValue(form, name) {
+  return useValueByPath(form, create$1(name));
+}
+function useValueByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "change",
+    getValueByPath.bind(null, form, path)
+  );
+}
+function useTouched(form, name) {
+  return useTouchedByPath(form, create$1(name));
+}
+function useTouchedByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "touched",
+    hasTouchedByPath.bind(null, form, path)
+  );
+}
+function useError(form, name) {
+  return useErrorByPath(form, create$1(name));
+}
+function useErrorByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "errors",
+    getErrorByPath.bind(null, form, path)
+  );
+}
+function useIsDirty(form) {
+  return useWatch(form.emitter, "touched", isDirty.bind(null, form));
+}
+function useHasErrors(form) {
+  return useWatch(form.emitter, "errors", hasErrors.bind(null, form));
+}
+function useIsSubmitting(form) {
+  return useWatch(form.emitter, "submitting", () => form.isSubmitting);
+}
+function useSubmitCount(form) {
+  return useWatch(form.emitter, "submitCount", () => form.submitCount);
+}
+
+function usePath(name) {
+  const path = React.useMemo(() => create$1(normalizePath(name)), [name]);
+  return React.useMemo(() => path, [path.key]);
+}
+
+function useStage(value) {
+  const ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+}
+function useStageFn(fn) {
+  const ref = useStage(fn);
+  return React.useCallback(
+    (...params) => ref.current(...params),
+    []
+  );
+}
+
+function useValidate(validate, path) {
+  const form = useFormContext();
+  const lockRef = React.useRef(null);
+  const validateRef = React.useRef(validate);
+  validateRef.current = validate;
+  React.useEffect(() => {
+    const validator = () => {
+      const fn = validateRef.current;
+      if (!fn) return;
+      const result = fn(getValueByPath(form, path), { form, path });
+      if (!isPromise(result)) {
+        setErrorByPath(form, path, result);
+        return;
+      }
+      const lock = lockRef.current = {};
+      setValidatingByPath(form, path);
+      result.then((error) => {
+        if (lock === lockRef.current) {
+          setErrorByPath(form, path, error);
+        }
+      }).finally(() => {
+        if (lock === lockRef.current) {
+          unsetValidatingByPath(form, path);
+          lockRef.current = null;
+        }
+      });
+    };
+    form.validators.set(path.key, validator);
+    return () => {
+      form.validators.delete(path.key);
+    };
+  }, [form, path.key]);
+  return useStageFn(() => form.validators.get(path.key)?.());
+}
+
+function useField({
+  form: f1,
+  name,
+  initialValue,
+  shouldUnregister,
+  validate,
+  ...rest
+}) {
+  const f2 = useFormContext();
+  const form = f1 || f2;
+  const path = usePath(name);
+  const validator = useValidate(validate, path);
+  React.useMemo(() => {
+    if (initialValue !== void 0) setValueByPath(form, path, initialValue);
+  }, [form, path]);
+  const error = useErrorByPath(form, path);
+  const value = useValueByPath(form, path);
+  const onChange = useStageFn((v) => {
+    setValueByPath(form, path, v);
+    if (form.validateOnChange || form.revalidateOnChange && error && error !== void 0)
+      validator();
+  });
+  const onBlur = useStageFn(() => {
+    setTouchedByPath(form, path);
+    if (form.validateOnBlur || form.revalidateOnBlur && error !== void 0)
+      validator();
+  });
+  React.useEffect(
+    () => () => {
+      if (shouldUnregister !== false) {
+        removeFieldByPath(form, path);
+      }
+    },
+    [path, form, shouldUnregister]
+  );
+  return { ...rest, value, error, onChange, onBlur, name: path.key };
+}
+
+let idCounter = 0;
+function generateId() {
+  return `_${++idCounter}`;
+}
+function useFieldArray(options) {
+  const f2 = useFormContext();
+  const form = options.form || f2;
+  const path = usePath(options.name);
+  const idsRef = React.useRef([]);
+  const getArray = React.useCallback(
+    () => getValueByPath(form, path) || [],
+    [form, path]
+  );
+  const setArray = React.useCallback(
+    (arr) => {
+      setValueByPath(form, path, arr);
+    },
+    [form, path]
+  );
+  const computeFields = React.useCallback(() => {
+    const arr = getArray();
+    while (idsRef.current.length < arr.length) {
+      idsRef.current.push(generateId());
+    }
+    while (idsRef.current.length > arr.length) {
+      idsRef.current.pop();
+    }
+    return idsRef.current.map((id, index) => ({ id, index }));
+  }, [getArray]);
+  const [fields, syncFields] = React.useReducer(
+    computeFields,
+    void 0,
+    computeFields
+  );
+  React.useEffect(() => on(form.emitter, "change", syncFields), [form.emitter]);
+  const append = useStageFn((value) => {
+    const arr = getArray();
+    idsRef.current.push(generateId());
+    setArray([...arr, value]);
+  });
+  const prepend = useStageFn((value) => {
+    const arr = getArray();
+    idsRef.current.unshift(generateId());
+    setArray([value, ...arr]);
+  });
+  const insert = useStageFn((index, value) => {
+    const arr = getArray();
+    idsRef.current.splice(index, 0, generateId());
+    const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
+    setArray(newArr);
+  });
+  const remove = useStageFn((index) => {
+    const arr = getArray();
+    idsRef.current.splice(index, 1);
+    const newArr = arr.filter((_, i) => i !== index);
+    setArray(newArr);
+  });
+  const swap = useStageFn((from, to) => {
+    const arr = getArray();
+    [idsRef.current[from], idsRef.current[to]] = [
+      idsRef.current[to],
+      idsRef.current[from]
+    ];
+    const newArr = [...arr];
+    [newArr[from], newArr[to]] = [newArr[to], newArr[from]];
+    setArray(newArr);
+  });
+  const move = useStageFn((from, to) => {
+    const arr = getArray();
+    const [id] = idsRef.current.splice(from, 1);
+    idsRef.current.splice(to, 0, id);
+    const newArr = [...arr];
+    const [item] = newArr.splice(from, 1);
+    newArr.splice(to, 0, item);
+    setArray(newArr);
+  });
+  return { fields, append, prepend, insert, remove, swap, move };
+}
+
+function Form({
+  form: f1,
+  initialValues,
+  onSubmit,
+  onValidSubmit,
+  onInvalidSubmit,
+  ...props
+}) {
+  const f2 = useForm({ initialValues });
+  const form = f1 || f2;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setIsSubmitting(form, true);
+    incrementSubmitCount(form);
+    const error = await validate(form);
+    const values = getValues(form);
+    if (error) {
+      setIsSubmitting(form, false);
+      setSubmitSuccessful(form, false);
+      if (onInvalidSubmit) onInvalidSubmit(getErrors(form), values);
+      return;
+    }
+    try {
+      if (onSubmit) await onSubmit(values, e);
+      if (onValidSubmit) onValidSubmit(values, e);
+      setSubmitSuccessful(form, true);
+    } catch {
+      setSubmitSuccessful(form, false);
+    } finally {
+      setIsSubmitting(form, false);
+    }
+  }
+  return /* @__PURE__ */ React__namespace.createElement(FormProvider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: handleSubmit }));
+}
+
+const buildInError = /* @__PURE__ */ Symbol("buildInError");
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+const Field = React__namespace.forwardRef(
+  ({ validate, eventToValue, initialValue, name, asProps, ...props }, ref) => {
+    const innerRef = React__namespace.useRef(null);
+    const mergedRef = React__namespace.useCallback(
+      (node) => {
+        innerRef.current = node;
+        setRef(ref, node);
+      },
+      [ref]
+    );
+    const { as, value, valueToProps, onChange, error, ...rest } = useField({
+      ...props,
+      name,
+      initialValue,
+      validate: (...params) => {
+        if (innerRef.current?.checkValidity() === false)
+          return buildInError;
+        if (validate) return validate(...params);
+      }
+    });
+    const Component = as || "input";
+    React__namespace.useEffect(() => {
+      if (!innerRef.current) return;
+      if (error === buildInError) {
+        innerRef.current.setCustomValidity("");
+        innerRef.current.reportValidity();
+        return;
+      }
+      if (typeof error === "string") {
+        innerRef.current.setCustomValidity(error);
+        innerRef.current.reportValidity();
+      }
+    }, [error]);
+    const toValue = eventToValue ?? ((e) => e.target.value);
+    return /* @__PURE__ */ React__namespace.createElement(
+      Component,
+      {
+        ...rest,
+        ...asProps,
+        ...valueToProps ? valueToProps(value) : { value },
+        onChange: (e) => onChange(toValue(e)),
+        ref: mergedRef
+      }
+    );
+  }
+);
+const Checkbox = React__namespace.forwardRef(
+  ({ name, ...props }, ref) => {
+    const { value, onChange, error, ...rest } = useField({ ...props, name });
+    return /* @__PURE__ */ React__namespace.createElement(
+      "input",
+      {
+        ...rest,
+        type: "checkbox",
+        checked: !!value,
+        onChange: (e) => onChange(e.target.checked),
+        ref
+      }
+    );
+  }
+);
+
+exports.Checkbox = Checkbox;
+exports.CheckboxGroupContext = CheckboxGroupContext;
+exports.CheckboxGroupProvider = CheckboxGroupProvider;
+exports.Field = Field;
+exports.Form = Form;
+exports.FormContext = FormContext;
+exports.FormProvider = FormProvider;
+exports.clearErrors = clearErrors;
+exports.createForm = create;
+exports.ensureValidate = ensureValidate;
+exports.getError = getError;
+exports.getErrorByPath = getErrorByPath;
+exports.getErrors = getErrors;
+exports.getFirstError = getFirstError;
+exports.getValue = getValue;
+exports.getValueByPath = getValueByPath;
+exports.getValues = getValues;
+exports.hasErrors = hasErrors;
+exports.hasTouched = hasTouched;
+exports.hasTouchedByPath = hasTouchedByPath;
+exports.incrementSubmitCount = incrementSubmitCount;
+exports.isDirty = isDirty;
+exports.isTouched = isTouched;
+exports.removeField = removeField;
+exports.removeFieldByPath = removeFieldByPath;
+exports.reset = reset;
+exports.setError = setError;
+exports.setErrorByPath = setErrorByPath;
+exports.setInitialValues = setInitialValues;
+exports.setIsSubmitting = setIsSubmitting;
+exports.setSubmitSuccessful = setSubmitSuccessful;
+exports.setTouched = setTouched;
+exports.setTouchedByPath = setTouchedByPath;
+exports.setValidatingByPath = setValidatingByPath;
+exports.setValue = setValue;
+exports.setValueByPath = setValueByPath;
+exports.trigger = trigger;
+exports.unsetValidatingByPath = unsetValidatingByPath;
+exports.useCheckboxGroupContext = useCheckboxGroupContext;
+exports.useError = useError;
+exports.useErrorByPath = useErrorByPath;
+exports.useField = useField;
+exports.useFieldArray = useFieldArray;
+exports.useForm = useForm;
+exports.useFormContext = useFormContext;
+exports.useHasErrors = useHasErrors;
+exports.useIsDirty = useIsDirty;
+exports.useIsSubmitting = useIsSubmitting;
+exports.useSubmitCount = useSubmitCount;
+exports.useTouched = useTouched;
+exports.useTouchedByPath = useTouchedByPath;
+exports.useValue = useValue;
+exports.useValueByPath = useValueByPath;
+exports.useWatch = useWatch;
+exports.validate = validate;
+//# sourceMappingURL=index.cjs.js.map