]> git.wincent.com - hextrapolate.git/blob - src/DynamicField.react.js
5bd2bf14628a90ca1778012652713dc5143245cd
[hextrapolate.git] / src / DynamicField.react.js
1 /**
2  * Copyright 2003-present Greg Hurrell. All rights reserved.
3  * Licensed under the terms of the MIT license.
4  *
5  * @flow
6  */
7
8 import PropTypes from 'prop-types';
9 import React from 'react';
10 import {
11   default as Field,
12   ValuePropType,
13 } from './Field.react';
14
15 export default class DynamicField extends React.Component {
16   static propTypes = {
17     initialBase: PropTypes.number,
18     onValueChange: PropTypes.func.isRequired,
19     value: ValuePropType,
20   };
21
22   constructor(props) {
23     super(props);
24     this.state = {base: props.initialBase};
25   }
26
27   _onChange = event => {
28     const base = parseInt(event.target.value, 10);
29     this.setState({base});
30   }
31
32   _renderOptions() {
33     const options = [];
34     for (let i = 2; i <= 36; i++) {
35       options.push(
36         <option key={i} value={i}>Base {i}</option>
37       );
38     }
39     return options;
40   }
41
42   render() {
43     return (
44       <label className="hextrapolate-row">
45         <span className="hextrapolate-base">
46           <select
47             onChange={this._onChange}
48             value={this.state.base}>
49             {this._renderOptions()}
50           </select>
51         </span>
52         <Field
53           base={this.state.base}
54           onValueChange={this.props.onValueChange}
55           value={this.props.value}
56         />
57       </label>
58     );
59   }
60 }