Extract <Size> component

Keeps things a little cleaner.

diff --git a/src/App.js b/src/App.js
index 088634a0ca47b90c714612e539786dde907ce462..2dadf8f7e347d65e1240d0d6bf1fd50c2d1fe1cd 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ import React from 'react';
 import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';
 import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';

-import convert from './convert';
+import Size from './Size.react';

 
 import './App.css';
 
 
 import './App.css';
 


@@ -30,21 +30,11 @@ export default class App extends React.Component {
 
   render() {
     const {value} = this.state;
 
   render() {
     const {value} = this.state;

-    const bits = value ? convert(
-      value.value,
-      value.base,
-      16
-    ).length * 8 : 0;

 
     return (
       <div className="hextrapolate">
         <h1>
 
     return (
       <div className="hextrapolate">
         <h1>

-          Hextrapolate
-          &mdash;
-          {' '}
-          {bits / 8 } byte{bits / 8 === 1 ? '' : 's'},
-          {' '}
-          {bits} bits
+          Hextrapolate &mdash; <Size value={value} />

         </h1>
         <Label text="Hexadecimal">
           <Field
         </h1>
         <Label text="Hexadecimal">
           <Field

diff --git a/src/Size.react.js b/src/Size.react.js
new file mode 100644 (file)
index 0000000..99b2b10
--- /dev/null
+++ b/src/Size.react.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+import {ValuePropType} from './Field.react';
+import convert from './convert';
+
+export default class App extends React.Component {
+  static propTypes = {
+    value: ValuePropType,
+  };
+
+  render() {
+    const {value} = this.props;
+    const bits = value ? convert(value.value, value.base, 16).length * 8 : 0;
+    const bytes = bits / 8;
+    return (
+      <span>
+        {bytes} byte{bytes === 1 ? '' : 's'},
+        {' '}
+        {bits} bits
+      </span>
+    );
+  }
+}