From a005f95aa1cdf330e24985216e491014e16d0e81 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 22 Nov 2019 09:50:41 -0700 Subject: [PATCH] merge with master --- .../maps/public/layers/styles/_index.scss | 1 - .../vector/components/color/_color_stops.scss | 39 ----- .../components/color/color_ramp_select.js | 19 ++- .../vector/components/color/color_stops.js | 155 ------------------ .../components/color/color_stops_utils.js | 49 +----- 5 files changed, 14 insertions(+), 249 deletions(-) delete mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss delete mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss b/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss index bd517f81517c2..f46932e44b1a9 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss +++ b/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'; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss deleted file mode 100644 index 001ca0685d0e9..0000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss +++ /dev/null @@ -1,39 +0,0 @@ -.mapColorStop { - position: relative; - padding-right: $euiSizeXL + $euiSizeS; - - & + & { - margin-top: $euiSizeS; - } - - &:hover, - &:focus { - .mapColorStop__icons { - visibility: visible; - opacity: 1; - display: block; - animation: mapColorStopBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance; - } - } -} - -.mapColorStop__icons { - flex-shrink: 0; - display: none; - position: absolute; - right: 0; - top: 50%; - margin-right: -$euiSizeS; - margin-top: -$euiSizeM; -} - -@keyframes mapColorStopBecomeVisible { - - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_ramp_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_ramp_select.js index c2dd51a0182e3..339a0cf493a09 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_ramp_select.js +++ b/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 = ( - ); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js deleted file mode 100644 index df8464d141b5a..0000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js +++ /dev/null @@ -1,155 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import _ from 'lodash'; -import React from 'react'; -import PropTypes from 'prop-types'; - -import { - EuiColorPicker, - EuiFormRow, - EuiFieldNumber, - EuiFlexGroup, - EuiFlexItem, - EuiButtonIcon, -} from '@elastic/eui'; -import { addRow, removeRow, isColorInvalid, isStopInvalid, isInvalid } from './color_stops_utils'; - -const DEFAULT_COLOR = '#FF0000'; - -export const ColorStops = ({ colorStops = [{ stop: 0, color: DEFAULT_COLOR }], onChange }) => { - function getStopInput(stop, index) { - const onStopChange = e => { - const newColorStops = _.cloneDeep(colorStops); - const sanitizedValue = parseFloat(e.target.value); - newColorStops[index].stop = isNaN(sanitizedValue) ? '' : sanitizedValue; - onChange({ - colorStops: newColorStops, - isInvalid: isInvalid(newColorStops), - }); - }; - - let error; - if (isStopInvalid(stop)) { - error = 'Stop must be a number'; - } else if (index !== 0 && colorStops[index - 1].stop >= stop) { - error = 'Stop must be greater than previous stop value'; - } - - return { - stopError: error, - stopInput: ( - - ), - }; - } - - function getColorInput(color, index) { - const onColorChange = color => { - const newColorStops = _.cloneDeep(colorStops); - newColorStops[index].color = color; - onChange({ - colorStops: newColorStops, - isInvalid: isInvalid(newColorStops), - }); - }; - - return { - colorError: isColorInvalid(color) ? 'Color must provide a valid hex value' : undefined, - colorInput: , - }; - } - - const rows = colorStops.map((colorStop, index) => { - const { stopError, stopInput } = getStopInput(colorStop.stop, index); - const { colorError, colorInput } = getColorInput(colorStop.color, index); - const errors = []; - if (stopError) { - errors.push(stopError); - } - if (colorError) { - errors.push(colorError); - } - - const onRemove = () => { - const newColorStops = removeRow(colorStops, index); - onChange({ - colorStops: newColorStops, - isInvalid: isInvalid(newColorStops), - }); - }; - - const onAdd = () => { - const newColorStops = addRow(colorStops, index); - - onChange({ - colorStops: newColorStops, - isInvalid: isInvalid(newColorStops), - }); - }; - - let deleteButton; - if (colorStops.length > 1) { - deleteButton = ( - - ); - } - - return ( - -
- - {stopInput} - {colorInput} - -
- {deleteButton} - -
-
- - ); - }); - - return
{rows}
; -}; - -ColorStops.propTypes = { - /** - * Array of { stop, color }. - * Stops are numbers in strictly ascending order. - * The range is from the given stop number (inclusive) to the next stop number (exclusive). - * Colors are color hex strings (3 or 6 character). - */ - colorStops: PropTypes.arrayOf( - PropTypes.shape({ - stopKey: PropTypes.number, - color: PropTypes.string, - }) - ), - /** - * Callback for when the color stops changes. Called with { colorStops, isInvalid } - */ - onChange: PropTypes.func.isRequired, -}; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js index 51aba22729056..cca3fe9061173 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js +++ b/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); }); }