Add a couple of dynamic fields

diff --git a/src/App.js b/src/App.js
index cfaa5898403da283218f75b9ce691ce8d7a67d83..7009c03270010512c32240451d9362a3acfdda49 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@
 
 'use strict';
 
+import DynamicField from './DynamicField.react';
 import React from 'react';
 import type Value from './Field.react';
 import Field from './Field.react';
@@ -57,6 +58,16 @@ export default class App extends React.Component {
             value={this.state.value}
           />
         </Label>
+        <DynamicField
+          initialBase={32}
+          value={this.state.value}
+          onValueChange={this._onValueChange}
+        />
+        <DynamicField
+          initialBase={36}
+          value={this.state.value}
+          onValueChange={this._onValueChange}
+        />
       </div>
     );
   }

diff --git a/src/DynamicField.react.js b/src/DynamicField.react.js
new file mode 100644 (file)
index 0000000..673cc2d
--- /dev/null
+++ b/src/DynamicField.react.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+import {
+  default as Field,
+  ValuePropType,
+} from './Field.react';
+
+export default class DynamicField extends React.Component {
+  static propTypes = {
+    initialBase: React.PropTypes.number,
+    onValueChange: React.PropTypes.func.required,
+    value: ValuePropType,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {base: props.initialBase};
+  }
+
+  _onChange = event => {
+    const base = parseInt(event.target.value, 10);
+    this.setState({base});
+  }
+
+  _renderOptions() {
+    const options = [];
+    for (let i = 2; i <= 36; i++) {
+      options.push(
+        <option key={i} value={i}>Base {i}</option>
+      );
+    }
+    return options;
+  }
+
+  render() {
+    return (
+      <label className="hextrapolate-label">
+        <select
+          className="hextrapolate-label-text"
+          onChange={this._onChange}
+          value={this.state.base}>
+          {this._renderOptions()}
+        </select>
+        <Field
+          base={this.state.base}
+          onValueChange={this.props.onValueChange}
+          value={this.props.value}
+        />
+      </label>
+    );
+  }
+}

diff --git a/src/Field.react.js b/src/Field.react.js
index 5ff4be7b258ec33ce9e887d91c735f6e098f8027..6331cc4f794730bdfb125fd475ea38c36f5248fa 100644 (file)
--- a/src/Field.react.js
+++ b/src/Field.react.js
@@ -19,7 +19,7 @@ export const ValuePropType = React.PropTypes.shape({
   value: React.PropTypes.string,
 });
 
-const DIGITS = '0123456789abcdef';
+const DIGITS = '0123456789abcdefghijklmnopqrstuvwxyz';
 
 /**
  * Convert from `value` to `base`.
@@ -80,7 +80,7 @@ export default class Field extends React.Component {
     }
   }
 
-  _copyLink = () => {
+  _copyLink() {
     // Would check `document.queryCommandSupported('copy')` here, but that
     // doesn't work; see:
     // - https://code.google.com/p/chromium/issues/detail?id=476508