@carto/kepler.gl 0.0.41 → 0.0.42

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

@@ -32,7 +32,6 @@ import LayerColumnConfigFactory from './layer-column-config';
 import LayerTypeSelectorFactory from './layer-type-selector';
 import LayerVisibilityByZoomFactory from './layer-visibility-by-zoom';
 import DimensionScaleSelector from './dimension-scale-selector';
-import ColorSelector from './color-selector';
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
 import VisConfigSwitchFactory from './vis-config-switch';
 import VisConfigSliderFactory from './vis-config-slider';
@@ -45,6 +44,7 @@ import {CHANNEL_SCALES, CHANNEL_SCALE_SUPPORTED_FIELDS} from 'constants/default-
 import {LAYER_TYPES} from 'layers/types';
 import {injectIntl} from 'react-intl';
 import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
+import ColorSelectorFactory from './color-selector';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -99,7 +99,10 @@ LayerConfiguratorFactory.deps = [
   LayerTypeSelectorFactory,
   VisConfigSwitchFactory,
   AggrScaleSelectorFactory,
-  LayerVisibilityByZoomFactory
+  LayerVisibilityByZoomFactory,
+  LayerColorSelectorFactory,
+  LayerColorRangeSelectorFactory,
+  ArcLayerColorSelectorFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -112,7 +115,10 @@ export default function LayerConfiguratorFactory(
   LayerTypeSelector,
   VisConfigSwitch,
   AggrScaleSelector,
-  LayerVisibilityByZoom
+  LayerVisibilityByZoom,
+  LayerColorSelector,
+  LayerColorRangeSelector,
+  ArcLayerColorSelector
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -1020,85 +1026,100 @@ export const HowToButton = ({onClick}) => (
   </StyledHowToButton>
 );
 
-export const LayerColorSelector = ({
-  layer,
-  onChange,
-  label,
-  selectedColor,
-  property = 'color',
-  setColorUI
-}) => (
-  <SidePanelSection>
-    <PanelLabel>
-      <FormattedMessage id="layer.color" />
-    </PanelLabel>
-    <ColorSelector
-      colorSets={[
-        {
-          selectedColor: selectedColor || layer.config.color,
-          setColor: rgbValue => onChange({[property]: rgbValue})
-        }
-      ]}
-      colorUI={layer.config.colorUI[property]}
-      setColorUI={newConfig => setColorUI(property, newConfig)}
-    />
-  </SidePanelSection>
-);
+LayerColorSelectorFactory.deps = [ColorSelectorFactory];
+export function LayerColorSelectorFactory(ColorSelector) {
+  class LayerColorSelector extends Component {
+    render() {
+      const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
+      return (
+        <SidePanelSection>
+          <PanelLabel>
+            <FormattedMessage id="layer.color" />
+          </PanelLabel>
+          <ColorSelector
+            colorSets={[
+              {
+                selectedColor: selectedColor || layer.config.color,
+                setColor: rgbValue => onChange({[property]: rgbValue})
+              }
+            ]}
+            colorUI={layer.config.colorUI[property]}
+            setColorUI={newConfig => setColorUI(property, newConfig)}
+          />
+        </SidePanelSection>
+      );
+    }
+  }
 
-export const ArcLayerColorSelector = ({
-  layer,
-  onChangeConfig,
-  onChangeVisConfig,
-  property = 'color',
-  setColorUI
-}) => (
-  <SidePanelSection>
-    <PanelLabel>
-      <FormattedMessage id="layer.colorRange" />
-    </PanelLabel>
-    <ColorSelector
-      colorSets={[
-        {
-          selectedColor: layer.config.color,
-          setColor: rgbValue => onChangeConfig({color: rgbValue}),
-          label: 'Source'
-        },
-        {
-          selectedColor: layer.config.visConfig.targetColor || layer.config.color,
-          setColor: rgbValue => onChangeVisConfig({targetColor: rgbValue}),
-          label: 'Target'
-        }
-      ]}
-      colorUI={layer.config.colorUI[property]}
-      setColorUI={newConfig => setColorUI(property, newConfig)}
-    />
-  </SidePanelSection>
-);
+  return LayerColorSelector;
+}
 
-export const LayerColorRangeSelector = ({layer, onChange, property = 'colorRange', setColorUI}) => (
-  <SidePanelSection>
-    <PanelLabel>
-      <FormattedMessage id="layer.colorRange" />
-    </PanelLabel>
-    <ColorSelector
-      colorSets={[
-        {
-          selectedColor: layer.config.visConfig[property],
-          isRange: true,
-          setColor: colorRange => {
-            const {colorMap} = layer.config.visConfig[property];
-            const colorRangeUpdated = colorMap
-              ? layer.updateColorMap(property, colorMap, colorRange)
-              : colorRange;
-            onChange({[property]: colorRangeUpdated});
-          }
-        }
-      ]}
-      colorUI={layer.config.colorUI[property]}
-      setColorUI={newConfig => setColorUI(property, newConfig)}
-    />
-  </SidePanelSection>
-);
+ArcLayerColorSelectorFactory.deps = [ColorSelectorFactory];
+export function ArcLayerColorSelectorFactory(ColorSelector) {
+  class ArcLayerColorSelector extends Component {
+    render() {
+      const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
+      return (
+        <SidePanelSection>
+          <PanelLabel>
+            <FormattedMessage id="layer.colorRange" />
+          </PanelLabel>
+          <ColorSelector
+            colorSets={[
+              {
+                selectedColor: layer.config.color,
+                setColor: rgbValue => onChangeConfig({color: rgbValue}),
+                label: 'Source'
+              },
+              {
+                selectedColor: layer.config.visConfig.targetColor || layer.config.color,
+                setColor: rgbValue => onChangeVisConfig({targetColor: rgbValue}),
+                label: 'Target'
+              }
+            ]}
+            colorUI={layer.config.colorUI[property]}
+            setColorUI={newConfig => setColorUI(property, newConfig)}
+          />
+        </SidePanelSection>
+      );
+    }
+  }
+  return ArcLayerColorSelector;
+}
+
+LayerColorRangeSelectorFactory.deps = [ColorSelectorFactory];
+export function LayerColorRangeSelectorFactory(ColorSelector) {
+  class LayerColorRangeSelector extends Component {
+    render() {
+      const {layer, onChange, property = 'colorRange', setColorUI} = this.props;
+      return (
+        <SidePanelSection>
+          <PanelLabel>
+            <FormattedMessage id="layer.colorRange" />
+          </PanelLabel>
+          <ColorSelector
+            colorSets={[
+              {
+                selectedColor: layer.config.visConfig[property],
+                isRange: true,
+                setColor: colorRange => {
+                  const {colorMap} = layer.config.visConfig[property];
+                  const colorRangeUpdated = colorMap
+                    ? layer.updateColorMap(property, colorMap, colorRange)
+                    : colorRange;
+                  onChange({[property]: colorRangeUpdated});
+                }
+              }
+            ]}
+            colorUI={layer.config.colorUI[property]}
+            setColorUI={newConfig => setColorUI(property, newConfig)}
+          />
+        </SidePanelSection>
+      );
+    }
+  }
+  return LayerColorRangeSelector;
+}
 
 ChannelByValueSelectorFactory.deps = [VisConfigByFieldSelectorFactory];
 export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {

package/src/components/side-panel/layer-panel/single-color-palette.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {range} from 'd3-array';
 import styled from 'styled-components';
@@ -26,12 +26,6 @@ import {hexToRgb} from 'utils/color-utils';
 
 import {ColorsByTheme, Themes} from 'constants/color-palette';
 
-const propTypes = {
-  onSelectColor: PropTypes.func.isRequired,
-  // hex value
-  selectedColor: PropTypes.string.isRequired
-};
-
 const PALETTE_HEIGHT = '8px';
 const ROWS = 22;
 
@@ -59,31 +53,46 @@ const StyledColorBlock = styled.div`
   border-width: 1px;
   border-style: solid;
 `;
+SingleColorPaletteFactory.deps = [];
+
+function SingleColorPaletteFactory() {
+  class SingleColorPalette extends Component {
+    static propTypes = {
+      onSelectColor: PropTypes.func.isRequired,
+      // hex value
+      selectedColor: PropTypes.string.isRequired
+    };
 
-const SingleColorPalette = ({selectedColor, onSelectColor}) => (
-  <StyledColorPalette className="single-color-palette">
-    {Themes.map((theme, col) => (
-      <StyledColorColumn key={theme} className="single-color-palette__column">
-        {range(1, ROWS + 1, 1).map((key, i) => (
-          <StyledColorBlock
-            className="single-color-palette__block"
-            style={{
-              backgroundColor: ColorsByTheme[theme][key],
-              borderColor:
-                selectedColor === ColorsByTheme[theme][key].toUpperCase()
-                  ? 'white'
-                  : ColorsByTheme[theme][key]
-            }}
-            key={`${theme}_${key}`}
-            selected={selectedColor === ColorsByTheme[theme][key].toUpperCase()}
-            onClick={e => onSelectColor(hexToRgb(ColorsByTheme[theme][key]), e)}
-          />
-        ))}
-      </StyledColorColumn>
-    ))}
-  </StyledColorPalette>
-);
+    render() {
+      const {selectedColor, onSelectColor} = this.props;
+      return (
+        <StyledColorPalette className="single-color-palette">
+          {Themes.map((theme, col) => (
+            <StyledColorColumn key={theme} className="single-color-palette__column">
+              {range(1, ROWS + 1, 1).map((key, i) => (
+                <StyledColorBlock
+                  className="single-color-palette__block"
+                  style={{
+                    backgroundColor: ColorsByTheme[theme][key],
+                    borderColor:
+                      selectedColor === ColorsByTheme[theme][key].toUpperCase()
+                        ? 'white'
+                        : ColorsByTheme[theme][key]
+                  }}
+                  key={`${theme}_${key}`}
+                  selected={selectedColor === ColorsByTheme[theme][key].toUpperCase()}
+                  onClick={e => onSelectColor(hexToRgb(ColorsByTheme[theme][key]), e)}
+                />
+              ))}
+            </StyledColorColumn>
+          ))}
+        </StyledColorPalette>
+      );
+    }
+  }
+  return SingleColorPalette;
+}
 
-SingleColorPalette.propTypes = propTypes;
+// SingleColorPalette.propTypes = propTypes;
 
-export default SingleColorPalette;
+export default SingleColorPaletteFactory;

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

@@ -30,7 +30,6 @@ import {
   SpaceBetweenFlexbox
 } from 'components/common/styled-components';
 import {Add} from 'components/common/icons';
-import ColorSelector from './color-selector';
 import ItemSelector from 'components/common/item-selector/item-selector';
 import LayerConfigGroupFactory, {
   ConfigGroupCollapsibleContent,
@@ -40,9 +39,15 @@ import RangeSliderFactory from 'components/common/range-slider';
 
 import {LAYER_TEXT_CONFIGS} from 'layers/layer-factory';
 import FieldSelectorFactory from '../../common/field-selector';
+import ColorSelectorFactory from './color-selector';
 
-TextLabelPanelFactory.deps = [RangeSliderFactory, LayerConfigGroupFactory, FieldSelectorFactory];
-function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
+TextLabelPanelFactory.deps = [
+  RangeSliderFactory,
+  LayerConfigGroupFactory,
+  FieldSelectorFactory,
+  ColorSelectorFactory
+];
+function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, ColorSelector) {
   class TextLabelPanel extends Component {
     static propTypes = {
       fields: PropTypes.arrayOf(PropTypes.object),