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

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

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

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

package/src/components/side-panel/layer-panel/layer-type-dropdown-list.js

@@ -0,0 +1,105 @@
+// 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 styled from 'styled-components';
+import classNames from 'classnames';
+import {classList} from '../../common/item-selector/dropdown-list';
+
+const DropdownListWrapper = styled.div`
+  ${props => props.theme.dropdownList};
+  background-color: ${props => props.theme.dropdownListBgd};
+  border-top: 1px solid ${props => props.theme.dropdownListBorderTop};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: ${props => props.theme.layerTypeIconPdL}px 0 0 ${props => props.theme.layerTypeIconPdL}px;
+`;
+
+const StyledDropdownListItem = styled.div`
+  padding-bottom: ${props => props.theme.layerTypeIconPdL}px;
+  padding-right: ${props => props.theme.layerTypeIconPdL}px;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  &.selected {
+    .layer-type-selector__item__icon {
+      border: 1px solid #caf2f4;
+    }
+  }
+
+  :hover,
+  &.selected {
+    cursor: pointer;
+    .layer-type-selector__item__icon {
+      color: ${props => props.theme.activeColor};
+    }
+
+    .layer-type-selector__item__label {
+      color: ${props => props.theme.textColor};
+    }
+  }
+`;
+
+export function LayerTypeDropdownListFactory() {
+  const LayerTypeDropdownList = ({
+    onOptionSelected,
+    options,
+    selectedItems,
+    selectionIndex,
+    customListItemComponent
+  }) => {
+    const onSelectOption = useCallback(
+      (e, value) => {
+        e.preventDefault();
+        onOptionSelected(value, e);
+      },
+      [onOptionSelected]
+    );
+
+    const Component = customListItemComponent;
+
+    return (
+      <DropdownListWrapper className={classList.list}>
+        {options.map((value, i) => (
+          <StyledDropdownListItem
+            className={classNames('layer-type-selector__item', {
+              selected: selectedItems.find(it => it.id === value.id),
+              hover: selectionIndex === i,
+              disabled: value.disabled
+            })}
+            key={`${value.id}_${i}`}
+            onMouseDown={e => onSelectOption(e, value)}
+            onClick={e => onSelectOption(e, value)}
+          >
+            <Component value={value} isTile />
+          </StyledDropdownListItem>
+        ))}
+      </DropdownListWrapper>
+    );
+  };
+
+  return LayerTypeDropdownList;
+}
+
+export default LayerTypeDropdownListFactory;

package/src/components/side-panel/layer-panel/layer-type-list-item.js

@@ -0,0 +1,83 @@
+// 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 {CLOUDFRONT} from 'constants/default-settings';
+import classNames from 'classnames';
+import {FormattedMessage} from 'localization';
+
+const ITEM_SIZE = {
+  large: 50,
+  small: 28
+};
+
+const StyledListItem = styled.div`
+  &.list {
+    display: flex;
+    align-items: center;
+
+    .layer-type-selector__item__icon {
+      color: ${props => props.theme.activeColor};
+      background-size: ${props => props.theme.layerTypeIconSizeSM}px
+        ${props => props.theme.layerTypeIconSizeSM}px;
+      margin-right: 12px;
+    }
+  }
+
+  .layer-type-selector__item__icon {
+    color: ${props => props.theme.labelColor};
+    display: flex;
+    background-image: url(${`${CLOUDFRONT}/kepler.gl-layer-icon-bg.png`});
+    background-size: ${props => props.theme.layerTypeIconSizeL}px
+      ${props => props.theme.layerTypeIconSizeL}px;
+  }
+
+  .layer-type-selector__item__label {
+    text-transform: capitalize;
+    font-size: 12px;
+    text-align: center;
+    color: ${props => props.theme.selectColor};
+  }
+`;
+
+export function LayerTypeListItemFactory() {
+  const LayerTypeListItem = ({value, isTile}) => (
+    <StyledListItem
+      className={classNames('layer-type-selector__item__inner', {
+        list: !isTile
+      })}
+    >
+      <div className="layer-type-selector__item__icon">
+        <value.icon height={`${isTile ? ITEM_SIZE.large : ITEM_SIZE.small}px`} />
+      </div>
+      <div className="layer-type-selector__item__label">
+        <FormattedMessage
+          id={`layer.type.${value.label.toLowerCase()}`}
+          defaultMessage={value.label}
+        />
+      </div>
+    </StyledListItem>
+  );
+
+  return LayerTypeListItem;
+}
+
+export default LayerTypeListItemFactory;

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

@@ -0,0 +1,89 @@
+// 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, {useMemo} from 'react';
+import PropTypes from 'prop-types';
+import styled, {withTheme} from 'styled-components';
+
+import LayerTypeDropdownListFactory from './layer-type-dropdown-list';
+import LayerTypeListItemFactory from './layer-type-list-item';
+import ItemSelector from 'components/common/item-selector/item-selector';
+
+import {SidePanelSection} from 'components/common/styled-components';
+
+const propTypes = {
+  layer: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired
+};
+
+const StyledLayerTypeSelector = styled.div`
+  .item-selector .item-selector__dropdown {
+    padding: 4px 10px 4px 2px;
+  }
+`;
+
+LayerTypeSelectorFactory.deps = [LayerTypeListItemFactory, LayerTypeDropdownListFactory];
+
+const getDisplayOption = op => op.label;
+const getOptionValue = op => op.id;
+
+function LayerTypeSelectorFactory(LayerTypeListItem, LayerTypeDropdownList) {
+  const LayerTypeSelector = ({layer, layerTypeOptions, onSelect, datasets}) => {
+    const hasData = useMemo(() => Boolean(Object.keys(datasets).length), [datasets]);
+    const typeOptions = useMemo(
+      () =>
+        layerTypeOptions.map(op => ({
+          ...op,
+          disabled: !hasData && op.requireData !== false
+        })),
+      [hasData, layerTypeOptions]
+    );
+
+    const selectedItems = useMemo(() => typeOptions.find(op => op.id === layer.type), [
+      typeOptions,
+      layer.type
+    ]);
+
+    return (
+      <SidePanelSection>
+        <StyledLayerTypeSelector className="layer-config__type">
+          <ItemSelector
+            selectedItems={selectedItems}
+            options={typeOptions}
+            multiSelect={false}
+            placeholder="placeholder.selectType"
+            onChange={onSelect}
+            getOptionValue={getOptionValue}
+            filterOption="label"
+            displayOption={getDisplayOption}
+            DropDownLineItemRenderComponent={LayerTypeListItem}
+            DropDownRenderComponent={LayerTypeDropdownList}
+          />
+        </StyledLayerTypeSelector>
+      </SidePanelSection>
+    );
+  };
+
+  LayerTypeSelector.propTypes = propTypes;
+
+  return withTheme(LayerTypeSelector);
+}
+
+export default LayerTypeSelectorFactory;