Merge branch 'master' of asdf.us:swimmer

1 files changed, 56 insertions, 17 deletions

diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index cf3e466..de1020a 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -23,21 +23,60 @@ export const LabelDescription = props => (
   </label>
 )
 
-export const NumberInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
-    <input
-      type="number"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      min={props.min}
-      max={props.max}
-      step={props.step || 1}
-    />
-  </label>
-)
+export class NumberInput extends Component {
+  constructor(props) {
+    super(props)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+  }
+  handleKeyDown(e) {
+    const { min, max, step, data, name, onChange } = this.props
+    const value = data[name]
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 38: // up
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.min(max, parseFloat(value) + ((step || 1) * 10))
+            }
+          })
+        }
+        break
+      case 40: // down
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.max(min, parseFloat(value) - ((step || 1) * 10))
+            }
+          })
+        }
+        break
+    }
+  }
+  render() {
+    const { props } = this
+    return (
+      <label className={props.error ? 'error' : 'text'}>
+        <span>{props.title}</span>
+        <input
+          type="number"
+          required={props.required}
+          onKeyDown={this.handleKeyDown}
+          onChange={props.onChange}
+          name={props.name}
+          value={props.data[props.name]}
+          min={props.min}
+          max={props.max}
+          step={props.step || 1}
+        />
+      </label>
+    )
+  }
+}
 
 export const ColorInput = props => (
   <label className={props.error ? 'error color' : 'text color'}>
@@ -71,12 +110,12 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label className="checkbox">
+  <label className={props.className ? props.className + " checkbox" : "checkbox"}>
     <input
       type="checkbox"
       name={props.name}
       value={1}
-      checked={props.checked}
+      checked={!!props.checked}
       onChange={(e) => props.onChange(props.name, e.target.checked)}
     />
     <span>{props.label}</span>