react-factorial-test/lib/TestItem.js

Generate component test buy using multiplication on parameter sets

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactAutobind = require('react-autobind');

var _reactAutobind2 = _interopRequireDefault(_reactAutobind);

var _jsonStableStringify = require('json-stable-stringify');

var _jsonStableStringify2 = _interopRequireDefault(_jsonStableStringify);

var _FlagVariantIcon = require('mdi-react/FlagVariantIcon');

var _FlagVariantIcon2 = _interopRequireDefault(_FlagVariantIcon);

var _MagnifyIcon = require('mdi-react/MagnifyIcon');

var _MagnifyIcon2 = _interopRequireDefault(_MagnifyIcon);

var _CheckboxBlankOutlineIcon = require('mdi-react/CheckboxBlankOutlineIcon');

var _CheckboxBlankOutlineIcon2 = _interopRequireDefault(_CheckboxBlankOutlineIcon);

var _CheckboxBlankIcon = require('mdi-react/CheckboxBlankIcon');

var _CheckboxBlankIcon2 = _interopRequireDefault(_CheckboxBlankIcon);

var _CloseBoxIcon = require('mdi-react/CloseBoxIcon');

var _CloseBoxIcon2 = _interopRequireDefault(_CloseBoxIcon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // stable json for easy test name comparisons later.

// Given a set of parameters and rules for multiplying those objects togeter, generate 
// TODO:PropTypes
var TestItem = function (_React$Component) {
  _inherits(TestItem, _React$Component);

  function TestItem(props) {
    _classCallCheck(this, TestItem);

    var _this = _possibleConstructorReturn(this, (TestItem.__proto__ || Object.getPrototypeOf(TestItem)).call(this, props));

    (0, _reactAutobind2.default)(_this);
    _this.id = _this.props.id || '';
    _this.state = { pleaseReRender: 0 };
    _this.renderTools = false;
    return _this;
  }

  // toggle wether a given test name is in the comparison list.
  // save the information to a window variable so that it will survive reloading the page due the tested code being updated.


  _createClass(TestItem, [{
    key: 'toggleComp',
    value: function toggleComp(testName) {
      var compList = JSON.parse(localStorage.getItem('reactFactorialTest_compList' + this.id)) || [];
      if (compList.indexOf(testName) === -1) {
        // add it
        compList.push(testName);
      } else {
        // cut it
        var i;
        while ((i = compList.indexOf(testName)) != -1) {
          compList.splice(i, 1);
        }
      }
      localStorage.setItem('reactFactorialTest_compList' + this.id, JSON.stringify(compList));
      // real state is in local session.  This just tells react to wake up and render me again.
      this.setState({ pleaseReRender: this.state.pleaseReRender++ });
    }
  }, {
    key: 'showTools',
    value: function showTools() {
      this.renderTools = true;
      this.setState({ pleaseReRender: this.state.pleaseReRender++ });
    }
  }, {
    key: 'hideTools',
    value: function hideTools() {
      this.renderTools = false;
      this.setState({ pleaseReRender: this.state.pleaseReRender++ });
    }

    // toggle wether a given test name is in the comparison list.
    // save the information to a window variable so that it will survive reloading the page due the tested code being updated.

  }, {
    key: 'toggleFlag',
    value: function toggleFlag(testName) {
      var flagList = JSON.parse(localStorage.getItem('reactFactorialTest_flagList' + this.id)) || [];
      if (flagList.indexOf(testName) === -1) {
        flagList.push(testName); // add it
      } else {
        var i;
        while ((i = flagList.indexOf(testName)) != -1) {
          flagList.splice(i, 1); // cut it
        }
        localStorage.setItem('reactFactorialTest_note_' + testName + this.id, '');
      }
      localStorage.setItem('reactFactorialTest_flagList' + this.id, JSON.stringify(flagList));
      this.setState({ pleaseReRender: this.state.pleaseReRender++ });
    }
  }, {
    key: 'onTypeNote',
    value: function onTypeNote(evt) {
      var holdName = this.props.item.tstName;
      localStorage.setItem('reactFactorialTest_note_' + holdName + this.id, evt.target.value);
      this.setState({ pleaseReRender: this.state.pleaseReRender++ });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var holdName = this.props.item.tstName;

      // This is an inefficience by design.  If I pass this in from the parent, then the parent has to re-render when these change.
      // I don't want that, so I accept the cost that each test must do it's own local storage access to avoid a whole page re-render. 
      var reactFactorialTest_filter = localStorage.getItem('reactFactorialTest_filter' + this.id) || '';
      var reactFactorialTest_compsOnly = localStorage.getItem('reactFactorialTest_compsOnly' + this.id) || ''; // empty string implies false.
      var reactFactorialTest_compList = JSON.parse(localStorage.getItem('reactFactorialTest_compList' + this.id)) || []; //JJHFIX
      var reactFactorialTest_flagsOnly = localStorage.getItem('reactFactorialTest_flagsOnly' + this.id) || '';
      var reactFactorialTest_flagList = JSON.parse(localStorage.getItem('reactFactorialTest_flagList' + this.id)) || []; //JJHFIX

      var reactFactorialTest_note = localStorage.getItem('reactFactorialTest_note_' + holdName + this.id) || '';
      var reactFactorialTest_smallMode = localStorage.getItem('reactFactorialTest_smallMode' + this.id) || this.props.smallMode || '';

      var focusButton = '';
      var includeToggle = '';
      var compViewToggle = '';
      var flagToggle = '';

      // is this test name in the comparison list?
      var isInCompList = reactFactorialTest_compList && -1 !== reactFactorialTest_compList.indexOf(holdName);
      // is this test flagged for review
      var isFlagged = reactFactorialTest_flagList && -1 !== reactFactorialTest_flagList.indexOf(holdName);

      if (this.renderTools) {
        // only show the focus button if everything is being rendered
        focusButton = _react2.default.createElement(
          'div',
          { style: { padding: '2px', height: '18px', backgroundColor: 'lightgreen', border: '1px solid black', width: 20, display: 'inline-block' },
            onClick: this.props.focusToggle,
            title: 'Show only this test'
          },
          _react2.default.createElement(_MagnifyIcon2.default, { width: 18, height: 18 })
        );

        includeToggle = _react2.default.createElement(
          'div',
          { style: { padding: '2px', height: '18px', backgroundColor: 'lightgreen', border: '1px solid black', width: 20, display: 'inline-block' },
            onClick: function onClick() {
              return _this2.toggleComp(holdName);
            },
            title: 'Include test for comparisons'
          },
          isInCompList ? _react2.default.createElement(_CheckboxBlankIcon2.default, { width: 18, height: 18 }) : _react2.default.createElement(_CheckboxBlankOutlineIcon2.default, { width: 18, height: 18 })
        );

        flagToggle = _react2.default.createElement(
          'div',
          { style: { padding: '2px', height: '18px', backgroundColor: isFlagged ? 'crimson' : 'lightgreen', border: '1px solid black', width: 20, display: 'inline-block' },
            onClick: function onClick() {
              return _this2.toggleFlag(holdName);
            },
            title: 'Flag test for review'
          },
          _react2.default.createElement(_FlagVariantIcon2.default, { width: 18, height: 18 })
        );
      }

      this.props.item.id = 'testId' + this.props.index;

      var display = Object.assign({}, this.props.item);
      delete display['tstName'];
      delete display['_rft'];
      delete display['id'];

      if (
      // if there's no filter or this test matches a filter, include it.
      (!reactFactorialTest_filter || holdName === reactFactorialTest_filter) && (
      // if there's no comparison, or if there is comparison and this test is in the list.
      !reactFactorialTest_compsOnly || reactFactorialTest_compsOnly && reactFactorialTest_compList && -1 !== reactFactorialTest_compList.indexOf(holdName)) && (
      // if there's no comparison, or if there is comparison and this test is in the list.
      !reactFactorialTest_flagsOnly || reactFactorialTest_flagsOnly && reactFactorialTest_flagList && -1 !== reactFactorialTest_flagList.indexOf(holdName))) {

        if (reactFactorialTest_smallMode) {
          return _react2.default.createElement(
            'div',
            { key: this.props.index + 'item',
              style: { display: 'inline-block' }, title: holdName + '\n' + (0, _jsonStableStringify2.default)(display) },
            _react2.default.createElement(
              'div',
              { title: 'click here to toggle flagged status', style: { fontSize: '.75em', color: 'red', cursor: 'pointer' },
                onClick: function onClick() {
                  return _this2.toggleFlag(holdName);
                }
              },
              '\xA0',
              isFlagged && 'flagged'
            ),
            this.props.item && _react2.default.cloneElement(this.props.target, this.props.item)
          );
        } else {
          return _react2.default.createElement(
            'div',
            { key: this.props.index + 'item', style: { borderBottom: '1px solid lightgrey', margin: '5px', paddingBottom: '5px' },
              onMouseEnter: this.showTools, onMouseLeave: this.hideTools },
            _react2.default.createElement(
              'div',
              { style: { minHeight: '50px' } },
              _react2.default.createElement(
                'div',
                { style: { display: 'inline-block', maxWidth: '80%' } },
                _react2.default.createElement(
                  'b',
                  null,
                  holdName
                ),
                '\xA0',
                isFlagged && '🏴',
                '\xA0',
                isInCompList && '⬛',
                _react2.default.createElement('br', null),
                (0, _jsonStableStringify2.default)(display).split(',').join(', ') /* so text will wrap */
              ),
              this.renderTools && _react2.default.createElement(
                'div',
                { style: { display: 'inline-block', float: 'right', verticalAlign: 'top' } },
                focusButton,
                '\xA0',
                flagToggle,
                '\xA0',
                includeToggle,
                _react2.default.createElement('br', null),
                _react2.default.createElement('input', { type: 'text',
                  value: reactFactorialTest_note,
                  style: { paddingTop: '2px' },
                  placeholder: 'notes',
                  onChange: this.onTypeNote })
              )
            ),
            this.props.item && _react2.default.cloneElement(this.props.target, this.props.item)
          );
        }
      } else {
        // no longer relavant to the current focus list
        return '';
      }
    }
  }]);

  return TestItem;
}(_react2.default.Component);

exports.default = TestItem;
module.exports = exports['default'];