@undermuz/use-form/dist/components/connect-to-form.js

React library for build forms

// src/components/connect-to-form.tsx
import {
  cloneElement,
  useCallback,
  useMemo,
  useState
} from "react";
import { useFormContext } from "./form-context.js";
var ConnectToForm = (props) => {
  var _a;
  const [isFocused, setFocus] = useState(false);
  const {
    IsFilled = Boolean,
    children,
    name,
    disabled,
    type = "connect-to-form",
    onRefInput: _onRefInput,
    onRef: _onRef,
    id: forceId,
    inputName: forceInputName,
    hasError: forceHasError,
    isSuccess: forceIsSuccess,
    errors: forceErrors
  } = props;
  const params = useFormContext();
  const id = typeof forceId !== "undefined" && forceId !== null ? forceId : `field-${name}`;
  const {
    isSending = false,
    values = {},
    touched = [],
    errors: allErrors = {},
    fields = {},
    setValue,
    setTouchedByName,
    setCustomErrorByName
  } = params;
  const value = values[name];
  const errors = typeof forceErrors !== "undefined" ? forceErrors : allErrors[name];
  const label = ((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.label) || fields[name];
  const inputName = forceInputName || name;
  const isTouched = touched.indexOf(name) > -1;
  const hasError = typeof forceHasError === "boolean" ? forceHasError : Boolean(errors) && (errors == null ? void 0 : errors.length) > 0 && isTouched;
  const isFilled = useMemo(() => IsFilled(value), [IsFilled, value]);
  const isSucceed = typeof forceIsSuccess === "boolean" ? forceIsSuccess : !hasError && isTouched && isFilled;
  const onError = useCallback(
    (error) => {
      setCustomErrorByName(name, error);
    },
    [setCustomErrorByName, name]
  );
  const onRefInput = useMemo(() => {
    if (!_onRefInput) {
      return void 0;
    }
    return (node) => {
      _onRefInput(name, node);
    };
  }, [name, _onRefInput]);
  const onRef = useMemo(() => {
    if (_onRef) {
      return (_ref) => {
        _onRef(name, _ref);
      };
    }
    return void 0;
  }, [name, _onRef]);
  const onFocus = useCallback(() => {
    setFocus(true);
  }, []);
  const onBlur = useCallback(() => {
    setTouchedByName(name);
    setFocus(false);
  }, [setTouchedByName]);
  const onChange = useCallback(
    (_v) => {
      setValue(name, _v, false, true, type);
    },
    [setValue, name, type]
  );
  const onNativeChange = useCallback(
    (e) => {
      var _a2;
      return onChange == null ? void 0 : onChange((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
    },
    [onChange]
  );
  const states = {
    isFocused,
    isTouched,
    isFilled,
    isSucceed,
    isDisabled: isSending || disabled || false,
    hasError
  };
  const inputProps = {
    id,
    name: inputName,
    label,
    disabled: states.isDisabled,
    value,
    onChange: onNativeChange,
    onFocus,
    onBlur
  };
  const callbacks = {
    onChange,
    onFocus,
    onBlur,
    onRefInput,
    onRef,
    onError
  };
  if (!children) {
    console.error("ConnectToForm must have a children");
    return null;
  }
  const connectedProps = {
    id,
    inputProps,
    name: inputProps.name,
    value: inputProps.value,
    label: inputProps.label,
    errors: hasError ? errors : null,
    disabled: inputProps.disabled,
    ...states,
    ...callbacks
  };
  return cloneElement(children, connectedProps);
};
export {
  ConnectToForm
};