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 }