@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
195 lines • 11.2 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { grey } from '@mui/material/colors';
import { useTheme, useThemeProps } from '@mui/material/styles';
import bbox from '@turf/bbox';
import Color from 'color';
import isString from 'lodash/isString';
import { equals } from 'ramda';
import React from 'react';
import { AttributionControl, Layer, Map as MapGL, NavigationControl, Source, } from 'react-map-gl/mapbox';
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import { StyledAttibutionControlContainer } from './styles';
/**
* Map component which under the hood uses mapbox and react-map-gl. For this to work it's necessary
* to add the link bellow in the head of your page: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
* For more information: https://visgl.github.io/react-map-gl/docs/get-started/get-started#styling
*
* @note If sending the `data` prop it's also necessary to send the `sourceId` prop.
*/
export var Map = function (inProps) {
var _a = useThemeProps({ name: DLS_COMPONENT_NAMES.MAP, props: inProps }), attributionControlProps = _a.attributionControlProps, children = _a.children, _b = _a.color, color = _b === void 0 ? grey[700] : _b, data = _a.data, _c = _a.height, height = _c === void 0 ? 450 : _c, initialBoundsPosition = _a.initialBoundsPosition, layers = _a.layers, layerProps = _a.layerProps, mapboxAccessToken = _a.mapboxAccessToken, navigationControlProps = _a.navigationControlProps, onMapClick = _a.onMapClick, setHoverInfo = _a.setHoverInfo, _d = _a.preserveDrawingBuffer, preserveDrawingBuffer = _d === void 0 ? false : _d, _e = _a.sourceId, sourceId = _e === void 0 ? 'areas' : _e, sourceProps = _a.sourceProps, _f = _a.width, width = _f === void 0 ? '100%' : _f, mapProps = __rest(_a, ["attributionControlProps", "children", "color", "data", "height", "initialBoundsPosition", "layers", "layerProps", "mapboxAccessToken", "navigationControlProps", "onMapClick", "setHoverInfo", "preserveDrawingBuffer", "sourceId", "sourceProps", "width"]);
var _g = useTheme(), palette = _g.palette, spacing = _g.spacing;
var mapRef = React.useRef(null);
var previousBounds = React.useRef(undefined);
var _h = React.useState(), lastZoom = _h[0], setLastZoom = _h[1];
var _j = React.useState(false), sourceLoaded = _j[0], setSourceLoaded = _j[1];
var _k = React.useState(), containerWidth = _k[0], setContainerWidth = _k[1];
var _l = React.useState(), containerHeight = _l[0], setContainerHeight = _l[1];
var dataLayer = React.useMemo(function () {
return {
id: 'data',
paint: {
'line-border-color': [
'case',
['boolean', ['feature-state', 'clicked'], false],
Color(palette.common.black).fade(0).rgb().string(),
Color(palette.grey[500]).fade(0.3).rgb().string(),
],
'line-color': {
default: Color(color).fade(1).rgb().string(),
property: 'quantity',
stops: [
[0, Color(color).fade(0.9).rgb().string()],
[1, Color(color).fade(0.8).rgb().string()],
[2, Color(color).fade(0.7).rgb().string()],
[3, Color(color).fade(0.6).rgb().string()],
[4, Color(color).fade(0.5).rgb().string()],
[5, Color(color).fade(0.4).rgb().string()],
[6, Color(color).fade(0.3).rgb().string()],
[7, Color(color).fade(0.2).rgb().string()],
[8, Color(color).fade(0.1).rgb().string()],
[9, Color(color).fade(0).rgb().string()],
],
},
'line-opacity': 0.7,
},
source: sourceId,
type: 'line',
};
}, [color, palette.common.black, palette.grey, sourceId]);
var fillLayer = React.useMemo(function () {
return {
id: 'fillDataLayer',
paint: {
'fill-color': {
default: Color(color).fade(1).rgb().string(),
property: 'quantity',
stops: [
[0, Color(color).fade(0.9).rgb().string()],
[1, Color(color).fade(0.8).rgb().string()],
[2, Color(color).fade(0.7).rgb().string()],
[3, Color(color).fade(0.6).rgb().string()],
[4, Color(color).fade(0.5).rgb().string()],
[5, Color(color).fade(0.4).rgb().string()],
[6, Color(color).fade(0.3).rgb().string()],
[7, Color(color).fade(0.2).rgb().string()],
[8, Color(color).fade(0.1).rgb().string()],
[9, Color(color).fade(0).rgb().string()],
],
},
'fill-opacity': 0.7,
},
source: sourceId,
type: 'fill',
};
}, [color, sourceId]);
var onHover = React.useCallback(function (event) {
if (setHoverInfo) {
var features = event.features, _a = event.lngLat, lng = _a.lng, lat = _a.lat;
var hoveredFeature = features && features[0];
if (hoveredFeature && (hoveredFeature === null || hoveredFeature === void 0 ? void 0 : hoveredFeature.properties)) {
setHoverInfo({ feature: hoveredFeature, lat: lat, lng: lng });
}
else {
setHoverInfo(undefined);
}
}
}, [setHoverInfo]);
var mapRefCallback = React.useCallback(function (ref) {
if (ref) {
mapRef.current = ref;
if (initialBoundsPosition &&
!equals(initialBoundsPosition.position, previousBounds.current)) {
ref.fitBounds(initialBoundsPosition.position, {
duration: 1000,
padding: 40,
});
previousBounds.current = initialBoundsPosition.position;
}
}
}, [initialBoundsPosition]);
React.useEffect(function () {
var _a;
if (initialBoundsPosition === null || initialBoundsPosition === void 0 ? void 0 : initialBoundsPosition.id) {
(_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.setFeatureState({ id: initialBoundsPosition.id, source: sourceId }, { clicked: true });
}
}, [initialBoundsPosition, sourceId, sourceLoaded]);
var onClick = function (event) {
var _a, _b, _c, _d, _e;
var feature = event.features && event.features[0];
if (feature && ((_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a.stateCode)) {
var _f = bbox(feature), minLng = _f[0], minLat = _f[1], maxLng = _f[2], maxLat = _f[3];
(_b = mapRef.current) === null || _b === void 0 ? void 0 : _b.removeFeatureState({ source: sourceId });
(_c = mapRef.current) === null || _c === void 0 ? void 0 : _c.setFeatureState({ id: feature.id || '', source: sourceId }, { clicked: true });
(_d = mapRef.current) === null || _d === void 0 ? void 0 : _d.fitBounds([
[minLng, minLat],
[maxLng, maxLat],
], { duration: 1000, padding: 40 });
}
else {
(_e = mapRef.current) === null || _e === void 0 ? void 0 : _e.removeFeatureState({ source: sourceId });
}
if (onMapClick)
onMapClick(event, mapRef.current);
};
var onZoom = function (event) {
var _a;
if (!lastZoom || lastZoom > event.viewState.zoom) {
(_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.removeFeatureState({ source: sourceId });
}
setLastZoom(event.viewState.zoom);
};
var onResize = React.useCallback(function () {
if (mapRef.current) {
setTimeout(function () { var _a; return (_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.resize(); }, 0);
}
return null;
}, []);
var changeDimensions = function () {
onResize();
setContainerWidth(width);
setContainerHeight(isString(height) ? height : height - parseInt(spacing(7.8), 10));
};
React.useEffect(function () {
changeDimensions();
}, [width, height]);
return (_jsx(StyledAttibutionControlContainer, { style: { height: containerHeight, width: containerWidth }, children: _jsxs(MapGL, __assign({ attributionControl: false, initialViewState: {
latitude: 37.0902,
longitude: -95.7129,
zoom: 3,
}, interactiveLayerIds: data ? ['data'] : undefined, mapboxAccessToken: mapboxAccessToken, mapStyle: "mapbox://styles/mapbox/light-v9", onClick: onClick, onMouseLeave: setHoverInfo ? function () { return setHoverInfo(undefined); } : undefined, onMouseMove: onHover, onRender: function () { return onResize(); }, onSourceData: function () {
if (!sourceLoaded)
setSourceLoaded(true);
}, onZoomEnd: onZoom, preserveDrawingBuffer: preserveDrawingBuffer, ref: mapRefCallback, reuseMaps: true, style: { height: '100%', width: '100%' } }, mapProps, { children: [_jsx(AttributionControl, __assign({ style: { color: 'white' } }, attributionControlProps)), _jsx(NavigationControl, __assign({ position: "top-right", style: { marginRight: spacing(2.5) } }, navigationControlProps)), data && (_jsxs(Source, __assign({ data: data, type: "geojson" }, sourceProps, { id: sourceId, children: [layerProps ? (_jsx(Layer, __assign({}, layerProps))) : (_jsxs(_Fragment, { children: [_jsx(Layer, __assign({}, dataLayer)), _jsx(Layer, __assign({}, fillLayer))] })), layers] }))), children] })) }));
};
export default Map;
//# sourceMappingURL=index.js.map