@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/components/side-panel/layer-panel/layer-config-group.js

@@ -1,237 +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 {polyfill} from 'react-lifecycles-compat';
-import styled from 'styled-components';
-import {Tooltip} from 'components/common/styled-components';
-import classnames from 'classnames';
-import {FormattedMessage} from 'react-intl';
-import Switch from 'components/common/switch';
-import InfoHelperFactory from 'components/common/info-helper';
-import {VertThreeDots} from 'components/common/icons';
-
-export const StyledLayerConfigGroupAction = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${props => props.theme.textColor};
-`;
-
-export const ConfigGroupCollapsibleContent = styled.div.attrs({
-  className: 'layer-config-group__content__collapsible'
-})`
-  overflow: visible;
-  transition: max-height 0.3s ease-out;
-  height: max-content;
-  max-height: 650px;
-`;
-
-export const ConfigGroupCollapsibleHeader = styled.div.attrs({
-  className: 'layer-config-group__header__collapsible'
-})`
-  overflow: visible;
-  overflow: hidden;
-  max-height: 0;
-`;
-
-export const StyledLayerConfigGroup = styled.div`
-  padding-left: ${props => props.theme.layerConfigGroupPaddingLeft}px;
-  margin-bottom: ${props => props.theme.layerConfigGroupMarginBottom}px;
-
-  &.disabled {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-  &.collapsed {
-    .layer-config-group__header__collapsible {
-      overflow: visible;
-      max-height: 650px;
-    }
-    .layer-config-group__content {
-      .layer-config-group__content__collapsible {
-        overflow: hidden;
-        max-height: 0;
-      }
-    }
-  }
-`;
-
-const StyledConfigGroupHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-
-  :hover {
-    cursor: pointer;
-    .layer-config-group__label {
-      color: ${props => props.theme.textColorHl};
-    }
-
-    .layer-config-group__action {
-      color: ${props => props.theme.textColorHl};
-    }
-  }
-`;
-
-const ConfigGroupContent = styled.div`
-  &.disabled {
-    opacity: 0.3;
-    pointer-events: none;
-    * {
-      pointer-events: none;
-    }
-  }
-`;
-
-const StyledLayerConfigGroupSwitch = styled.div`
-  width: ${props => props.theme.switchWidth}px;
-  margin-right: ${props => props.theme.switchLabelMargin}px;
-`;
-
-LayerConfigGroupLabelFactory.deps = [InfoHelperFactory];
-
-export function LayerConfigGroupLabelFactory(InfoHelper) {
-  const StyledLayerConfigGroupLabel = styled.div`
-    border-left: ${props => props.theme.layerConfigGroupLabelBorderLeft} solid
-      ${props => props.theme.labelColor};
-    line-height: 12px;
-    margin-left: ${props => props.theme.layerConfigGroupLabelMargin};
-    padding-left: ${props => props.theme.layerConfigGroupLabelPadding};
-
-    display: flex;
-    align-items: center;
-
-    span {
-      color: ${props => props.theme.textColor};
-      font-weight: 500;
-      letter-spacing: 0.2px;
-      text-transform: capitalize;
-      margin-left: ${props => props.theme.layerConfigGroupLabelLabelMargin};
-      font-size: ${props => props.theme.layerConfigGroupLabelLabelFontSize};
-    }
-  `;
-
-  const LayerConfigGroupLabel = ({label, description}) => (
-    <StyledLayerConfigGroupLabel className="layer-config-group__label">
-      <span>
-        <FormattedMessage id={label || 'misc.empty'} defaultMessage={label} />
-      </span>
-      {description && <InfoHelper description={description} id={label} />}
-    </StyledLayerConfigGroupLabel>
-  );
-
-  return LayerConfigGroupLabel;
-}
-
-LayerConfigGroupFactory.deps = [LayerConfigGroupLabelFactory];
-
-function LayerConfigGroupFactory(LayerConfigGroupLabel) {
-  class LayerConfigGroup extends Component {
-    static defaultProps = {
-      collapsible: false,
-      expanded: false,
-      onChange: () => {},
-      description: null,
-      disabled: false,
-      CollapseButton: ({height}) => <VertThreeDots height={height} />
-    };
-
-    static getDerivedStateFromProps(props, state) {
-      //  invoked after a component is instantiated as well as before it is re-rendered
-      if (props.expanded && state.collapsed) {
-        return {collapsed: false};
-      }
-
-      return null;
-    }
-
-    state = {
-      collapsed: true
-    };
-
-    render() {
-      const {
-        label,
-        children,
-        property,
-        switchTooltip,
-        layer,
-        onChange,
-        collapsible,
-        description,
-        disabled,
-        CollapseButton
-      } = this.props;
-
-      const {collapsed} = this.state;
-
-      return (
-        <StyledLayerConfigGroup
-          className={classnames('layer-config-group', {
-            collapsed: collapsed || disabled,
-            disabled
-          })}
-        >
-          <StyledConfigGroupHeader className="layer-config-group__header">
-            <LayerConfigGroupLabel label={label} description={description} />
-            <StyledLayerConfigGroupAction className="layer-config-group__action">
-              {property ? (
-                <StyledLayerConfigGroupSwitch data-tip data-for={`${layer.id}-${label}-tooltip`}>
-                  <Switch
-                    checked={layer.config.visConfig[property]}
-                    id={`${layer.id}-${property}`}
-                    disabled={disabled}
-                    onChange={() => onChange({[property]: !layer.config.visConfig[property]})}
-                  />
-                  {switchTooltip ? (
-                    <Tooltip id={`${layer.id}-${label}-tooltip`} effect="solid" place="top">
-                      {switchTooltip}
-                    </Tooltip>
-                  ) : null}
-                </StyledLayerConfigGroupSwitch>
-              ) : null}
-              {collapsible ? (
-                <CollapseButton
-                  onClick={() => this.setState({collapsed: !this.state.collapsed})}
-                  active={!this.state.collapsed}
-                  height="18px"
-                />
-              ) : null}
-            </StyledLayerConfigGroupAction>
-          </StyledConfigGroupHeader>
-          <ConfigGroupContent
-            className={classnames('layer-config-group__content', {
-              disabled: (property && !layer.config.visConfig[property]) || disabled
-            })}
-          >
-            {children}
-          </ConfigGroupContent>
-        </StyledLayerConfigGroup>
-      );
-    }
-  }
-
-  polyfill(LayerConfigGroup);
-
-  return LayerConfigGroup;
-}
-
-export default LayerConfigGroupFactory;

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

@@ -1,236 +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, {useState} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styled from 'styled-components';
-import {SortableHandle} from 'react-sortable-hoc';
-import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
-import {Copy, ArrowDown, EyeSeen, EyeUnseen, Trash, VertDots} from 'components/common/icons';
-
-import {InlineInput, StyledPanelHeader} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
-
-const propTypes = {
-  // required
-  layerId: PropTypes.string.isRequired,
-  isVisible: PropTypes.bool.isRequired,
-  onToggleVisibility: PropTypes.func.isRequired,
-  onUpdateLayerLabel: PropTypes.func.isRequired,
-  onToggleEnableConfig: PropTypes.func.isRequired,
-  onRemoveLayer: PropTypes.func.isRequired,
-  onDuplicateLayer: PropTypes.func.isRequired,
-  isConfigActive: PropTypes.bool.isRequired,
-
-  // optional
-  showRemoveLayer: PropTypes.bool,
-  label: PropTypes.string,
-  layerType: PropTypes.string,
-  isDragNDropEnabled: PropTypes.bool,
-  labelRCGColorValues: PropTypes.arrayOf(PropTypes.number)
-};
-
-export const defaultProps = {
-  isDragNDropEnabled: true,
-  showRemoveLayer: true
-};
-
-const StyledLayerPanelHeader = styled(StyledPanelHeader)`
-  height: ${props => props.theme.layerPanelHeaderHeight}px;
-  .layer__remove-layer {
-    opacity: 0;
-  }
-  :hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.panelBackgroundHover};
-
-    .layer__drag-handle {
-      opacity: 1;
-    }
-
-    .layer__remove-layer {
-      opacity: 1;
-    }
-  }
-`;
-
-const HeaderLabelSection = styled.div`
-  display: flex;
-  color: ${props => props.theme.textColor};
-`;
-
-const HeaderActionSection = styled.div`
-  display: flex;
-`;
-
-const StyledDragHandle = styled.div`
-  display: flex;
-  align-items: center;
-  opacity: 0;
-  z-index: 1000;
-
-  :hover {
-    cursor: move;
-    opacity: 1;
-    color: ${props => props.theme.textColorHl};
-  }
-`;
-
-export const DragHandle = SortableHandle(({className, children}) => (
-  <StyledDragHandle className={className}>{children}</StyledDragHandle>
-));
-
-export const LayerLabelEditor = ({layerId, label, onEdit}) => (
-  <InlineInput
-    type="text"
-    className="layer__title__editor"
-    value={label}
-    onClick={e => {
-      e.stopPropagation();
-    }}
-    onChange={onEdit}
-    id={`${layerId}:input-layer-label`}
-  />
-);
-
-export function LayerTitleSectionFactory() {
-  const StyledLayerTitleSection = styled.div`
-    margin-left: 4px;
-
-    .layer__title__type {
-      color: ${props => props.theme.subtextColor};
-      font-size: 10px;
-      line-height: 12px;
-      letter-spacing: 0.37px;
-      text-transform: capitalize;
-    }
-  `;
-  const LayerTitleSection = ({layerType, layerId, label, onUpdateLayerLabel}) => (
-    <StyledLayerTitleSection className="layer__title">
-      <div>
-        <LayerLabelEditor layerId={layerId} label={label} onEdit={onUpdateLayerLabel} />
-        <div className="layer__title__type">
-          {layerType && <FormattedMessage id={`layer.type.${layerType.toLowerCase()}`} />}
-        </div>
-      </div>
-    </StyledLayerTitleSection>
-  );
-  return LayerTitleSection;
-}
-
-LayerPanelHeaderFactory.deps = [LayerTitleSectionFactory, PanelHeaderActionFactory];
-const defaultActionIcons = {
-  remove: Trash,
-  visible: EyeSeen,
-  hidden: EyeUnseen,
-  enableConfig: ArrowDown,
-  duplicate: Copy
-};
-function LayerPanelHeaderFactory(LayerTitleSection, PanelHeaderAction) {
-  const LayerPanelHeader = ({
-    isConfigActive,
-    isDragNDropEnabled,
-    isVisible,
-    label,
-    layerId,
-    layerType,
-    labelRCGColorValues,
-    onToggleVisibility,
-    onUpdateLayerLabel,
-    onToggleEnableConfig,
-    onDuplicateLayer,
-    onRemoveLayer,
-    showRemoveLayer,
-    actionIcons = defaultActionIcons
-  }) => {
-    const [isOpen, setOpen] = useState(false);
-    const toggleLayerConfigurator = e => {
-      setOpen(!isOpen);
-      onToggleEnableConfig(e);
-    };
-    return (
-      <StyledLayerPanelHeader
-        className={classnames('layer-panel__header', {
-          'sort--handle': !isConfigActive
-        })}
-        active={isConfigActive}
-        labelRCGColorValues={labelRCGColorValues}
-        onClick={toggleLayerConfigurator}
-      >
-        <HeaderLabelSection className="layer-panel__header__content">
-          {isDragNDropEnabled && (
-            <DragHandle className="layer__drag-handle">
-              <VertDots height="20px" />
-            </DragHandle>
-          )}
-          <LayerTitleSection
-            layerId={layerId}
-            label={label}
-            onUpdateLayerLabel={onUpdateLayerLabel}
-            layerType={layerType}
-          />
-        </HeaderLabelSection>
-        <HeaderActionSection className="layer-panel__header__actions">
-          {showRemoveLayer ? (
-            <PanelHeaderAction
-              className="layer__remove-layer"
-              id={layerId}
-              tooltip={'tooltip.removeLayer'}
-              onClick={onRemoveLayer}
-              tooltipType="error"
-              IconComponent={actionIcons.remove}
-            />
-          ) : null}
-          <PanelHeaderAction
-            className="layer__visibility-toggle"
-            id={layerId}
-            tooltip={isVisible ? 'tooltip.hideLayer' : 'tooltip.showLayer'}
-            onClick={onToggleVisibility}
-            IconComponent={isVisible ? actionIcons.visible : actionIcons.hidden}
-          />
-          <PanelHeaderAction
-            className="layer__duplicate"
-            id={layerId}
-            tooltip={'tooltip.duplicateLayer'}
-            onClick={onDuplicateLayer}
-            IconComponent={actionIcons.duplicate}
-          />
-          <PanelHeaderAction
-            className={classnames('layer__enable-config ', {
-              'is-open': isOpen
-            })}
-            id={layerId}
-            tooltip={'tooltip.layerSettings'}
-            onClick={toggleLayerConfigurator}
-            IconComponent={actionIcons.enableConfig}
-          />
-        </HeaderActionSection>
-      </StyledLayerPanelHeader>
-    );
-  };
-
-  LayerPanelHeader.propTypes = propTypes;
-  LayerPanelHeader.defaultProps = defaultProps;
-
-  return LayerPanelHeader;
-}
-
-export default LayerPanelHeaderFactory;

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

@@ -1,171 +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 LayerConfiguratorFactory from './layer-configurator';
-import LayerPanelHeaderFactory from './layer-panel-header';
-
-const PanelWrapper = styled.div`
-  font-size: 12px;
-  border-radius: 1px;
-  margin-bottom: 8px;
-  z-index: 1000;
-
-  &.dragging {
-    cursor: move;
-  }
-`;
-
-LayerPanelFactory.deps = [LayerConfiguratorFactory, LayerPanelHeaderFactory];
-
-function LayerPanelFactory(LayerConfigurator, LayerPanelHeader) {
-  class LayerPanel extends Component {
-    static propTypes = {
-      layer: PropTypes.object.isRequired,
-      datasets: PropTypes.object.isRequired,
-      idx: PropTypes.number.isRequired,
-      layerConfigChange: PropTypes.func.isRequired,
-      layerTypeChange: PropTypes.func.isRequired,
-      openModal: PropTypes.func.isRequired,
-      removeLayer: PropTypes.func.isRequired,
-      duplicateLayer: PropTypes.func.isRequired,
-      onCloseConfig: PropTypes.func,
-      layerTypeOptions: PropTypes.arrayOf(PropTypes.any),
-      layerVisConfigChange: PropTypes.func.isRequired,
-      layerVisualChannelConfigChange: PropTypes.func.isRequired,
-      layerColorUIChange: PropTypes.func.isRequired,
-      setLayerAnimationTime: PropTypes.func,
-      updateLayerAnimationSpeed: PropTypes.func,
-      updateLayerVisualChannelConfigCallback: PropTypes.func
-    };
-
-    updateLayerConfig = newProp => {
-      this.props.layerConfigChange(this.props.layer, newProp);
-    };
-
-    updateLayerType = newType => {
-      this.props.layerTypeChange(this.props.layer, newType);
-    };
-
-    updateLayerVisConfig = newVisConfig => {
-      this.props.layerVisConfigChange(this.props.layer, newVisConfig);
-    };
-
-    updateLayerColorUI = (...args) => {
-      this.props.layerColorUIChange(this.props.layer, ...args);
-    };
-
-    updateLayerTextLabel = (...args) => {
-      this.props.layerTextLabelChange(this.props.layer, ...args);
-    };
-
-    updateLayerVisualChannelConfig = (newConfig, channel, scaleKey) => {
-      this.props.layerVisualChannelConfigChange(this.props.layer, newConfig, channel, scaleKey);
-      this.props.updateLayerVisualChannelConfigCallback &&
-        this.props.updateLayerVisualChannelConfigCallback(
-          newConfig,
-          channel,
-          this.updateLayerConfig
-        );
-    };
-
-    _updateLayerLabel = ({target: {value}}) => {
-      this.updateLayerConfig({label: value});
-    };
-
-    _toggleVisibility = e => {
-      e.stopPropagation();
-      const isVisible = !this.props.layer.config.isVisible;
-      this.updateLayerConfig({isVisible});
-    };
-
-    _toggleEnableConfig = e => {
-      e.stopPropagation();
-      const {
-        layer: {
-          config: {isConfigActive}
-        }
-      } = this.props;
-      this.updateLayerConfig({isConfigActive: !isConfigActive});
-    };
-
-    _removeLayer = e => {
-      e.stopPropagation();
-      this.props.removeLayer(this.props.idx);
-    };
-
-    _duplicateLayer = e => {
-      e.stopPropagation();
-      this.props.duplicateLayer(this.props.idx);
-    };
-
-    render() {
-      const {layer, datasets, layerTypeOptions, disabled} = this.props;
-      const {config} = layer;
-      const {isConfigActive} = config;
-
-      return (
-        <PanelWrapper
-          active={isConfigActive}
-          className={`layer-panel ${this.props.className}`}
-          style={this.props.style}
-          onMouseDown={this.props.onMouseDown}
-          onTouchStart={this.props.onTouchStart}
-        >
-          <LayerPanelHeader
-            isConfigActive={isConfigActive}
-            layerId={layer.id}
-            isVisible={config.isVisible}
-            label={config.label}
-            labelRCGColorValues={config.dataId ? datasets[config.dataId].color : null}
-            layerType={layer.type}
-            onToggleEnableConfig={this._toggleEnableConfig}
-            onToggleVisibility={this._toggleVisibility}
-            onUpdateLayerLabel={this._updateLayerLabel}
-            onRemoveLayer={this._removeLayer}
-            onDuplicateLayer={this._duplicateLayer}
-          />
-          {isConfigActive && (
-            <LayerConfigurator
-              layer={layer}
-              disabled={disabled}
-              datasets={datasets}
-              layerTypeOptions={layerTypeOptions}
-              openModal={this.props.openModal}
-              updateLayerColorUI={this.updateLayerColorUI}
-              updateLayerConfig={this.updateLayerConfig}
-              updateLayerVisualChannelConfig={this.updateLayerVisualChannelConfig}
-              updateLayerType={this.updateLayerType}
-              updateLayerTextLabel={this.updateLayerTextLabel}
-              updateLayerVisConfig={this.updateLayerVisConfig}
-            />
-          )}
-        </PanelWrapper>
-      );
-    }
-  }
-
-  return LayerPanel;
-}
-
-export default LayerPanelFactory;