@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/common/logo.js

@@ -0,0 +1,92 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {KEPLER_GL_NAME, KEPLER_GL_VERSION, KEPLER_GL_WEBSITE} from 'constants/default-settings';
+
+const LogoTitle = styled.div`
+  display: inline-block;
+  margin-left: 6px;
+`;
+
+const LogoName = styled.div`
+  .logo__link {
+    color: ${props => props.theme.logoColor};
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 1.17px;
+  }
+`;
+const LogoVersion = styled.div`
+  font-size: 10px;
+  color: ${props => props.theme.subtextColor};
+  letter-spacing: 0.83px;
+  line-height: 14px;
+`;
+
+const LogoWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const LogoSvgWrapper = styled.div`
+  margin-top: 3px;
+`;
+
+const LogoSvg = () => (
+  <svg className="side-panel-logo__logo" width="22px" height="15px" viewBox="0 0 22 15">
+    <g transform="translate(11, -3) rotate(45.000000)">
+      <rect fill="#535C6C" x="0" y="5" width="10" height="10" />
+      <rect fill="#1FBAD6" x="5" y="0" width="10" height="10" />
+    </g>
+  </svg>
+);
+
+const KeplerGlLogo = ({appName, appWebsite = KEPLER_GL_WEBSITE, version}) => (
+  <LogoWrapper className="side-panel-logo">
+    <LogoSvgWrapper>
+      <LogoSvg />
+    </LogoSvgWrapper>
+    <LogoTitle className="logo__title">
+      <LogoName className="logo__name">
+        <a className="logo__link" target="_blank" rel="noopener noreferrer" href={appWebsite}>
+          {appName}
+        </a>
+      </LogoName>
+      {version ? <LogoVersion className="logo__version">{version}</LogoVersion> : null}
+    </LogoTitle>
+  </LogoWrapper>
+);
+
+KeplerGlLogo.propTypes = {
+  appName: PropTypes.string,
+  version: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  appWebsite: PropTypes.string
+};
+
+KeplerGlLogo.defaultProps = {
+  appName: KEPLER_GL_NAME,
+  version: KEPLER_GL_VERSION,
+  appWebsite: KEPLER_GL_WEBSITE
+};
+
+export default KeplerGlLogo;

package/src/components/common/map-layer-selector.d.ts

@@ -0,0 +1,10 @@
+import {FunctionComponent} from 'react';
+import {Layer} from 'reducers';
+
+export type MapLayerSelectorProps = {
+  layers: ReadonlyArray<Layer>,
+  onMapToggleLayer: (layerId: string) => void
+};
+
+const MapLayerSelector: FunctionComponent<MapLayerSelectorProps>;
+export default MapLayerSelector;

package/src/components/common/map-layer-selector.js

@@ -0,0 +1,54 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import Checkbox from 'components/common/checkbox';
+import {generateHashId} from '../../utils/utils';
+
+const MapLayerSelect = styled.div`
+  padding: 12px;
+
+  .map-layer-selector__item {
+    margin: 12px 0;
+  }
+`;
+
+/** @type {typeof import('./map-layer-selector').default} */
+const MapLayerSelector = ({layers, onMapToggleLayer}) => (
+  <MapLayerSelect className="map-layer-selector">
+    {layers.map((layer, index) => (
+      <div key={layer.id} className="map-layer-selector__item">
+        <Checkbox
+          type="radio"
+          checked={layer.isVisible}
+          id={`${layer.id}-toggle-${generateHashId(4)}`}
+          label={layer.name}
+          onChange={e => {
+            e.preventDefault();
+            onMapToggleLayer(layer.id);
+          }}
+        />
+      </div>
+    ))}
+  </MapLayerSelect>
+);
+
+export default MapLayerSelector;

package/src/components/common/modal.js

@@ -0,0 +1,233 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'localization';
+
+import styled from 'styled-components';
+import Modal from 'react-modal';
+import {Delete} from 'components/common/icons';
+import {Button} from 'components/common/styled-components';
+import {media} from 'styles/media-breakpoints';
+
+const ModalContentWrapper = styled.div`
+  overflow-y: auto;
+  max-width: 70vw;
+  max-height: 85vh;
+  padding: 24px 72px 40px;
+  position: relative;
+  top: 92px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  background-color: #ffffff;
+  border-radius: 4px;
+  transition: ${props => props.theme.transition};
+  box-sizing: border-box;
+  font-size: 12px;
+  color: ${props => props.theme.labelColorLT};
+
+  ${media.portable`
+    padding: 12px 36px 24px;
+    max-width: 80vw;
+  `}
+
+  ${media.palm`
+    max-width: 100vw;
+  `}
+
+  ${props => props.cssStyle || ''};
+`;
+
+const ModalContent = styled.div`
+  position: relative;
+  z-index: ${props => props.theme.modalContentZ};
+`;
+
+export const ModalTitle = styled.div`
+  font-size: ${props => props.theme.modalTitleFontSize};
+  color: ${props => props.theme.modalTitleColor};
+  margin-bottom: 10px;
+  position: relative;
+  z-index: ${props => props.theme.modalTitleZ};
+`;
+
+const StyledModalFooter = styled.div`
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-top: 24px;
+  ${media.portable`
+    padding-top: 24px;
+  `};
+
+  ${media.palm`
+    padding-top: 16px;
+  `};
+  z-index: ${props => props.theme.modalFooterZ};
+`;
+
+const CloseButton = styled.div`
+  color: ${props => props.theme.titleColorLT};
+  display: flex;
+  justify-content: flex-end;
+  z-index: ${props => props.theme.modalButtonZ};
+  position: absolute;
+  top: 24px;
+  right: 24px;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const FooterActionWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const defaultCancelButton = {
+  link: true,
+  large: true,
+  children: 'modal.button.defaultCancel'
+};
+
+const defaultConfirmButton = {
+  cta: true,
+  large: true,
+  width: '160px',
+  children: 'modal.button.defaultConfirm'
+};
+
+export const ModalFooter = ({cancel, confirm, cancelButton, confirmButton}) => {
+  const cancelButtonProps = {...defaultCancelButton, ...cancelButton};
+  const confirmButtonProps = {...defaultConfirmButton, ...confirmButton};
+  return (
+    <StyledModalFooter className="modal--footer">
+      <FooterActionWrapper>
+        <Button className="modal--footer--cancel-button" {...cancelButtonProps} onClick={cancel}>
+          <FormattedMessage id={cancelButtonProps.children} />
+        </Button>
+        <Button className="modal--footer--confirm-button" {...confirmButtonProps} onClick={confirm}>
+          <FormattedMessage id={confirmButtonProps.children} />
+        </Button>
+      </FooterActionWrapper>
+    </StyledModalFooter>
+  );
+};
+
+class ModalDialog extends Component {
+  static propTypes = {
+    footer: PropTypes.bool,
+    close: PropTypes.bool,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    confirmButton: PropTypes.object,
+    confirmButtonLabel: PropTypes.string,
+    cancelButton: PropTypes.object,
+    cancelButtonLabel: PropTypes.string,
+    cssStyle: PropTypes.arrayOf(PropTypes.any)
+  };
+
+  static defaultProps = {
+    footer: false,
+    close: true,
+    onConfirm: () => {},
+    onCancel: () => {},
+    cancelButton: defaultCancelButton,
+    confirmButton: defaultConfirmButton,
+    cssStyle: []
+  };
+
+  render() {
+    const {props} = this;
+    return (
+      <Modal
+        className={this.props.className}
+        {...props}
+        ariaHideApp={false}
+        style={{
+          overlay: {
+            backgroundColor: (props.theme && props.theme.modalOverlayBgd) || 'rgba(0, 0, 0, 0.5)',
+            zIndex: (props.theme && props.theme.modalOverLayZ) || 1000,
+            // in case we want to override the modal dialog style
+            ...props.style
+          }
+        }}
+      >
+        <ModalContentWrapper
+          className="modal--wrapper"
+          cssStyle={props.cssStyle}
+          footer={props.footer}
+        >
+          {props.close && (
+            <CloseButton className="modal--close" onClick={props.onCancel}>
+              <Delete height="14px" />
+            </CloseButton>
+          )}
+          <div>
+            {props.title && (
+              <ModalTitle className="modal--title">
+                <FormattedMessage id={props.title} />
+              </ModalTitle>
+            )}
+            <ModalContent className="modal--body">{props.children}</ModalContent>
+            {props.footer && (
+              <ModalFooter
+                cancel={props.onCancel}
+                confirm={props.onConfirm}
+                cancelButton={props.cancelButton}
+                confirmButton={props.confirmButton}
+              />
+            )}
+          </div>
+        </ModalContentWrapper>
+      </Modal>
+    );
+  }
+}
+
+const StyledModal = styled(ModalDialog)`
+  top: 0;
+  left: 0;
+  transition: ${props => props.theme.transition};
+  padding-left: 40px;
+  padding-right: 40px;
+
+  ${media.portable`
+    padding-left: 24px;
+    padding-right: 24px;
+  `};
+
+  ${media.palm`
+    padding-left: 0;
+    padding-right: 0;
+  `};
+
+  :focus {
+    outline: 0;
+  }
+`;
+
+export default StyledModal;

package/src/components/common/portaled.js

@@ -0,0 +1,264 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, createRef} from 'react';
+import debounce from 'lodash.debounce';
+import isEqual from 'lodash.isequal';
+
+import {canUseDOM} from 'exenv';
+import {withTheme} from 'styled-components';
+import {RootContext} from 'components/context';
+import Modal from 'react-modal';
+import window from 'global/window';
+import {theme} from 'styles/base';
+
+const listeners = {};
+
+const startListening = () => Object.keys(listeners).forEach(key => listeners[key]());
+
+const getPageOffset = () => ({
+  x:
+    window.pageXOffset !== undefined
+      ? window.pageXOffset
+      : (document.documentElement || document.body.parentNode || document.body).scrollLeft,
+  y:
+    window.pageYOffset !== undefined
+      ? window.pageYOffset
+      : (document.documentElement || document.body.parentNode || document.body).scrollTop
+});
+
+const addEventListeners = () => {
+  if (document && document.body)
+    document.body.addEventListener('mousewheel', debounce(startListening, 100, true));
+  window.addEventListener('resize', debounce(startListening, 50, true));
+};
+
+export const getChildPos = ({offsets, rect, childRect, pageOffset, padding}) => {
+  const {topOffset, leftOffset, rightOffset} = offsets;
+
+  const anchorLeft = leftOffset !== undefined;
+  const pos = {
+    top: pageOffset.y + rect.top + (topOffset || 0),
+    ...(anchorLeft
+      ? {left: pageOffset.x + rect.left + leftOffset}
+      : {right: window.innerWidth - rect.right - pageOffset.x + (rightOffset || 0)})
+  };
+
+  const leftOrRight = anchorLeft ? 'left' : 'right';
+
+  if (pos[leftOrRight] && pos[leftOrRight] < 0) {
+    pos[leftOrRight] = padding;
+  } else if (pos[leftOrRight] && pos[leftOrRight] + childRect.width > window.innerWidth) {
+    pos[leftOrRight] = window.innerWidth - childRect.width - padding;
+  }
+
+  if (pos.top < 0) {
+    pos.top = padding;
+  } else if (pos.top + childRect.height > window.innerHeight) {
+    pos.top = window.innerHeight - childRect.height - padding;
+  }
+
+  return pos;
+};
+
+if (canUseDOM) {
+  if (document.body) {
+    addEventListeners();
+  } else {
+    document.addEventListener('DOMContentLoaded', addEventListeners);
+  }
+}
+
+let listenerIdCounter = 0;
+function subscribe(fn) {
+  listenerIdCounter += 1;
+  const id = listenerIdCounter;
+  listeners[id] = fn;
+  return () => delete listeners[id];
+}
+
+const defaultModalStyle = {
+  content: {
+    top: 0,
+    left: 0,
+    border: 0,
+    right: 'auto',
+    bottom: 'auto',
+    padding: '0px 0px 0px 0px'
+  },
+  overlay: {
+    right: 'auto',
+    bottom: 'auto',
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: 'rgba(0, 0, 0, 0)'
+  }
+};
+
+const WINDOW_PAD = 20;
+
+const noop = () => {};
+
+class Portaled extends Component {
+  static defaultProps = {
+    component: 'div',
+    onClose: noop,
+    theme
+  };
+
+  state = {
+    pos: null,
+    isVisible: false
+  };
+
+  componentDidMount() {
+    // relative
+    this.unsubscribe = subscribe(this.handleScroll);
+    this.handleScroll();
+  }
+
+  componentDidUpdate(prevProps) {
+    const didOpen = this.props.isOpened && !prevProps.isOpened;
+    const didClose = !this.props.isOpened && prevProps.isOpened;
+    if (didOpen || didClose) {
+      window.requestAnimationFrame(() => {
+        if (this._unmounted) return;
+        this.setState({isVisible: didOpen});
+      });
+    }
+
+    this.handleScroll();
+  }
+
+  componentWillUnmount() {
+    this._unmounted = true;
+    // @ts-ignore
+    this.unsubscribe();
+  }
+
+  element = createRef();
+  child = createRef();
+
+  // eslint-disable-next-line complexity
+  handleScroll = () => {
+    if (this.child.current) {
+      const rect = this.element.current.getBoundingClientRect();
+      const childRect = this.child.current && this.child.current.getBoundingClientRect();
+      const pageOffset = getPageOffset();
+      const {top: topOffset, left: leftOffset, right: rightOffset} = this.props;
+
+      const pos = getChildPos({
+        offsets: {topOffset, leftOffset, rightOffset},
+        rect,
+        childRect,
+        pageOffset,
+        padding: WINDOW_PAD
+      });
+
+      if (!isEqual(pos, this.state.pos)) {
+        this.setState({pos});
+      }
+    }
+  };
+
+  render() {
+    const {
+      // relative
+      component: Comp,
+      overlayZIndex,
+      isOpened,
+      onClose,
+
+      // Modal
+      children,
+      modalProps,
+      modalStyle = {}
+    } = this.props;
+
+    const {isVisible, pos} = this.state;
+
+    const newModalStyle = {
+      ...defaultModalStyle,
+      content: {
+        ...(modalStyle.content || {})
+      },
+      overlay: {
+        ...defaultModalStyle.overlay,
+        ...(modalStyle.overlay || {}),
+        // needs to be on top of existing modal
+        zIndex: overlayZIndex || 9999
+      }
+    };
+
+    return (
+      <RootContext.Consumer>
+        {context => (
+          <Comp ref={this.element}>
+            {isOpened ? (
+              <Modal
+                className="modal-portal"
+                {...modalProps}
+                ariaHideApp={false}
+                isOpen
+                style={newModalStyle}
+                parentSelector={() => {
+                  // React modal issue: https://github.com/reactjs/react-modal/issues/769
+                  // failed to execute removeChild on parent node when it is already unmounted
+                  return (
+                    // @ts-ignore
+                    (context && context.current) || {
+                      removeChild: () => {},
+                      appendChild: () => {}
+                    }
+                  );
+                }}
+              >
+                <div
+                  className="portaled-content"
+                  key="item"
+                  style={{
+                    position: 'fixed',
+                    opacity: isVisible ? 1 : 0,
+                    top: this.state.top,
+                    marginTop: isVisible ? '0px' : '14px',
+                    // @ts-ignore
+                    ...pos
+                  }}
+                >
+                  <div
+                    ref={this.child}
+                    style={{
+                      position: 'absolute',
+                      zIndex: overlayZIndex ? overlayZIndex + 1 : 10000
+                    }}
+                  >
+                    {children}
+                  </div>
+                </div>
+              </Modal>
+            ) : null}
+          </Comp>
+        )}
+      </RootContext.Consumer>
+    );
+  }
+}
+
+export default withTheme(Portaled);

package/src/components/common/progress-bar.d.ts

@@ -0,0 +1,13 @@
+import {FunctionComponent} from 'react';
+
+export type ProgressBarProps = {
+  percent: string,
+  height?: number,
+  isLoading: boolean,
+  barColor: any;
+  trackColor?: any;
+  theme: object;
+};
+
+const ProgressBar: FunctionComponent<ProgressBarProps>;
+export default ProgressBar;