[Maps] replace ColorStops component with EuiColorStops

x-pack/legacy/plugins/maps/public/layers/styles/_index.scss

@@ -1,3 +1,2 @@
 @import './components/color_gradient';
 @import './components/static_dynamic_style_row';
-@import './vector/components/color/color_stops';

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

@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import _ from 'lodash';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-import { EuiSuperSelect, EuiSpacer } from '@elastic/eui';
+import { EuiSuperSelect, EuiSpacer, EuiColorStops } from '@elastic/eui';
 import { COLOR_GRADIENTS } from '../../../color_utils';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ColorStops } from './color_stops';
+import { isInvalid } from './color_stops_utils';
+import { i18n } from '@kbn/i18n';
 
 const CUSTOM_COLOR_RAMP = 'CUSTOM_COLOR_RAMP';
 
@@ -36,15 +38,14 @@ export class ColorRampSelect extends Component {
     });
   };
 
-  _onCustomColorRampChange = ({ colorStops, isInvalid }) => {
-    // Manage invalid custom color ramp in local state
-    if (isInvalid) {
+  _onCustomColorRampChange = (colorStops) => {
+    if (isInvalid(colorStops)) {
       this.setState({ customColorRamp: colorStops });
       return;
     }
 
     this.props.onChange({
-      customColorRamp: colorStops,
+      customColorRamp: _.sortBy(colorStops, 'stop')
     });
   };
 
@@ -62,9 +63,13 @@ export class ColorRampSelect extends Component {
       colorStopsInput = (
         <Fragment>
           <EuiSpacer size="s" />
-          <ColorStops
+          <EuiColorStops
+            label={i18n.translate('xpack.maps.style.colorRampStopsLabel', {
+              defaultMessage: 'Color ramp stops'
+            })}
             colorStops={this.state.customColorRamp}
             onChange={this._onCustomColorRampChange}
+            stopType="fixed"
           />
         </Fragment>
       );

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

@@ -6,40 +6,6 @@
 
 import { isValidHex } from '@elastic/eui';
 
-export function removeRow(colorStops, index) {
-  if (colorStops.length === 1) {
-    return colorStops;
-  }
-
-  return [...colorStops.slice(0, index), ...colorStops.slice(index + 1)];
-}
-
-export function addRow(colorStops, index) {
-  const currentStop = colorStops[index].stop;
-  let delta = 1;
-  if (index === colorStops.length - 1) {
-    // Adding row to end of list.
-    if (index !== 0) {
-      const prevStop = colorStops[index - 1].stop;
-      delta = currentStop - prevStop;
-    }
-  } else {
-    // Adding row in middle of list.
-    const nextStop = colorStops[index + 1].stop;
-    delta = (nextStop - currentStop) / 2;
-  }
-
-  const newRow = {
-    stop: currentStop + delta,
-    color: '#FF0000',
-  };
-  return [
-    ...colorStops.slice(0, index + 1),
-    newRow,
-    ...colorStops.slice(index + 1),
-  ];
-}
-
 export function isColorInvalid(color) {
   return !isValidHex(color) || color === '';
 }
@@ -49,18 +15,7 @@ export function isStopInvalid(stop) {
 }
 
 export function isInvalid(colorStops) {
-  return colorStops.some((colorStop, index) => {
-    // expect stops to be in ascending order
-    let isDescending = false;
-    if (index !== 0) {
-      const prevStop = colorStops[index - 1].stop;
-      isDescending = prevStop >= colorStop.stop;
-    }
-
-    return (
-      isColorInvalid(colorStop.color) ||
-      isStopInvalid(colorStop.stop) ||
-      isDescending
-    );
+  return colorStops.some((colorStop) => {
+    return isColorInvalid(colorStop.color) || isStopInvalid(colorStop.stop);
   });
 }