@deck.gl-community/react 9.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @deck.gl-community/react
+
+This module contains community maintained react components for deck.gl.

package/dist/components/icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import 'boxicons';
+export declare function Icon(props: any): React.JSX.Element;

package/dist/components/icon.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import 'boxicons';
+export function Icon(props) {
+    // @ts-expect-error TODO
+    return React.createElement("box-icon", { color: "currentColor", ...props });
+}

package/dist/components/long-press-button.d.ts

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export declare class LongPressButton extends PureComponent {
+    static propTypes: {
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        children: PropTypes.Validator<any>;
+    };
+    buttonPressTimer: ReturnType<typeof setTimeout> | null;
+    _repeat: () => void;
+    _handleButtonPress: () => void;
+    _handleButtonRelease: () => void;
+    render(): React.JSX.Element;
+}

package/dist/components/long-press-button.js

@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export class LongPressButton extends PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func.isRequired,
+        // eslint-disable-next-line react/forbid-prop-types
+        children: PropTypes.any.isRequired
+    };
+    buttonPressTimer = null;
+    _repeat = () => {
+        if (this.buttonPressTimer) {
+            this.props.onClick();
+            this.buttonPressTimer = setTimeout(this._repeat, 100);
+        }
+    };
+    _handleButtonPress = () => {
+        this.buttonPressTimer = setTimeout(this._repeat, 100);
+    };
+    _handleButtonRelease = () => {
+        if (this.buttonPressTimer) {
+            clearTimeout(this.buttonPressTimer);
+        }
+        this.buttonPressTimer = null;
+    };
+    render() {
+        return (React.createElement("div", { onMouseDown: (event) => {
+                this._handleButtonPress();
+                document.addEventListener('mouseup', this._handleButtonRelease, { once: true });
+            } }, this.props.children));
+    }
+}

package/dist/components/modal.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
+export type ModalProps = {
+    title: any;
+    content: any;
+    onClose: () => unknown;
+};
+export declare function EditorModal(props: ModalProps): React.JSX.Element;

package/dist/components/modal.js

@@ -0,0 +1,70 @@
+/* eslint-env browser */
+import * as React from 'react';
+import Modal, { ModalProvider } from 'styled-react-modal';
+import styled from 'styled-components';
+export const Button = styled.button `
+  display: inline-block;
+  color: #fff;
+  background-color: rgb(90, 98, 94);
+  font-size: 1em;
+  margin: 0.25em;
+  padding: 0.375em 0.75em;
+  border: 1px solid transparent;
+  border-radius: 0.25em;
+  display: block;
+`;
+const StyledModal = Modal.styled `
+  position: relative;
+  display: block;
+  width: 50rem;
+  height: auto;
+  max-width: 500px;
+  margin: 1.75rem auto;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  color: rgb(21, 25, 29);
+  line-height: 1.5;
+  text-align: left;
+`;
+const Content = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
+`;
+const HeaderRow = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.75rem 0.75rem;
+  border-bottom: 1px solid rgb(222, 226, 230);
+`;
+const Header = styled.h5 `
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+`;
+export function EditorModal(props) {
+    const [isOpen, setIsOpen] = React.useState(true);
+    function toggleModal() {
+        if (isOpen) {
+            props.onClose();
+        }
+        setIsOpen(!isOpen);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ModalProvider, null,
+            React.createElement(StyledModal, { isOpen: isOpen, onBackgroundClick: toggleModal, onEscapeKeydown: toggleModal },
+                React.createElement(Content, null,
+                    React.createElement(HeaderRow, null,
+                        React.createElement(Header, null, props.title)),
+                    props.content)))));
+}

package/dist/components/positioned-view-control.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const PositionedViewControl: ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom }: {
+    fitBounds: any;
+    panBy: any;
+    zoomBy: any;
+    zoomLevel: any;
+    maxZoom: any;
+    minZoom: any;
+}) => React.JSX.Element;

package/dist/components/positioned-view-control.js

@@ -0,0 +1,5 @@
+import { ViewControl } from './view-control';
+import React from 'react';
+// A wrapper for positioning the ViewControl component
+export const PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom }) => (React.createElement("div", { style: { position: 'relative', top: '20px', left: '20px' } },
+    React.createElement(ViewControl, { fitBounds: fitBounds, panBy: panBy, zoomBy: zoomBy, zoomLevel: zoomLevel, maxZoom: maxZoom, minZoom: minZoom })));

package/dist/components/view-control.d.ts

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export declare const ViewControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavigationButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavigationButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ZoomControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ZoomControlButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare class ViewControl extends PureComponent {
+    static displayName: string;
+    static propTypes: {
+        fitBounds: PropTypes.Requireable<(...args: any[]) => any>;
+        panBy: PropTypes.Requireable<(...args: any[]) => any>;
+        zoomBy: PropTypes.Requireable<(...args: any[]) => any>;
+        zoomLevel: PropTypes.Requireable<number>;
+        minZoom: PropTypes.Requireable<number>;
+        maxZoom: PropTypes.Requireable<number>;
+        deltaPan: PropTypes.Requireable<number>;
+        deltaZoom: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        fitBounds: () => void;
+        panBy: () => void;
+        zoomBy: () => void;
+        deltaPan: number;
+        deltaZoom: number;
+        minZoom: number;
+        maxZoom: number;
+    };
+    panUp: () => any;
+    panDown: () => any;
+    panLeft: () => any;
+    panRight: () => any;
+    zoomIn: () => any;
+    zoomOut: () => any;
+    onChangeZoomLevel: (evt: any) => void;
+    render(): React.JSX.Element;
+}

package/dist/components/view-control.js

@@ -0,0 +1,128 @@
+// @ts-nocheck TODO
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { LongPressButton } from './long-press-button';
+export const ViewControlWrapper = styled.div `
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 99;
+  user-select: none;
+`;
+export const NavigationButtonContainer = styled.div `
+  background: #f7f7f7;
+  border-radius: 23px;
+  border: 0.5px solid #eaeaea;
+  box-shadow: inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49);
+  height: 46px;
+  width: 46px;
+`;
+export const NavigationButton = styled.div `
+  color: #848484;
+  cursor: pointer;
+  left: ${(props) => props.left};
+  position: absolute;
+  top: ${(props) => props.top};
+  transform: rotate(${(props) => props.rotate || 0}deg);
+
+  &:hover,
+  &:active {
+    color: #00ade6;
+  }
+`;
+export const ZoomControlWrapper = styled.div `
+  align-items: center;
+  background: #f7f7f7;
+  border: 0.5px solid #eaeaea;
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+  padding: 2px 0;
+  width: 18px;
+`;
+export const VerticalSlider = styled.div `
+  display: inline-block;
+  height: 100px;
+  padding: 0;
+  width: 10px;
+
+  > input[type='range'][orient='vertical'] {
+    -webkit-appearance: slider-vertical;
+    height: 100px;
+    padding: 0;
+    margin: 0;
+    width: 10px;
+  }
+`;
+export const ZoomControlButton = styled.div `
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin: -4px;
+
+  &:hover,
+  &:active {
+    color: #00ade6;
+  }
+`;
+export class ViewControl extends PureComponent {
+    static displayName = 'ViewControl';
+    static propTypes = {
+        // functions
+        fitBounds: PropTypes.func,
+        panBy: PropTypes.func,
+        zoomBy: PropTypes.func,
+        // current zoom level
+        zoomLevel: PropTypes.number,
+        // configuration
+        minZoom: PropTypes.number,
+        maxZoom: PropTypes.number,
+        deltaPan: PropTypes.number,
+        deltaZoom: PropTypes.number
+    };
+    static defaultProps = {
+        fitBounds: () => { },
+        panBy: () => { },
+        zoomBy: () => { },
+        deltaPan: 10,
+        deltaZoom: 0.1,
+        minZoom: 0.1,
+        maxZoom: 1
+    };
+    // pan actions
+    panUp = () => this.props.panBy(0, this.props.deltaPan);
+    panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);
+    panLeft = () => this.props.panBy(this.props.deltaPan, 0);
+    panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);
+    // zoom actions
+    zoomIn = () => this.props.zoomBy(this.props.deltaZoom);
+    zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);
+    onChangeZoomLevel = (evt) => {
+        const delta = evt.target.value - this.props.zoomLevel;
+        this.props.zoomBy(delta);
+    };
+    render() {
+        const buttons = [
+            { top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '▲', key: 'up' },
+            { top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '◀', key: 'left' },
+            { top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '▶', key: 'right' },
+            { top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '▼', key: 'down' }
+        ];
+        return (React.createElement(ViewControlWrapper, null,
+            React.createElement(NavigationButtonContainer, null,
+                buttons.map((b) => (React.createElement(NavigationButton, { key: b.key, top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate },
+                    React.createElement(LongPressButton, { onClick: b.onClick }, b.content)))),
+                React.createElement(NavigationButton, { top: '12px', left: '16px', onClick: this.props.fitBounds }, '¤')),
+            React.createElement(ZoomControlWrapper, null,
+                React.createElement(ZoomControlButton, null,
+                    React.createElement(LongPressButton, { onClick: this.zoomIn }, '+')),
+                React.createElement(VerticalSlider, null,
+                    React.createElement("input", { type: "range", value: this.props.zoomLevel, min: this.props.minZoom, max: this.props.maxZoom, step: this.props.deltaZoom, onChange: this.onChangeZoomLevel, 
+                        /* @ts-expect-error */
+                        orient: "vertical" })),
+                React.createElement(ZoomControlButton, null,
+                    React.createElement(LongPressButton, { onClick: this.zoomOut }, '-')))));
+    }
+}