oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
56 lines (55 loc) • 2.64 kB
JavaScript
;
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const withMap_1 = require("./withMap");
const _utility_1 = require("./_utility");
const DirectionComponent = react_1.memo((props) => {
const { distance, duration, steps, map, markerAnimation = false, borderColor = 'blue', borderOpacity = 0.7, borderSize = 3, clickable = false, start = { lat: 0, lng: 0 }, end = { lat: 0, lng: 0 }, } = props;
const [directionService] = react_1.useState(new google.maps.DirectionsService());
const [directionRenderer] = react_1.useState(new google.maps.DirectionsRenderer());
react_1.useEffect(() => {
if (_utility_1.isCoordinate(start) && _utility_1.isCoordinate(end)) {
const request = {
origin: new google.maps.LatLng(start.lat, start.lng),
destination: new google.maps.LatLng(end.lat, end.lng),
travelMode: 'DRIVING',
};
directionService.route(request, function (result, status) {
if (status === 'OK') {
distance && distance(result.routes[0].legs[0].distance);
duration && duration(result.routes[0].legs[0].duration);
steps && steps(result.routes[0].legs[0].steps);
directionRenderer.setDirections(result);
directionRenderer.setOptions(Object.assign(Object.assign({}, (markerAnimation ? { markerOptions: { animation: google.maps.Animation.DROP } } : {})), { polylineOptions: Object.assign(Object.assign(Object.assign({}, (borderColor ? { strokeColor: borderColor } : {})), (borderSize ? { strokeWeight: borderSize } : {})), { strokeOpacity: borderOpacity, geodesic: false, clickable: clickable }) }));
}
});
}
}, [
start,
end,
borderSize,
borderColor,
borderOpacity,
clickable,
directionRenderer,
directionService,
distance,
steps,
markerAnimation,
duration,
]);
react_1.useEffect(() => {
if (map) {
directionRenderer.setMap(map);
}
}, [map, directionRenderer]);
return react_1.default.createElement(react_1.default.Fragment, null);
});
exports.default = withMap_1.withMap(DirectionComponent);