Built 5.4.0 release

bvaughn · Mar 3, 2016 · 0ac51b6 · 0ac51b6
1 parent 8e25894
commit 0ac51b6
Show file tree

Hide file tree

Showing 20 changed files with 416 additions and 232 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 Changelog
 ------------
 
+### 5.4.0
+Added optional `headerRenderer` property to `FlexColumn` to enable custom `FlexTable` header cells.
+
 ##### 5.3.2
 Decoupled x/y axes in `Grid` when determining whether or not to enable overflow.
 This results in more robustly handling issues like the one reported in PR #133.

diff --git a/dist/commonjs/FlexTable/FlexColumn.js b/dist/commonjs/FlexTable/FlexColumn.js
@@ -5,9 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultCellRenderer = defaultCellRenderer;
 exports.defaultCellDataGetter = defaultCellDataGetter;
+exports.defaultHeaderRenderer = defaultHeaderRenderer;
 
 var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _SortIndicator = require('./SortIndicator');
+
+var _SortIndicator2 = _interopRequireDefault(_SortIndicator);
+
+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; }
@@ -39,6 +48,38 @@ function defaultCellDataGetter(dataKey, rowData, columnData) {
   }
 }
 
+/**
+ * Default table header renderer.
+ */
+function defaultHeaderRenderer(_ref) {
+  var columnData = _ref.columnData;
+  var dataKey = _ref.dataKey;
+  var disableSort = _ref.disableSort;
+  var label = _ref.label;
+  var sortBy = _ref.sortBy;
+  var sortDirection = _ref.sortDirection;
+
+  var showSortIndicator = sortBy === dataKey;
+  var children = [_react2.default.createElement(
+    'div',
+    {
+      className: 'FlexTable__headerTruncatedText',
+      key: 'label',
+      title: label
+    },
+    label
+  )];
+
+  if (showSortIndicator) {
+    children.push(_react2.default.createElement(_SortIndicator2.default, {
+      key: 'SortIndicator',
+      sortDirection: sortDirection
+    }));
+  }
+
+  return children;
+}
+
 /**
  * Describes the header and cell contents of a table column.
  */
@@ -59,39 +100,58 @@ Column.defaultProps = {
   cellDataGetter: defaultCellDataGetter,
   cellRenderer: defaultCellRenderer,
   flexGrow: 0,
-  flexShrink: 1
+  flexShrink: 1,
+  headerRenderer: defaultHeaderRenderer
 };
 Column.propTypes = {
   /** Optional CSS class to apply to cell */
   cellClassName: _react.PropTypes.string,
+
   /**
    * Callback responsible for returning a cell's data, given its :dataKey
    * (dataKey: string, rowData: any): any
    */
   cellDataGetter: _react.PropTypes.func,
+
   /**
    * Callback responsible for rendering a cell's contents.
    * (cellData: any, cellDataKey: string, rowData: any, rowIndex: number, columnData: any): element
    */
   cellRenderer: _react.PropTypes.func,
+
   /** Optional additional data passed to this column's :cellDataGetter */
   columnData: _react.PropTypes.object,
+
   /** Uniquely identifies the row-data attribute correspnding to this cell */
   dataKey: _react.PropTypes.any.isRequired,
+
   /** If sort is enabled for the table at large, disable it for this column */
   disableSort: _react.PropTypes.bool,
+
   /** Flex grow style; defaults to 0 */
   flexGrow: _react.PropTypes.number,
+
   /** Flex shrink style; defaults to 1 */
   flexShrink: _react.PropTypes.number,
+
   /** Optional CSS class to apply to this column's header */
   headerClassName: _react.PropTypes.string,
+
+  /**
+   * Optional callback responsible for rendering a column header contents.
+   * ({ columnData: object, dataKey: string, disableSort: boolean, label: string, sortBy: string, sortDirection: string }): PropTypes.node
+   */
+  headerRenderer: _react.PropTypes.func.isRequired,
+
   /** Header label for this column */
   label: _react.PropTypes.string,
+
   /** Maximum width of column; this property will only be used if :flexGrow is > 0. */
   maxWidth: _react.PropTypes.number,
+
   /** Minimum width of column. */
   minWidth: _react.PropTypes.number,
+
   /** Flex basis (width) for this column; This value can grow or shrink based on :flexGrow and :flexShrink properties. */
   width: _react.PropTypes.number.isRequired
 };

diff --git a/dist/commonjs/FlexTable/FlexTable.js b/dist/commonjs/FlexTable/FlexTable.js
@@ -3,12 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SortDirection = 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; }; }();
 
-exports.SortIndicator = SortIndicator;
-
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -31,6 +28,10 @@ var _Grid = require('../Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
+var _SortDirection = require('./SortDirection');
+
+var _SortDirection2 = _interopRequireDefault(_SortDirection);
+
 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"); } }
@@ -39,20 +40,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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; }
 
-var SortDirection = exports.SortDirection = {
-  /**
-   * Sort items in ascending order.
-   * This means arranging from the lowest value to the highest (e.g. a-z, 0-9).
-   */
-  ASC: 'ASC',
-
-  /**
-   * Sort items in descending order.
-   * This means arranging from the highest value to the lowest (e.g. z-a, 9-0).
-   */
-  DESC: 'DESC'
-};
-
 /**
  * Table component with fixed headers and virtualized rows for improved performance with large data sets.
  * This component expects explicit width, height, and padding parameters.
@@ -269,10 +256,10 @@ var FlexTable = function (_Component) {
       var _column$props2 = column.props;
       var dataKey = _column$props2.dataKey;
       var disableSort = _column$props2.disableSort;
+      var headerRenderer = _column$props2.headerRenderer;
       var label = _column$props2.label;
       var columnData = _column$props2.columnData;
 
-      var showSortIndicator = sortBy === dataKey;
       var sortEnabled = !disableSort && sort;
 
       var classNames = (0, _classnames2.default)('FlexTable__headerColumn', headerClassName, column.props.headerClassName, {
@@ -281,12 +268,21 @@ var FlexTable = function (_Component) {
       var style = this._getFlexStyleForColumn(column);
 
       // If this is a sortable header, clicking it should update the table data's sorting.
-      var newSortDirection = sortBy !== dataKey || sortDirection === SortDirection.DESC ? SortDirection.ASC : SortDirection.DESC;
+      var newSortDirection = sortBy !== dataKey || sortDirection === _SortDirection2.default.DESC ? _SortDirection2.default.ASC : _SortDirection2.default.DESC;
       var onClick = function onClick() {
         sortEnabled && sort(dataKey, newSortDirection);
         onHeaderClick(dataKey, columnData);
       };
 
+      var renderedHeader = headerRenderer({
+        columnData: columnData,
+        dataKey: dataKey,
+        disableSort: disableSort,
+        label: label,
+        sortBy: sortBy,
+        sortDirection: sortDirection
+      });
+
       return _react2.default.createElement(
         'div',
         {
@@ -295,15 +291,7 @@ var FlexTable = function (_Component) {
           style: style,
           onClick: onClick
         },
-        _react2.default.createElement(
-          'div',
-          {
-            className: 'FlexTable__headerTruncatedText',
-            title: label
-          },
-          label
-        ),
-        showSortIndicator && _react2.default.createElement(SortIndicator, { sortDirection: sortDirection })
+        renderedHeader
       );
     }
   }, {
@@ -377,8 +365,9 @@ var FlexTable = function (_Component) {
       var disableHeader = _props4.disableHeader;
 
       var items = disableHeader ? [] : children;
-      return _react2.default.Children.map(items, function (column, columnIndex) {
-        return _this4._createHeader(column, columnIndex);
+
+      return _react2.default.Children.map(items, function (column, index) {
+        return _this4._createHeader(column, index);
       });
     }
   }, {
@@ -404,11 +393,6 @@ var FlexTable = function (_Component) {
   return FlexTable;
 }(_react.Component);
 
-/**
- * Displayed beside a header to indicate that a FlexTable is currently sorted by this column.
- */
-
-
 FlexTable.propTypes = {
   /** One or more FlexColumns describing the data displayed in this row */
   children: function children(props, propName, componentName) {
@@ -507,7 +491,7 @@ FlexTable.propTypes = {
   sortBy: _react.PropTypes.string,
 
   /** FlexTable data is currently sorted in this direction (if it is sorted at all) */
-  sortDirection: _react.PropTypes.oneOf([SortDirection.ASC, SortDirection.DESC]),
+  sortDirection: _react.PropTypes.oneOf([_SortDirection2.default.ASC, _SortDirection2.default.DESC]),
 
   /** Width of list */
   width: _react.PropTypes.number.isRequired
@@ -537,28 +521,4 @@ var _initialiseProps = function _initialiseProps() {
   this.shouldComponentUpdate = _function2.default;
 };
 
-exports.default = FlexTable;
-function SortIndicator(_ref4) {
-  var sortDirection = _ref4.sortDirection;
-
-  var classNames = (0, _classnames2.default)('FlexTable__sortableHeaderIcon', {
-    'FlexTable__sortableHeaderIcon--ASC': sortDirection === SortDirection.ASC,
-    'FlexTable__sortableHeaderIcon--DESC': sortDirection === SortDirection.DESC
-  });
-
-  return _react2.default.createElement(
-    'svg',
-    {
-      className: classNames,
-      width: 18,
-      height: 18,
-      viewBox: '0 0 24 24',
-      xmlns: 'http://www.w3.org/2000/svg'
-    },
-    sortDirection === SortDirection.ASC ? _react2.default.createElement('path', { d: 'M7 14l5-5 5 5z' }) : _react2.default.createElement('path', { d: 'M7 10l5 5 5-5z' }),
-    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' })
-  );
-}
-SortIndicator.propTypes = {
-  sortDirection: _react.PropTypes.oneOf([SortDirection.ASC, SortDirection.DESC])
-};
+exports.default = FlexTable;
diff --git a/dist/commonjs/FlexTable/SortDirection.js b/dist/commonjs/FlexTable/SortDirection.js
@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var SortDirection = {
+  /**
+   * Sort items in ascending order.
+   * This means arranging from the lowest value to the highest (e.g. a-z, 0-9).
+   */
+  ASC: 'ASC',
+
+  /**
+   * Sort items in descending order.
+   * This means arranging from the highest value to the lowest (e.g. z-a, 9-0).
+   */
+  DESC: 'DESC'
+};
+
+exports.default = SortDirection;
diff --git a/dist/commonjs/FlexTable/SortIndicator.js b/dist/commonjs/FlexTable/SortIndicator.js
@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SortIndicator;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _SortDirection = require('./SortDirection');
+
+var _SortDirection2 = _interopRequireDefault(_SortDirection);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Displayed beside a header to indicate that a FlexTable is currently sorted by this column.
+ */
+function SortIndicator(_ref) {
+  var sortDirection = _ref.sortDirection;
+
+  var classNames = (0, _classnames2.default)('FlexTable__sortableHeaderIcon', {
+    'FlexTable__sortableHeaderIcon--ASC': sortDirection === _SortDirection2.default.ASC,
+    'FlexTable__sortableHeaderIcon--DESC': sortDirection === _SortDirection2.default.DESC
+  });
+
+  return _react2.default.createElement(
+    'svg',
+    {
+      className: classNames,
+      width: 18,
+      height: 18,
+      viewBox: '0 0 24 24',
+      xmlns: 'http://www.w3.org/2000/svg'
+    },
+    sortDirection === _SortDirection2.default.ASC ? _react2.default.createElement('path', { d: 'M7 14l5-5 5 5z' }) : _react2.default.createElement('path', { d: 'M7 10l5 5 5-5z' }),
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' })
+  );
+}
+SortIndicator.propTypes = {
+  sortDirection: _react.PropTypes.oneOf([_SortDirection2.default.ASC, _SortDirection2.default.DESC])
+};