wix-style-react/dist/src/Table/Table.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Table = 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 _class, _temp;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.createColumns = createColumns;
exports.getDataTableProps = getDataTableProps;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _defaultTo = require('lodash/defaultTo');

var _defaultTo2 = _interopRequireDefault(_defaultTo);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _TableSt = require('./Table.st.css');

var _TableSt2 = _interopRequireDefault(_TableSt);

var _DataTable = require('../DataTable');

var _DataTable2 = _interopRequireDefault(_DataTable);

var _Checkbox = require('../Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _TableContext = require('./TableContext');

var _BulkSelection = require('./BulkSelection');

var _Tooltip = require('../Tooltip/Tooltip');

var _Tooltip2 = _interopRequireDefault(_Tooltip);

var _components = require('./components');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function createColumns(_ref2) {
  var tableProps = _ref2.tableProps,
      bulkSelectionContext = _ref2.bulkSelectionContext;

  var createCheckboxColumn = function createCheckboxColumn(_ref3) {
    var toggleAll = _ref3.toggleAll,
        bulkSelectionState = _ref3.bulkSelectionState,
        toggleSelectionById = _ref3.toggleSelectionById,
        isSelected = _ref3.isSelected;

    return {
      title: _react2.default.createElement(_Checkbox2.default, {
        dataHook: 'table-select',
        checked: bulkSelectionState === _BulkSelection.BulkSelectionState.ALL,
        indeterminate: bulkSelectionState === _BulkSelection.BulkSelectionState.SOME,
        onChange: function onChange() {
          return toggleAll();
        }
      }),
      render: function render(row, rowNum) {
        var id = (0, _defaultTo2.default)(row.id, rowNum);
        return _react2.default.createElement(
          'div',
          { onClick: function onClick(e) {
              return e.stopPropagation();
            } },
          _react2.default.createElement(_Checkbox2.default, {
            dataHook: 'row-select',
            checked: isSelected(id),
            onChange: function onChange() {
              return toggleSelectionById(id);
            }
          })
        );
      },
      width: '12px'
    };
  };

  return tableProps.showSelection ? [createCheckboxColumn(bulkSelectionContext)].concat(_toConsumableArray(tableProps.columns)) : tableProps.columns;
}

function getDataTableProps(tableProps) {
  /* eslint-disable no-unused-vars */
  var showSelection = tableProps.showSelection,
      selectedIds = tableProps.selectedIds,
      onSelectionChanged = tableProps.onSelectionChanged,
      dataHook = tableProps.dataHook,
      newDesign = tableProps.newDesign,
      hideHeader = tableProps.hideHeader,
      props = _objectWithoutProperties(tableProps, ['showSelection', 'selectedIds', 'onSelectionChanged', 'dataHook', 'newDesign', 'hideHeader']);

  return _extends({}, props, {
    newDesign: true,
    rowClass: (0, _classnames2.default)(tableProps.rowClass, _TableSt2.default.tableRow)
  });
}

/**
 * Table is a composit component that allows adding SelectionColumn, Toolbar (on top of the TitleBar).
 * It is a context provider, and thus the Table.Consumer, Table.TitleBar and Table.Content can be rendered separatly.
 */
var Table = exports.Table = (_temp = _class = function (_React$Component) {
  _inherits(Table, _React$Component);

  function Table() {
    _classCallCheck(this, Table);

    return _possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).apply(this, arguments));
  }

  _createClass(Table, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate() {
      // Table is not really a PureComponent
      return true;
    }
  }, {
    key: 'setSelectedIds',
    value: function setSelectedIds(selectedIds) {
      this.bulkSelection.setSelectedIds(selectedIds);
    }
  }, {
    key: 'renderChildren',
    value: function renderChildren() {
      var children = this.props.children;
      return this.props.withWrapper ? _react2.default.createElement(
        'div',
        _extends({
          'data-hook': this.props.dataHook
        }, (0, _TableSt2.default)('root', { isRowClickable: !!this.props.onRowClick }, this.props)),
        children
      ) : children;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return _react2.default.createElement(
        _TableContext.TableContext.Provider,
        { value: this.props },
        this.props.showSelection ? _react2.default.createElement(
          _BulkSelection.BulkSelection,
          {
            ref: function ref(_ref) {
              return _this2.bulkSelection = _ref;
            },
            selectedIds: this.props.selectedIds,
            allIds: this.props.data.map(function (rowData, rowIndex) {
              return (0, _defaultTo2.default)(rowData.id, rowIndex);
            }),
            onSelectionChanged: this.props.onSelectionChanged
          },
          this.renderChildren()
        ) : this.renderChildren()
      );
    }
  }]);

  return Table;
}(_react2.default.Component), _class.ToolbarContainer = _components.TableToolbarContainer, _class.Titlebar = _components.TableTitleBar, _class.Content = _components.TableContent, _class.EmptyState = _components.TableEmptyState, _temp);


Table.displayName = 'Table';

Table.defaultProps = _extends({}, _DataTable2.default.defaultProps, {
  showSelection: false,
  children: [_react2.default.createElement(Table.Content, { key: 'content' })],
  withWrapper: true,
  showLastRowDivider: false
});

Table.propTypes = {
  children: _propTypes2.default.any,
  dataHook: _propTypes2.default.string,

  //DataTable Props
  /** Allows to open multiple row details */
  allowMultiDetailsExpansion: _propTypes2.default.bool,
  /** The data to display. (If data.id exists then it will be used as the React key value for each row, otherwise, the rowIndex will be used) */
  data: _propTypes2.default.array, // Not performing any shape validation to not hurt performance.
  /** Configuration of the table's columns. See table below */
  columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string]).isRequired,
    render: _propTypes2.default.func.isRequired,
    sortable: _propTypes2.default.bool,
    infoTooltipProps: _propTypes2.default.shape(_Tooltip2.default.propTypes),
    sortDescending: _propTypes2.default.bool,
    align: _propTypes2.default.oneOf(['start', 'center', 'end'])
  })).isRequired,
  /** A func that gets row data and returns a class(es) to apply to that specific row */
  dynamicRowClass: _propTypes2.default.func,
  /** Whether there are more items to be loaded. Event listeners are removed if false. */
  hasMore: _propTypes2.default.bool,
  /** Should we hide the header of the table. */
  hideHeader: _propTypes2.default.bool,
  /** An id to pass to the table */
  id: _propTypes2.default.string,
  /** If true, table will not render all data to begin with, but will gradually render the data as the user scrolls */
  infiniteScroll: _propTypes2.default.bool,
  /** If infiniteScroll is on, this prop will determine how many rows will be rendered on each load */
  itemsPerPage: _propTypes2.default.number,
  /** The loader to show when loading more items. */
  loader: _propTypes2.default.node,
  /** A callback when more items are requested by the user. */
  loadMore: _propTypes2.default.func,
  /** A callback method to be called on row click. Signature: `onRowClick(rowData, rowNum)` */
  onRowClick: _propTypes2.default.func,
  /** A callback method to be called on row mouse enter. Signature: `onMouseEnterRow(rowData, rowNum)` */
  onMouseEnterRow: _propTypes2.default.func,
  /** A callback method to be called on row mouse leave. Signature: `onMouseLeaveRow(rowData, rowNum)` */
  onMouseLeaveRow: _propTypes2.default.func,

  /** Add scroll listeners to the window, or else, the component's parentNode. */
  useWindow: _propTypes2.default.bool,
  /** Add scroll listeners to specified DOM Object. */
  scrollElement: _propTypes2.default.object,
  /** Table cell vertical padding. should be 'medium' or 'large'  */
  rowVerticalPadding: _propTypes2.default.oneOf(['medium', 'large']),
  /** Function that returns React component that will be rendered in row details section. Example: `rowDetails={(row, rowNum) => <MyRowDetailsComponent {...row} />}` */
  rowDetails: _propTypes2.default.func,
  /** A string data-hook to apply to all table body rows. or a func which calculates the data-hook for each row  - Signature: `(rowData, rowNum) => string` */
  rowDataHook: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
  /** A class to apply to all table body rows */
  rowClass: _propTypes2.default.string,

  /** Should the table show the header when data is empty */
  showHeaderWhenEmpty: _propTypes2.default.bool,

  // Table props

  /** Called when row selection changes.
   * Receives 2 arguments: `selectedIds` array, and a `change` object ( in this order).
   * `selectedIds` is the updated selected ids.
   * `change` object has a `type` property with the following possible values: 'ALL', 'NONE', 'SINGLE_TOGGLE'.
   * In case of 'SINGLE_TOGGLE' the `change` object will also include an `id` prop with the item's id,
   * and a `value` prop with the new boolean selection state of the item. */
  onSelectionChanged: _propTypes2.default.func,
  /** Indicates wether to show a selection column (with checkboxes) */
  showSelection: _propTypes2.default.bool,
  /** Array of selected row ids.
   *  Idealy, id should be a property on the data row object.
   *  If data objects do not have id property, then the data row's index would be used as an id. */
  selectedIds: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.arrayOf(_propTypes2.default.number)]),
  /** The width of the fixed table. Can be in percentages or pixels. */
  width: _propTypes2.default.string,
  /**
   *  When false then Table would not create a `<div/>` wrapper around it's children.
   *  Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it doesn't render anything to the DOM by itself.*/
  withWrapper: _propTypes2.default.bool
};

// export default Table;