Add bit colorization

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);
+        }
+    }
+}

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;
     }
 }
 

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);
-        }
-    }
 }

todo.txt

@@ -0,0 +1,2 @@
+Unparsable expressions:
+~2|11