From 911549aca33c95e3e9827d1f29ad4390e5a00ea3 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 21 May 2019 18:54:09 +0100
Subject: [PATCH] Moved data-wd-key onto element

---
 src/components/inputs/NumberInput.jsx  | 10 ++++++++++
 src/components/layers/MaxZoomBlock.jsx |  5 ++---
 src/components/layers/MinZoomBlock.jsx |  5 ++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 32e210b..a93db93 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -10,6 +10,7 @@ class NumberInput extends React.Component {
     onChange: PropTypes.func,
     allowRange: PropTypes.bool,
     rangeStep: PropTypes.number,
+    wdKey: PropTypes.string,
   }
 
   static defaultProps = {
@@ -107,6 +108,13 @@ class NumberInput extends React.Component {
   }
 
   render() {
+    let wdProps = {};
+    if (this.props.wdKey) {
+      wdProps = {
+        "data-wd-key": this.props.wdKey
+      };
+    }
+
     if(
       this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
       this.props.min !== undefined && this.props.max !== undefined &&
@@ -146,6 +154,7 @@ class NumberInput extends React.Component {
             this.changeValue(e.target.value)
           }}
           onBlur={this.resetValue}
+          {...wdProps}
         />
       </div>
     }
@@ -159,6 +168,7 @@ class NumberInput extends React.Component {
           value={this.state.value}
           onChange={e => this.changeValue(e.target.value)}
           onBlur={this.resetValue}
+          {...wdProps}
         />
       </div>
     }
diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx
index 7447593..99924aa 100644
--- a/src/components/layers/MaxZoomBlock.jsx
+++ b/src/components/layers/MaxZoomBlock.jsx
@@ -12,10 +12,9 @@ class MaxZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
-      data-wd-key="max-zoom"
-    >
+    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}>
       <NumberInput
+        wdKey="max-zoom"
         allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}
diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx
index 72ac16a..d210eb4 100644
--- a/src/components/layers/MinZoomBlock.jsx
+++ b/src/components/layers/MinZoomBlock.jsx
@@ -12,10 +12,9 @@ class MinZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
-      data-wd-key="min-zoom"
-    >
+    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}>
       <NumberInput
+        wdKey="min-zoom"
         allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}