react-treeselectjs/dist/react-treeselectjs.mjs

Treeselect React Component

import r, { useRef as u, useEffect as c } from "react";
import d from "treeselectjs";
const f = ["value", "id", "options", "iconElements", "children"], o = {
  onInput: "inputCallback",
  onOpen: "openCallback",
  onClose: "closeCallback",
  onNameChange: "nameChangeCallback",
  onSearch: "searchCallback",
  onOpenCloseGroup: "openCloseGroupCallback"
}, i = (e, a) => JSON.stringify(e) !== JSON.stringify(a), g = (e) => {
  const a = u(null), s = u(null), n = u(null);
  if (n.current) {
    let l = !1;
    Object.keys(e).forEach((t) => {
      const C = Object.keys(o).includes(t) ? (
        // @ts-ignore
        n.current[o[t]] === e[t]
      ) : (
        // @ts-ignore
        n.current[t] === e[t]
      );
      !f.includes(t) && !C && (n.current[t] = e[t], l = !0);
    }), l && n.current.mount();
  }
  return c(() => {
    n.current && i(n.current.value, e.value) && n.current.updateValue(e.value);
  }, [e.value]), c(() => {
    var t;
    (((t = n.current) == null ? void 0 : t.id) || e.id) && n.current && (n.current.id = e.id ?? "", n.current.mount());
  }, [e.id]), c(() => {
    n.current && i(n.current.options, e.options) && (n.current.options = e.options ?? [], n.current.mount(), n.current.updateValue(e.value));
  }, [e.options]), c(() => {
    if (n.current) {
      const l = { ...n.current.iconElements, ...e.iconElements };
      i(n.current.iconElements, l) && (n.current.iconElements = l, n.current.mount());
    }
  }, [e.iconElements]), c(() => (n.current = new d({
    parentHtmlContainer: a.current,
    listSlotHtmlComponent: s.current,
    ...e,
    inputCallback: e.onInput,
    openCallback: e.onOpen,
    closeCallback: e.onClose,
    nameChangeCallback: e.onNameChange,
    searchCallback: e.onSearch,
    openCloseGroupCallback: e.onOpenCloseGroup
  }), () => {
    var l;
    (l = n.current) == null || l.destroy();
  }), []), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { ref: a }), /* @__PURE__ */ r.createElement(
    "div",
    {
      ref: s,
      className: "treeselect-after-list-slot"
    },
    e.children
  ));
};
export {
  g as default
};