@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 {
    id,
    IsFilled = Boolean,
    children,
    name,
    inputName,
    disabled,
    type = "connect-to-form",
    onRefInput: _onRefInput,
    onRef: _onRef
  } = props;
  const params = (0, import_form_context.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 = (0, import_react.useCallback)(
    (error) => {
      setCustomErrorByName(name, error);
    },
    [setCustomErrorByName, name]
  );
  const onRefInput = (0, import_react.useMemo)(() => {
    if (_onRefInput) {
      return (node) => {
        _onRefInput(name, node);
      };
    }
    return void 0;
  }, [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 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 (0, import_react.cloneElement)(children, connectedProps);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ConnectToForm
});