src/App.js

   1 /**
   2  * Copyright 2015-present Greg Hurrell. All rights reserved.
   3  * Licensed under the terms of the MIT license.
   4  *
   5  * @flow
   6  */
   7
   8 'use strict';
   9
  10 import DynamicField from './DynamicField.react';
  11 import React from 'react';
  12 import type Value from './Field.react';
  13 import Field from './Field.react';
  14 import Label from './Label.react';
  15 import Size from './Size.react';
  16
  17 import './App.css';
  18
  19 export default class App extends React.Component {
  20   constructor(props) {
  21     super(props);
  22     this.state = {
  23       value: null,
  24     };
  25   }
  26
  27   _onValueChange = (value: Value) => {
  28     this.setState({value});
  29   }
  30
  31   render() {
  32     const {value} = this.state;
  33
  34     return (
  35       <div className="hextrapolate">
  36         <h1>
  37           Hextrapolate &mdash; <Size value={value} />
  38         </h1>
  39         <Label text="Hexadecimal">
  40           <Field
  41             base={16}
  42             onValueChange={this._onValueChange}
  43             value={value}
  44           />
  45         </Label>
  46         <Label text="Decimal">
  47           <Field
  48             onValueChange={this._onValueChange}
  49             value={value}
  50           />
  51         </Label>
  52         <Label text="Octal">
  53           <Field
  54             base={8}
  55             onValueChange={this._onValueChange}
  56             value={value}
  57           />
  58         </Label>
  59         <Label text="Binary">
  60           <Field
  61             base={2}
  62             onValueChange={this._onValueChange}
  63             value={value}
  64           />
  65         </Label>
  66         <DynamicField
  67           initialBase={32}
  68           value={value}
  69           onValueChange={this._onValueChange}
  70         />
  71         <DynamicField
  72           initialBase={36}
  73           value={value}
  74           onValueChange={this._onValueChange}
  75         />
  76         <footer className="hextrapolate-footer">
  77           <a href="mailto:greg@hurrell.net">Contact</a>
  78           {' | '}
  79           <a href="https://github.com/wincent/hextrapolate">Source</a>
  80         </footer>
  81       </div>
  82     );
  83   }
  84 }