rc-table - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

lib/Table.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -11,113 +13,132 @@
 var React = require('react');
+var TableRow = require('./TableRow');
 
-//表格列
+var Table = (function (_React$Component) {
+  function Table(props) {
+    var _this = this;
 
-var TableColumn = (function (_React$Component) {
-  function TableColumn() {
-    _classCallCheck(this, TableColumn);
+    _classCallCheck(this, Table);
 
-    if (_React$Component != null) {
-      _React$Component.apply(this, arguments);
-    }
+    _get(Object.getPrototypeOf(Table.prototype), 'constructor', this).call(this, props);
+    this.state = {
+      expandedRows: [],
+      data: (props.data || []).concat()
+    };
+    ['handleRowDestroy', 'handleExpand'].forEach(function (m) {
+      _this[m] = _this[m].bind(_this);
+    });
   }
 
-  _inherits(TableColumn, _React$Component);
+  _inherits(Table, _React$Component);
 
-  _createClass(TableColumn, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'th',
-        { width: this.props.width },
-        this.props.title
-      );
+  _createClass(Table, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if ('data' in nextProps) {
+        this.setState({
+          data: (nextProps.data || []).concat()
+        });
+      }
     }
-  }]);
-
-  return TableColumn;
-})(React.Component);
-
-/**
- * 表格行
- */
-
-var TableRow = (function (_React$Component2) {
-  function TableRow() {
-    _classCallCheck(this, TableRow);
-
-    if (_React$Component2 != null) {
-      _React$Component2.apply(this, arguments);
+  }, {
+    key: 'handleExpand',
+    value: function handleExpand(expanded, record) {
+      var expandedRows = this.state.expandedRows.concat();
+      var info = expandedRows.filter(function (i) {
+        return i.record === record;
+      });
+      if (info.length) {
+        info[0].expanded = expanded;
+      } else {
+        expandedRows.push({ record: record, expanded: expanded });
+      }
+      this.setState({
+        expandedRows: expandedRows
+      });
     }
-  }
-
-  _inherits(TableRow, _React$Component2);
-
-  _createClass(TableRow, [{
-    key: 'render',
-    value: function render() {
-      var self = this,
-          columns = self.props.columns,
-          record = self.props.record,
-          index = self.props.index,
-          cells = [];
-      for (var i = 0; i < columns.length; i++) {
-        var col = columns[i],
-            renderer = col.renderer,
-            text = record[col.dataIndex];
-        if (renderer) {
-          text = renderer(text, record, index);
+  }, {
+    key: 'handleRowDestroy',
+    value: function handleRowDestroy(record) {
+      var expandedRows = this.state.expandedRows;
+      var index = -1;
+      expandedRows.forEach(function (r, i) {
+        if (r === record) {
+          index = i;
         }
-        cells.push(React.createElement(
-          'td',
-          { key: col.key },
-          text
-        ));
+      });
+      if (index !== -1) {
+        expandedRows.splice(index, 1);
       }
+    }
+  }, {
+    key: 'isRowExpanded',
+    value: function isRowExpanded(record) {
+      var info = this.state.expandedRows.filter(function (i) {
+        return i.record === record;
+      });
+      return info[0] && info[0].expanded;
+    }
+  }, {
+    key: 'getThs',
+    value: function getThs() {
+      return this.props.columns.map(function (c) {
+        return React.createElement(
+          'th',
+          { key: c.key },
+          c.title
+        );
+      });
+    }
+  }, {
+    key: 'getExpandedRow',
+    value: function getExpandedRow(content, visible) {
+      var prefixCls = this.props.prefixCls;
       return React.createElement(
         'tr',
-        null,
-        cells
+        { style: { display: visible ? '' : 'none' }, className: prefixCls + '-expanded-row' },
+        React.createElement(
+          'td',
+          { colSpan: this.props.columns.length },
+          content
+        )
       );
     }
-  }]);
-
-  return TableRow;
-})(React.Component);
-
-var Table = (function (_React$Component3) {
-  function Table() {
-    _classCallCheck(this, Table);
-
-    if (_React$Component3 != null) {
-      _React$Component3.apply(this, arguments);
-    }
-  }
-
-  _inherits(Table, _React$Component3);
-
-  _createClass(Table, [{
-    key: '_getColumns',
-    value: function _getColumns() {
-      var self = this,
-          columns = self.props.columns,
-          rst = [];
-      for (var i = 0; i < columns.length; i++) {
-        var col = columns[i];
-        rst.push(React.createElement(TableColumn, { title: col.title, dataIndex: col.dataIndex, width: col.width, key: col.key }));
-      }
-      return rst;
-    }
   }, {
-    key: '_getRows',
-    value: function _getRows() {
-      var self = this,
-          data = self.props.data,
-          columns = self.props.columns,
-          rst = [];
-
-      var keyFn = this.props.rowKey;
+    key: 'getRowsByData',
+    value: function getRowsByData(data, visible) {
+      var props = this.props;
+      var columns = props.columns;
+      var childrenColumnName = props.childrenColumnName;
+      var expandedRowRender = props.expandedRowRender;
+      var rst = [];
+      var keyFn = props.rowKey;
       for (var i = 0; i < data.length; i++) {
         var record = data[i];
         var key = keyFn ? keyFn(record, i) : undefined;
-        rst.push(React.createElement(TableRow, { record: record, index: i, columns: columns, key: key }));
+        var childrenColumn = record[childrenColumnName];
+        var expandedRowContent;
+        if (expandedRowRender) {
+          expandedRowContent = expandedRowRender(record, i);
+        }
+        rst.push(React.createElement(TableRow, {
+          record: record,
+          onDestroy: this.handleRowDestroy,
+          index: i,
+          visible: visible,
+          onExpand: this.handleExpand,
+          expandable: childrenColumn || expandedRowContent,
+          expanded: this.isRowExpanded(record),
+          prefixCls: props.prefixCls + '-row',
+          childrenColumnName: childrenColumnName,
+          columns: columns,
+          key: key }));
+
+        var subVisible = visible && this.isRowExpanded(record);
+
+        if (expandedRowContent) {
+          rst.push(this.getExpandedRow(expandedRowContent, subVisible));
+        }
+        if (childrenColumn) {
+          rst = rst.concat(this.getRowsByData(childrenColumn, subVisible));
+        }
       }
@@ -127,27 +148,63 @@ return rst;
   }, {
+    key: 'getRows',
+    value: function getRows() {
+      return this.getRowsByData(this.state.data, true);
+    }
+  }, {
+    key: 'getColGroup',
+    value: function getColGroup() {
+      var cols = this.props.columns.map(function (c) {
+        return React.createElement('col', { key: c.key, style: { width: c.width } });
+      });
+      return React.createElement(
+        'colgroup',
+        null,
+        cols
+      );
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var self = this,
-          columns = self._getColumns(),
-          rows = self._getRows();
-      var className = 'rc-table';
-      if (this.props.className) {
-        className += ' ' + this.props.className;
+      var props = this.props;
+      var prefixCls = props.prefixCls;
+      var columns = this.getThs();
+      var rows = this.getRows();
+      var className = props.prefixCls;
+      if (props.className) {
+        className += ' ' + props.className;
       }
       return React.createElement(
-        'table',
-        { className: className },
+        'div',
+        { className: className, style: props.style },
         React.createElement(
-          'thead',
-          null,
+          'div',
+          { className: prefixCls + '-header' },
           React.createElement(
-            'tr',
+            'table',
             null,
-            columns
+            this.getColGroup(),
+            React.createElement(
+              'thead',
+              null,
+              React.createElement(
+                'tr',
+                null,
+                columns
+              )
+            )
           )
         ),
         React.createElement(
-          'tbody',
-          null,
-          rows
+          'div',
+          { className: prefixCls + '-body', style: props.bodyStyle },
+          React.createElement(
+            'table',
+            null,
+            this.getColGroup(),
+            React.createElement(
+              'tbody',
+              null,
+              rows
+            )
+          )
         )
@@ -161,2 +218,18 @@ );
 
+Table.propTypes = {
+  columns: React.PropTypes.array,
+  prefixCls: React.PropTypes.string,
+  bodyStyle: React.PropTypes.object,
+  style: React.PropTypes.object,
+  childrenColumnName: React.PropTypes.string
+};
+
+Table.defaultProps = {
+  columns: [],
+  prefixCls: 'rc-table',
+  bodyStyle: {},
+  style: {},
+  childrenColumnName: 'children'
+};
+
 module.exports = Table;

package.json

 {
   "name": "rc-table",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "table ui component for react",
@@ -12,4 +12,4 @@ "keywords": [
   "maintainers": [
-    "[e-mail]",
-    "[e-mail]"
+    "[e-mail]",
+    "[e-mail]"
   ],
@@ -44,2 +44,4 @@ "repository": {
     "precommit-hook": "^1.0.7",
+    "rc-dropdown": "~1.1.0",
+    "rc-menu": "~3.4.0",
     "rc-server": "3.x",
@@ -46,0 +48,0 @@ "rc-tools": "3.x",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

16394

increased by86.11%

Number of package files

7

increased by40%

Lines of code

320

increased by133.58%

Worsened metrics

Dev dependency count

8

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes