rsuite-table - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

lib/Cell.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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');
@@ -24,2 +26,4 @@
 
+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 LAYER_WIDTH = 30;
@@ -81,5 +85,8 @@ var Cell = _react2.default.createClass({
         var align = _props.align;
+        var sortable = _props.sortable;
 
+        var props = _objectWithoutProperties(_props, ['width', 'left', 'height', 'style', 'className', 'firstColumn', 'lastColumn', 'isHeaderCell', 'headerHeight', 'layer', 'onTreeToggle', 'hasChildren', 'rowIndex', 'rowKey', 'align', 'sortable']);
 
         var classes = (0, _classnames2.default)(this.prefix('cell'), className, {
+            'sortable': sortable && isHeaderCell,
             'first': firstColumn,
@@ -104,2 +111,6 @@ 'last': lastColumn
 
+        if (sortable) {
+            contentStyles.paddingRight = 28;
+        }
+
         var expandIcon = hasChildren && firstColumn ? _react2.default.createElement('i', { className: 'expand-icon fa',
@@ -120,3 +131,3 @@ onClick: function onClick(event) {
             'div',
-            { className: classes, style: styles },
+            _extends({ className: classes, style: styles }, props),
             _react2.default.createElement(
@@ -123,0 +134,0 @@ 'div',

lib/Column.js

@@ -18,6 +18,6 @@ 'use strict';
         align: _react.PropTypes.oneOf(['left', 'center', 'right']),
-        sort: _react.PropTypes.func,
         width: _react.PropTypes.number.isRequired,
         fixed: _react.PropTypes.bool,
-        resizable: _react.PropTypes.bool
+        resizable: _react.PropTypes.bool,
+        sortable: _react.PropTypes.bool
     },
@@ -24,0 +24,0 @@

lib/HeaderCell.js

@@ -36,7 +36,9 @@ 'use strict';
     propTypes: {
-        sort: _react.PropTypes.bool,
+        sortable: _react.PropTypes.bool,
         resizable: _react.PropTypes.bool,
         onColumnResizeEnd: _react.PropTypes.func,
         onColumnResize: _react.PropTypes.func,
-        onColumnResizeMove: _react.PropTypes.func
+        onColumnResizeMove: _react.PropTypes.func,
+        onSortColumn: _react.PropTypes.func,
+        headerHeight: _react.PropTypes.number
     },
@@ -86,10 +88,49 @@ _onColumnResize: function _onColumnResize(width, left, event) {
     },
+    renderSortColumn: function renderSortColumn() {
+        var _props2 = this.props;
+        var left = _props2.left;
+        var headerHeight = _props2.headerHeight;
+        var sortable = _props2.sortable;
+        var sortColumn = _props2.sortColumn;
+        var sortType = _props2.sortType;
+        var dataKey = _props2.dataKey;
+        var columnWidth = this.state.columnWidth;
+
+
+        var styles = {
+            left: columnWidth + left - 16,
+            top: headerHeight / 2 - 8
+        };
+
+        if (sortable) {
+
+            var icon = _react2.default.createElement('i', { className: sortColumn === dataKey ? 'fa fa-sort-' + sortType : 'fa fa-sort' });
+            return _react2.default.createElement(
+                'div',
+                { style: styles, className: this.prefix('sortable') },
+                icon
+            );
+        }
+
+        return null;
+    },
+    handleClick: function handleClick() {
+        var _props3 = this.props;
+        var dataKey = _props3.dataKey;
+        var sortType = _props3.sortType;
+        var onSortColumn = _props3.onSortColumn;
+
+        onSortColumn && onSortColumn(dataKey, sortType === 'asc' ? 'desc' : 'asc');
+    },
     render: function render() {
 
         var classes = this.prefix('cell-header');
+        var sortable = this.props.sortable;
 
+
         return _react2.default.createElement(
             'div',
             { className: classes },
-            _react2.default.createElement(_Cell2.default, _extends({ isHeaderCell: true }, this.props)),
+            _react2.default.createElement(_Cell2.default, _extends({ isHeaderCell: true }, this.props, { onClick: this.handleClick })),
+            this.renderSortColumn(),
             !_isIE2.default && this.renderResizeSpanner()
@@ -96,0 +137,0 @@ );

lib/Table.js

@@ -58,4 +58,11 @@ 'use strict';
         expand: _react.PropTypes.bool,
-        locale: _react.PropTypes.object
-
+        locale: _react.PropTypes.object,
+        sortColumn: _react.PropTypes.string,
+        sortType: _react.PropTypes.oneOf(['desc', 'asc']),
+        /**
+         * @callback
+         * @params: sortColumn dataKey
+         * @params: sortType
+         */
+        onSortColumn: _react.PropTypes.func
     },
@@ -66,2 +73,3 @@ getDefaultProps: function getDefaultProps() {
             rowHeight: 36,
+            sortType: 'asc',
             locale: {
@@ -137,6 +145,6 @@ emptyMessage: 'No data found'
 
+        var left = 0; // Cell left margin
+        var isFixedColumn = false; // IF there are fixed columns
         var headerCells = []; // Table header cell
         var bodyCells = []; // Table body cell
-        var left = 0; // Cell left margin
-        var isFixedColumn = false; // IF there are fixed columns
         var columns = this.props.children;
@@ -146,2 +154,6 @@ var _state = this.state;
         var columnWidth = _state.columnWidth;
+        var _props = this.props;
+        var sortColumn = _props.sortColumn;
+        var sortType = _props.sortType;
+        var onSortColumn = _props.onSortColumn;
 
@@ -156,3 +168,3 @@
             var align = _column$props.align;
-            var sort = _column$props.sort;
+            var sortable = _column$props.sortable;
             var resizable = _column$props.resizable;
@@ -172,3 +184,3 @@
             var cellProps = {
-                width: width, fixed: fixed, left: left, align: align, resizable: resizable,
+                width: width, fixed: fixed, left: left, align: align, resizable: resizable, sortable: sortable,
                 height: _this.props.rowHeight,
@@ -182,3 +194,5 @@ headerHeight: _this.props.headerHeight,
             var headerCellsProps = {
-                dataKey: columnChildren[1].props.dataKey
+                headerHeight: _this.props.headerHeight || _this.props.rowHeight,
+                dataKey: columnChildren[1].props.dataKey,
+                sortColumn: sortColumn, sortType: sortType, onSortColumn: onSortColumn
             };
@@ -250,13 +264,13 @@
     render: function render() {
-        var _props = this.props;
-        var children = _props.children;
-        var className = _props.className;
-        var _props$width = _props.width;
-        var width = _props$width === undefined ? 0 : _props$width;
-        var height = _props.height;
-        var style = _props.style;
-        var rowHeight = _props.rowHeight;
-        var classPrefix = _props.classPrefix;
-        var isTree = _props.isTree;
-        var id = _props.id;
+        var _props2 = this.props;
+        var children = _props2.children;
+        var className = _props2.className;
+        var _props2$width = _props2.width;
+        var width = _props2$width === undefined ? 0 : _props2$width;
+        var height = _props2.height;
+        var style = _props2.style;
+        var rowHeight = _props2.rowHeight;
+        var classPrefix = _props2.classPrefix;
+        var isTree = _props2.isTree;
+        var id = _props2.id;
 
@@ -290,5 +304,5 @@ var _getCells = this.getCells();
     renderTableHeader: function renderTableHeader(headerCells, rowWidth) {
-        var _props2 = this.props;
-        var rowHeight = _props2.rowHeight;
-        var headerHeight = _props2.headerHeight;
+        var _props3 = this.props;
+        var rowHeight = _props3.rowHeight;
+        var headerHeight = _props3.headerHeight;
 
@@ -368,8 +382,8 @@ var row = this.renderRow({
 
-        var _props3 = this.props;
-        var headerHeight = _props3.headerHeight;
-        var rowHeight = _props3.rowHeight;
-        var height = _props3.height;
-        var data = _props3.data;
-        var isTree = _props3.isTree;
+        var _props4 = this.props;
+        var headerHeight = _props4.headerHeight;
+        var rowHeight = _props4.rowHeight;
+        var height = _props4.height;
+        var data = _props4.data;
+        var isTree = _props4.isTree;
 
@@ -376,0 +390,0 @@ var bodyStyles = {

package.json

 {
   "name": "rsuite-table",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "RSuite Table",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49398

increased by6.42%

Lines of code

1130

increased by5.31%

No dependency changes