]> git.wincent.com - hextrapolate.git/blob - src/App.js
b3ff45d9530041ce26be2d449507ca973975449f
[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 DIGITS from './DIGITS';
11 import DynamicField from './DynamicField.react';
12 import React from 'react';
13 import type Value from './Field.react';
14 import Field from './Field.react';
15 import Label from './Label.react';
16 import Size from './Size.react';
17 import convert from './convert';
18
19 import './App.css';
20
21 const SERIALIZATION_BASE = DIGITS.length;
22
23 function getInitialValue() {
24   // Extract value from URL fragment, if present.
25   const value = window.location.hash.replace(/^#/, '');
26   const validator = new RegExp(`^[${DIGITS}]+$`);
27   if (!validator.test(value)) {
28     return null;
29   } else {
30     return {
31       base: SERIALIZATION_BASE,
32       value,
33     };
34   }
35 }
36
37 export default class App extends React.Component {
38   constructor(props) {
39     super(props);
40     this.state = {
41       value: getInitialValue(),
42     };
43   }
44
45   _onValueChange = (value: Value) => {
46     this.setState({value});
47     window.history.replaceState(
48       {},
49       '',
50       '#' + convert(value.value, value.base, SERIALIZATION_BASE)
51     );
52   }
53
54   componentDidMount() {
55     this._firstInput.focus();
56   }
57
58   render() {
59     const {value} = this.state;
60
61     return (
62       <div className="hextrapolate">
63         <h1>
64           Hextrapolate &mdash; <Size value={value} />
65         </h1>
66         <Label text="Hexadecimal">
67           <Field
68             base={16}
69             onValueChange={this._onValueChange}
70             ref={ref => this._firstInput = ref}
71             value={value}
72           />
73         </Label>
74         <Label text="Decimal">
75           <Field
76             onValueChange={this._onValueChange}
77             value={value}
78           />
79         </Label>
80         <Label text="Octal">
81           <Field
82             base={8}
83             onValueChange={this._onValueChange}
84             value={value}
85           />
86         </Label>
87         <Label text="Binary">
88           <Field
89             base={2}
90             onValueChange={this._onValueChange}
91             value={value}
92           />
93         </Label>
94         <DynamicField
95           initialBase={32}
96           value={value}
97           onValueChange={this._onValueChange}
98         />
99         <DynamicField
100           initialBase={36}
101           value={value}
102           onValueChange={this._onValueChange}
103         />
104         <footer className="hextrapolate-footer">
105           <a href="mailto:greg@hurrell.net">Contact</a>
106           {' | '}
107           <a href="https://github.com/wincent/hextrapolate">Source</a>
108         </footer>
109       </div>
110     );
111   }
112 }