[Maps] ensure dynamic sizing works on field selection (elastic#28437)

matschaffer · Jan 10, 2019 · 70f7d33 · 70f7d33
1 parent de73aea
commit 70f7d33
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 62 deletions.
diff --git a/...ck/plugins/gis/public/shared/layers/styles/components/vector/color/color_ramp_selector.js b/...ck/plugins/gis/public/shared/layers/styles/components/vector/color/color_ramp_selector.js
@@ -47,7 +47,3 @@ ColorRampSelector.propTypes = {
   color: PropTypes.string,
   onChange: PropTypes.func.isRequired,
 };
-
-ColorRampSelector.defaultProps = {
-  color: '',
-};
diff --git a/x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/size_range_selector.js b/x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/size_range_selector.js
@@ -6,83 +6,93 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import {
   EuiFormRow,
   EuiFlexGroup,
   EuiFlexItem,
   EuiRange
 } from '@elastic/eui';
 
-
-
 const DEFAULT_MIN_SIZE = 1;
-const DEFAULT_MAX_SIZE = 100;
+const DEFAULT_MAX_SIZE = 64;
 
-export function SizeRangeSelector({ minSize, maxSize, onChange }) {
+export class SizeRangeSelector extends React.Component {
 
-  const sizeChange = (minSize, maxSize)=>{
-    onChange({
-      minSize: minSize,
-      maxSize: maxSize
+  _onSizeChange = (min, max) => {
+    this.props.onChange({
+      minSize: min,
+      maxSize: max
     });
   };
 
-  const onMinSizeChange = (e) => {
-    const updatedMinSize = parseInt(e.target.value, 10);
-    sizeChange(updatedMinSize, updatedMinSize > maxSize ? updatedMinSize : maxSize);
-  };
+  _areSizesValid() {
+    return typeof this.props.minSize === 'number' && typeof this.props.maxSize === 'number';
+  }
 
-  const onMaxSizeChange = (e) => {
-    const updatedMaxSize = parseInt(e.target.value, 10);
-    sizeChange(updatedMaxSize < minSize ? updatedMaxSize : minSize, updatedMaxSize);
-  };
+  componentDidUpdate() {
+    if (!this._areSizesValid()) {
+      this._onSizeChange(DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE);
+    }
+  }
+
+  render() {
 
-  return (
-    <EuiFormRow>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiFormRow
-            label="Min size"
-            compressed
-          >
-            <EuiRange
-              min={DEFAULT_MIN_SIZE}
-              max={DEFAULT_MAX_SIZE}
-              value={minSize.toString()}
-              onChange={onMinSizeChange}
-              showInput
-              showRange
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFormRow
-            label="Max size"
-            compressed
-          >
-            <EuiRange
-              min={DEFAULT_MIN_SIZE}
-              max={DEFAULT_MAX_SIZE}
-              value={maxSize.toString()}
-              onChange={onMaxSizeChange}
-              showInput
-              showRange
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFormRow>
-  );
+    if (!this._areSizesValid()) {
+      return null;
+    }
+
+    const onMinSizeChange = (e) => {
+      const updatedMinSize = parseInt(e.target.value, 10);
+      this._onSizeChange(updatedMinSize, updatedMinSize > this.props.maxSize ? updatedMinSize : this.props.maxSize);
+    };
+
+    const onMaxSizeChange = (e) => {
+      const updatedMaxSize = parseInt(e.target.value, 10);
+      this._onSizeChange(updatedMaxSize < this.props.minSize ? updatedMaxSize : this.props.minSize, updatedMaxSize);
+    };
+
+    return (
+      <EuiFormRow>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow
+              label="Min size"
+              compressed
+            >
+              <EuiRange
+                min={DEFAULT_MIN_SIZE}
+                max={DEFAULT_MAX_SIZE}
+                value={this.props.minSize.toString()}
+                onChange={onMinSizeChange}
+                showInput
+                showRange
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow
+              label="Max size"
+              compressed
+            >
+              <EuiRange
+                min={DEFAULT_MIN_SIZE}
+                max={DEFAULT_MAX_SIZE}
+                value={this.props.maxSize.toString()}
+                onChange={onMaxSizeChange}
+                showInput
+                showRange
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFormRow>
+    );
+  }
 }
 
+
 SizeRangeSelector.propTypes = {
   minSize: PropTypes.number,
   maxSize: PropTypes.number,
   onChange: PropTypes.func.isRequired,
 };
-
-SizeRangeSelector.defaultProps = {
-  minSize: DEFAULT_MIN_SIZE,
-  maxSize: DEFAULT_MAX_SIZE,
-};