@longline/aqua-ui 1.0.338 → 1.0.340

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer copy.js

@@ -1,176 +0,0 @@
-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 * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { Layer, useMap } from 'react-map-gl/mapbox';
-import { Marker } from 'mapbox-gl';
-/**
- * The `HtmlMarkerLayer` manages HTML markers on a map. HTML markers are far slower
- * than OpenGL layers, but much more flexible: with SVG, any shape of marker can
- * be designed, and the markers can easily be made responsive to hover.
- *
- * The `HtmlMarkerLayer` keeps an internal cache, creating and rendering markers only
- * when they are visible in the map viewport. This is a suitable solution for clusters
- * (where by definition there are never very many icons in the viewport), or when
- * there are simply not _that_ many markers: up to a few hundred in the viewport is the
- * upper limit.
- *
- * The `HtmlMarkerLayer` must be placed inside a GeoJSON `Source`. In that source,
- * each feature must have a unique ID (passed to this layer as the `idField`), which
- * is used to tell features apart. When features are refreshed, it is imported that
- * they all get new IDs so that old markers get removed correctly.
- *
- * The `HtmlMarkerLayer` component takes a _function child_. This function accepts
- * a `props` object, which will be the properties from each GeoJSON feature for which
- * a marker is rendered.
- *
- * The `minZoom` and `maxZoom` properties can be used to make markers appear only
- * within a range of zoom levels.
- *
- * ```tsx
- * // featureCollection has a property "id" with unique values
- * <Source id="mysource" type="geojson" data={featureCollection}>
- *   <HtmlMarkerLayer sourceId="mysource" idField="id">
- *     {(markerProps) => <MyMarkerComponent color="gold" radius={45} {...markerProps}/>
- *   </HtmlMarkerLayer>
- * </Source>
- * ```
- */
-var HtmlMarkerLayerBase = function (props) {
-    var map = useMap().current;
-    // Can't call props.children directly from map render event handler.
-    // Make a ref copy:
-    var children = React.useRef(props.children);
-    var markers = React.useRef({});
-    var markersOnScreen = React.useRef({});
-    var minZoom = React.useRef(props.minZoom);
-    var maxZoom = React.useRef(props.maxZoom);
-    // Add render event to map, and remove it when this component 
-    // is unmounted. Whenever the map renders, we must refresh
-    // all markers.
-    React.useEffect(function () {
-        map.on('render', updateMarkers);
-        return function () { map.off('render', updateMarkers); };
-    }, []);
-    // If the child function changes, then update the children ref copy.
-    // Also clear map and repaint it, because child component props may
-    // have changed.
-    React.useEffect(function () {
-        minZoom.current = props.minZoom;
-        maxZoom.current = props.maxZoom;
-        children.current = props.children;
-        for (var id in markersOnScreen.current) {
-            markersOnScreen.current[id].remove();
-        }
-        markers.current = {};
-        markersOnScreen.current = {};
-        map.triggerRepaint();
-    }, [props.children, props.minZoom, props.maxZoom]);
-    // When component is unmounted, remove all its markers from the map.
-    React.useEffect(function () {
-        return function () {
-            for (var id in markersOnScreen.current) {
-                markersOnScreen.current[id].remove();
-            }
-            map.triggerRepaint();
-        };
-    }, []);
-    //
-    // Given a native or React component and props, turn it into an 
-    // HTML element. Return this element.
-    //
-    var createHtmlElementFromReactNode = function (latlngfeatureProps) {
-        // Don't render anything if there is no child.
-        if (!children.current)
-            return null;
-        // Get the first child.
-        var elem = children.current(latlngfeatureProps);
-        // Render child.
-        var el = document.createElement('div');
-        var root = ReactDOM.createRoot(el);
-        root.render(elem);
-        return el;
-    };
-    // 
-    // Calculate which markers are offscreen, and remove them.
-    // Add new markers for markers which are now onscreen.
-    var updateMarkers = function () {
-        // Only run after GeoJSON is loaded:
-        if (!map.getSource(props.sourceId))
-            return;
-        if (!map.isSourceLoaded(props.sourceId))
-            return;
-        // Retrieve all features that are currently rendered on a visible map tile,
-        // thus excluding everything that's off-screen, for speed. The use of 
-        // querySourceFeatures requires that at least one Layer exists, which is
-        // why we have a layer that renders only invisible circles.    
-        // querySourceFeatures often results duplicates due to buffering.
-        // Remove these duplicates by looking at each feature's unique ID.
-        var seen = {};
-        var features = (map.getZoom() < minZoom.current || map.getZoom() > maxZoom.current) ? [] : map.querySourceFeatures(props.sourceId).filter(function (f) {
-            var id = f.properties[props.idField];
-            return seen.hasOwnProperty(id) ? false : (seen[id] = true);
-        });
-        // For every marker on the screen, create an HTML marker (if we didn't yet),
-        // and add it to the map if it's not there already
-        var newMarkers = {};
-        for (var _i = 0, features_1 = features; _i < features_1.length; _i++) {
-            var feature = features_1[_i];
-            var coords = feature.geometry.coordinates;
-            var fprops = feature.properties;
-            var id = fprops[props.idField];
-            // Do not render makers without an ID field:
-            if (!id)
-                continue;
-            // Is there a marker for this feature?
-            var marker = markers.current[id];
-            // If not, create one:
-            if (!marker) {
-                var el = createHtmlElementFromReactNode(__assign({ longitude: coords[0], latitude: coords[1] }, fprops));
-                marker = markers.current[id] = new Marker({
-                    element: el
-                });
-                marker.setLngLat(coords);
-            }
-            newMarkers[id] = marker;
-            if (!markersOnScreen.current[id])
-                marker.addTo(map.getMap());
-        }
-        // for every marker we've added previously, remove those 
-        // that are no longer visible:
-        for (var id in markersOnScreen.current) {
-            if (!newMarkers[id])
-                markersOnScreen.current[id].remove();
-        }
-        markersOnScreen.current = newMarkers;
-    };
-    // querySourceFeatures will only work if we have a layer, even
-    // though it's empty.
-    return (React.createElement(Layer, { source: props.sourceId, type: "circle", paint: { "circle-radius": 0 } }));
-};
-var HtmlMarkerLayer = function (_a) {
-    var _b = _a.minZoom, minZoom = _b === void 0 ? 0 : _b, _c = _a.maxZoom, maxZoom = _c === void 0 ? 99 : _c, props = __rest(_a, ["minZoom", "maxZoom"]);
-    return React.createElement(HtmlMarkerLayerBase, __assign({ minZoom: minZoom, maxZoom: maxZoom }, props));
-};
-HtmlMarkerLayer.displayName = 'HtmlMarkerLayer';
-export { HtmlMarkerLayer };

package/modules/Root/Content.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    children?: React.ReactNode;
-    /**
-     * Is this the currently-active content?
-     */
-    active?: boolean;
-}
-declare const Content: {
-    (props: IProps): React.JSX.Element;
-    displayName: string;
-};
-export { Content, IProps };

package/modules/Root/Content.js

@@ -1,25 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-var ContentBase = function (props) {
-    return (React.createElement("div", { "data-testid": "Root.Content", className: props.className }, props.children));
-};
-var ContentStyled = styled(ContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: red;\n  visibility: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: red;\n  visibility: ", ";\n"])), function (p) { return p.active ? 'visible' : 'hidden'; });
-var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };
-Content.displayName = "Overlay.Content";
-export { Content };
-var templateObject_1;

package/modules/Root/Overlay.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    children?: React.ReactNode;
-    /**
-     * Is the `Overlay` currently open?
-     */
-    open?: boolean;
-    /**
-     * Fired when Overlay wants to close.
-     */
-    onClose: () => void;
-}
-declare const Overlay: {
-    (props: IProps): React.JSX.Element;
-    Content: {
-        (props: import("./Content").IProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-export { Overlay };

package/modules/Root/Overlay.js

@@ -1,33 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { Shader } from './Shader';
-import { Sidebar } from './Sidebar';
-import { Content } from './Content';
-var OverlayBase = function (props) {
-    var handleShaderClick = function () {
-        props.onClose();
-    };
-    return (React.createElement("div", { "data-testid": "Root.Overlay", className: props.className },
-        React.createElement(Sidebar, { open: props.open }, props.children),
-        React.createElement(Shader, { active: props.open, onClick: handleShaderClick })));
-};
-var OverlayStyled = styled(OverlayBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none !important;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none !important;\n"])));
-var Overlay = function (props) { return React.createElement(OverlayStyled, __assign({}, props)); };
-Overlay.Content = Content;
-export { Overlay };
-var templateObject_1;

package/modules/Root/Root.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-interface IRootProps {
-    /** @ignore */
-    className?: string;
-}
-declare const Root: {
-    (props: IRootProps): React.JSX.Element;
-    displayName: string;
-};
-export { Root, IRootProps };

package/modules/Root/Root.js

@@ -1,46 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { Outlet, useMatches, useNavigate } from 'react-router-dom';
-import { MainMenu } from '../MainMenu';
-import { SVG } from '../../svg';
-import { Overlay } from './Overlay';
-import { Map } from '../../map/Map';
-var RootBase = function (props) {
-    var navigate = useNavigate();
-    var m = useMatches();
-    return (React.createElement("div", { "data-testid": "Root", className: props.className },
-        React.createElement(MainMenu, null,
-            React.createElement(MainMenu.Item, { icon: SVG.Menu.MapMarker, onClick: function () { return navigate(""); } }, "Map"),
-            React.createElement(MainMenu.Item, { icon: SVG.Menu.Company, onClick: function () { return navigate("company"); } }, "Company"),
-            React.createElement(MainMenu.Item, { icon: SVG.Menu.Standards, onClick: function () { return navigate("farms"); } }, "Farms"),
-            React.createElement(MainMenu.Item, { icon: SVG.Menu.Account, onClick: function () { return navigate("page1"); } }, "Page 1"),
-            React.createElement(MainMenu.Item, { icon: SVG.Menu.Signout, onClick: function () { return navigate("page2"); } }, "Page 2")),
-        React.createElement(Overlay, { open: m.length == 3 && m[2].pathname != "/", onClose: function () { return navigate("/"); } }, m.length == 3 && React.createElement(Outlet, null)),
-        React.createElement(Content, { "data-testid": "Root.Content" },
-            React.createElement(Map, { token: "pk.eyJ1IjoibG9uZ2xpbmVlbnZpcm9ubWVudCIsImEiOiJjbDdldTJhMmYwM3VlM3lvMW5mcTFyOWlnIn0.LzghnMQjPdtw795xN-BCWg", style: "mapbox://styles/longlineenvironment/clm8wahno013a01pb5c0u3k22" }),
-            m.length == 2 &&
-                React.createElement(Page, { "data-testid": "Root.Page" },
-                    React.createElement(Outlet, null)))));
-};
-var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 80px;\n  right: 0;\n  bottom: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 80px;\n  right: 0;\n  bottom: 0;\n"])));
-var Page = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: grey;\n  color: white;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: grey;\n  color: white;\n"])));
-var RootStyled = styled(RootBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #333;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #333;\n"])));
-var Root = function (props) { return React.createElement(RootStyled, __assign({}, props)); };
-Root.displayName = 'Root';
-export { Root };
-var templateObject_1, templateObject_2, templateObject_3;

package/modules/Root/Shader.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /**
-     * Is shader currently active?
-     */
-    active?: boolean;
-    /**
-     * Fired when Shader is clicked.
-     */
-    onClick: () => void;
-}
-declare const Shader: (props: IProps) => React.JSX.Element;
-export { Shader };

package/modules/Root/Shader.js

@@ -1,24 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-var ShaderBase = function (props) {
-    return (React.createElement("div", { "data-testid": "Root.Shader", className: props.className, onClick: props.onClick }));
-};
-var ShaderStyled = styled(ShaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  z-index: 1;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  // Behavior:\n  pointer-events: ", ";\n  cursor: ", ";\n\n  // Appearance:\n  transition: opacity ", "ms ease-in-out;\n  opacity: ", ";\n  background-color: rgba(0,0,0,0.5);\n"], ["\n  // Position and size:\n  position: absolute;\n  z-index: 1;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  // Behavior:\n  pointer-events: ", ";\n  cursor: ", ";\n\n  // Appearance:\n  transition: opacity ", "ms ease-in-out;\n  opacity: ", ";\n  background-color: rgba(0,0,0,0.5);\n"])), function (p) { return p.active ? 'all' : 'none'; }, function (p) { return p.active ? 'pointer' : 'auto'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { return p.active ? 1 : 0; });
-var Shader = function (props) { return React.createElement(ShaderStyled, __assign({}, props)); };
-export { Shader };
-var templateObject_1;

package/modules/Root/Sidebar.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    children?: React.ReactNode;
-    /**
-     * Is the overlay currently open?
-     */
-    open?: boolean;
-}
-declare const Sidebar: (props: IProps) => React.JSX.Element;
-export { Sidebar };

package/modules/Root/Sidebar.js

@@ -1,24 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-var SidebarBase = function (props) {
-    return React.createElement("div", { "data-testid": "Root.Sidebar", className: props.className }, props.children);
-};
-var SidebarStyled = styled(SidebarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  z-index: 2;\n  left: ", ";\n  top: 0;\n  width: 250px;\n  bottom: 0;\n  transition: left ", "ms ease-in-out;\n  pointer-events: all;\n\n  // Appearance:\n  background: ", ";\n"], ["\n  // Position and size:\n  position: absolute;\n  z-index: 2;\n  left: ", ";\n  top: 0;\n  width: 250px;\n  bottom: 0;\n  transition: left ", "ms ease-in-out;\n  pointer-events: all;\n\n  // Appearance:\n  background: ", ";\n"])), function (p) { return p.open ? 0 : '-350px'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { return p.theme.colors.primary[3]; });
-var Sidebar = function (props) { return React.createElement(SidebarStyled, __assign({}, props)); };
-export { Sidebar };
-var templateObject_1;

package/modules/Root/index.d.ts

@@ -1 +0,0 @@
-export * from './Root';

package/modules/Root/index.js

@@ -1 +0,0 @@
-export * from './Root';

package/modules/Root/stories/SampleContent.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    className?: string;
-    children?: React.ReactNode;
-}
-declare const SampleContent: (props: IProps) => React.JSX.Element;
-export { SampleContent };

package/modules/Root/stories/SampleContent.js

@@ -1,44 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-var SampleContentBase = function (props) {
-    return (React.createElement("div", { className: props.className },
-        props.children,
-        React.createElement(Scroller, null,
-            React.createElement("div", null, "A"),
-            React.createElement("div", null, "B"),
-            React.createElement("div", null, "C"),
-            React.createElement("div", null, "D"),
-            React.createElement("div", null, "E"),
-            React.createElement("div", null, "F"),
-            React.createElement("div", null, "G"),
-            React.createElement("div", null, "H"),
-            React.createElement("div", null, "I"),
-            React.createElement("div", null, "J"),
-            React.createElement("div", null, "K"),
-            React.createElement("div", null, "L"),
-            React.createElement("div", null, "M"),
-            React.createElement("div", null, "N"),
-            React.createElement("div", null, "O"),
-            React.createElement("div", null, "P"),
-            React.createElement("div", null, "Q"))));
-};
-var Scroller = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: scroll;\n  border: solid 1px #fff;\n  & > div {\n    height: 48px;\n  }\n"], ["\n  flex: 1;\n  overflow-y: scroll;\n  border: solid 1px #fff;\n  & > div {\n    height: 48px;\n  }\n"])));
-var SampleContentStyled = styled(SampleContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  \n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  \n"])));
-var SampleContent = function (props) { return React.createElement(SampleContentStyled, __assign({}, props)); };
-export { SampleContent };
-var templateObject_1, templateObject_2;