coreui/lib/components/Table/Table.js

Platform Core UI

'use strict';

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _NumberPickerInput = require('../NumberPickerInput');

var _NumberPickerInput2 = _interopRequireDefault(_NumberPickerInput);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _TextInput = require('../TextInput');

var _TextInput2 = _interopRequireDefault(_TextInput);

var _TableHandlers = require('./TableHandlers');

var _TableHandlers2 = _interopRequireDefault(_TableHandlers);

var _TableHelpers = require('./TableHelpers');

var _TableHelpers2 = _interopRequireDefault(_TableHelpers);

var _compose = require('recompose/compose');

var _compose2 = _interopRequireDefault(_compose);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _withHandlers = require('recompose/withHandlers');

var _withHandlers2 = _interopRequireDefault(_withHandlers);

var _withState = require('recompose/withState');

var _withState2 = _interopRequireDefault(_withState);

var _ramda = require('ramda');

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

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

var systemStyles = {};

var maybeRenderPager = function maybeRenderPager(baseTableProps) {
  var maxPageIndex = baseTableProps.maxPageIndex,
      onPageChange = baseTableProps.onPageChange,
      onNextPageClick = baseTableProps.onNextPageClick,
      onPrevPageClick = baseTableProps.onPrevPageClick,
      pageIndex = baseTableProps.pageIndex,
      prevPageIndex = baseTableProps.prevPageIndex,
      pagination = baseTableProps.pagination;


  var effectivePageIndex = (0, _ramda.is)(Number, pageIndex) ? pageIndex : prevPageIndex;
  var pageNumber = (0, _ramda.inc)(effectivePageIndex);
  var nextDisabled = effectivePageIndex === maxPageIndex;
  var prevDisabled = effectivePageIndex === 0;

  return pagination && _react2.default.createElement(
    'div',
    { style: { display: 'flex', justifyContent: 'space-between' } },
    _react2.default.createElement(
      _Button2.default,
      {
        className: (0, _dedupe2.default)('btn-link', { disabled: prevDisabled }),
        onClick: onPrevPageClick,
        style: { color: prevDisabled ? '#ccc' : '#2975e9' }
      },
      _react2.default.createElement(
        'div',
        { style: { display: 'flex', alignItems: 'middle' } },
        _react2.default.createElement('span', { className: 'icon icon-chevron-left' }),
        _react2.default.createElement(
          'span',
          { title: 'Previous' },
          'Previous'
        )
      )
    ),
    _react2.default.createElement(_NumberPickerInput2.default, {
      max: (0, _ramda.inc)(maxPageIndex),
      min: 1,
      onChange: onPageChange,
      style: { maxWidth: 100 },
      value: (0, _ramda.is)(Number, pageIndex) ? pageNumber : pageIndex
    }),
    _react2.default.createElement(
      _Button2.default,
      {
        className: (0, _dedupe2.default)('btn-link', { disabled: nextDisabled }),
        onClick: onNextPageClick,
        style: { color: nextDisabled ? '#ccc' : '#2975e9' }
      },
      _react2.default.createElement(
        'div',
        { style: { display: 'flex', alignItems: 'middle' } },
        _react2.default.createElement(
          'span',
          { title: 'Next' },
          'Next'
        ),
        _react2.default.createElement('span', { className: 'icon icon-chevron-right' })
      )
    )
  );
};

var maybeRenderSearch = function maybeRenderSearch(baseTableProps) {
  var onSearchChange = baseTableProps.onSearchChange,
      searchable = baseTableProps.searchable,
      searchPlaceholder = baseTableProps.searchPlaceholder,
      searchValue = baseTableProps.searchValue;


  return searchable && _react2.default.createElement(
    'div',
    { className: 'form-group' },
    _react2.default.createElement(
      'div',
      { className: 'search' },
      _react2.default.createElement(_TextInput2.default, {
        className: 'search-input',
        onChange: onSearchChange,
        placeholder: searchPlaceholder,
        style: { maxWidth: 300 },
        type: 'search',
        value: searchValue
      })
    )
  );
};

var maybeRenderSortIcons = function maybeRenderSortIcons(baseTableProps, _ref) {
  var id = _ref.id,
      isSortable = _ref.isSortable;
  var sortAscending = baseTableProps.sortAscending,
      sortField = baseTableProps.sortField;

  var isSorted = sortField === id;
  var className = isSortable && (0, _dedupe2.default)('icon', {
    'icon-chevron-down': isSorted && !sortAscending,
    'icon-chevron-up': isSorted && sortAscending,
    'icon-chevrons-vertical': !isSorted
  });

  return isSortable && _react2.default.createElement('span', { className: className });
};

var renderHeaderCell = function renderHeaderCell(baseTableProps, c, i) {
  var onHeaderClick = baseTableProps.onHeaderClick;
  var isSortable = c.isSortable;


  return _react2.default.createElement(
    'th',
    {
      key: i,
      onClick: function onClick() {
        return isSortable && onHeaderClick(c);
      },
      style: { cursor: isSortable ? 'pointer' : 'normal' }
    },
    _react2.default.createElement(
      'div',
      { style: { display: 'flex', justifyContent: 'space-between' } },
      c.displayName,
      maybeRenderSortIcons(baseTableProps, c)
    )
  );
};

var renderCell = function renderCell(data, _ref2) {
  var component = _ref2.component,
      id = _ref2.id;

  var Component = component;
  var cellData = data[id];

  return _react2.default.createElement(
    'td',
    { key: id },
    Component ? _react2.default.createElement(Component, { data: cellData }) : cellData
  );
};

var renderRow = function renderRow(baseTableProps, data, i) {
  var columns = baseTableProps.columns,
      onRowClick = baseTableProps.onRowClick,
      selectedRows = baseTableProps.selectedRows,
      selection = baseTableProps.selection,
      valueField = baseTableProps.valueField;

  var rowId = valueField && data[valueField];

  return _react2.default.createElement(
    'tr',
    {
      className: (0, _dedupe2.default)({ 'table-active': valueField && selectedRows.has(rowId) }),
      key: valueField ? rowId : i,
      onClick: function onClick() {
        return selection && valueField && onRowClick(data);
      }
    },
    columns.map((0, _ramda.partial)(renderCell, [data]))
  );
};

var TableBase = function TableBase(props) {
  var className = props.className,
      columns = props.columns,
      data = props.data,
      style = props.style;


  return _react2.default.createElement(
    'div',
    null,
    maybeRenderSearch(props),
    _react2.default.createElement(
      'table',
      { className: className, style: style },
      _react2.default.createElement(
        'thead',
        null,
        _react2.default.createElement(
          'tr',
          null,
          columns.map((0, _ramda.partial)(renderHeaderCell, [props]))
        )
      ),
      _react2.default.createElement(
        'tbody',
        null,
        data.length ? data.map((0, _ramda.partial)(renderRow, [props])) : _react2.default.createElement(
          'tr',
          null,
          _react2.default.createElement(
            'td',
            { colSpan: columns.length },
            'No rows to display'
          )
        )
      )
    ),
    maybeRenderPager(props)
  );
};

TableBase.propTypes = {
  className: _react.PropTypes.string,
  columns: _react.PropTypes.array,
  data: _react.PropTypes.array.isRequired,
  maxPageIndex: _react.PropTypes.number,
  onHeaderClick: _react.PropTypes.func,
  onNextPageClick: _react.PropTypes.func,
  onPageChange: _react.PropTypes.func,
  onPrevPageClick: _react.PropTypes.func,
  onRowClick: _react.PropTypes.func,
  onSearchChange: _react.PropTypes.func,
  pageIndex: _react.PropTypes.number,
  pageSize: _react.PropTypes.number,
  prevPageIndex: _react.PropTypes.number,
  searchable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.instanceOf(Set)]),
  searchPlaceholder: _react.PropTypes.string,
  searchValue: _react.PropTypes.string,
  selectedRows: _react.PropTypes.instanceOf(Set),
  selection: _react.PropTypes.bool,
  selectMultiple: _react.PropTypes.bool,
  sortable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.instanceOf(Set)]),
  sortAscending: _react.PropTypes.bool,
  sortField: _react.PropTypes.string,
  style: _react.PropTypes.object,
  valueField: _react.PropTypes.string
};

var TableContainer = (0, _compose2.default)((0, _withState2.default)('pageIndex', 'setPageIndex', 0), (0, _withState2.default)('prevPageIndex', 'setPrevPageIndex', 0), (0, _withState2.default)('searchValue', 'setSearchValue', ''), (0, _withState2.default)('selectedRows', 'setSelectedRows', function (props) {
  return new Set(props.selectedRows);
}), (0, _withState2.default)('sortAscending', 'setSortAscending', function (props) {
  return props.sortAscending;
}), (0, _withState2.default)('sortField', 'setSortField', function (props) {
  return props.sortField;
}), (0, _mapProps2.default)(function (_ref3) {
  var className = _ref3.className,
      sheet = _ref3.sheet,
      style = _ref3.style,
      theme = _ref3.theme,
      rest = _objectWithoutProperties(_ref3, ['className', 'sheet', 'style', 'theme']);

  return _extends({
    className: (0, _dedupe2.default)(sheet.classes.table, theme.classes.table, className),
    style: (0, _ramda.merge)(theme.styles.table, style)
  }, rest);
}), (0, _mapProps2.default)((0, _ramda.partial)(_TableHelpers2.default.normalizedProps, [_TableHelpers2.default])), (0, _withHandlers2.default)((0, _TableHandlers2.default)(_TableHelpers2.default)))(TableBase);

var StyledTable = _Shared2.default.injectSheet(systemStyles)(TableContainer);

var Table = function Table(props) {
  return _react2.default.createElement(
    StyledTable,
    props,
    props.children
  );
};

Table.defaultProps = _TableHelpers2.default.tableDefaultProps();

Table.displayName = 'Table';

Table.propTypes = {
  children: _react.PropTypes.node,
  className: _react.PropTypes.string,
  columns: _react.PropTypes.array,
  data: _react.PropTypes.array.isRequired,
  onClick: _react.PropTypes.func,
  onSort: _react.PropTypes.func,
  pageSize: _react.PropTypes.number,
  pagination: _react.PropTypes.bool,
  searchable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.array]),
  searchPlaceholder: _react.PropTypes.string,
  selectedRows: _react.PropTypes.instanceOf(Set),
  selection: _react.PropTypes.bool,
  selectMultiple: _react.PropTypes.bool,
  sortable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.array]),
  sortAscending: _react.PropTypes.bool,
  sortField: _react.PropTypes.string,
  style: _react.PropTypes.object,
  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object]),
  valueField: _react.PropTypes.string
};

_Shared2.default.registerComponent('Table', Table);

exports.default = Table;