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 }