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

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

@@ -0,0 +1,70 @@
+// 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 {FormattedMessage} from 'localization';
+import {PanelLabel} from '../..';
+import FieldSelectorFactory from 'components/common/field-selector';
+import {validateColumn} from 'reducers/vis-state-merger';
+
+const ColumnRow = styled.div`
+  display: flex;
+  margin-bottom: 8px;
+  align-items: center;
+`;
+
+const ColumnName = styled.div`
+  width: 27%;
+  line-height: 1.2;
+  padding-right: 6px;
+`;
+
+const ColumnSelect = styled.div`
+  width: 73%;
+`;
+
+ColumnSelectorFactory.deps = [FieldSelectorFactory];
+
+function ColumnSelectorFactory(FieldSelector) {
+  const ColumnSelector = ({column, columns, label, allFields, onSelect, fieldPairs}) => (
+    <ColumnRow className="layer-config__column__selector">
+      <ColumnName className="layer-config__column__name">
+        <PanelLabel>
+          <FormattedMessage id={`columns.${label}`} />
+          {!column.optional ? `  *` : null}
+        </PanelLabel>
+      </ColumnName>
+      <ColumnSelect className="layer-config__column__select">
+        <FieldSelector
+          suggested={fieldPairs}
+          error={!validateColumn(column, columns, allFields)}
+          fields={allFields}
+          value={column.value}
+          erasable={Boolean(column.optional)}
+          onSelect={onSelect}
+        />
+      </ColumnSelect>
+    </ColumnRow>
+  );
+  return ColumnSelector;
+}
+
+export default ColumnSelectorFactory;

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

@@ -0,0 +1,30 @@
+// 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';
+
+export default function CustomMarkersConfigGroupFactory() {
+  const CustomMarkersConfigGroup = () => {
+    return <div>To be overriden</div>;
+  };
+  return CustomMarkersConfigGroup;
+}
+
+CustomMarkersConfigGroupFactory.deps = [];

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

@@ -0,0 +1,296 @@
+// 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 classnames from 'classnames';
+import PropTypes from 'prop-types';
+import styled, {css} from 'styled-components';
+import {SortableContainer, SortableElement, SortableHandle} from 'react-sortable-hoc';
+import Portaled from 'components/common/portaled';
+
+import {Button, InlineInput} from 'components/common/styled-components';
+import {VertDots, Trash} from 'components/common/icons';
+import ColorPalette from './color-palette';
+import CustomPicker from './custom-picker';
+import {arrayMove} from 'utils/data-utils';
+import {FormattedMessage} from 'react-intl';
+
+const dragHandleActive = css`
+  .layer__drag-handle {
+    color: ${props => props.theme.textColorHl};
+    opacity: 1;
+    cursor: move;
+  }
+`;
+
+const StyledSortableItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  z-index: ${props => props.theme.dropdownWrapperZ + 1};
+
+  :not(.sorting) {
+    :hover {
+      background-color: ${props => props.theme.panelBackgroundHover};
+      ${dragHandleActive};
+    }
+  }
+
+  &.sorting-colors {
+    background-color: ${props => props.theme.panelBackgroundHover};
+    ${dragHandleActive};
+  }
+`;
+
+const StyledDragHandle = styled.div`
+  display: flex;
+  align-items: center;
+  opacity: 0;
+`;
+
+const StyledTrash = styled.div`
+  color: ${props => props.theme.textColor};
+  svg {
+    :hover {
+      color: ${props => props.theme.subtextColorActive};
+    }
+  }
+  height: 12px;
+  margin-left: auto;
+  margin-right: 12px;
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledLine = styled.div`
+  width: calc(100% - 16px);
+  height: 1px;
+  background-color: ${props => props.theme.labelColor};
+  margin-top: 8px;
+  margin-left: 8px;
+`;
+
+const StyledSwatch = styled.div.attrs({
+  className: 'custom-palette__swatch'
+})`
+  background-color: ${props => props.color};
+  width: 32px;
+  height: 18px;
+  display: inline-block;
+  :hover {
+    box-shadow: ${props => props.theme.boxShadow};
+    cursor: pointer;
+  }
+`;
+
+const StyledColorRange = styled.div`
+  padding: 0 8px;
+  :hover {
+    background-color: ${props => props.theme.panelBackgroundHover};
+    cursor: pointer;
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  margin-top: 11px;
+  display: flex;
+  direction: rtl;
+`;
+
+const StyledInlineInput = styled.div.attrs({
+  className: 'custom-palette__input'
+})`
+  margin-left: 12px;
+  input {
+    color: ${props => props.theme.textColorHl};
+    font-size: 10px;
+  }
+`;
+
+const SortableItem = SortableElement(({children, isSorting}) => (
+  <StyledSortableItem
+    className={classnames('custom-palette__sortable-items', {sorting: isSorting})}
+  >
+    {children}
+  </StyledSortableItem>
+));
+
+// TODO: Should className be applied to the div here?
+const WrappedSortableContainer = SortableContainer(({children, className}) => (
+  <div className={className}>{children}</div>
+));
+
+const DragHandle = SortableHandle(({className, children}) => (
+  <StyledDragHandle className={className}>{children}</StyledDragHandle>
+));
+
+class CustomPalette extends Component {
+  static propTypes = {
+    customPalette: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      category: PropTypes.string,
+      colors: PropTypes.arrayOf(PropTypes.string)
+    }),
+    setCustomPalette: PropTypes.func,
+    showSketcher: PropTypes.oneOfType([PropTypes.bool, PropTypes.number])
+  };
+
+  state = {
+    isSorting: false
+  };
+
+  root = createRef();
+
+  _setColorPaletteUI(colors) {
+    this.props.setCustomPalette({
+      colors
+    });
+  }
+
+  _onPickerUpdate = color => {
+    const {colors} = this.props.customPalette;
+    const newColors = [...colors];
+    newColors[this.props.showSketcher] = color.hex;
+    this._setColorPaletteUI(newColors);
+  };
+
+  _onColorDelete = index => {
+    const {colors} = this.props.customPalette;
+    const newColors = [...colors];
+    if (newColors.length > 1) {
+      newColors.splice(index, 1);
+    }
+    this._setColorPaletteUI(newColors);
+  };
+
+  _onColorAdd = () => {
+    const {colors} = this.props.customPalette;
+    // add the last color
+    const newColors = [...colors, colors[colors.length - 1]];
+    this._setColorPaletteUI(newColors);
+  };
+
+  _onSwatchClick = index => {
+    this.props.onToggleSketcher(index);
+  };
+
+  _onSwatchClose = () => {
+    this.props.onToggleSketcher(false);
+  };
+
+  _onApply = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    this.props.onApply(this.props.customPalette, event);
+  };
+
+  _onSortEnd = ({oldIndex, newIndex}) => {
+    const {colors} = this.props.customPalette;
+    const newColors = arrayMove(colors, oldIndex, newIndex);
+    this._setColorPaletteUI(newColors);
+    this.setState({isSorting: false});
+  };
+
+  _onSortStart = () => {
+    this.setState({isSorting: true});
+  };
+
+  _inputColorHex = (index, {target: {value}}) => {
+    const {colors} = this.props.customPalette;
+    const newColors = [...colors];
+    newColors[index] = value.toUpperCase();
+    this._setColorPaletteUI(newColors);
+  };
+
+  render() {
+    const {colors} = this.props.customPalette;
+
+    return (
+      <div className="custom-palette-panel" ref={this.root}>
+        <StyledColorRange>
+          <ColorPalette colors={colors} />
+        </StyledColorRange>
+        <WrappedSortableContainer
+          className="custom-palette-container"
+          onSortEnd={this._onSortEnd}
+          onSortStart={this._onSortStart}
+          lockAxis="y"
+          helperClass="sorting-colors"
+          useDragHandle
+        >
+          {colors.map((color, index) => (
+            <SortableItem key={index} index={index} isSorting={this.state.isSorting}>
+              <DragHandle className="layer__drag-handle">
+                <VertDots height="20px" />
+              </DragHandle>
+              <StyledSwatch color={color} onClick={() => this._onSwatchClick(index)} />
+              <StyledInlineInput>
+                <InlineInput
+                  type="text"
+                  className="custom-palette-hex__input"
+                  value={color.toUpperCase()}
+                  onClick={e => {
+                    e.stopPropagation();
+                  }}
+                  onChange={e => this._inputColorHex(index, e)}
+                  id={`input-layer-label-${index}`}
+                />
+              </StyledInlineInput>
+              <StyledTrash
+                className="custom-palette__trash"
+                onClick={() => this._onColorDelete(index)}
+              >
+                <Trash className="trashbin" />
+              </StyledTrash>
+            </SortableItem>
+          ))}
+        </WrappedSortableContainer>
+        <div className="custom-palette-actions">
+          {/* Add Step Button */}
+          <Button className="add-step__button" link onClick={this._onColorAdd}>
+            <FormattedMessage id="customPalette.addStep" />
+          </Button>
+          <StyledLine className="custom-palette-actions__separator" />
+          {/* Cancel or Confirm Buttons */}
+          <StyledButtonContainer>
+            <Button className="confirm-apply__button" link onClick={this._onApply}>
+              <FormattedMessage id="customPalette.apply" />
+            </Button>
+            <Button className="cancel-apply__button" link onClick={this.props.onCancel}>
+              <FormattedMessage id="customPalette.cancel" />
+            </Button>
+          </StyledButtonContainer>
+        </div>
+        <Portaled isOpened={this.props.showSketcher !== false} left={280} top={-300}>
+          <CustomPicker
+            color={colors[this.props.showSketcher]}
+            onChange={this._onPickerUpdate}
+            onSwatchClose={this._onSwatchClose}
+          />
+        </Portaled>
+      </div>
+    );
+  }
+}
+
+export default CustomPalette;

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

@@ -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, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styled, {withTheme} from 'styled-components';
+import {SketchPicker} from 'react-color';
+import onClickOutside from 'react-onclickoutside';
+import {createSelector} from 'reselect';
+// This was put in because 3rd party library react-color doesn't yet cater for customized color of child component <SketchField> which contains HEX/RGB input text box
+// Issue raised: https://github.com/casesandberg/react-color/issues/631
+
+const StyledPicker = styled.div`
+  .sketch-picker {
+    span {
+      color: ${props => props.theme.labelColor} !important;
+      font-family: ${props => props.theme.fontFamily};
+    }
+    input {
+      text-align: center;
+      font-family: ${props => props.theme.fontFamily};
+      color: ${props => props.theme.inputColor} !important;
+      border-color: ${props => props.theme.secondaryInputBgd} !important;
+      box-shadow: none !important;
+      background-color: ${props => props.theme.inputBgdHover} !important;
+    }
+  }
+`;
+
+const PRESET_COLORS = [];
+
+class CustomPicker extends Component {
+  static propTypes = {
+    color: PropTypes.string,
+    onChange: PropTypes.func,
+    onSwatchClose: PropTypes.func
+  };
+
+  themeSelector = props => props.theme;
+  pickerStyleSelector = createSelector(this.themeSelector, theme => ({
+    picker: {
+      width: '200px',
+      padding: '10px 10px 8px',
+      boxSizing: 'initial',
+      background: theme.panelBackground
+    }
+  }));
+
+  handleClickOutside = e => {
+    this.props.onSwatchClose();
+  };
+
+  render() {
+    const {color, onChange} = this.props;
+    /** @type {any} - TS complains this doesn't match SketchPickerStylesProps */
+    const pickerStyle = this.pickerStyleSelector(this.props);
+    return (
+      <StyledPicker>
+        <SketchPicker
+          color={color}
+          onChange={onChange}
+          presetColors={PRESET_COLORS}
+          styles={pickerStyle}
+          disableAlpha
+        />
+      </StyledPicker>
+    );
+  }
+}
+
+export default withTheme(onClickOutside(CustomPicker));

package/src/components/side-panel/layer-panel/dimension-scale-selector.js

@@ -0,0 +1,48 @@
+// 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 {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import {FormattedMessage} from 'localization';
+import {camelize} from 'utils/utils';
+
+const DimensionScaleSelector = ({label, onSelect, options, scaleType, disabled = false}) => {
+  return (
+    <SidePanelSection>
+      <PanelLabel>
+        <FormattedMessage
+          id={label ? `scale.${camelize(label)}` : 'misc.scale'}
+          defaultMessage={label}
+        />
+      </PanelLabel>
+      <ItemSelector
+        disabled={disabled}
+        selectedItems={scaleType}
+        options={options}
+        multiSelect={false}
+        searchable={false}
+        onChange={onSelect}
+      />
+    </SidePanelSection>
+  );
+};
+
+export default DimensionScaleSelector;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import {injectIntl} from 'react-intl';
+
+LayerAggregationResolutionFactory.deps = [];
+function LayerAggregationResolutionFactory() {
+  const LayerAggregationResolution = () => {
+    return <div>Component replaced by cloud native</div>;
+  };
+
+  return injectIntl(LayerAggregationResolution);
+}
+
+export default LayerAggregationResolutionFactory;

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

@@ -0,0 +1,113 @@
+// 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, useMemo} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import ColumnSelectorFactory from './column-selector';
+
+const TopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+LayerColumnConfigFactory.deps = [ColumnSelectorFactory];
+
+function LayerColumnConfigFactory(ColumnSelector) {
+  const LayerColumnConfig = ({
+    columnPairs,
+    fieldPairs,
+    columns,
+    columnLabels,
+    fields,
+    updateLayerConfig,
+    assignColumn,
+    assignColumnPairs
+  }) => {
+    const enhancedFieldPairs = useMemo(
+      () =>
+        columnPairs && fieldPairs
+          ? fieldPairs.map(fp => ({
+              name: fp.defaultName,
+              type: 'point',
+              pair: fp.pair
+            }))
+          : null,
+      [columnPairs, fieldPairs]
+    );
+
+    const onUpdateColumn = useCallback(
+      (key, value) => {
+        const assignedColumns =
+          value && value.pair && columnPairs
+            ? assignColumnPairs(key, value.pair)
+            : assignColumn(key, value);
+
+        updateLayerConfig({columns: assignedColumns});
+      },
+      [updateLayerConfig, columnPairs, assignColumnPairs, assignColumn]
+    );
+
+    return (
+      <div>
+        <SidePanelSection>
+          <div className="layer-config__column">
+            <TopRow>
+              <PanelLabel>
+                <FormattedMessage id={'columns.title'} />
+              </PanelLabel>
+              <PanelLabel>
+                <FormattedMessage id="layer.required" />
+              </PanelLabel>
+            </TopRow>
+            {Object.keys(columns).map(key => (
+              <ColumnSelector
+                column={columns[key]}
+                columns={columns}
+                label={(columnLabels && columnLabels[key]) || key}
+                key={key}
+                allFields={fields}
+                fieldPairs={enhancedFieldPairs}
+                onSelect={val => onUpdateColumn(key, val)}
+              />
+            ))}
+          </div>
+        </SidePanelSection>
+      </div>
+    );
+  };
+
+  LayerColumnConfig.propTypes = {
+    columns: PropTypes.object.isRequired,
+    fields: PropTypes.arrayOf(PropTypes.any).isRequired,
+    assignColumnPairs: PropTypes.func.isRequired,
+    assignColumn: PropTypes.func.isRequired,
+    updateLayerConfig: PropTypes.func.isRequired,
+    columnPairs: PropTypes.object,
+    fieldPairs: PropTypes.arrayOf(PropTypes.any),
+    columnLabels: PropTypes.object
+  };
+
+  return LayerColumnConfig;
+}
+
+export default LayerColumnConfigFactory;