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

React library for build forms

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/connect-to-form.tsx
var connect_to_form_exports = {};
__export(connect_to_form_exports, {
  ConnectToForm: () => ConnectToForm
});
module.exports = __toCommonJS(connect_to_form_exports);
var import_react = require("react");
var import_form_context = require("./form-context.cjs");
var ConnectToForm = (props) => {
  var _a;
  const [isFocused, setFocus] = (0, import_react.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 = (0, import_form_context.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 = (0, import_react.useMemo)(() => IsFilled(value), [IsFilled, value]);
  const isSucceed = typeof forceIsSuccess === "boolean" ? forceIsSuccess : !hasError && isTouched && isFilled;
  const onError = (0, import_react.useCallback)(
    (error) => {
      setCustomErrorByName(name, error);
    },
    [setCustomErrorByName, name]
  );
  const onRefInput = (0, import_react.useMemo)(() => {
    if (!_onRefInput) {
      return void 0;
    }
    return (node) => {
      _onRefInput(name, node);
    };
  }, [name, _onRefInput]);
  const onRef = (0, import_react.useMemo)(() => {
    if (_onRef) {
      return (_ref) => {
        _onRef(name, _ref);
      };
    }
    return void 0;
  }, [name, _onRef]);
  const onFocus = (0, import_react.useCallback)(() => {
    setFocus(true);
  }, []);
  const onBlur = (0, import_react.useCallback)(() => {
    setTouchedByName(name);
    setFocus(false);
  }, [setTouchedByName]);
  const onChange = (0, import_react.useCallback)(
    (_v) => {
      setValue(name, _v, false, true, type);
    },
    [setValue, name, type]
  );
  const onNativeChange = (0, import_react.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 (0, import_react.cloneElement)(children, connectedProps);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ConnectToForm
});