@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/side-panel/panel-header.js

@@ -1,321 +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 styled from 'styled-components';
-import PropTypes from 'prop-types';
-import {createSelector} from 'reselect';
-import {Tooltip} from 'components/common/styled-components';
-import KeplerGlLogo from 'components/common/logo';
-import {Save, DataTable, Save2, Picture, Db, Map as MapIcon, Share} from 'components/common/icons';
-import ClickOutsideCloseDropdown from 'components/side-panel/panel-dropdown';
-import Toolbar from 'components/common/toolbar';
-import ToolbarItem from 'components/common/toolbar-item';
-import {FormattedMessage} from 'localization';
-
-const StyledPanelHeader = styled.div.attrs({
-  className: 'side-side-panel__header'
-})`
-  background-color: ${props => props.theme.sidePanelHeaderBg};
-  padding: 12px 16px 0 16px;
-`;
-
-const StyledPanelHeaderTop = styled.div.attrs({
-  className: 'side-panel__header__top'
-})`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  width: 100%;
-`;
-
-const StyledPanelTopActions = styled.div.attrs({
-  className: 'side-panel__top__actions'
-})`
-  display: flex;
-`;
-
-const StyledPanelAction = styled.div.attrs({
-  className: 'side-panel__panel-header__action'
-})`
-  align-items: center;
-  border-radius: 2px;
-  color: ${props => (props.active ? props.theme.textColorHl : props.theme.subtextColor)};
-  display: flex;
-  height: 26px;
-  justify-content: space-between;
-  margin-left: 4px;
-  padding: 5px;
-  font-weight: bold;
-  p {
-    display: inline-block;
-    margin-right: 6px;
-  }
-  a {
-    height: 20px;
-  }
-
-  :hover {
-    cursor: pointer;
-    color: ${props => props.theme.textColorHl};
-
-    a {
-      color: ${props => props.theme.textColorHl};
-    }
-  }
-`;
-
-const StyledToolbar = styled(Toolbar)`
-  position: absolute;
-`;
-
-export const PanelAction = ({item, onClick}) => (
-  <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
-    {item.label ? <p>{item.label}</p> : null}
-    <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
-      <item.iconComponent height="20px" {...item.iconComponentProps} />
-    </a>
-    {item.tooltip ? (
-      <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500} effect="solid">
-        <FormattedMessage id={item.tooltip} />
-      </Tooltip>
-    ) : null}
-  </StyledPanelAction>
-);
-
-export const PanelHeaderDropdownFactory = () => {
-  const PanelHeaderDropdown = ({items, show, onClose, id}) => {
-    return (
-      <StyledToolbar show={show} className={`${id}-dropdown`}>
-        <ClickOutsideCloseDropdown
-          className="panel-header-dropdown__inner"
-          show={show}
-          onClose={onClose}
-        >
-          {items.map(item => (
-            <ToolbarItem
-              id={item.key}
-              key={item.key}
-              label={item.label}
-              icon={item.icon}
-              onClick={item.onClick}
-              onClose={onClose}
-            />
-          ))}
-        </ClickOutsideCloseDropdown>
-      </StyledToolbar>
-    );
-  };
-
-  return PanelHeaderDropdown;
-};
-
-const getDropdownItemsSelector = () =>
-  createSelector(
-    props => props,
-    props =>
-      props.items
-        .map(t => ({
-          ...t,
-          onClick: t.onClick && t.onClick(props) ? t.onClick(props) : null
-        }))
-        .filter(l => l.onClick)
-  );
-
-export const SaveExportDropdownFactory = PanelHeaderDropdown => {
-  const dropdownItemsSelector = getDropdownItemsSelector();
-
-  const SaveExportDropdown = props => (
-    <PanelHeaderDropdown
-      items={dropdownItemsSelector(props)}
-      show={props.show}
-      onClose={props.onClose}
-      id="save-export"
-    />
-  );
-
-  SaveExportDropdown.defaultProps = {
-    items: [
-      {
-        label: 'toolbar.exportImage',
-        icon: Picture,
-        key: 'image',
-        onClick: props => props.onExportImage
-      },
-      {
-        label: 'toolbar.exportData',
-        icon: DataTable,
-        key: 'data',
-        onClick: props => props.onExportData
-      },
-      {
-        label: 'toolbar.exportMap',
-        icon: MapIcon,
-        key: 'map',
-        onClick: props => props.onExportMap
-      },
-      {
-        label: 'toolbar.saveMap',
-        icon: Save2,
-        key: 'save',
-        onClick: props => props.onSaveMap
-      },
-      {
-        label: 'toolbar.shareMapURL',
-        icon: Share,
-        key: 'share',
-        onClick: props => props.onShareMap
-      }
-    ]
-  };
-
-  return SaveExportDropdown;
-};
-SaveExportDropdownFactory.deps = [PanelHeaderDropdownFactory];
-
-export const CloudStorageDropdownFactory = PanelHeaderDropdown => {
-  const dropdownItemsSelector = getDropdownItemsSelector();
-
-  const CloudStorageDropdown = props => (
-    <PanelHeaderDropdown
-      items={dropdownItemsSelector(props)}
-      show={props.show}
-      onClose={props.onClose}
-      id="cloud-storage"
-    />
-  );
-  CloudStorageDropdown.defaultProps = {
-    items: [
-      {
-        label: 'Save',
-        icon: Save2,
-        key: 'save',
-        onClick: props => props.onSaveToStorage
-      },
-      {
-        label: 'Save As',
-        icon: Save2,
-        key: 'saveAs',
-        onClick: props => props.onSaveAsToStorage
-      }
-    ]
-  };
-  return CloudStorageDropdown;
-};
-CloudStorageDropdownFactory.deps = [PanelHeaderDropdownFactory];
-
-PanelHeaderFactory.deps = [SaveExportDropdownFactory, CloudStorageDropdownFactory];
-
-function PanelHeaderFactory(SaveExportDropdown, CloudStorageDropdown) {
-  return class PanelHeader extends Component {
-    static propTypes = {
-      appName: PropTypes.string,
-      appWebsite: PropTypes.string,
-      version: PropTypes.string,
-      visibleDropdown: PropTypes.string,
-      logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-      actionItems: PropTypes.arrayOf(PropTypes.any),
-      onExportImage: PropTypes.func,
-      onExportData: PropTypes.func,
-      onExportConfig: PropTypes.func,
-      onExportMap: PropTypes.func,
-      onSaveToStorage: PropTypes.func,
-      onSaveAsToStorage: PropTypes.func,
-      onSaveMap: PropTypes.func,
-      onShareMap: PropTypes.func
-    };
-
-    static defaultProps = {
-      logoComponent: KeplerGlLogo,
-      actionItems: [
-        {
-          id: 'storage',
-          iconComponent: Db,
-          tooltip: 'tooltip.cloudStorage',
-          onClick: () => {},
-          dropdownComponent: CloudStorageDropdown
-        },
-        {
-          id: 'save',
-          iconComponent: Save,
-          onClick: () => {},
-          label: 'Share',
-          dropdownComponent: SaveExportDropdown
-        }
-      ]
-    };
-
-    render() {
-      const {
-        appName,
-        appWebsite,
-        version,
-        actionItems,
-        visibleDropdown,
-        showExportDropdown,
-        hideExportDropdown,
-        ...dropdownCallbacks
-      } = this.props;
-      let items = actionItems || [];
-
-      // don't render cloud storage icon if onSaveToStorage is not provided
-      if (typeof this.props.onSaveToStorage !== 'function') {
-        items = actionItems.filter(ai => ai.id !== 'storage');
-      }
-
-      return (
-        <StyledPanelHeader className="side-panel__panel-header">
-          <StyledPanelHeaderTop className="side-panel__panel-header__top">
-            <this.props.logoComponent appName={appName} version={version} appWebsite={appWebsite} />
-            <StyledPanelTopActions>
-              {items.map(item => (
-                <div
-                  className="side-panel__panel-header__right"
-                  key={item.id}
-                  style={{position: 'relative'}}
-                >
-                  <PanelAction
-                    item={item}
-                    onClick={() => {
-                      if (item.dropdownComponent) {
-                        showExportDropdown(item.id);
-                      } else {
-                        item.onClick && item.onClick(this.props);
-                      }
-                    }}
-                  />
-                  {item.dropdownComponent ? (
-                    <item.dropdownComponent
-                      onClose={hideExportDropdown}
-                      show={visibleDropdown === item.id}
-                      {...dropdownCallbacks}
-                    />
-                  ) : null}
-                </div>
-              ))}
-            </StyledPanelTopActions>
-          </StyledPanelHeaderTop>
-        </StyledPanelHeader>
-      );
-    }
-  };
-}
-
-export default PanelHeaderFactory;

package/src/components/side-panel/panel-tab.js

@@ -1,62 +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 {Tooltip} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
-
-export const StyledPanelTab = styled.div.attrs({
-  className: 'side-panel__tab'
-})`
-  align-items: flex-end;
-  border-bottom-style: solid;
-  border-bottom-width: 2px;
-  border-bottom-color: ${props =>
-    props.active ? props.theme.panelToggleBorderColor : 'transparent'};
-  color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.panelTabColor)};
-  display: flex;
-  justify-content: center;
-  margin-right: ${props => props.theme.panelToggleMarginRight}px;
-  padding-bottom: ${props => props.theme.panelToggleBottomPadding}px;
-  width: ${props => props.theme.panelTabWidth};
-
-  :hover {
-    cursor: pointer;
-    color: ${props => props.theme.textColorHl};
-  }
-`;
-
-export function PanelTabFactory() {
-  const PanelTab = ({isActive, onClick, panel}) => (
-    <StyledPanelTab data-tip data-for={`${panel.id}-nav`} active={isActive} onClick={onClick}>
-      <panel.iconComponent height="20px" />
-      <Tooltip id={`${panel.id}-nav`} effect="solid" delayShow={500} place="bottom">
-        <span>
-          <FormattedMessage id={panel.label || panel.id} />
-        </span>
-      </Tooltip>
-    </StyledPanelTab>
-  );
-
-  return PanelTab;
-}
-
-export default PanelTabFactory;

package/src/components/side-panel/panel-title.js

@@ -1,32 +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 styled from 'styled-components';
-
-const PanelTitleFactory = () => styled.div`
-  color: ${props => props.theme.titleTextColor};
-  font-size: ${props => props.theme.sidePanelTitleFontsize};
-  line-height: ${props => props.theme.sidePanelTitleLineHeight};
-  font-weight: 400;
-  letter-spacing: 1.25px;
-  margin-bottom: 14px;
-`;
-
-export default PanelTitleFactory;

package/src/components/side-panel/panel-toggle.js

@@ -1,70 +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, {useCallback} from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import PanelTabFactory from './panel-tab';
-
-const propTypes = {
-  panels: PropTypes.arrayOf(PropTypes.object),
-  activePanel: PropTypes.string,
-  togglePanel: PropTypes.func
-};
-
-const PanelHeaderBottom = styled.div.attrs({
-  className: 'side-side-panel__header__bottom'
-})`
-  background-color: ${props => props.theme.sidePanelHeaderBg};
-  border-bottom: 1px solid ${props => props.theme.sidePanelHeaderBorder};
-  padding: 0 16px;
-  display: flex;
-  min-height: 30px;
-`;
-
-PanelToggleFactory.deps = [PanelTabFactory];
-function PanelToggleFactory(PanelTab) {
-  const PanelToggle = ({activePanel, panels, togglePanel}) => {
-    const onClick = useCallback(
-      panel => {
-        const callback = panel.onClick || togglePanel;
-        callback(panel.id);
-      },
-      [togglePanel]
-    );
-    return (
-      <PanelHeaderBottom>
-        {panels.map(panel => (
-          <PanelTab
-            key={panel.id}
-            panel={panel}
-            isActive={activePanel === panel.id}
-            onClick={() => onClick(panel)}
-          />
-        ))}
-      </PanelHeaderBottom>
-    );
-  };
-
-  PanelToggle.propTypes = propTypes;
-  return PanelToggle;
-}
-
-export default PanelToggleFactory;

package/src/components/side-panel/side-bar.js

@@ -1,136 +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 styled from 'styled-components';
-import {ArrowRight} from 'components/common/icons';
-
-const StyledSidePanelContainer = styled.div`
-  z-index: 99;
-  height: 100%;
-  width: ${props => props.width + 2 * props.theme.sidePanel.margin.left}px;
-  display: flex;
-  transition: width 250ms;
-  position: absolute;
-  padding-top: ${props => props.theme.sidePanel.margin.top}px;
-  padding-right: ${props => props.theme.sidePanel.margin.right}px;
-  padding-bottom: ${props => props.theme.sidePanel.margin.bottom}px;
-  padding-left: ${props => props.theme.sidePanel.margin.left}px;
-  pointer-events: none; /* prevent padding from blocking input */
-  & > * {
-    /* all children should allow input */
-    pointer-events: all;
-  }
-`;
-
-const SideBarContainer = styled.div`
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: left 250ms, right 250ms;
-  left: ${props => props.left}px;
-  align-items: stretch;
-  flex-grow: 1;
-`;
-
-const SideBarInner = styled.div`
-  background-color: ${props => props.theme.sidePanelBg};
-  border-radius: 1px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-left: ${props => props.theme.sidePanelBorder}px solid
-    ${props => props.theme.sidePanelBorderColor};
-`;
-
-const StyledCollapseButton = styled.div`
-  align-items: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  justify-content: center;
-  background-color: ${props => props.theme.sideBarCloseBtnBgd};
-  border-radius: 1px;
-  color: ${props => props.theme.sideBarCloseBtnColor};
-  display: flex;
-  height: 20px;
-  position: absolute;
-  right: -8px;
-  top: ${props => props.theme.sidePanel.margin.top}px;
-  width: 20px;
-
-  :hover {
-    cursor: pointer;
-    box-shadow: none;
-    background-color: ${props => props.theme.sideBarCloseBtnBgdHover};
-  }
-`;
-
-export const CollapseButtonFactory = () => {
-  const CollapseButton = ({onClick, isOpen}) => (
-    <StyledCollapseButton className="side-bar__close" onClick={onClick}>
-      <ArrowRight height="12px" style={{transform: `rotate(${isOpen ? 180 : 0}deg)`}} />
-    </StyledCollapseButton>
-  );
-  return CollapseButton;
-};
-
-SidebarFactory.deps = [CollapseButtonFactory];
-
-function SidebarFactory(CollapseButton) {
-  return class SideBar extends Component {
-    static propTypes = {
-      width: PropTypes.number,
-      isOpen: PropTypes.bool,
-      minifiedWidth: PropTypes.number,
-      onOpenOrClose: PropTypes.func
-    };
-
-    static defaultProps = {
-      width: 300,
-      minifiedWidth: 0,
-      isOpen: true,
-      onOpenOrClose: function noop() {}
-    };
-
-    _onOpenOrClose = () => {
-      this.props.onOpenOrClose({isOpen: !this.props.isOpen});
-    };
-
-    render() {
-      const {isOpen, minifiedWidth, width} = this.props;
-      const horizontalOffset = isOpen ? 0 : minifiedWidth - width;
-
-      return (
-        <StyledSidePanelContainer width={isOpen ? width : 0} className="side-panel--container">
-          <SideBarContainer
-            className="side-bar"
-            style={{width: `${width}px`}}
-            left={horizontalOffset}
-          >
-            {isOpen ? (
-              <SideBarInner className="side-bar__inner">{this.props.children}</SideBarInner>
-            ) : null}
-            <CollapseButton isOpen={isOpen} onClick={this._onOpenOrClose} />
-          </SideBarContainer>
-        </StyledSidePanelContainer>
-      );
-    }
-  };
-}
-
-export default SidebarFactory;

package/src/components/side-panel.d.ts

@@ -1,33 +0,0 @@
-import {ComponentType} from 'react';
-import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
-import {Layer, LayerClassesType} from '../layers';
-
-import * as MapStyleActions from 'actions/map-style-actions';
-import * as VisStateActions from 'actions/vis-state-actions';
-import * as MapStateActions from 'actions/map-state-actions';
-
-export type SidePanelItem = {
-  id: stirng;
-  label: string;
-  iconComponent: ComponentType<any>;
-};
-
-export type SidePanelProps = {
-  filters: Filter;
-  interactionConfig: InteractionConfig;
-  layerBlending: stirng;
-  layers: Layer;
-  layerClasses: LayerClassesType;
-  mapStyle: MapStyle;
-  width: number;
-  datasets: Datasets;
-  visStateActions: typeof VisStateActions;
-  mapStateActions: typeof MapStateActions;
-  mapStyleActions: typeof MapStyleActions;
-  availableProviders: object;
-  mapSaved?: string | null;
-  panels: SidePanelItem[];
-};
-
-export const SidePanel: PureComponent<SidePanelProps>;
-export default function SidePanelFactory(): PureComponent<SidePanelProps>;