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

wix-style-react

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

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

import React from 'react';
import PropTypes from 'prop-types';
import defaultTo from 'lodash/defaultTo';
import classNames from 'classnames';

import style from './Table.st.css';
import DataTable from '../DataTable';
import Checkbox from '../Checkbox';
import { TableContext } from './TableContext';
import { BulkSelection, BulkSelectionState } from './BulkSelection';
import Tooltip from '../Tooltip/Tooltip';
import { TableToolbarContainer, TableTitleBar, TableContent, TableEmptyState } from './components';

export 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: React.createElement(Checkbox, {
        dataHook: 'table-select',
        checked: bulkSelectionState === BulkSelectionState.ALL,
        indeterminate: bulkSelectionState === BulkSelectionState.SOME,
        onChange: function onChange() {
          return toggleAll();
        }
      }),
      render: function render(row, rowNum) {
        var id = defaultTo(row.id, rowNum);
        return React.createElement(
          'div',
          { onClick: function onClick(e) {
              return e.stopPropagation();
            } },
          React.createElement(Checkbox, {
            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;
}

export 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: classNames(tableProps.rowClass, style.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.
 */
export var 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 ? React.createElement(
        'div',
        _extends({
          'data-hook': this.props.dataHook
        }, style('root', { isRowClickable: !!this.props.onRowClick }, this.props)),
        children
      ) : children;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

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

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

Table.displayName = 'Table';

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

Table.propTypes = {
  children: PropTypes.any,
  dataHook: PropTypes.string,

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

  /** Add scroll listeners to the window, or else, the component's parentNode. */
  useWindow: PropTypes.bool,
  /** Add scroll listeners to specified DOM Object. */
  scrollElement: PropTypes.object,
  /** Table cell vertical padding. should be 'medium' or 'large'  */
  rowVerticalPadding: PropTypes.oneOf(['medium', 'large']),
  /** Function that returns React component that will be rendered in row details section. Example: `rowDetails={(row, rowNum) => <MyRowDetailsComponent {...row} />}` */
  rowDetails: PropTypes.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: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /** A class to apply to all table body rows */
  rowClass: PropTypes.string,

  /** Should the table show the header when data is empty */
  showHeaderWhenEmpty: PropTypes.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: PropTypes.func,
  /** Indicates wether to show a selection column (with checkboxes) */
  showSelection: PropTypes.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: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
  /** The width of the fixed table. Can be in percentages or pixels. */
  width: PropTypes.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: PropTypes.bool
};

// export default Table;