From d1c0107953e863b36d1bddd21e5d53d171cbe467 Mon Sep 17 00:00:00 2001
From: Borys_Levytskyi <blevitsky@yandex.ru>
Date: Sun, 27 Nov 2016 16:45:23 +0200
Subject: [PATCH] Add bit colorization

---
 .../components/results/BinaryStringView.jsx   | 24 +++++++++++++++++++
 .../BitwiseOperationExpressionView.jsx        | 11 +++++----
 .../results/ListOfNumbersExpressionView.jsx   | 20 ++--------------
 todo.txt                                      |  2 ++
 4 files changed, 35 insertions(+), 22 deletions(-)
 create mode 100644 src/app/components/results/BinaryStringView.jsx
 create mode 100644 todo.txt

diff --git a/src/app/components/results/BinaryStringView.jsx b/src/app/components/results/BinaryStringView.jsx
new file mode 100644
index 0000000..25790ec
--- /dev/null
+++ b/src/app/components/results/BinaryStringView.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default class BinaryStringView extends React.Component {
+    render() {
+        const str = this.props.binaryString;
+        const chars = str.split('');
+        const allowFlipBits = this.props.allowFlipBits || false;
+        const css = allowFlipBits ? ' flipable' : ''
+        const classNames = { '0': `zero${css}`, '1' : `one ${css}` };
+        const children = chars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
+        
+        return <span>{children}</span>
+    }
+
+    onBitClick(index, e) {
+        if(!this.props.allowFlipBits) {
+            return;
+        }
+
+        if(this.props.onFlipBit) {
+            this.props.onFlipBit(index);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/results/BitwiseOperationExpressionView.jsx b/src/app/components/results/BitwiseOperationExpressionView.jsx
index 26dee9a..50d8c32 100644
--- a/src/app/components/results/BitwiseOperationExpressionView.jsx
+++ b/src/app/components/results/BitwiseOperationExpressionView.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import * as expression from '../../expression';
 import formatter from '../../formatter';
+import BinaryStringView from './BinaryStringView';
+
+console.log('BinaryStringView', BinaryStringView);
 
 export default class BitwiseOperationEpxressionView extends React.Component {
     render() {
@@ -38,14 +41,14 @@ class ExpressionRow extends React.Component {
     render() {
         const { sign, label, bin, other, css, maxNumberOfBits } = this.props;
         
-        var tr = <tr className={css}>
+        return <tr className={css}>
                     <td className="sign">{sign}</td>
                     <td className="label">{label}</td>
-                    <td className="bin">{formatter.padLeft(bin, maxNumberOfBits, '0')}</td>
+                    <td className="bin">
+                        <BinaryStringView binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
+                    </td>
                     <td className="other">{other}</td>
                 </tr>;
-
-        return tr;
     }
 }
 
diff --git a/src/app/components/results/ListOfNumbersExpressionView.jsx b/src/app/components/results/ListOfNumbersExpressionView.jsx
index 414b833..69889ff 100644
--- a/src/app/components/results/ListOfNumbersExpressionView.jsx
+++ b/src/app/components/results/ListOfNumbersExpressionView.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import formatter from '../../formatter';
+import BinaryStringView from './BinaryStringView';
 
 export default class ListOfNumersExpressionView extends React.Component {
     render() {
@@ -24,7 +25,7 @@ class OperandView extends React.Component {
 
         return <tr data-kind={op.kind}>
                     <td className="label">{op.input}</td>
-                    <td className="bin"><ClickableBinary binaryString={binaryString} onFlipBit={e => this.flipBit(e)} /></td>
+                    <td className="bin"><BinaryStringView binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
                     <td className="other">{op.other}</td>
                 </tr>;
     };
@@ -40,21 +41,4 @@ class OperandView extends React.Component {
 
         this.setState({ operand: op });
     }
-}
-
-class ClickableBinary extends React.Component {
-    render() {
-        const str = this.props.binaryString;
-        const chars = str.split('');
-        const classNames = { '0': 'zero flipable', '1' : 'one flipable' };
-        const children = chars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
-        
-        return <span>{children}</span>
-    }
-
-    onBitClick(index, e) {
-        if(this.props.onFlipBit) {
-            this.props.onFlipBit(index);
-        }
-    }
 }
\ No newline at end of file
diff --git a/todo.txt b/todo.txt
new file mode 100644
index 0000000..88ec1e6
--- /dev/null
+++ b/todo.txt
@@ -0,0 +1,2 @@
+Unparsable expressions:
+~2|11
\ No newline at end of file