@bigfishtv/cockpit/es/components/table/FixedDataTable.js

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 _class, _temp;

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

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Table, Column } from 'fixed-data-table';
import deepEqual from 'deep-equal';
import classnames from 'classnames';

import { titleCase } from '../../utils/stringUtils';
import { sortByObjectKey } from '../../utils/tableUtils';
import * as SortTypes from '../../constants/SortTypes';

import FixedDataTableTextCell from './cell/FixedDataTableTextCell';
import FixedDataTableHeaderCellSort from './cell/FixedDataTableHeaderCellSort';

// we define this because react-docgen fails when defaultProp directly references an imported component
var DefaultHeaderCell = function DefaultHeaderCell(props) {
	return React.createElement(FixedDataTableHeaderCellSort, props);
};
var DefaultCell = function DefaultCell(props) {
	return React.createElement(FixedDataTableTextCell, props);
};

/**
 * Typically wrapped by Table component, simply displays a fixed-data-table with the data provided
 */
var FixedDataTable = (_temp = _class = function (_Component) {
	_inherits(FixedDataTable, _Component);

	function FixedDataTable(props) {
		var _ref;

		_classCallCheck(this, FixedDataTable);

		var _this = _possibleConstructorReturn(this, _Component.call(this));

		_this.onSortChange = function (columnKey, sortDirection) {
			var _columnSortDirections;

			var _this$props = _this.props,
			    fields = _this$props.fields,
			    uncontrolled = _this$props.uncontrolled,
			    onSortChange = _this$props.onSortChange;

			var field = fields.filter(function (field) {
				return field.key === columnKey;
			})[0];
			var sortType = 'sortType' in field ? field.sortType : 'string';
			if (!uncontrolled) {
				onSortChange(columnKey, sortDirection, sortType);
			} else {
				var data = [].concat(_this.state.data).sort(sortByObjectKey(columnKey, sortDirection, sortType));
				_this.setState({ data: data });
			}
			_this.setState({ columnSortDirections: (_columnSortDirections = {}, _columnSortDirections[columnKey] = sortDirection, _columnSortDirections) });
		};

		_this.handleColumnResize = function (newColumnWidth, columnKey) {
			var _extends2;

			_this.setState({
				columnWidths: _extends({}, _this.state.columnWidths, (_extends2 = {}, _extends2[columnKey] = newColumnWidth, _extends2))
			});
		};

		_this.handleGetRowClassName = function (rowIndex) {
			var row = _this.state.data[rowIndex];
			var selected = _this.props.selectedIds.indexOf(row.id) >= 0;
			return selected ? 'selected' : '';
		};

		_this.handleRowClick = function (event, rowIndex) {
			event.stopPropagation();
			_this.props.onSelect(_this.state.data[rowIndex]);
		};

		_this.handleRowDoubleClick = function (event, rowIndex) {
			event.stopPropagation();
			_this.props.onSelected(_this.state.data[rowIndex]);
		};

		var columnWidths = {};
		props.fields.map(function (field) {
			columnWidths[field.key] = field.width || props.cellWidth;
		});
		_this.state = {
			data: props.data,
			columnSortDirections: props.columnKey && props.sortDirection ? (_ref = {}, _ref[props.columnKey] = props.sortDirection, _ref) : {},
			columnWidths: columnWidths
		};
		return _this;
	}

	FixedDataTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
		var _this2 = this;

		if (!deepEqual(this.state.data, nextProps.data)) {
			var columnKey = !this.state.data.length ? this.props.defaultSortField : Object.keys(this.state.columnSortDirections)[0];
			var sortDirection = !this.state.data.length ? this.props.defaultSortDirection : this.state.columnSortDirections[columnKey];
			this.setState({ data: nextProps.data }, function () {
				if (_this2.props.uncontrolled) _this2.onSortChange(columnKey, sortDirection);
			});
		}
	};

	FixedDataTable.prototype.render = function render() {
		var _this3 = this;

		var _state = this.state,
		    data = _state.data,
		    columnSortDirections = _state.columnSortDirections,
		    columnWidths = _state.columnWidths;

		var _props = this.props,
		    fields = _props.fields,
		    selectedIds = _props.selectedIds,
		    checkboxSelection = _props.checkboxSelection,
		    tableWidth = _props.tableWidth,
		    tableHeight = _props.tableHeight,
		    headerHeight = _props.headerHeight,
		    rowHeight = _props.rowHeight,
		    HeaderCell = _props.HeaderCell,
		    DefaultCell = _props.DefaultCell,
		    DefaultHeaderCell = _props.DefaultHeaderCell,
		    props = _objectWithoutProperties(_props, ['fields', 'selectedIds', 'checkboxSelection', 'tableWidth', 'tableHeight', 'headerHeight', 'rowHeight', 'HeaderCell', 'DefaultCell', 'DefaultHeaderCell']);

		return React.createElement(
			Table,
			_extends({}, props, {
				rowsCount: data.length,
				headerHeight: headerHeight,
				rowHeight: rowHeight,
				width: tableWidth,
				height: tableHeight,
				onColumnResizeEndCallback: this.handleColumnResize,
				isColumnResizing: false,
				rowClassNameGetter: this.handleGetRowClassName,
				onRowClick: checkboxSelection ? function () {} : this.handleRowClick,
				onRowDoubleClick: this.handleRowDoubleClick }),
			fields.map(function (field, i) {
				var BodyCell = field.Cell || DefaultCell;
				var HeaderCell = field.HeaderCell || DefaultHeaderCell;
				var width = columnWidths[field.key];
				var headerTitle = field.value || titleCase(field.key);
				var sortDir = columnSortDirections[field.key];
				var schema = field.schema || {};
				return React.createElement(Column, {
					key: i,
					columnKey: field.key,
					fixed: field.fixed,
					isResizable: field.resizable,
					minWidth: field.minWidth,
					maxWidth: field.maxWidth,
					flexGrow: field.flexGrow,
					header: React.createElement(
						HeaderCell,
						{
							data: data,
							selectedIds: selectedIds,
							onSelectionChange: _this3.props.onSelectionChange,
							onSortChange: _this3.onSortChange,
							sortDir: sortDir,
							className: classnames(field.sortable && 'sortable') },
						headerTitle
					),
					cell: React.createElement(BodyCell, { data: data, schema: schema, onSelect: _this3.props.onSelect, selectedIds: selectedIds }),
					width: width
				});
			})
		);
	};

	return FixedDataTable;
}(Component), _class.propTypes = {
	/** Array of objects representing table rows */
	data: PropTypes.arrayOf(PropTypes.object),
	/** Array of objects representing table columns/schema */
	fields: PropTypes.arrayOf(PropTypes.object),
	/** Array of selected row ids  */
	selectedIds: PropTypes.arrayOf(PropTypes.number),
	/** Whether or not component should control its own sorting */
	uncontrolled: PropTypes.bool,
	/** Whether or not to inject a checkbox column to control selection state */
	checkboxSelection: PropTypes.bool,
	tableWidth: PropTypes.number,
	tableHeight: PropTypes.number,
	cellWidth: PropTypes.number,
	rowHeight: PropTypes.number,
	headerHeight: PropTypes.number,
	/** column key to sort by, can even be nested e.g. 'collection.title' */
	defaultSortField: PropTypes.string,
	defaultSortDirections: PropTypes.oneOf([SortTypes.ASC, SortTypes.DESC]),
	/** On row select */
	onSelect: PropTypes.func,
	/** On row double click */
	onSelected: PropTypes.func,
	/** For updating selectedIds in bulk */
	onSelectionChange: PropTypes.func,
	/** Component to replace default HeaderCell */
	HeaderCell: PropTypes.func,
	/** Component to replace default table cell component */
	DefaultCell: PropTypes.func
}, _class.defaultProps = {
	data: [],
	fields: [],
	selectedIds: [],
	uncontrolled: true,
	tableWidth: 600,
	tableHeight: 500,
	cellWidth: 250,
	rowHeight: 50,
	headerHeight: 36,
	defaultSortField: 'modified',
	defaultSortDirection: SortTypes.DESC,
	onSelect: function onSelect() {
		return console.warn('[FixedDataTable] no onSelect prop provided');
	},
	onSelected: function onSelected() {
		return console.warn('[FixedDataTable] no onSelected prop provided');
	},
	DefaultHeaderCell: DefaultHeaderCell,
	DefaultCell: DefaultCell
}, _temp);
export { FixedDataTable as default };