@glodon-aiot/react-components/dist/es/TrackMap/TrackPoint.mjs

aiot react components

import { jsx as s, Fragment as O } from "react/jsx-runtime";
import { useRef as P, useState as m, useEffect as p, useMemo as g } from "react";
import { diff as R } from "deep-object-diff";
import x from "./PointTooltip.mjs";
import C from "lodash/debounce";
const D = {
  attributes: !0,
  characterData: !0
}, M = (t) => {
  const o = P(null), {
    point: e,
    open: h,
    id: y,
    x: n,
    y: r,
    r: i,
    active: v = !1,
    hidden: T = !1,
    onPointClick: a,
    getTooltipContainer: b
  } = t, [c, k] = m(t.style), [w, u] = m(!0);
  p(() => {
    const l = R(c, t.style);
    Object.keys(l).length && k(t.style);
  }, [t.style]);
  const f = g(() => /* @__PURE__ */ s("circle", {
    id: `mark-${y}`,
    className: "point point-active",
    cx: n,
    cy: r,
    r: i,
    ref: o,
    style: c,
    onClick: () => a && a(e)
  }), [n, r, i, c, v]), d = g(() => {
    const l = C(() => {
      u(!0), console.log("show tooltip", e.id), console.log((/* @__PURE__ */ new Date()).valueOf());
    }, 200);
    return new MutationObserver(() => {
      console.log("circle is changed"), console.log("hide tooltip", e.id), console.log((/* @__PURE__ */ new Date()).valueOf()), u(!1), l();
    });
  }, []);
  return p(() => {
    if (!(!o.current || !e.tooltipRender))
      return d.observe(o.current, D), () => {
        o.current && d.disconnect();
      };
  }, [n, r, i]), T ? /* @__PURE__ */ s(O, {}) : e.tooltipRender && w ? /* @__PURE__ */ s(x, {
    open: h,
    point: e,
    getPopupContainer: b,
    children: f
  }) : f;
}, F = M;
export {
  F as default
};