@undermuz/react-json-form/dist/array-form/ArrayForm.js

Generate JSON-based forms with react

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/array-form/ArrayForm.tsx
var ArrayForm_exports = {};
__export(ArrayForm_exports, {
  ArrayFormContext: () => ArrayFormContext,
  default: () => ArrayForm_default
});
module.exports = __toCommonJS(ArrayForm_exports);
var import_react = require("react");
var import_react2 = require("react");
var import_useTabs = __toESM(require("../utils/useTabs.js"));
var import_ArrayFormStack = require("./ArrayFormStack.js");
var import_ArrayFormTabs = require("./ArrayFormTabs.js");
var import_jsx_runtime = require("react/jsx-runtime");
var ArrayFormContext = (0, import_react.createContext)({
  tab: 0,
  value: [],
  errors: [],
  viewType: "stack",
  primary: false,
  level: 1,
  defValue: [],
  scheme: [],
  addTab: () => {
  },
  setTab: () => {
  },
  sortTabs: () => {
  },
  removeTab: () => {
  },
  changeTab: () => {
  },
  setTabErrors: () => {
  },
  onChange: () => {
  },
  onError: () => {
  }
});
var ArrayForm = (0, import_react.forwardRef)(
  (props, ref) => {
    const {
      value: _value,
      errors,
      viewType = "stack",
      onChange,
      onError,
      children: _children
    } = props;
    const setErrors = (0, import_react2.useCallback)(
      (newErrors, id) => {
        const isExists = errors.some((e) => e.id === id);
        if (!isExists) {
          onError([
            ...errors,
            {
              id,
              value: newErrors
            }
          ]);
          return;
        }
        const _newValue = errors.map(
          (item) => item.id == id ? { ...item, value: newErrors } : item
        );
        onError(_newValue);
      },
      [errors, onError]
    );
    const value = (0, import_react2.useMemo)(() => {
      if (!Array.isArray(_value))
        return [];
      return _value;
    }, [_value]);
    const onTabRemove = (0, import_react2.useCallback)(
      (tabId) => {
        setErrors({}, tabId);
      },
      [setErrors]
    );
    const tabs = (0, import_useTabs.default)({ ...props, onTabRemove });
    const change = (0, import_react2.useCallback)(
      (newValue, id = null) => {
        const _newValue = value.map(
          (item) => item.id == id ? { ...item, ...newValue } : item
        );
        onChange(_newValue);
      },
      [value, onChange]
    );
    const [childForms, setChildForms] = (0, import_react2.useState)({});
    const params = (0, import_react2.useMemo)(() => {
      const { children: children2, ...rest } = props;
      const _params = {
        ...rest,
        ...tabs,
        changeTab: (...args) => {
          console.log("[ArrayForm][changeTab]", ...args);
          return change(...args);
        },
        setTabErrors: setErrors,
        onRef: ({ id: itemId, ref: ref2 }) => {
          setChildForms((prev) => ({
            ...prev,
            [itemId]: ref2
          }));
        },
        value
      };
      return _params;
    }, [...Object.values(props), ...Object.values(tabs), change, setErrors]);
    const count = import_react.Children.count(_children);
    const children = count > 0 ? _children : viewType === "stack" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArrayFormStack.ArrayFormStack, { ...params }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArrayFormTabs.ArrayFormTabs, { ...params });
    (0, import_react.useEffect)(() => {
      const setRef = (value2) => {
        if (typeof ref === "function") {
          ref(value2);
        } else if (ref !== null) {
          ref.current = value2;
        }
      };
      setRef(
        Object.keys(childForms).map((index) => {
          return childForms[index];
        })
      );
      return () => {
        setRef(null);
      };
    }, [childForms]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFormContext.Provider, { value: params, children });
  }
);
ArrayForm.displayName = "ArrayForm";
var ArrayForm_default = ArrayForm;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ArrayFormContext
});