[Enhancement] export more layer configurator components (keplergl#1176)

Signed-off-by: Shan He <[email protected]>
leidix · Jul 10, 2020 · 3688d3e · 3688d3e
1 parent 177efd6
commit 3688d3e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -20,6 +20,7 @@
 
 import TimeRangeSliderFactory from './common/time-range-slider';
 import RangeSliderFactory from './common/range-slider';
+import VisConfigSliderFactory from './side-panel/layer-panel/vis-config-slider';
 import {appInjector} from './container';
 
 // Components
@@ -48,7 +49,6 @@ export {AddDataButtonFactory, default as LayerManagerFactory} from './side-panel
 export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel';
 export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer-panel-header';
 export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
-export {default as VisConfigSliderFactory} from './side-panel/layer-panel/vis-config-slider';
 export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
 
 export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
@@ -134,12 +134,24 @@ export {default as FileUploadProgress} from './common/file-uploader/file-upload-
 export {default as Slider} from './common/slider/slider';
 export {default as DatasetSquare} from './common/styled-components';
 
+// side pane components
+export {default as LayerConfigGroup} from './side-panel/layer-panel/layer-config-group';
+export {default as LayerTypeSelector} from './side-panel/layer-panel/layer-type-selector';
+
+export {
+  ChannelByValueSelector, 
+  HowToButton,
+  LayerColorRangeSelector,
+  LayerColorSelector
+} from './side-panel/layer-panel/layer-configurator'
+
 export * from './common/styled-components';
 import * as Icons from './common/icons';
 export {Icons};
 
 // Individual Component from Dependency Tree
 export const TimeRangeSlider = appInjector.get(TimeRangeSliderFactory);
 export const RangeSlider = appInjector.get(RangeSliderFactory);
+export const VisConfigSlider = appInjector.get(VisConfigSliderFactory);
 
-export {TimeRangeSliderFactory, RangeSliderFactory};
+export {TimeRangeSliderFactory, RangeSliderFactory, VisConfigSliderFactory};
diff --git a/src/components/side-panel/layer-panel/layer-config-group.js b/src/components/side-panel/layer-panel/layer-config-group.js
@@ -162,7 +162,7 @@ class LayerConfigGroup extends Component {
         >
           <StyledLayerConfigGroupLabel className="layer-config-group__label">
             <span>
-              <FormattedMessage id={label || 'misc.empty'} />
+              <FormattedMessage id={label || 'misc.empty'} defaultMessage={label}/>
             </span>
             {description && <InfoHelper description={description} id={label} />}
           </StyledLayerConfigGroupLabel>

diff --git a/src/components/side-panel/layer-panel/layer-panel.js b/src/components/side-panel/layer-panel/layer-panel.js
@@ -124,7 +124,8 @@ function LayerPanelFactory(LayerConfigurator, LayerPanelHeader) {
             layerId={layer.id}
             isVisible={config.isVisible}
             label={config.label}
-            labelRCGColorValues={datasets[config.dataId].color}
+            labelRCGColorValues={
+              config.dataId ? datasets[config.dataId].color : null}
             layerType={layer.type}
             onToggleEnableConfig={this._toggleEnableConfig}
             onToggleVisibility={this._toggleVisibility}

diff --git a/src/components/side-panel/layer-panel/layer-type-selector.js b/src/components/side-panel/layer-panel/layer-type-selector.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import styled from 'styled-components';
+import styled, {withTheme} from 'styled-components';
 
 import {classList} from 'components/common/item-selector/dropdown-list';
 import ItemSelector from 'components/common/item-selector/item-selector';
@@ -31,13 +31,13 @@ import {SidePanelSection} from 'components/common/styled-components';
 import {FormattedMessage} from 'react-intl';
 
 const ITEM_SIZE = {
-  large: 60,
+  large: 50,
   small: 28
 };
 
 const StyledDropdownListItem = styled.div`
-  padding-bottom: 12px;
-  padding-right: 12px;
+  padding-bottom: ${props => props.theme.layerTypeIconPdL}px;
+  padding-right: ${props => props.theme.layerTypeIconPdL}px;
 
   &.selected {
     .layer-type-selector__item__icon {
@@ -65,7 +65,7 @@ const StyledListItem = styled.div`
 
     .layer-type-selector__item__icon {
       color: ${props => props.theme.activeColor};
-      background-size: ${ITEM_SIZE.small}px ${ITEM_SIZE.small}px;
+      background-size: ${props => props.theme.layerTypeIconSizeSM}px ${props => props.theme.layerTypeIconSizeSM}px;
       margin-right: 12px;
     }
   }
@@ -74,7 +74,7 @@ const StyledListItem = styled.div`
     color: ${props => props.theme.labelColor};
     display: flex;
     background-image: url(${`${CLOUDFRONT}/kepler.gl-layer-icon-bg.png`});
-    background-size: ${ITEM_SIZE.large}px ${ITEM_SIZE.large}px;
+    background-size: ${props => props.theme.layerTypeIconSizeL}px ${props => props.theme.layerTypeIconSizeL}px;
   }
 
   .layer-type-selector__item__label {
@@ -92,7 +92,7 @@ const DropdownListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  padding: 12px 0 0 12px;
+  padding: ${props => props.theme.layerTypeIconPdL}px 0 0 ${props => props.theme.layerTypeIconPdL}px;
 `;
 
 const LayerTypeListItem = ({value, isTile}) => (
@@ -144,7 +144,7 @@ const StyledLayerTypeSelector = styled.div`
     padding: 4px 10px 4px 2px;
   }
 `;
-const LayerTypeSelector = ({layer, layerTypeOptions, onSelect}) => (
+const LayerTypeSelector = ({layer, layerTypeOptions, onSelect, theme}) => (
   <SidePanelSection>
     <StyledLayerTypeSelector className="layer-config__type">
       <ItemSelector
@@ -165,4 +165,4 @@ const LayerTypeSelector = ({layer, layerTypeOptions, onSelect}) => (
 
 LayerTypeSelector.propTypes = propTypes;
 
-export default LayerTypeSelector;
+export default withTheme(LayerTypeSelector);
diff --git a/src/styles/base.js b/src/styles/base.js
@@ -202,6 +202,10 @@ export const mapPanelHeaderBackgroundColor = '#29323C';
 export const tooltipBg = '#F8F8F9';
 export const tooltipColor = '#333334';
 
+export const layerTypeIconSizeL = 50;
+export const layerTypeIconPdL = 12;
+export const layerTypeIconSizeSM = 28;
+
 // Bottom Panel
 export const bottomInnerPdSide = 32;
 export const bottomInnerPdVert = 6;
@@ -1048,6 +1052,10 @@ export const theme = {
   panelHeaderHeight,
   panelDropdownScrollBar,
 
+  layerTypeIconSizeL,
+  layerTypeIconPdL,
+  layerTypeIconSizeSM,
+
   // Text
   fontFamily,
   fontWeight,