@pansy/react-mapbox-gl/lib/components/StyleLoaded/index.js

🌍 基于 Mapbox GL 封装的 React 组件库

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/StyleLoaded/index.tsx
var StyleLoaded_exports = {};
__export(StyleLoaded_exports, {
  StyleLoaded: () => StyleLoaded
});
module.exports = __toCommonJS(StyleLoaded_exports);
var import_react = require("react");
var import_core = require("@rcuse/core");
var import_useMap = require("../../hooks/useMap");
var import_isStyleLoaded = require("../../utils/isStyleLoaded");
var StyleLoaded = (props) => {
  const { isFinishRender = false, children } = props;
  const { map } = (0, import_useMap.useMap)();
  const [, setStyleLoaded] = (0, import_react.useState)(0);
  const themeStatus = (0, import_react.useRef)([0, 0, 0]);
  const checkStylePassRef = (0, import_react.useRef)(0);
  const forceUpdate = () => {
    setStyleLoaded((version) => version + 1);
  };
  const checkStyle = () => {
    return ["031", "131"].includes(themeStatus.current.join(""));
  };
  const handleStyleLoading = () => {
    themeStatus.current = [1, 0, 0];
    forceUpdate();
  };
  const handleStyleData = () => {
    themeStatus.current[1] = themeStatus.current[1] + 1;
    if (themeStatus.current[1] === 3) {
      checkStylePassRef.current = checkStylePassRef.current + 1;
    }
    if (checkStyle()) {
      forceUpdate();
    }
  };
  const handleStyleLoad = () => {
    themeStatus.current[2] = 1;
  };
  (0, import_react.useEffect)(() => {
    if (map) {
      if ((0, import_isStyleLoaded.isStyleLoaded)(map)) {
        themeStatus.current = [0, 3, 1];
        checkStylePassRef.current = 1;
        forceUpdate();
        themeStatus.current = [0, 0, 0];
      }
      map.on("styledataloading", handleStyleLoading);
      map.on("styledata", handleStyleData);
      map.on("style.load", handleStyleLoad);
      return () => {
        map.off("styledataloading", handleStyleLoading);
        map.off("styledata", handleStyleData);
        map.off("style.load", handleStyleLoad);
      };
    }
    return void 0;
  }, [map]);
  if ((0, import_core.isFunction)(children)) {
    return children(checkStyle(), checkStylePassRef.current === 1);
  }
  if (!isFinishRender) {
    return checkStylePassRef.current > 0 && props.children;
  }
  return checkStyle() ? props.children : null;
};