@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/components/common/logo.js

@@ -1,92 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-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

@@ -1,54 +0,0 @@
-// 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

@@ -1,233 +0,0 @@
-// 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

@@ -1,264 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-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;