From a1a5f090bb5dc69a90027460b8bd822c8541623d Mon Sep 17 00:00:00 2001
From: afterdusk <au.liangjun@gmail.com>
Date: Sun, 25 Apr 2021 01:39:44 +0800
Subject: [PATCH] Add non-editable bin/hex fields

---
 src/Constants.ts          |  1 +
 src/Flop.ts               | 14 ++++++++++++++
 src/components/Format.tsx |  6 ++++++
 src/components/Panel.tsx  | 22 ++++++++++++++++++++++
 4 files changed, 43 insertions(+)

diff --git a/src/Constants.ts b/src/Constants.ts
index a219978..e02eab3 100644
--- a/src/Constants.ts
+++ b/src/Constants.ts
@@ -6,6 +6,7 @@ export const APP_TITLE = "IEEE 754-Style Floating-Point Converter";
 export const POSITIVE_INFINITY_STRING = "infinity";
 export const NEGATIVE_INFINITY_STRING = "-infinity";
 export const NAN_STRING = "NaN";
+export const HEX_PREFIX_STRING = "0x";
 
 // bignumber.js
 export const BIGNUMBER_DECIMAL_PLACES = 300;
diff --git a/src/Flop.ts b/src/Flop.ts
index ed7bae6..11755fc 100755
--- a/src/Flop.ts
+++ b/src/Flop.ts
@@ -332,6 +332,20 @@ export const stringifyBits = (bits: boolean[]): string => {
   return bits.map((e) => (e ? "1" : "0")).join("");
 };
 
+/**
+ * Converts bit array to hexadecimal string.
+ * @param bits boolean array representing bits (length should be in multiple of 4)
+ * @returns hexadecimal string
+ */
+export const stringifyBitsToHex = (bits: boolean[]): string => {
+  return Array.from(Array(Math.floor(bits.length / 4)).keys())
+    .map((i) => i * 4)
+    .map((i) => bits.slice(i, i + 4))
+    .map((e) => stringifyBits(e))
+    .map((e) => parseInt(e, 2).toString(16))
+    .join("");
+};
+
 /**
  * Converts binary string to bit array.
  * @param bitString binary string
diff --git a/src/components/Format.tsx b/src/components/Format.tsx
index b3fe7f7..cfea10d 100644
--- a/src/components/Format.tsx
+++ b/src/components/Format.tsx
@@ -62,6 +62,12 @@ const Format: FC<FormatProps> = (props: FormatProps): ReactElement => {
         clearInput={flop === null}
         stored={Flop.stringifyFlop(storedFlop)}
         error={error ? Flop.stringifyFlop(error) : ""}
+        binaryRepresentation={Flop.stringifyBits(
+          [sign, exponent, significand].flat(1)
+        )}
+        hexRepresentation={Flop.stringifyBitsToHex(
+          [sign, exponent, significand].flat(1)
+        )}
         updateValue={(inputValue: string) =>
           onFlopUpdate(Flop.generateFlop(inputValue))
         }
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index b9978ea..990c447 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useState, ReactElement, useEffect } from "react";
 import styled from "styled-components";
+import * as Constants from "../Constants";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -32,6 +33,8 @@ type PanelProps = {
   clearInput: boolean;
   stored: string;
   error: string;
+  binaryRepresentation: string;
+  hexRepresentation: string;
   updateValue: (inputValue: string) => void;
 };
 
@@ -83,6 +86,25 @@ const Panel: FC<PanelProps> = (props: PanelProps): ReactElement => {
           <InputField disabled readOnly value={props.error} />
         </Col>
       </Row>
+      {/* Binary Representation */}
+      <Row>
+        <Col size={2}>
+          <FieldName>Binary Representation</FieldName>
+        </Col>
+        <Col size={5}>
+          <InputField disabled readOnly value={props.binaryRepresentation} />
+        </Col>
+      </Row>
+      {/* Hexadecimal Representation */}
+      <Row>
+        <Col size={2}>
+          <FieldName>Hex Representation</FieldName>
+        </Col>
+        <Col size={5}>
+          {Constants.HEX_PREFIX_STRING}
+          <InputField disabled readOnly value={props.hexRepresentation} />
+        </Col>
+      </Row>
     </Wrapper>
   );
 };