echarts-for-react-fc/dist/Core.js

Using ECharts in React, encapsulating it within a functional component, and providing a hook for consumers to consume.

import { jsx as L } from "react/jsx-runtime";
import { memo as P, forwardRef as _, useRef as E, useEffect as b, useCallback as u, useImperativeHandle as k } from "react";
import { isObject as B, isEqual as H } from "lodash-es";
import { defaultResizeParams as N } from "./static.js";
const F = (a, R) => {
  const { echarts: p, ...h } = a, { echarts: O, ...C } = R;
  return Object.is(p, O) && H(h, C);
}, G = P(
  _((a, R) => {
    const { theme: p, initOpts: h, onEvents: O, style: C, classname: A } = a ?? {}, i = E(a);
    b(() => {
      i.current = a;
    });
    const l = E(null), d = E(!1), s = u(() => {
      if (!l.current) return null;
      const { echarts: e } = i.current;
      return e.getInstanceByDom(l.current);
    }, []), y = u(() => d.current, []), v = E(
      new ResizeObserver(() => {
        var t, r, n;
        let e = {
          ...N
        };
        B((t = i.current) == null ? void 0 : t.autoResize) && (e = {
          ...e,
          ...(r = i.current) == null ? void 0 : r.autoResize
        }), (n = s()) == null || n.resize(e);
      })
    ), g = u(
      (e = {}) => {
        function t(n, o, f) {
          var D, x;
          const c = s();
          o ? (D = c == null ? void 0 : c.on) == null || D.call(
            c,
            n,
            o,
            f
          ) : (x = c == null ? void 0 : c.on) == null || x.call(
            c,
            n,
            f
          );
        }
        function r(n, o) {
          Array.isArray(o) ? o.forEach((f) => {
            t(n, f.query, f.handler);
          }) : t(n, o.query, o.handler);
        }
        for (const n in e)
          Object.hasOwn(e, n) && r(n, e[n]);
      },
      [s]
    ), w = u(() => {
      var e, t, r, n;
      if ((e = v.current) == null || e.disconnect(), ((t = i.current) == null ? void 0 : t.autoResize) ?? !0) {
        const o = (r = s()) == null ? void 0 : r.getDom();
        o && ((n = v.current) == null || n.observe(o));
      }
    }, [s]), z = u(() => {
      var t, r;
      const { onChartReady: e } = i.current;
      d.current = !1, e == null || e(!1), (t = s()) == null || t.dispose(), (r = v.current) == null || r.disconnect();
    }, [s]), j = u(() => {
      const { echarts: e, theme: t, initOpts: r } = i.current;
      return e.init(l.current, t, r);
    }, []), q = u(() => {
      let e = null;
      const t = s();
      t && !t.isDisposed() && (e = t.getOption(), z());
      const r = j();
      return e && r.setOption(e), r;
    }, [j, z, s]), m = u(() => {
      const { onEvents: e, onChartReady: t } = i.current;
      q(), g(e), d.current = !0, t == null || t(!0), w();
    }, [g, w, q]);
    return b(() => {
      d.current && m();
    }, [p, h, O]), b(() => (m(), () => {
      z();
    }), []), k(
      R,
      () => ({
        getEChartsInstance: s,
        getEChartsReady: y,
        renderChart: m
      }),
      [s, y, m]
    ), /* @__PURE__ */ L("div", { ref: l, className: A, style: C });
  }),
  F
);
G.displayName = "ReactEChartsCore";
export {
  G as default
};