[Maps] Use dual range component (#32273) (#33266)

elastic · Mar 14, 2019 · 1f59df7 · 1f59df7
1 parent bf91334
commit 1f59df7
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 92 deletions.
diff --git a/..._plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/..._plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
@@ -8,6 +8,7 @@ exports[`disabled 1`] = `
   label="range control"
 >
   <ValidatedDualRange
+    allowEmptyRange={true}
     disabled={true}
     showInput={true}
   />
@@ -22,6 +23,7 @@ exports[`renders RangeControl 1`] = `
   label="range control"
 >
   <ValidatedDualRange
+    allowEmptyRange={true}
     id="mock-range-control"
     max={100}
     min={0}

diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js
@@ -22,12 +22,13 @@ import { i18n } from '@kbn/i18n';
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
-export function isRangeValid(value, min, max) {
+export function isRangeValid(value, min, max, allowEmptyRange) {
+  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true;//cannot use default props since that uses falsy check
   let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX];
   let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX];
 
-  const isLowerValueValid = lowerValue !== '';
-  const isUpperValueValid = upperValue !== '';
+  const isLowerValueValid = lowerValue.toString() !== '';
+  const isUpperValueValid = upperValue.toString() !== '';
   if (isLowerValueValid) {
     lowerValue = parseFloat(lowerValue);
   }
@@ -37,22 +38,22 @@ export function isRangeValid(value, min, max) {
   let isValid = true;
   let errorMessage = '';
 
-  if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
+  const bothMustBeSetErrorMessage = i18n.translate('common.ui.dualRangeControl.mustSetBothErrorMessage', {
+    defaultMessage: 'Both lower and upper values must be set'
+  });
+  if (!allowEmptyRange && (!isLowerValueValid || !isUpperValueValid)) {
     isValid = false;
-    errorMessage = i18n.translate('common.ui.dualRangeControl.mustSetBothErrorMessage', {
-      defaultMessage: 'Both lower and upper values must be set'
-    });
-  }
-
-  if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
+    errorMessage = bothMustBeSetErrorMessage;
+  } else if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
+    isValid = false;
+    errorMessage = bothMustBeSetErrorMessage;
+  } else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
     isValid = false;
     errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
       defaultMessage: 'Values must be on or between {min} and {max}',
       values: { min, max }
     });
-  }
-
-  if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
+  } else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
     isValid = false;
     errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
       defaultMessage: 'Upper value must be greater or equal to lower value'

diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js
@@ -34,6 +34,11 @@ it('Should return true when lower and upper values are not set (empty range)', (
   expect(isValid).toBe(true);
 });
 
+it('Should return false when lower and upper values are not set (empty range) and empty ranges are not allowed', () => {
+  const { isValid } = isRangeValid(['', ''], 1, 10, false);
+  expect(isValid).toBe(false);
+});
+
 it('Should return false when lower value is not set and upper value is set', () => {
   const { isValid, errorMessage } = isRangeValid(['', 3], 1, 10);
   expect(isValid).toBe(false);

diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js
@@ -18,6 +18,7 @@
  */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { isRangeValid } from './is_range_valid';
 
 import {
@@ -35,20 +36,22 @@ export class ValidatedDualRange extends Component {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
         nextProps.min,
-        nextProps.max);
+        nextProps.max,
+        nextProps.allowEmptyRange
+      );
       return {
         value: nextProps.value,
         prevValue: nextProps.value,
         isValid,
-        errorMessage,
+        errorMessage
       };
     }
 
     return null;
   }
 
-  onChange = (value) => {
-    const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max);
+  _onChange = (value) => {
+    const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max, this.props.allowEmptyRange);
 
     this.setState({
       value,
@@ -65,20 +68,30 @@ export class ValidatedDualRange extends Component {
     const {
       value, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
+      allowEmptyRange, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
+
     return (
       <EuiFormRow
         isInvalid={!this.state.isValid}
         error={this.state.errorMessage ? [this.state.errorMessage] : []}
       >
         <EuiDualRange
           value={this.state.value}
-          onChange={this.onChange}
+          onChange={this._onChange}
           {...rest}
         />
       </EuiFormRow>
     );
   }
 }
+
+ValidatedDualRange.propTypes = {
+  allowEmptyRange: PropTypes.bool,
+};
+
+ValidatedDualRange.defaultProps = {
+  allowEmptyRange: true
+};
diff --git a/x-pack/plugins/maps/public/components/layer_panel/settings_panel/settings_panel.js b/x-pack/plugins/maps/public/components/layer_panel/settings_panel/settings_panel.js
@@ -13,13 +13,17 @@ import {
   EuiPanel,
   EuiFormRow,
   EuiFieldText,
-  EuiRange,
   EuiSpacer,
-  EuiCallOut,
+  EuiCallOut
 } from '@elastic/eui';
+
 import { ValidatedRange } from '../../../shared/components/validated_range';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { ValidatedDualRange } from 'ui/validated_range';
+
+const MIN_ZOOM = 0;
+const MAX_ZOOM = 24;
 
 export function SettingsPanel(props) {
 
@@ -28,14 +32,9 @@ export function SettingsPanel(props) {
     props.updateLabel(props.layerId, label);
   };
 
-  const onMinZoomChange = (event) => {
-    const zoom = parseInt(event.target.value, 10);
-    props.updateMinZoom(props.layerId, zoom);
-  };
-
-  const onMaxZoomChange = (event) => {
-    const zoom = parseInt(event.target.value, 10);
-    props.updateMaxZoom(props.layerId, zoom);
+  const onZoomChange = ([min, max]) => {
+    props.updateMinZoom(props.layerId, Math.max(MIN_ZOOM, parseInt(min, 10)));
+    props.updateMaxZoom(props.layerId, Math.min(MAX_ZOOM, parseInt(max, 10)));
   };
 
   const onAlphaChange = (alpha) => {
@@ -81,34 +80,20 @@ export function SettingsPanel(props) {
       >
         <EuiFlexGroup>
           <EuiFlexItem>
+
             <EuiFormRow
-              label={i18n.translate('xpack.maps.layerPanel.settingsPanel.minZoomLabel', {
-                defaultMessage: 'Min zoom'
-              })}
-            >
-              <EuiRange
-                min={0}
-                max={24}
-                value={props.minZoom.toString()}
-                onChange={onMinZoomChange}
-                showInput
-                showRange
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFormRow
-              label={i18n.translate('xpack.maps.layerPanel.settingsPanel.maxZoomLabel', {
-                defaultMessage: 'Max zoom'
+              label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
+                defaultMessage: 'Visible zoom range'
               })}
             >
-              <EuiRange
-                min={0}
-                max={24}
-                value={props.maxZoom.toString()}
-                onChange={onMaxZoomChange}
+              <ValidatedDualRange
+                min={MIN_ZOOM}
+                max={MAX_ZOOM}
+                value={[props.minZoom, props.maxZoom]}
                 showInput
                 showRange
+                onChange={onZoomChange}
+                allowEmptyRange={false}
               />
             </EuiFormRow>
           </EuiFlexItem>

diff --git a/...ck/plugins/maps/public/shared/layers/styles/components/vector/size/size_range_selector.js b/...ck/plugins/maps/public/shared/layers/styles/components/vector/size/size_range_selector.js
@@ -9,66 +9,36 @@ import PropTypes from 'prop-types';
 import {
   EuiFormRow,
   EuiFlexGroup,
-  EuiFlexItem,
+  EuiFlexItem
 } from '@elastic/eui';
-import { ValidatedRange } from '../../../../../components/validated_range';
-import { i18n } from '@kbn/i18n';
+import { ValidatedDualRange } from 'ui/validated_range';
 import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';
 
+
 export function SizeRangeSelector({ minSize, maxSize, onChange }) {
 
-  const onSizeChange = (min, max) => {
+  const onSizeChange = ([min, max]) => {
     onChange({
-      minSize: min,
-      maxSize: max
+      minSize: Math.max(DEFAULT_MIN_SIZE, parseInt(min, 10)),
+      maxSize: Math.min(DEFAULT_MAX_SIZE, parseInt(max, 10))
     });
   };
 
-  const onMinSizeChange = (updatedMinSize) => {
-    onSizeChange(updatedMinSize, updatedMinSize > maxSize ? updatedMinSize : maxSize);
-  };
-
-  const onMaxSizeChange = (updatedMaxSize) => {
-    onSizeChange(updatedMaxSize < minSize ? updatedMaxSize : minSize, updatedMaxSize);
-  };
-
   return (
     <EuiFlexGroup>
       <EuiFlexItem>
         <EuiFormRow
-          label={
-            i18n.translate('xpack.maps.styles.vector.size.minLabel', {
-              defaultMessage: 'Min size'
-            })
-          }
-          compressed
-        >
-          <ValidatedRange
-            min={DEFAULT_MIN_SIZE}
-            max={DEFAULT_MAX_SIZE}
-            value={minSize}
-            onChange={onMinSizeChange}
-            showInput
-            showRange
-          />
-        </EuiFormRow>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFormRow
-          label={
-            i18n.translate('xpack.maps.styles.vector.size.maxLabel', {
-              defaultMessage: 'Max size'
-            })
-          }
           compressed
         >
-          <ValidatedRange
+          <ValidatedDualRange
             min={DEFAULT_MIN_SIZE}
             max={DEFAULT_MAX_SIZE}
-            value={maxSize}
-            onChange={onMaxSizeChange}
+            step={1}
+            value={[minSize, maxSize]}
             showInput
             showRange
+            onChange={onSizeChange}
+            allowEmptyRange={false}
           />
         </EuiFormRow>
       </EuiFlexItem>