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