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 }