@vtaits/react-hook-form-schema/dist/form.js

Integration of react-hook-form and @vtaits/form-schema

import {
  file
} from "./chunk-TDH2XHLI.js";
import {
  input
} from "./chunk-5R43752E.js";
import {
  list
} from "./chunk-CRJ7DBVQ.js";
import {
  radioGroup
} from "./chunk-SHJ4YCQW.js";
import {
  set
} from "./chunk-T2HQN5ZR.js";
import {
  tags
} from "./chunk-LSQMRSTF.js";
import {
  textarea
} from "./chunk-X3Q2ATJR.js";
import {
  asyncMultiSelect,
  asyncSelect
} from "./chunk-6AOK34FW.js";
import {
  checkbox
} from "./chunk-DQGVXVI7.js";
import {
  checkboxGroup
} from "./chunk-TIUAR4AD.js";
import {
  multiSelect,
  select
} from "./chunk-W54VP7QK.js";
import {
  date
} from "./chunk-V63N2WCL.js";
import {
  datetime
} from "./chunk-ZPOJASMW.js";
import "./chunk-7ZPD7GZF.js";
import {
  renderError
} from "./chunk-XUSORK34.js";
import {
  dynamic
} from "./chunk-33QDERGU.js";
import {
  useFormSchema
} from "./chunk-VHBMH3GH.js";

// src/form/defaultFieldTypes.ts
var defaultFieldTypes = {
  asyncMultiSelect,
  asyncSelect,
  checkbox,
  checkboxGroup,
  date,
  datetime,
  dynamic,
  file,
  input,
  list,
  radioGroup,
  multiSelect,
  select,
  set,
  tags,
  textarea
};

// src/form/Form.tsx
import { useUI } from "@vtaits/react-form-schema-base-ui";
import {
  Fragment,
  useCallback,
  useMemo
} from "react";
import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
function defaultRenderFields({
  names,
  renderField
}) {
  return /* @__PURE__ */ jsx(Fragment2, { children: names.map((name) => /* @__PURE__ */ jsx(Fragment, { children: renderField(name) }, name)) });
}
var defaultGetFormError = (errors) => {
  if (typeof errors.error === "string") {
    return errors.error;
  }
  return null;
};
function Form({
  defaultValues = void 0,
  fieldTypes = void 0,
  getFormError = defaultGetFormError,
  onSubmit: onSubmitProp = void 0,
  renderActions,
  renderFields = defaultRenderFields,
  schemas,
  title
}) {
  const { renderForm } = useUI();
  const getFieldSchema = useCallback(
    (name) => schemas[name],
    [schemas]
  );
  const names = useMemo(() => Object.keys(schemas), [schemas]);
  const getFieldType = useCallback(
    (schema) => {
      const { type } = schema;
      const defaultType = defaultFieldTypes[type];
      if (defaultType) {
        return defaultType;
      }
      if (!fieldTypes) {
        throw new Error(
          "[react-hook-form-schema] `fieldTypes` should be provided for custom field types"
        );
      }
      return fieldTypes[type];
    },
    [fieldTypes]
  );
  const formApi = useFormSchema({
    defaultValues,
    getFieldSchema,
    getFieldType,
    names
  });
  const {
    formState: { errors, isSubmitting },
    handleSubmit,
    renderField,
    setError
  } = formApi;
  const onSubmit = useCallback(
    async (serializedValues, rawValues, event) => {
      if (!onSubmitProp) {
        return null;
      }
      const result = await onSubmitProp(serializedValues, rawValues, event);
      if (!result) {
        return null;
      }
      const formError = getFormError(result);
      if (formError) {
        setError("root", {
          type: "serverError",
          message: formError
        });
      }
      return result;
    },
    [getFormError, onSubmitProp, setError]
  );
  const submitHandler = handleSubmit(onSubmit);
  const renderProps = {
    formApi,
    getFieldSchema,
    getFieldType,
    names,
    onSubmit: submitHandler,
    renderField,
    isSubmitting
  };
  return renderForm({
    actions: renderActions ? renderActions(renderProps) : void 0,
    error: errors.root ? renderError(errors.root) : void 0,
    fields: renderFields(renderProps),
    formProps: {
      onSubmit: submitHandler
    },
    title
  });
}
export {
  Form,
  defaultFieldTypes,
  defaultRenderFields
};
//# sourceMappingURL=form.js.map