Merge pull request #6 from BorysLevytskyi/Use-same-view

ditched ListOfNumbersExpressionView

src/app/components/DisplayResultView.jsx

@@ -5,7 +5,7 @@ import UnknownCommandResult from '../models/UnknownCommandResult';
 import HelpResultView from './results/HelpResultView';
 import AboutResultView from './results/AboutResultView';
 import ExpressionResult from '../models/ExpressionResult';
-import ExpressionResultView from './results/ExpressionResultView';
+import BitwiseOperationExpressionView from './results/BitwiseOperationExpressionView';
 import WhatsnewResult from '../models/WhatsnewResult';
 import WhatsnewResultView from './results/WhatsnewResultView';
 import ErrorResult from '../models/ErrorResult';
@@ -32,7 +32,7 @@ export default class DisplayResult extends React.Component {
         }
 
         if(result instanceof ExpressionResult) {
-            return <ExpressionResultView result={result} emphasizeBytes={this.props.appState.emphasizeBytes} /> 
+            return <BitwiseOperationExpressionView expression={result.expression} emphasizeBytes={this.props.appState.emphasizeBytes} /> 
         }
 
         if(result instanceof WhatsnewResult) {

src/app/components/results/BitwiseOperationExpressionView.jsx

@@ -21,34 +21,65 @@ export default class BitwiseOperationEpxressionView extends React.Component {
 
     getRows() {
         const expr = this.props.expression;
+        var model = null;
+
+        if(expr instanceof expression.ListOfNumbersExpression) {
+            model = BitwiseExpressionViewModel.buildListOfNumbers(expr, { 
+                emphasizeBytes: this.props.emphasizeBytes, 
+                allowFlipBits: true });
+        }
 
         if(expr instanceof expression.SingleOperandExpression) {
-            const m = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
-            log.info('Render model', m);
-            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
+            model = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
         }
 
         if(expr instanceof expression.MultipleOperandsExpression) {
-            const m = BitwiseExpressionViewModel.buildMultiple(expr, { emphasizeBytes: this.props.emphasizeBytes });
-            log.info('Render model', m);
-            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
+            model = BitwiseExpressionViewModel.buildMultiple(expr, { emphasizeBytes: this.props.emphasizeBytes });
         }
 
-        return null;
+        log.info('Render model', model);
+        return model.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={model.maxNumberOfBits} allowFlipBits={model.allowFlipBits} />);
     }
 }
 
 class ExpressionRow extends React.Component {
+    constructor() {
+       super();
+       this.state = { operand: null };
+   }
     render() {
-        const { sign, label, bin, other, css, maxNumberOfBits, emphasizeBytes } = this.props;
+        const { sign, label, bin, other, css, maxNumberOfBits, emphasizeBytes, allowFlipBits, operand } = this.props;
         
         return <tr className={css}>
                     <td className="sign">{sign}</td>
-                    <td className="label">{label}</td>
+                    <td className="label">{this.getLabel(operand)}</td>
                     <td className="bin">
-                        <BinaryStringView emphasizeBytes={emphasizeBytes} binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
+                        <BinaryStringView 
+                            emphasizeBytes={emphasizeBytes} 
+                            binaryString={formatter.padLeft(operand.bin, maxNumberOfBits, '0')} 
+                            allowFlipBits={allowFlipBits} 
+                            onFlipBit={idx => this.flipBit(idx)}/>
                     </td>
-                    <td className="other">{other}</td>
+                    <td className="other">{operand.other}</td>
                 </tr>;
     }
+
+    getLabel(op) {
+        return op.kind == 'bin' ? op.dec : op.toString();
+    }
+
+     flipBit(index) {    
+
+        var op = this.props.operand;
+        const binaryString = formatter.padLeft(op.bin, this.props.maxNumberOfBits, '0');
+        var arr = binaryString.split('');
+        // TODO: this code looks ugly
+        arr[index] = arr[index] == '0' ? '1' : '0';
+        var bin = arr.join('');
+
+        console.log('new bin: '+ bin);
+        op.setValue(parseInt(bin, 2));
+
+        this.setState({ operand: op });
+    }
 }

src/app/components/results/ExpressionResultView.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import ListOfNumbersExpressionView from './ListOfNumbersExpressionView';
-import BitwiseOperationExpressionView from './BitwiseOperationExpressionView';
-
-import * as expression from '../../expression'; 
-
-export default class ExpressionResultView extends React.Component {
-    render() {
-        var expr = this.props.result.expression;
-
-        if(expr instanceof expression.ListOfNumbersExpression) {
-            return <div>
-                        <ListOfNumbersExpressionView expression={expr} emphasizeBytes={this.props.emphasizeBytes} />
-                    </div>
-        }
-        if(expr instanceof expression.SingleOperandExpression || expr instanceof expression.MultipleOperandsExpression) {
-            return <div>
-                        <BitwiseOperationExpressionView expression={expr} emphasizeBytes={this.props.emphasizeBytes} />
-                    </div>
-        }
-
-        return <b>Expression: {expr.expressionString}</b>;
-    } 
-}

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import formatter from '../../formatter';
-import BinaryStringView from './BinaryStringView';
-import BitwiseExpressionViewModel from './models/BitwiseExpressionViewModel'
-
-
-export default class ListOfNumersExpressionView extends React.Component {
-    render() {
-        const expr = this.props.expression;
-        const maxBitsLegnth = BitwiseExpressionViewModel.getNumberOfBits(expr.maxBitsLegnth, this.props.emphasizeBytes);
-        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} emphasizeBytes={this.props.emphasizeBytes} />);
-        return <table className="expression">
-                        <tbody>
-                            {numberRows}
-                        </tbody>        
-                    </table>
-    }
-}
-
-class OperandView extends React.Component {
-   constructor() {
-       super();
-       this.state = { operand: null };
-   }
-    render() {
-        const op = this.props.operand;
-        const binaryString = formatter.padLeft(op.bin, this.props.maxBitsLegnth, '0');
-
-        return <tr data-kind={op.kind}>
-                    <td className="label">{this.getLabel(op)}</td>
-                    <td className="bin"><BinaryStringView emphasizeBytes={this.props.emphasizeBytes} binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
-                    <td className="other">{op.other}</td>
-                </tr>;
-    };
-
-    getLabel(op) {
-        return op.kind == 'bin' ? op.dec : op.input;
-    }
-
-    flipBit(index) {    
-        var op = this.props.operand;
-        const binaryString = formatter.padLeft(op.bin, this.props.maxBitsLegnth, '0');
-        var arr = binaryString.split('');
-        // TODO: this code looks ugly
-        arr[index] = arr[index] == '0' ? '1' : '0';
-        var bin = arr.join('');
-        op.setValue(parseInt(bin, 2));
-
-        this.setState({ operand: op });
-    }
-}

src/app/components/results/models/BitwiseExpressionViewModel.js

@@ -1,9 +1,17 @@
 export default class BitwiseExpressionViewModel {
 
-    constructor({ emphasizeBytes = false } = {}) {
+    constructor({ emphasizeBytes = false, allowFlipBits = false } = {}) {
         this.emphasizeBytes = emphasizeBytes;
         this.items = [];
         this.maxNumberOfBits = 0;
+        this.allowFlipBits = allowFlipBits === true;
+    }
+
+    static buildListOfNumbers(expr, config) {
+        var model = new BitwiseExpressionViewModel(config);
+        expr.numbers.forEach(op => model.addOperand(op));
+        model.maxNumberOfBits = BitwiseExpressionViewModel.getNumberOfBits(model.maxNumberOfBits, model.emphasizeBytes);
+        return model;
     }
 
     static buildMultiple (expr, config) {
@@ -46,7 +54,8 @@ export default class BitwiseExpressionViewModel {
             label: this.getLabel(operand), 
             bin: operand.bin, 
             other: operand.other, 
-            css: ''});
+            css: '',
+            operand: operand});
     };
 
     addExpression(expression) {
@@ -56,7 +65,8 @@ export default class BitwiseExpressionViewModel {
             label: this.getLabel(expression.operand1), 
             bin: expression.operand1.bin, 
             other: expression.operand1.other, 
-            css: ''
+            css: '',
+            operand: expression.operand1
         });
     };
 
@@ -67,7 +77,8 @@ export default class BitwiseExpressionViewModel {
             label: this.getLabel(resultOperand),
             bin: resultOperand.bin,
             other: resultOperand.other,
-            css: 'expression-result'});
+            css: 'expression-result',
+            operand: resultOperand});
     };
 
     addExpressionResult(operand) {
@@ -77,7 +88,8 @@ export default class BitwiseExpressionViewModel {
             label: this.getLabel(operand), 
             bin: operand.bin, 
             other: operand.other, 
-            css: 'expression-result'});
+            css: 'expression-result',
+            operand: operand});
     };
 
     getLabel (op) {