]> git.wincent.com - hextrapolate.git/blob - src/App.js
2dadf8f7e347d65e1240d0d6bf1fd50c2d1fe1cd
[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   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 }