@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/common/loading-spinner.tsx

@@ -0,0 +1,75 @@
+// 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, {keyframes} from 'styled-components';
+
+const animationName = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const Loader = styled.span`
+    border-left-color: ${props => props.color || props.theme.primaryBtnBgd};
+    animation: _preloader_spin_ 500ms linear infinite;
+    border-radius: 50%;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-right-color: transparent;
+    cursor: wait;
+    border-style: solid;
+    display: block;
+    animation-name: ${animationName};
+}`;
+
+interface LoadingWrapper {
+  borderColor?: string;
+}
+
+const LoadingWrapper = styled.div<LoadingWrapper>`
+  border-radius: 50%;
+  border: 3px solid ${props => props.borderColor || props.theme.borderColorLT};
+  padding: 2px;
+`;
+
+interface LoadingSpinnerProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  gap?: number;
+}
+
+const LoadingSpinner = ({size = 32, color = '', strokeWidth = 3, gap = 2}: LoadingSpinnerProps) => (
+  <LoadingWrapper style={{width: `${size}px`, height: `${size}px`, padding: `${gap}px`}}>
+    <Loader
+      color={color}
+      style={{
+        width: `${size - strokeWidth * 2 - gap * 2}px`,
+        height: `${size - strokeWidth * 2 - gap * 2}px`
+      }}
+    />
+  </LoadingWrapper>
+);
+
+export default LoadingSpinner;

package/src/components/common/logo.tsx

@@ -0,0 +1,88 @@
+// 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 {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>
+);
+interface KeplerGlLogoProps {
+  appName?: string;
+  version?: string | boolean;
+  appWebsite?: string;
+}
+
+const KeplerGlLogo = ({
+  appName = KEPLER_GL_NAME,
+  appWebsite = KEPLER_GL_WEBSITE,
+  version = KEPLER_GL_VERSION
+}: KeplerGlLogoProps) => (
+  <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>
+);
+
+export default KeplerGlLogo;

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

@@ -0,0 +1,64 @@
+// 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;
+  }
+`;
+interface Layer {
+  id: string;
+  name: string;
+  isVisible: boolean;
+}
+
+interface MapLayerSelectorProps {
+  layers: Layer[];
+  onMapToggleLayer: (layerId: string) => void;
+}
+
+/** @type {typeof import('./map-layer-selector').default} */
+const MapLayerSelector = ({layers, onMapToggleLayer}: MapLayerSelectorProps) => (
+  <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.tsx

@@ -0,0 +1,238 @@
+// 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, ReactNode} from 'react';
+import {FormattedMessage} from 'localization';
+
+import styled, {FlattenSimpleInterpolation} 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';
+
+interface ModalContentWrapperProps {
+  cssStyle?: FlattenSimpleInterpolation | string;
+}
+
+const ModalContentWrapper = styled.div<ModalContentWrapperProps>`
+  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>
+  );
+};
+
+export interface ModalDialogProps {
+  footer: boolean;
+  close: boolean;
+  isOpen: boolean;
+  title?: string;
+  className?: string;
+  onConfirm: (...args: any) => any;
+  onCancel: (...args: any) => any;
+  confirmButton: object;
+  confirmButtonLabel?: string;
+  cancelButton: object;
+  cancelButtonLabel?: string;
+  cssStyle?: FlattenSimpleInterpolation | string;
+  style?: React.CSSProperties;
+  theme: any;
+  children?: ReactNode;
+}
+
+export class ModalDialog extends Component<ModalDialogProps> {
+  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}>
+          {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;