oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
117 lines (116 loc) • 4.81 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const MapContext_1 = __importDefault(require("./MapContext"));
const _utility_1 = require("./_utility");
const MapProvider = react_1.memo((props) => {
const mapRef = react_1.useRef();
const { width, height, zoom, draggable, controlSize, controlIcons, fullscreenIcon, boundaryPolygonFit } = props;
const [map, setMap] = react_1.useState();
const [center, setCenter] = react_1.useState();
const [polygons, setPolygons] = react_1.useState([]);
const [bounds, setBounds] = react_1.useState();
const mapInit = () => __awaiter(void 0, void 0, void 0, function* () {
const mapObject = new google.maps.Map(mapRef.current, {
zoom: zoom || 10,
maxZoom: 25,
minZoom: 3,
draggable,
controlSize,
disableDefaultUI: !controlIcons,
fullscreenControl: fullscreenIcon,
clickableIcons: false,
});
setMap(mapObject);
setBounds(new google.maps.LatLngBounds());
});
const setBoundaryMarkers = (pos, count) => {
if (map) {
if (bounds && count > 1) {
bounds.extend(new google.maps.LatLng(pos.lat, pos.lng));
map.fitBounds(bounds);
}
else {
_utility_1.setMapCenter(map, pos);
}
}
};
const zoomChanged = (map) => {
// console.log('---Zoom', map.getZoom());
};
const boundsChanged = (map) => {
// console.log('---Bounds', map.getBounds());
};
react_1.useEffect(() => {
mapInit();
// eslint-disable-next-line
}, []);
react_1.useEffect(() => {
if (_utility_1.isCoordinate(props.center)) {
setCenter(props.center);
}
}, [props.center]);
react_1.useEffect(() => {
if (map) {
if (center) {
map.panTo(center);
}
if (props.bounds && bounds) {
bounds
.extend(new google.maps.LatLng(props.bounds[0], props.bounds[2]))
.extend(new google.maps.LatLng(props.bounds[1], props.bounds[3]));
map.fitBounds(bounds);
}
google.maps.event.addListener(map, 'zoom_changed', () => zoomChanged(map));
google.maps.event.addListener(map, 'bounds_changed', () => boundsChanged(map));
}
}, [map, center, boundaryPolygonFit, bounds, props.bounds]);
const setBoundaryPolygon = (pos) => {
if (map && boundaryPolygonFit && bounds) {
// bounds.extend(new google.maps.LatLng(pos.lat, pos.lng));
// map.fitBounds(bounds);
}
};
const setPolygon = (polygon) => {
if (map && polygon) {
const pols = polygons;
pols.push(polygon);
setPolygons([...pols]);
}
};
const resetPolygon = () => {
polygons.forEach((item) => {
item.setMap(null);
});
};
return (react_1.default.createElement(MapContext_1.default.Provider, { value: {
map: map,
mapCenter: props.center,
setMarkerLatLng: (pos, count) => setBoundaryMarkers(pos, count),
setPolygonLatLng: (pos) => setBoundaryPolygon(pos),
setPolygon: (polygonObject) => setPolygon(polygonObject),
resetPolygon: () => resetPolygon(),
} },
props.children,
react_1.default.createElement("div", { ref: mapRef, style: { width, height } })));
});
exports.default = react_1.default.memo(MapProvider, (p, n) => p === n);