]> git.wincent.com - hextrapolate.git/blob - src/App.js
f6678cf3dca632fdc26d0dbc2c40a45d909bd5ec
[hextrapolate.git] / 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   componentDidMount() {
32     this._firstInput.focus();
33   }
34
35   render() {
36     const {value} = this.state;
37
38     return (
39       <div className="hextrapolate">
40         <h1>
41           Hextrapolate &mdash; <Size value={value} />
42         </h1>
43         <Label text="Hexadecimal">
44           <Field
45             base={16}
46             onValueChange={this._onValueChange}
47             ref={ref => this._firstInput = ref}
48             value={value}
49           />
50         </Label>
51         <Label text="Decimal">
52           <Field
53             onValueChange={this._onValueChange}
54             value={value}
55           />
56         </Label>
57         <Label text="Octal">
58           <Field
59             base={8}
60             onValueChange={this._onValueChange}
61             value={value}
62           />
63         </Label>
64         <Label text="Binary">
65           <Field
66             base={2}
67             onValueChange={this._onValueChange}
68             value={value}
69           />
70         </Label>
71         <DynamicField
72           initialBase={32}
73           value={value}
74           onValueChange={this._onValueChange}
75         />
76         <DynamicField
77           initialBase={36}
78           value={value}
79           onValueChange={this._onValueChange}
80         />
81         <footer className="hextrapolate-footer">
82           <a href="mailto:greg@hurrell.net">Contact</a>
83           {' | '}
84           <a href="https://github.com/wincent/hextrapolate">Source</a>
85         </footer>
86       </div>
87     );
88   }
89 }