Skip to content

Commit

Permalink
Merge pull request #214 from yuzhva:feat/support_esm
Browse files Browse the repository at this point in the history
feat: support esm
  • Loading branch information
charlieforward9 authored Dec 6, 2024
2 parents a41f635 + e78ae07 commit c632fc4
Show file tree
Hide file tree
Showing 6 changed files with 312 additions and 20 deletions.
35 changes: 29 additions & 6 deletions .storybook/examples/region.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import { Polygon } from "leaflet";
import { createPathComponent } from "@react-leaflet/core";
import { MapContainer, TileLayer } from "react-leaflet";
import { MapContainer, TileLayer, Popup } from "react-leaflet";
import MarkerClusterGroup from "../../src/react-leaflet-markercluster";
import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from "./constants";
import "./styles.scss";
Expand All @@ -11,7 +11,7 @@ function randomCoords() {
}

const ClusterableRegion = createPathComponent(function createClusterableRegion(
{ coordinates, color = "blue", fillOpacity = 0.3, onClick },
{ latlngs, color = "blue", fillOpacity = 0.3, ...props },
ctx,
) {
// Define a clusterable region with a getLatLng method for clustering compatibility
Expand All @@ -28,10 +28,10 @@ const ClusterableRegion = createPathComponent(function createClusterableRegion(
});

// Instantiate the ClusterablePolygon with provided positions and options
const region = new ClusterableRegion(coordinates, {
const region = new ClusterableRegion(latlngs, {
color,
fillOpacity,
onclick: onClick,
...props,
});

return {
Expand Down Expand Up @@ -61,7 +61,7 @@ const RegionExample = () => (
return (
<ClusterableRegion
key={i}
coordinates={[
latlngs={[
centerCoords,
[
centerCoords[0] - Math.random(),
Expand All @@ -76,7 +76,30 @@ const RegionExample = () => (
centerCoords[1] + Math.random(),
],
]}
/>
eventHandlers={{
click: () => {
console.log(`Region ${i} clicked`);
},
mouseover: (event) => {
event.target.openPopup();
},
mouseout: (event) => {
const target = event.target;
if (
target._popup &&
target._popup._container.contains(
//@ts-expect-error - toElement not recognized by TS
event.originalEvent.toElement,
)
) {
return;
}
target.closePopup();
},
}}
>
<Popup>Region {i}</Popup>
</ClusterableRegion>
);
})}
</MarkerClusterGroup>
Expand Down
22 changes: 13 additions & 9 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
// eslint-disable-next-line no-undef
const isESM = process.env.BABEL_ENV === "esm";

const babelConfig = {
presets: [
[
'@babel/preset-env',
"@babel/preset-env",
{
modules: isESM ? false : "commonjs",
targets: {
node: 'current',
chrome: '60',
firefox: '60',
safari: '11.1',
edge: '17',
ie: '11',
node: "current",
chrome: "60",
firefox: "60",
safari: "11.1",
edge: "17",
ie: "11",
},
},
],
'@babel/preset-react',
"@babel/preset-react",
],
};

module.exports = babelConfig;
export default babelConfig;
13 changes: 11 additions & 2 deletions dist/index.js → dist/cjs/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"use strict";

function _typeof(o) {
"@babel/helpers - typeof";
return (
Expand All @@ -18,7 +19,9 @@ function _typeof(o) {
_typeof(o)
);
}
Object.defineProperty(exports, "__esModule", { value: true });
Object.defineProperty(exports, "__esModule", {
value: true,
});
exports.default = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = _interopRequireDefault(require("leaflet"));
Expand Down Expand Up @@ -196,6 +199,8 @@ function createMarkerCluster(_ref, context) {
props = _objectWithoutProperties(_ref, _excluded);
var clusterProps = {};
var clusterEvents = {};

// Splitting props and events to different objects
Object.entries(props).forEach(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
propName = _ref3[0],
Expand All @@ -205,6 +210,8 @@ function createMarkerCluster(_ref, context) {
: (clusterProps[propName] = prop);
});
var instance = new _leaflet.default.MarkerClusterGroup(clusterProps);

// Initializing event listeners
Object.entries(clusterEvents).forEach(function (_ref4) {
var _ref5 = _slicedToArray(_ref4, 2),
eventAsProp = _ref5[0],
Expand All @@ -217,7 +224,9 @@ function createMarkerCluster(_ref, context) {
context: _objectSpread(
_objectSpread({}, context),
{},
{ layerContainer: instance },
{
layerContainer: instance,
},
),
};
}
Expand Down
225 changes: 225 additions & 0 deletions dist/esm/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
function _typeof(o) {
"@babel/helpers - typeof";
return (
(_typeof =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (o) {
return typeof o;
}
: function (o) {
return o &&
"function" == typeof Symbol &&
o.constructor === Symbol &&
o !== Symbol.prototype
? "symbol"
: typeof o;
}),
_typeof(o)
);
}
var _excluded = ["children"];
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r &&
(o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})),
t.push.apply(t, o);
}
return t;
}
function _objectSpread(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2
? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
})
: Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
: ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _defineProperty(e, r, t) {
return (
(r = _toPropertyKey(r)) in e
? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0,
})
: (e[r] = t),
e
);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _slicedToArray(r, e) {
return (
_arrayWithHoles(r) ||
_iterableToArrayLimit(r, e) ||
_unsupportedIterableToArray(r, e) ||
_nonIterableRest()
);
}
function _nonIterableRest() {
throw new TypeError(
"Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.",
);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return (
"Object" === t && r.constructor && (t = r.constructor.name),
"Map" === t || "Set" === t
? Array.from(r)
: "Arguments" === t ||
/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
? _arrayLikeToArray(r, a)
: void 0
);
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _iterableToArrayLimit(r, l) {
var t =
null == r
? null
: ("undefined" != typeof Symbol && r[Symbol.iterator]) || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (((i = (t = t.call(r)).next), 0 === l)) {
if (Object(t) !== t) return;
f = !1;
} else
for (
;
!(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l);
f = !0
);
} catch (r) {
(o = !0), (n = r);
} finally {
try {
if (!f && null != t.return && ((u = t.return()), Object(u) !== u))
return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var s = Object.getOwnPropertySymbols(e);
for (r = 0; r < s.length; r++)
(o = s[r]),
t.includes(o) || ({}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]));
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r)
if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
import { createPathComponent } from "@react-leaflet/core";
import L from "leaflet";
import "leaflet.markercluster";
L.MarkerClusterGroup.include({
_flushLayerBuffer: function _flushLayerBuffer() {
this.addLayers(this._layerBuffer);
this._layerBuffer = [];
},
addLayer: function addLayer(layer) {
if (this._layerBuffer.length === 0) {
setTimeout(this._flushLayerBuffer.bind(this), 50);
}
this._layerBuffer.push(layer);
},
});
L.MarkerClusterGroup.addInitHook(function () {
this._layerBuffer = [];
});
function createMarkerCluster(_ref, context) {
var _c = _ref.children,
props = _objectWithoutProperties(_ref, _excluded);
var clusterProps = {};
var clusterEvents = {};

// Splitting props and events to different objects
Object.entries(props).forEach(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
propName = _ref3[0],
prop = _ref3[1];
return propName.startsWith("on")
? (clusterEvents[propName] = prop)
: (clusterProps[propName] = prop);
});
var instance = new L.MarkerClusterGroup(clusterProps);

// Initializing event listeners
Object.entries(clusterEvents).forEach(function (_ref4) {
var _ref5 = _slicedToArray(_ref4, 2),
eventAsProp = _ref5[0],
callback = _ref5[1];
var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
instance.on(clusterEvent, callback);
});
return {
instance: instance,
context: _objectSpread(
_objectSpread({}, context),
{},
{
layerContainer: instance,
},
),
};
}
var MarkerCluster = createPathComponent(createMarkerCluster);
export default MarkerCluster;
Loading

0 comments on commit c632fc4

Please sign in to comment.