@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 {
    id,
    IsFilled = Boolean,
    children,
    name,
    inputName,
    disabled,
    type = "connect-to-form",
    onRefInput: _onRefInput,
    onRef: _onRef
  } = props;
  const params = useFormContext();
  const {
    isSending = false,
    values = {},
    touched = [],
    errors: allErrors = {},
    fields = {},
    setValue,
    setTouchedByName,
    setCustomErrorByName
  } = params;
  const value = values[name];
  const errors = allErrors[name];
  const isTouched = touched.indexOf(name) > -1;
  const hasError = Boolean(errors) && (errors == null ? void 0 : errors.length) > 0 && isTouched;
  const isFilled = IsFilled(value);
  const isSucceed = !hasError && isTouched && IsFilled(value);
  const onError = useCallback(
    (error) => {
      setCustomErrorByName(name, error);
    },
    [setCustomErrorByName, name]
  );
  const onRefInput = useMemo(() => {
    if (_onRefInput) {
      return (node) => {
        _onRefInput(name, node);
      };
    }
    return void 0;
  }, [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 inputProps = {
    id: id || `field-${name}`,
    name: inputName || name,
    label: ((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.label) || fields[name],
    disabled: isSending || disabled || false,
    value,
    onChange: (e) => {
      var _a2;
      return onChange == null ? void 0 : onChange((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
    },
    onFocus,
    onBlur
  };
  if (!children) {
    console.error("ConnectToForm must have a children");
    return null;
  }
  const connectedProps = {
    id: id || `field-${name}`,
    inputProps,
    name: inputProps.name,
    value: inputProps.value,
    label: inputProps.label,
    errors: hasError ? errors : null,
    disabled: inputProps.disabled,
    isFocused,
    isTouched,
    isFilled,
    isSucceed,
    isDisabled: inputProps.disabled,
    hasError,
    onChange,
    onFocus,
    onBlur,
    onRefInput,
    onRef,
    onError
  };
  return cloneElement(children, connectedProps);
};
export {
  ConnectToForm
};