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) => this.onBitClick(i, e)}>{c}); + + return {children} + } + + 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 =