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

Generate JSON-based forms with react

// src/array-form/ArrayForm.tsx
import {
  Children,
  createContext,
  forwardRef,
  useEffect
} from "react";
import { useCallback, useMemo, useState } from "react";
import useTabs from "../utils/useTabs.mjs";
import { ArrayFormStack } from "./ArrayFormStack.mjs";
import { ArrayFormTabs } from "./ArrayFormTabs.mjs";
import { jsx } from "react/jsx-runtime";
var ArrayFormContext = createContext({
  tab: 0,
  value: [],
  errors: [],
  viewType: "stack",
  primary: false,
  level: 1,
  defValue: [],
  scheme: [],
  addTab: () => {
  },
  setTab: () => {
  },
  sortTabs: () => {
  },
  removeTab: () => {
  },
  changeTab: () => {
  },
  setTabErrors: () => {
  },
  onChange: () => {
  },
  onError: () => {
  }
});
var ArrayForm = forwardRef(
  (props, ref) => {
    const {
      value: _value,
      errors,
      viewType = "stack",
      onChange,
      onError,
      children: _children
    } = props;
    const setErrors = 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 = useMemo(() => {
      if (!Array.isArray(_value))
        return [];
      return _value;
    }, [_value]);
    const onTabRemove = useCallback(
      (tabId) => {
        setErrors({}, tabId);
      },
      [setErrors]
    );
    const tabs = useTabs({ ...props, onTabRemove });
    const change = useCallback(
      (newValue, id = null) => {
        const _newValue = value.map(
          (item) => item.id == id ? { ...item, ...newValue } : item
        );
        onChange(_newValue);
      },
      [value, onChange]
    );
    const [childForms, setChildForms] = useState({});
    const params = 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 = Children.count(_children);
    const children = count > 0 ? _children : viewType === "stack" ? /* @__PURE__ */ jsx(ArrayFormStack, { ...params }) : /* @__PURE__ */ jsx(ArrayFormTabs, { ...params });
    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__ */ jsx(ArrayFormContext.Provider, { value: params, children });
  }
);
ArrayForm.displayName = "ArrayForm";
var ArrayForm_default = ArrayForm;
export {
  ArrayFormContext,
  ArrayForm_default as default
};