[Maps] Refactor style editor to use style property class instead of style descriptor object

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js

@@ -9,15 +9,12 @@ import React from 'react';
 import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
 import { DynamicColorSelection } from './dynamic_color_selection';
 import { StaticColorSelection } from './static_color_selection';
-import { getVectorStyleLabel } from '../get_vector_style_label';
 
 export function VectorStyleColorEditor(props) {
   return (
     <StaticDynamicStyleRow
       ordinalFields={props.ordinalFields}
-      property={props.styleProperty}
-      label={getVectorStyleLabel(props.styleProperty)}
-      styleDescriptor={props.styleDescriptor}
+      styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       swatches={props.swatches}
       DynamicSelector={DynamicColorSelection}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js

@@ -26,6 +26,10 @@ export function getVectorStyleLabel(styleName) {
       return i18n.translate('xpack.maps.styles.vector.symbolSizeLabel', {
         defaultMessage: 'Symbol size'
       });
+    case vectorStyles.ICON_ORIENTATION:
+      return i18n.translate('xpack.maps.styles.vector.orientationLabel', {
+        defaultMessage: 'Symbol orientation'
+      });
     default:
       return styleName;
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js

@@ -9,17 +9,12 @@ import React from 'react';
 import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
 import { DynamicOrientationSelection } from './dynamic_orientation_selection';
 import { StaticOrientationSelection } from './static_orientation_selection';
-import { i18n } from '@kbn/i18n';
 
 export function OrientationEditor(props) {
   return (
     <StaticDynamicStyleRow
       ordinalFields={props.ordinalFields}
-      property={props.styleProperty}
-      label={i18n.translate('xpack.maps.styles.vector.orientationLabel', {
-        defaultMessage: 'Symbol orientation'
-      })}
-      styleDescriptor={props.styleDescriptor}
+      styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       DynamicSelector={DynamicOrientationSelection}
       StaticSelector={StaticOrientationSelection}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js

@@ -9,15 +9,12 @@ import React from 'react';
 import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
 import  { DynamicSizeSelection } from './dynamic_size_selection';
 import  { StaticSizeSelection } from './static_size_selection';
-import { getVectorStyleLabel } from '../get_vector_style_label';
 
 export function VectorStyleSizeEditor(props) {
   return (
     <StaticDynamicStyleRow
       ordinalFields={props.ordinalFields}
-      property={props.styleProperty}
-      label={getVectorStyleLabel(props.styleProperty)}
-      styleDescriptor={props.styleDescriptor}
+      styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       DynamicSelector={DynamicSizeSelection}
       StaticSelector={StaticSizeSelection}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js

@@ -6,8 +6,8 @@
 
 import React from 'react';
 import { VectorStyle } from '../vector_style';
-import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { getVectorStyleLabel } from './get_vector_style_label';
 
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiFormRow, EuiButtonToggle } from '@elastic/eui';
 
@@ -22,30 +22,27 @@ export class StaticDynamicStyleRow extends React.Component {
   }
 
   _isDynamic() {
-    if (!this.props.styleDescriptor) {
-      return false;
-    }
-    return this.props.styleDescriptor.type === VectorStyle.STYLE_TYPE.DYNAMIC;
+    return this.props.styleProperty.isDynamic();
   }
 
   _getStyleOptions() {
-    return _.get(this.props, 'styleDescriptor.options');
+    return this.props.styleProperty.getOptions();
   }
 
   _onStaticStyleChange = options => {
     const styleDescriptor = {
       type: VectorStyle.STYLE_TYPE.STATIC,
       options,
     };
-    this.props.handlePropertyChange(this.props.property, styleDescriptor);
+    this.props.handlePropertyChange(this.props.styleProperty.getStyleName(), styleDescriptor);
   };
 
   _onDynamicStyleChange = options => {
     const styleDescriptor = {
       type: VectorStyle.STYLE_TYPE.DYNAMIC,
       options,
     };
-    this.props.handlePropertyChange(this.props.property, styleDescriptor);
+    this.props.handlePropertyChange(this.props.styleProperty.getStyleName(), styleDescriptor);
   };
 
   _onTypeToggle = () => {
@@ -100,7 +97,10 @@ export class StaticDynamicStyleRow extends React.Component {
         <EuiFlexItem
           className={isDynamic ? 'mapStaticDynamicSylingOption__dynamicSizeHack' : undefined}
         >
-          <EuiFormRow label={this.props.label && this.props.label} display="rowCompressed">
+          <EuiFormRow
+            label={getVectorStyleLabel(this.props.styleProperty.getStyleName())}
+            display="rowCompressed"
+          >
             {this._renderStyleSelector()}
           </EuiFormRow>
         </EuiFlexItem>

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js

@@ -15,7 +15,6 @@ import { OrientationEditor } from './orientation/orientation_editor';
 import {
   getDefaultDynamicProperties,
   getDefaultStaticProperties,
-  vectorStyles,
 } from '../vector_style_defaults';
 import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
 import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
@@ -121,10 +120,9 @@ export class VectorStyleEditor extends Component {
   _renderFillColor() {
     return (
       <VectorStyleColorEditor
-        styleProperty={vectorStyles.FILL_COLOR}
         swatches={DEFAULT_FILL_COLORS}
         handlePropertyChange={this.props.handlePropertyChange}
-        styleDescriptor={this.props.styleProperties.fillColor}
+        styleProperty={this.props.styleProperties.fillColor}
         ordinalFields={this._getOrdinalFields()}
         defaultStaticStyleOptions={this.state.defaultStaticProperties.fillColor.options}
         defaultDynamicStyleOptions={this.state.defaultDynamicProperties.fillColor.options}
@@ -135,10 +133,9 @@ export class VectorStyleEditor extends Component {
   _renderLineColor() {
     return (
       <VectorStyleColorEditor
-        styleProperty={vectorStyles.LINE_COLOR}
         swatches={DEFAULT_LINE_COLORS}
         handlePropertyChange={this.props.handlePropertyChange}
-        styleDescriptor={this.props.styleProperties.lineColor}
+        styleProperty={this.props.styleProperties.lineColor}
         ordinalFields={this._getOrdinalFields()}
         defaultStaticStyleOptions={this.state.defaultStaticProperties.lineColor.options}
         defaultDynamicStyleOptions={this.state.defaultDynamicProperties.lineColor.options}
@@ -149,9 +146,8 @@ export class VectorStyleEditor extends Component {
   _renderLineWidth() {
     return (
       <VectorStyleSizeEditor
-        styleProperty={vectorStyles.LINE_WIDTH}
         handlePropertyChange={this.props.handlePropertyChange}
-        styleDescriptor={this.props.styleProperties.lineWidth}
+        styleProperty={this.props.styleProperties.lineWidth}
         ordinalFields={this._getOrdinalFields()}
         defaultStaticStyleOptions={this.state.defaultStaticProperties.lineWidth.options}
         defaultDynamicStyleOptions={this.state.defaultDynamicProperties.lineWidth.options}
@@ -162,9 +158,8 @@ export class VectorStyleEditor extends Component {
   _renderSymbolSize() {
     return (
       <VectorStyleSizeEditor
-        styleProperty={vectorStyles.ICON_SIZE}
         handlePropertyChange={this.props.handlePropertyChange}
-        styleDescriptor={this.props.styleProperties.iconSize}
+        styleProperty={this.props.styleProperties.iconSize}
         ordinalFields={this._getOrdinalFields()}
         defaultStaticStyleOptions={this.state.defaultStaticProperties.iconSize.options}
         defaultDynamicStyleOptions={this.state.defaultDynamicProperties.iconSize.options}
@@ -174,13 +169,12 @@ export class VectorStyleEditor extends Component {
 
   _renderPointProperties() {
     let iconOrientation;
-    if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_ICON) {
+    if (this.props.symbolDescriptor.options.symbolizeAs === SYMBOLIZE_AS_ICON) {
       iconOrientation = (
         <Fragment>
           <OrientationEditor
-            styleProperty={vectorStyles.ICON_ORIENTATION}
             handlePropertyChange={this.props.handlePropertyChange}
-            styleDescriptor={this.props.styleProperties.iconOrientation}
+            styleProperty={this.props.styleProperties.iconOrientation}
             ordinalFields={this.state.numberFields}
             defaultStaticStyleOptions={this.state.defaultStaticProperties.iconOrientation.options}
             defaultDynamicStyleOptions={this.state.defaultDynamicProperties.iconOrientation.options}
@@ -193,7 +187,7 @@ export class VectorStyleEditor extends Component {
     return (
       <Fragment>
         <VectorStyleSymbolEditor
-          styleOptions={this.props.styleProperties.symbol.options}
+          styleOptions={this.props.symbolDescriptor.options}
           handlePropertyChange={this.props.handlePropertyChange}
           symbolOptions={SYMBOL_OPTIONS}
           isDarkMode={chrome.getUiSettingsClient().get('theme:darkMode', false)}

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js

@@ -59,7 +59,6 @@ export class VectorStyle extends AbstractStyle {
     this._iconSizeStyleProperty = this._makeSizeProperty(this._descriptor.properties[vectorStyles.ICON_SIZE], vectorStyles.ICON_SIZE);
     // eslint-disable-next-line max-len
     this._iconOrientationProperty = this._makeOrientationProperty(this._descriptor.properties[vectorStyles.ICON_ORIENTATION], vectorStyles.ICON_ORIENTATION);
-
   }
 
   _getAllStyleProperties() {
@@ -83,7 +82,14 @@ export class VectorStyle extends AbstractStyle {
     return (
       <VectorStyleEditor
         handlePropertyChange={handlePropertyChange}
-        styleProperties={styleProperties}
+        styleProperties={{
+          lineColor: this._lineColorStyleProperty,
+          fillColor: this._fillColorStyleProperty,
+          lineWidth: this._lineWidthStyleProperty,
+          iconSize: this._iconSizeStyleProperty,
+          iconOrientation: this._iconOrientationProperty,
+        }}
+        symbolDescriptor={this._descriptor.properties[vectorStyles.SYMBOL]}
         layer={layer}
         loadIsPointsOnly={this._getIsPointsOnly}
         loadIsLinesOnly={this._getIsLinesOnly}