Merge pull request #2 from react-component/master

merge base

Author: John

HISTORY.md

@@ -1,6 +1,14 @@
 # History
 ----
 
+## 5.6.0 / 2017-08-27
+
+- Better empty data style for fixed-columns Table.
+
+## 5.5.0 / 2017-08-17
+
+- Add `onRowContextMenu`
+
 ## 5.4.0 / 2017-05-23
 
 - Add `onRowMouseEnter`, `onRowMouseLeave`.

assets/index.less

@@ -66,6 +66,13 @@
     border-bottom: 1px solid @table-border-color;
     text-align: center;
     position: relative;
+    &-fixed-columns {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: transparent;
+      pointer-events: none;
+    }
   }
 
   table {
@@ -82,6 +89,10 @@
 
   td {
     border-bottom: 1px solid @table-border-color;
+    &:empty:after {
+      content: '.'; // empty cell placeholder
+      visibility: hidden;
+    }
   }
 
   tr {

index.js

@@ -1,6 +1,6 @@
 {
   "name": "rc-table",
-  "version": "5.4.2",
+  "version": "5.6.1",
   "description": "table ui component for react",
   "keywords": [
     "react",
@@ -17,14 +17,6 @@
   ],
   "main": "./lib/index",
   "module": "./es/index",
-  "entry": {
-    "rc-table": [
-      "./assets/animation.less",
-      "./assets/bordered.less",
-      "./assets/index.less",
-      "./src/index.js"
-    ]
-  },
   "homepage": "http://github.com/react-component/table",
   "maintainers": [
     "yiminghe@gmail.com",
@@ -39,9 +31,18 @@
   },
   "licenses": "MIT",
   "config": {
-    "port": 8000
+    "port": 8000,
+    "entry": {
+      "rc-table": [
+        "./assets/animation.less",
+        "./assets/bordered.less",
+        "./assets/index.less",
+        "./src/index.js"
+      ]
+    }
   },
   "scripts": {
+    "dist": "rc-tools run dist",
     "build": "rc-tools run build",
     "compile": "rc-tools run compile --babel-runtime",
     "gh-pages": "rc-tools run gh-pages",
@@ -61,7 +62,7 @@
     }
   },
   "dependencies": {
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "6.x",
     "component-classes": "^1.2.6",
     "lodash.get": "^4.4.2",
     "prop-types": "^15.5.8",

package.json

@@ -32,6 +32,9 @@ export default class Table extends React.Component {
     indentSize: PropTypes.number,
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
+    onRowContextMenu: PropTypes.func,
+    onRowMouseEnter: PropTypes.func,
+    onRowMouseLeave: PropTypes.func,
     expandIconColumnIndex: PropTypes.number,
     showHeader: PropTypes.bool,
     title: PropTypes.func,
@@ -58,6 +61,7 @@ export default class Table extends React.Component {
     onExpandedRowsChange() {},
     onRowClick() {},
     onRowDoubleClick() {},
+    onRowContextMenu() {},
     onRowMouseEnter() {},
     onRowMouseLeave() {},
     prefixCls: 'rc-table',
@@ -295,7 +299,7 @@ export default class Table extends React.Component {
     );
   }
 
-  getRowsByData(data, visible, indent, columns, fixed) {
+  getRowsByData(originalData, visible, indent, columns, fixed) {
     const props = this.props;
     const {
       childrenColumnName,
@@ -308,6 +312,7 @@ export default class Table extends React.Component {
       expandedRowStyle,
       onRowClick,
       onRowDoubleClick,
+      onRowContextMenu,
       onRowMouseEnter,
       onRowMouseLeave,
     } = props;
@@ -317,7 +322,10 @@ export default class Table extends React.Component {
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
-
+    let data = originalData;
+    if (this.columnManager.isAnyColumnsFixed() && data.length === 0) {
+      data = [{ key: 'empty-placeholder-data' }];
+    }
     for (let i = 0; i < data.length; i++) {
       const record = data[i];
       const key = this.getRowKey(record, i);
@@ -370,6 +378,7 @@ export default class Table extends React.Component {
           expandIconColumnIndex={expandIconColumnIndex}
           onRowClick={onRowClick}
           onRowDoubleClick={onRowDoubleClick}
+          onRowContextMenu={onRowContextMenu}
           onRowMouseEnter={onRowMouseEnter}
           onRowMouseLeave={onRowMouseLeave}
           height={height}
@@ -576,11 +585,17 @@ export default class Table extends React.Component {
 
   getEmptyText() {
     const { emptyText, prefixCls, data } = this.props;
-    return !data.length ? (
-      <div className={`${prefixCls}-placeholder`} key="emptyText">
+    if (data.length) {
+      return null;
+    }
+    const fixed = this.columnManager.isAnyColumnsFixed();
+    const emptyClassName =
+     `${prefixCls}-placeholder${fixed ? ` ${prefixCls}-placeholder-fixed-columns` : ''}`;
+    return (
+      <div className={emptyClassName} key="emptyText">
         {(typeof emptyText === 'function') ? emptyText() : emptyText}
       </div>
-    ) : null;
+    );
   }
 
   getHeaderRowStyle(columns, rows) {

src/Table.jsx

@@ -8,6 +8,7 @@ export default class TableRow extends React.Component {
     onDestroy: PropTypes.func,
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
+    onRowContextMenu: PropTypes.func,
     onRowMouseEnter: PropTypes.func,
     onRowMouseLeave: PropTypes.func,
     record: PropTypes.object,
@@ -41,6 +42,7 @@ export default class TableRow extends React.Component {
   static defaultProps = {
     onRowClick() {},
     onRowDoubleClick() {},
+    onRowContextMenu() {},
     onRowMouseEnter() {},
     onRowMouseLeave() {},
     onDestroy() {},
@@ -93,6 +95,11 @@ export default class TableRow extends React.Component {
     onRowDoubleClick(record, index, event);
   }
 
+  onContextMenu = (event) => {
+    const { record, index, onRowContextMenu } = this.props;
+    onRowContextMenu(record, index, event);
+  }
+
   onMouseEnter = (event) => {
     const { record, index, onRowMouseEnter, onHover, hoverKey } = this.props;
     onHover(true, hoverKey);
@@ -199,6 +206,7 @@ export default class TableRow extends React.Component {
         onDoubleClick={this.onRowDoubleClick}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
+        onContextMenu={this.onContextMenu}
         className={`${prefixCls} ${className} ${prefixCls}-level-${indent}`}
         style={style}
       >

src/TableRow.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { renderToJson, mountToJson } from 'enzyme-to-json';
-import Table from '..';
+import Table from '../src';
 
 describe('Table.expand', () => {
   const columns = [

tests/Table.expandRow.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import Table from '..';
+import Table from '../src';
 
 describe('Table.fixedColumns', () => {
   // see:

tests/Table.fixedColumns.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import React from 'react';
 import { mount } from 'enzyme';
-import Table from '..';
+import Table from '../src';
 
 describe('Table with grouping columns', () => {
   it('group columns', () => {

tests/Table.groupingColumns.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import Table from '..';
+import Table from '../src';
 
 describe('Table', () => {
   const data = [
@@ -205,6 +205,16 @@ describe('Table', () => {
       expect(call[1]).toBe(0);
       expect(call[2].type).toBe('doubleclick');
     });
+
+    it('fires row contextmenu event', () => {
+      const onRowContextMenu = jest.fn();
+      const wrapper = mount(createTable({ onRowContextMenu }));
+      wrapper.find('tbody tr').first().simulate('contextMenu');
+      const call = onRowContextMenu.mock.calls[0];
+      expect(call[0]).toBe(data[0]);
+      expect(call[1]).toBe(0);
+      expect(call[2].type).toBe('contextmenu');
+    });
   });
 
   it('renders column correctly', () => {