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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _excluded = ["showSelection", "onSelectionChanged", "dataHook", "hideHeader"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import defaultTo from 'lodash/defaultTo';
import classNames from 'classnames';
import { ScrollSync } from 'react-scroll-sync';
import deprecationLog from '../utils/deprecationLog';
import { st, classes } from './Table.st.css';
import DataTable from './DataTable';
import Checkbox from '../Checkbox';
import { TableContext } from './TableContext';
import { BulkSelection } from './BulkSelection';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { TableBulkSelectionCheckbox, TableContent, TableEmptyState, TableSubToolbar, TableTitleBar, TableToolbarContainer } from './components';
var hasUnselectablesSymbol = Symbol('hasUnselectables');
export function createColumns(_ref2) {
  var tableProps = _ref2.tableProps,
      bulkSelectionContext = _ref2.bulkSelectionContext;

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

    var isRowSelectionDisabled = function isRowSelectionDisabled(rowData) {
      return selectionDisabled === true || typeof selectionDisabled === 'function' && selectionDisabled(rowData);
    };

    return {
      title: tableProps.hideBulkSelectionCheckbox ? '' : /*#__PURE__*/React.createElement(TableBulkSelectionCheckbox, {
        dataHook: "table-select"
      }),
      onCellClick: function onCellClick(column, row, rowNum, event) {
        if (row.unselectable) {
          return;
        }

        event.stopPropagation();

        if (isRowSelectionDisabled(row)) {
          return;
        }

        var id = defaultTo(row.id, rowNum);
        toggleSelectionById(id, 'Checkbox');
      },
      render: function render(row, rowNum) {
        var id = defaultTo(row.id, rowNum);
        var tooltipContent = row.checkboxTooltipContent;
        return row.unselectable ? null : /*#__PURE__*/React.createElement(Checkbox, {
          disabled: isRowSelectionDisabled(row),
          dataHook: "row-select",
          checked: isSelected(id),
          tooltipProps: {
            disabled: !tooltipContent
          },
          tooltipContent: tooltipContent
        });
      },
      // Apply different column width when just the single selection column is marked
      // as sticky (looks weird otherwise when stickied with default 12px width).
      width: tableProps.stickyColumns === 1 ? '34px' : '12px',
      style: function style(_, row) {
        return row.unselectable ? undefined : {
          cursor: 'pointer'
        };
      }
    };
  };

  return tableProps.showSelection ? [createCheckboxColumn(bulkSelectionContext)].concat(_toConsumableArray(tableProps.columns)) : tableProps.columns;
}
export function getDataTableProps(tableProps) {
  /* eslint-disable no-unused-vars */
  var showSelection = tableProps.showSelection,
      onSelectionChanged = tableProps.onSelectionChanged,
      dataHook = tableProps.dataHook,
      hideHeader = tableProps.hideHeader,
      props = _objectWithoutProperties(tableProps, _excluded);

  return _objectSpread(_objectSpread({}, props), {}, {
    rowClass: classNames(tableProps.rowClass, classes.tableRow)
  });
}
/**
 * Table is a composite 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 separately.
 */

export var Table = /*#__PURE__*/function (_React$Component) {
  _inherits(Table, _React$Component);

  var _super = _createSuper(Table);

  function Table() {
    var _this;

    _classCallCheck(this, Table);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      leftShadowVisible: false,
      rightShadowVisible: false
    });

    _defineProperty(_assertThisInitialized(_this), "_handleUpdateScrollShadows", function (leftShadowVisible, rightShadowVisible) {
      if (leftShadowVisible !== _this.state.leftShadowVisible) {
        _this.setState({
          leftShadowVisible: leftShadowVisible
        });
      }

      if (rightShadowVisible !== _this.state.rightShadowVisible) {
        _this.setState({
          rightShadowVisible: rightShadowVisible
        });
      }
    });

    return _this;
  }

  _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 _this$props = this.props,
          children = _this$props.children,
          withWrapper = _this$props.withWrapper,
          dataHook = _this$props.dataHook;
      return withWrapper ? /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHook
      }, children) : children;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          data = _this$props2.data,
          selectedIds = _this$props2.selectedIds,
          showSelection = _this$props2.showSelection,
          deselectRowsByDefault = _this$props2.deselectRowsByDefault,
          infiniteScroll = _this$props2.infiniteScroll,
          totalSelectableCount = _this$props2.totalSelectableCount,
          onSelectionChanged = _this$props2.onSelectionChanged,
          hasMore = _this$props2.hasMore,
          horizontalScroll = _this$props2.horizontalScroll,
          hideHeader = _this$props2.hideHeader,
          selectionDisabled = _this$props2.selectionDisabled;

      if (hideHeader) {
        deprecationLog('<Table>\'s "hideHeader" prop is deprecated. To hide the table header, render "<Table.Content titleBarVisible={false}>" in its "children" prop');
      }

      var hasUnselectables = null;
      var allIds = data.map(function (rowData, rowIndex) {
        return rowData.unselectable || typeof selectionDisabled === 'function' && selectionDisabled(rowData) ? hasUnselectables = hasUnselectablesSymbol : defaultTo(rowData.id, rowIndex);
      });

      if (hasUnselectables === hasUnselectablesSymbol) {
        allIds = allIds.filter(function (rowId) {
          return rowId !== hasUnselectablesSymbol;
        });
      }

      var _this$state = this.state,
          leftShadowVisible = _this$state.leftShadowVisible,
          rightShadowVisible = _this$state.rightShadowVisible;

      var contextValue = _objectSpread(_objectSpread({}, this.props), {}, {
        leftShadowVisible: leftShadowVisible,
        rightShadowVisible: rightShadowVisible,
        onUpdateScrollShadows: this._handleUpdateScrollShadows
      });

      var table = /*#__PURE__*/React.createElement(TableContext.Provider, {
        value: contextValue
      }, showSelection ? /*#__PURE__*/React.createElement(BulkSelection, {
        ref: function ref(_ref) {
          return _this2.bulkSelection = _ref;
        },
        selectedIds: selectedIds,
        deselectRowsByDefault: deselectRowsByDefault,
        selectionDisabled: selectionDisabled,
        hasMoreInBulkSelection: infiniteScroll && Boolean(totalSelectableCount) && hasMore,
        totalCount: totalSelectableCount,
        allIds: allIds,
        onSelectionChanged: onSelectionChanged
      }, this.renderChildren()) : this.renderChildren());
      return horizontalScroll ? /*#__PURE__*/React.createElement(ScrollSync, {
        proportional: false,
        horizontal: true,
        vertical: false
      }, table) : table;
    }
  }]);

  return Table;
}(React.Component);

_defineProperty(Table, "ToolbarContainer", TableToolbarContainer);

_defineProperty(Table, "Titlebar", TableTitleBar);

_defineProperty(Table, "Content", TableContent);

_defineProperty(Table, "SubToolbar", TableSubToolbar);

_defineProperty(Table, "EmptyState", TableEmptyState);

_defineProperty(Table, "BulkSelectionCheckbox", TableBulkSelectionCheckbox);

Table.displayName = 'Table';
Table.defaultProps = _objectSpread(_objectSpread({}, DataTable.defaultProps), {}, {
  showSelection: false,
  hideBulkSelectionCheckbox: false,
  children: [/*#__PURE__*/React.createElement(Table.Content, {
    key: "content"
  })],
  withWrapper: true,
  showLastRowDivider: false,
  horizontalScroll: false,
  stickyColumns: 0,
  isRowDisabled: function isRowDisabled() {
    return false;
  }
});
Table.propTypes = {
  /** Any wrapper element that eventually includes <Table.Content/> as a child */
  children: PropTypes.any,

  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Called when row selection changes.
   * Receives 2 arguments: `selectedIds` array, and a `change` object ( in this order).
   * `selectedIds` is the updated selected ids.
   * The `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.
   * The `change` object also contains an `origin` property which indicates what initiated the selection change.
   * The `origin` property can be set when selection is updated using a `SelectionContext` method. */
  onSelectionChanged: PropTypes.func,

  /** Indicates whether to show a selection column (with checkboxes).<br>
   * To hide the selection checkbox from a specific row, set its `row.unselectable` (in the `data` prop) to `true`. */
  showSelection: PropTypes.bool,

  /** Indicates whether to hide the bulk selection ("Select All") checkbox in the table header when showing the selection column */
  hideBulkSelectionCheckbox: PropTypes.bool,

  /** Array of selected row ids.
   *  Ideally, 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)]),

  /** Can be either a boolean or a function.
   * If passed a boolean, disables selection for all table rows.
   * If passed a function, it will be called for every row in `data` to specify if its checkbox should be disabled. Example: `selectionDisabled={(rowData) => !rowData.isSelectable}` */
  selectionDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),

  /** Indicates the `SelectionContext.toggleAll` behaviour when some rows are selected. `true` means SOME -> NONE, `false` means SOME -> ALL */
  deselectRowsByDefault: PropTypes.bool,

  /**
   *  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 does not render anything to the DOM by itself.*/
  withWrapper: PropTypes.bool,

  /**
   * A callback function called on each column title click. Signature `onSortClick(colData, colNum)`
   */
  onSortClick: PropTypes.func,
  // The following props are derived directly from <DataTable/> component

  /** Allows to open multiple row details */
  allowMultiDetailsExpansion: PropTypes.bool,

  /** The data to display.<br>
   * For each `row` in `data`, If `row.id` exists then it will be used as the React `key` value for each row, otherwise, the row index will be used.<br>
   * When `showSelection` prop is set, if `row.unselectable` is truthy for a `row` in `data`, no checkbox will be displayed for the row in the selection column.
   * When `checkboxTooltipContent` is set, a tooltip with the requested content will be displayed over the selection checkbox (content can be either string or a node)if `row.unselectable` is truthy for a `row` in `data`, no checkbox will be displayed for the row in the selection column.  */
  data: PropTypes.array,
  // Not performing any shape validation to not hurt performance.

  /** Configuration of the table's columns.<br>
   *  Each column needs to specify:
   *    * `title`: a string or an element to display in the table header for this column
   *    * `render`: a function which will be called for every row in `data` to display this row's value for this column<br>
   *
   *  Each column can also specify these fields:
   *    * `onCellClick`: A callback method to be called when a cell in this column is clicked. Signature: `onCellClick(column, rowData, rowNum, event)`
   *    * `sortable`: Sets whether this field is sortable. If `true` clicking the header will call `onSortClick`
   *    * `sortDescending`: Sets what sort icon to display in the column header. `true` will show an up arrow, `false` will show a down arrow, `undefined' will show no icon
   *    * `infoTooltipProps`: Props object for column header's [tooltip](/?path=/story/components-api-components--tooltip). Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
   *    * `style`: Can be a CSS style `object` or a function that returns a style `object` (signature: `style(column, rowData, rowNum)`). Sets the column inline style. Vertical padding cannot be set here, please use table's `rowVerticalPadding` prop
   *    * `align`: Sets the alignment of the column content
   *    * `width`: CSS value to set the width to use for this column. No value means column will try to contain its children, if possible
   *    * `important`: Sets whether font color of the column should be stronger, more dominant
   *    * `stickyActionCell`: Sets the `<TableActionCell/>` to be sticky to the right.
   *    */
  columns: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
    render: PropTypes.func.isRequired,
    onCellClick: PropTypes.func,
    sortable: PropTypes.bool,
    sortDescending: PropTypes.bool,
    infoTooltipProps: PropTypes.shape(TooltipCommonProps),
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
    align: PropTypes.oneOf(['start', 'center', 'end']),
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    important: PropTypes.bool,
    stickyActionCell: PropTypes.bool
  })).isRequired,

  /** A func that gets row data and returns a class(es) to apply to that specific row */
  dynamicRowClass: PropTypes.func,

  /** A func that gets row data and returns boolean if row is highlighted or not */
  isRowHighlight: PropTypes.func,

  /** Whether there are more items to be loaded. Event listeners are removed if false. */
  hasMore: PropTypes.bool,

  /** Indicates whether to invoke `loadMore` on the initial rendering. */
  initialLoad: PropTypes.bool,

  /** [deprecated] This prop has no affect. To hide the table header, render `<Table.Content titleBarVisible={false}>` in `children`. */
  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,

  /** Indicates the total number of selectable items in the table, including those not yet loaded.
   * When `infiniteScroll` and this prop are set and the user does bulk selection ("Select All"), and there are still unloaded items (`hasMore` is 'true`),
   * the table enters an "Infinite Bulk Selection" mode, where newly loaded items get selected by default and `SelectionContext` holds the not-selected items rather than the selected items.
   * In this case, `SelectionContext.infiniteBulkSelected` is `true` and  `SelectionContext.selectedCount` is the value of `totalSelectableCount` minus the count of unselected items. */
  totalSelectableCount: PropTypes.number,

  /** 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)`. To enable hover effect you should set this prop.*/
  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:
   * - `large`: 24px
   * - `medium`: 18px
   * - `small`: with the feature toggle: 15px, without the feature toggle: 12px
   * - `tiny`: 12px
   * */
  rowVerticalPadding: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),

  /** Function that returns React component that will be rendered in row details section. Example: `rowDetails={(row, rowNum) => <MyRowDetailsComponent {...row} />}` */
  rowDetails: PropTypes.func,

  /** Removes row details padding */
  removeRowDetailsPadding: PropTypes.bool,

  /** 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,

  /** A flag specifying weather to show a divider after the last row */
  showLastRowDivider: PropTypes.bool,

  /** ++EXPERIMENTAL++ Virtualize the table scrolling for long list items */
  virtualized: PropTypes.bool,

  /** ++EXPERIMENTAL++ Set virtualized table height */
  virtualizedTableHeight: PropTypes.number,

  /** ++EXPERIMENTAL++ Set virtualized table row height */
  virtualizedLineHeight: PropTypes.number,

  /** ++EXPERIMENTAL++ Set ref on virtualized List containing table rows */
  virtualizedListRef: PropTypes.any,

  /** The width of the fixed table. Can be in percentages or pixels. */
  width: PropTypes.string,

  /** Table styling. Supports `standard` and `neutral`. */
  skin: PropTypes.oneOf(['standard', 'neutral']),

  /** Enable horizontal scroll. */
  horizontalScroll: PropTypes.bool,

  /** Number of columns to sticky from the left (should be used with horizontal scroll). */
  stickyColumns: PropTypes.number,

  /** a function which will be called for every row in `data` to specify if it should appear as disabled. Example: `isRowDisabled={(rowData) => !rowData.isEnabled}` */
  isRowDisabled: PropTypes.func
}; // export default Table;