@bpanel/bpanel-ui/dist/components/Table/TransactionTable.js

reusable React component library used in the bpanel GUI

'use strict';

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

var _values = require('babel-runtime/core-js/object/values');

var _values2 = _interopRequireDefault(_values);

var _entries = require('babel-runtime/core-js/object/entries');

var _entries2 = _interopRequireDefault(_entries);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _bsert = require('bsert');

var _bsert2 = _interopRequireDefault(_bsert);

var _lodash = require('lodash');

var _index = require('../index');

var _utils = require('../../utils');

var _bpanelUtils = require('@bpanel/bpanel-utils');

var _ExpandedDataRow = require('./ExpandedDataRow');

var _ExpandedDataRow2 = _interopRequireDefault(_ExpandedDataRow);

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

/*
 * TransactionTable
 *
 * Wrapper around Table to display
 * transaction related information
 *
 * TODO: better logic around setting custom
 * TxManager options at runtime with props
 */
var TransactionTable = function (_PureComponent) {
  (0, _inherits3.default)(TransactionTable, _PureComponent);

  /*
   * Create a TransactionTable
   * Initialize a txManager with default options
   * @constructor
   *
   */
  function TransactionTable() {
    (0, _classCallCheck3.default)(this, TransactionTable);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TransactionTable.__proto__ || (0, _getPrototypeOf2.default)(TransactionTable)).call(this));

    _this.txManager = _bpanelUtils.TxManager.fromOptions(_bpanelUtils.TxManagerOptions);

    // TODO: use for caching purposes
    _this._headers = null;
    return _this;
  }

  /*
   * Get proptypes
   *
   * @static
   * @returns {Object}
   */


  (0, _createClass3.default)(TransactionTable, [{
    key: 'formatTableData',


    /*
     * Format table data from output of UXTX.toJSON
     * Maps props.headerMap values that correspond to
     * UXTX.toJSON values into an object with keys
     * of the headerMap key
     *
     * This allows for arbitrarily selecting
     * column headers
     *
     * @param {Object[]} transactions - list of transaction json
     * @param {String} wallet - wallet the txs belong to
     * @returns {Tuple[Object[], Object[]]}
     *
     * TODO: allow function in headerMap
     * that can return a component?
     */
    value: function formatTableData(transactions, UXTXOptions) {
      var txns = this.txManager.parse(transactions, UXTXOptions);
      var _props = this.props,
          headerMap = _props.headerMap,
          expandedMap = _props.expandedMap;

      // tableInput and expandedData are lists
      // each index corresponds to a single data point
      // tableInput renders the columns
      // expandedData renders the dropdown
      // expandedData mainData renders at the top
      // expandedData subData renders at the bottom
      // ugly but functional...

      var _txns$reduce = txns.reduce(function (acc, tx) {
        var tmp = {};
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = (0, _getIterator3.default)((0, _entries2.default)(headerMap)), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var _ref = _step.value;

            var _ref2 = (0, _slicedToArray3.default)(_ref, 2);

            var key = _ref2[0];
            var val = _ref2[1];
            tmp[val] = tx[key];
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }

        acc.tableInput.push(tmp);
        tmp = { mainData: {}, subData: {} };
        var _iteratorNormalCompletion2 = true;
        var _didIteratorError2 = false;
        var _iteratorError2 = undefined;

        try {
          for (var _iterator2 = (0, _getIterator3.default)((0, _entries2.default)(expandedMap.mainData)), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
            var _ref3 = _step2.value;

            var _ref4 = (0, _slicedToArray3.default)(_ref3, 2);

            var _key = _ref4[0];
            var _val = _ref4[1];

            tmp.mainData[_val] = tx[_key];
          }
        } catch (err) {
          _didIteratorError2 = true;
          _iteratorError2 = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion2 && _iterator2.return) {
              _iterator2.return();
            }
          } finally {
            if (_didIteratorError2) {
              throw _iteratorError2;
            }
          }
        }

        var _iteratorNormalCompletion3 = true;
        var _didIteratorError3 = false;
        var _iteratorError3 = undefined;

        try {
          for (var _iterator3 = (0, _getIterator3.default)((0, _entries2.default)(expandedMap.subData)), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
            var _ref5 = _step3.value;

            var _ref6 = (0, _slicedToArray3.default)(_ref5, 2);

            var _key2 = _ref6[0];
            var _val2 = _ref6[1];

            tmp.subData[_val2] = tx[_key2];
          }
        } catch (err) {
          _didIteratorError3 = true;
          _iteratorError3 = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion3 && _iterator3.return) {
              _iterator3.return();
            }
          } finally {
            if (_didIteratorError3) {
              throw _iteratorError3;
            }
          }
        }

        acc.expandedData.push(tmp);
        return acc;
      }, { tableInput: [], expandedData: [] }),
          tableInput = _txns$reduce.tableInput,
          expandedData = _txns$reduce.expandedData;

      return [tableInput, expandedData];
    }

    /*
     * Get header values
     * TODO: cache result and only
     * compute if things changed
     *
     * Remove certain fields if they are not passed in as a prop
     * TODO: allow for dynamic label removal
     *
     * @returns {String[]}
     */

  }, {
    key: 'getHeaders',
    value: function getHeaders() {
      var headers = (0, _values2.default)(this.props.headerMap);
      if (!this.props.wallet) headers = (0, _lodash.without)(headers, 'Wallet');
      return headers;
    }

    /*
     * Render
     * @returns {JSX}
     */

  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          transactions = _props2.transactions,
          UXTXOptions = _props2.UXTXOptions,
          wallet = _props2.wallet,
          chain = _props2.chain;

      if (wallet) UXTXOptions.wallet = wallet;
      if (chain) UXTXOptions.chain = chain;

      var _formatTableData = this.formatTableData(transactions, UXTXOptions),
          _formatTableData2 = (0, _slicedToArray3.default)(_formatTableData, 2),
          tableData = _formatTableData2[0],
          expandedData = _formatTableData2[1];

      // TODO: only invoke if headerMap is different


      var headers = this.getHeaders();

      // TODO: can colHeaders be more than just text?
      // TODO: make expandedHeight slightly larger if
      // rendering extra links
      var _props3 = this.props,
          _ExpandedComponent = _props3.ExpandedComponent,
          expandedHeight = _props3.expandedHeight;


      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_index.Table, {
          colHeaders: headers,
          tableData: tableData,
          expandedHeight: expandedHeight,
          ExpandedComponent: function ExpandedComponent(props) {
            return _react2.default.createElement(_ExpandedComponent, props);
          },
          expandedData: expandedData,
          onRowClick: function onRowClick(e) {}
        })
      );
    }
  }], [{
    key: 'setTxManager',


    /*
     * set TxManager to use
     * useful for setting custom TxManager options
     *
     * @static
     * @returns {void}
     */
    value: function setTxManager(txManager) {
      (0, _bsert2.default)(txManager instanceof _bpanelUtils.TxManager);
      this.txManager = txManager;
    }
  }, {
    key: 'propTypes',
    get: function get() {
      return {
        TxManagerOptions: _propTypes2.default.object, // see TxManagerOptions
        transactions: _propTypes2.default.array, // bcoin tx json
        wallet: _propTypes2.default.string,
        headerMap: _propTypes2.default.object, // UXTX.toJSON -> table headers mapping
        expandedHeight: _propTypes2.default.number // pass along to Table
      };
    }

    /*
     * Get default props
     * headerMap:
     *   map of bpanel-utils.UXTX.toJSON output -> table header names
     * expandedMap.mainData
     * expandedMap.subData
     *   maps from bpanel-utils UXTX.toJSON output -> expanded view data
     *
     * @static
     * @returns {Object}
     */

  }, {
    key: 'defaultProps',
    get: function get() {
      return {
        // list of transactions from bcoin api
        transactions: [],
        wallet: null,
        protocol: null,
        headerMap: {
          date: 'Date',
          uxtype: 'Send/Receive',
          wallet: 'Wallet',
          accountLabel: 'Account',
          amount: 'Amount',
          confirmations: 'Confirmations',
          addressLabel: 'Address'
        },
        expandedMap: {
          mainData: {
            hash: 'Tx Hash',
            block: 'Block Hash'
          },
          subData: {
            coinbaseLabel: 'Is Coinbase',
            segwitLabel: 'Is Segwit',
            weight: 'Weight',
            inputAmount: 'Input Total',
            outputAmount: 'Output Total',
            confirmations: 'Number of Confirmations',
            fee: 'Fee',
            rate: 'Fee/kB',
            inputCount: 'Input Count',
            outputCount: 'Output Count',
            size: 'Size',
            height: 'Block Height'
          }
        },
        expandedHeight: 420,
        ExpandedComponent: _ExpandedDataRow2.default,
        TxManagerOptions: _bpanelUtils.TxManagerOptions,
        UXTXOptions: _bpanelUtils.UXTXOptions
      };
    }
  }]);
  return TransactionTable;
}(_react.PureComponent);

exports.default = (0, _utils.connectTheme)(TransactionTable);