From 0cf79e66dfaf1f0f56fee1e52796ec3c86a0c777 Mon Sep 17 00:00:00 2001 From: Luka Drvoderic Date: Thu, 7 Jul 2016 18:26:41 +0200 Subject: [PATCH 1/4] highlight selected row --- README.md | 18 ++++++++++++ assets/index.less | 3 ++ examples/highlightSelectedRow.html | 0 examples/highlightSelectedRow.js | 42 +++++++++++++++++++++++++++ src/Table.jsx | 46 ++++++++++++++++++++++++++++-- 5 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 examples/highlightSelectedRow.html create mode 100644 examples/highlightSelectedRow.js diff --git a/README.md b/README.md index 0653d7414..fbf60e182 100644 --- a/README.md +++ b/README.md @@ -213,6 +213,24 @@ var table = React.render( handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] + + highlightSelectedRow + Boolean + false + whether clicked row should be highlighted + + + selectedKey + String + + the key of the row that will be highlighted + + + onRowSelectionChange + Function(record, key, index) + + handle rowSelectionChange action + columnsPageSize Number diff --git a/assets/index.less b/assets/index.less index e9fd0ac93..2eeeedaba 100644 --- a/assets/index.less +++ b/assets/index.less @@ -68,6 +68,9 @@ &.@{tablePrefixCls}-row-hover { background: #eaf8fe; } + &.@{tablePrefixCls}-row-selected { + background: #fff7e6; + } } th, td { diff --git a/examples/highlightSelectedRow.html b/examples/highlightSelectedRow.html new file mode 100644 index 000000000..e69de29bb diff --git a/examples/highlightSelectedRow.js b/examples/highlightSelectedRow.js new file mode 100644 index 000000000..2d8560812 --- /dev/null +++ b/examples/highlightSelectedRow.js @@ -0,0 +1,42 @@ +/* eslint-disable no-console,func-names,react/no-multi-comp */ +const React = require('react'); +const ReactDOM = require('react-dom'); +const Table = require('rc-table'); +require('rc-table/assets/index.less'); + +const MyTable = React.createClass({ + onRowSelectionChange: function(record, key, index) { + console.log('selection change'); + console.log('record', record); + console.log('key', key); + console.log('index', index); + }, + + render: function() { + const props = this.props; + const columns = [ + {title: '表头1', dataIndex: 'a', key: 'a', width: 100}, + {id: '123', title: '表头2', dataIndex: 'b', key: 'b', width: 100}, + {title: '表头3', dataIndex: 'c', key: 'c', width: 200} + ]; + return ( + + ); + }, +}); + +const data = [{a: '123', key: '1'}, {a: 'cdd', b: 'edd', key: '2'}, {a: '1333', c: 'eee', key: '3'}]; + +ReactDOM.render( +
+

highlight selected row

+ +
, + document.getElementById('__react-content') +); diff --git a/src/Table.jsx b/src/Table.jsx index 3961b0b71..6a42d8181 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -22,6 +22,9 @@ const Table = React.createClass({ onExpandedRowsChange: PropTypes.func, indentSize: PropTypes.number, onRowClick: PropTypes.func, + onRowSelectionChange: PropTypes.func, + highlightSelectedRow: PropTypes.bool, + selectedKey: PropTypes.string, columnsPageRange: PropTypes.array, columnsPageSize: PropTypes.number, expandIconColumnIndex: PropTypes.number, @@ -58,6 +61,8 @@ const Table = React.createClass({ columnsPageSize: 5, expandIconColumnIndex: 0, showHeader: true, + highlightSelectedRow: false, + selectedKey: null, scroll: {}, rowRef() { return null; @@ -85,6 +90,7 @@ const Table = React.createClass({ data: props.data, currentColumnsPage: 0, currentHoverKey: null, + currentSelectedKey: props.selectedKey, scrollPosition: 'left', fixedColumnsRowsHeight: [], }; @@ -114,6 +120,11 @@ const Table = React.createClass({ data: nextProps.data, }); } + if ('selectedKey' in nextProps) { + this.setState({ + currentSelectedKey: nextProps.selectedKey, + }); + } if ('expandedRowKeys' in nextProps) { this.setState({ expandedRowKeys: nextProps.expandedRowKeys, @@ -214,13 +225,12 @@ const Table = React.createClass({ const props = this.props; const childrenColumnName = props.childrenColumnName; const expandedRowRender = props.expandedRowRender; - const { fixedColumnsRowsHeight } = this.state; + const { fixedColumnsRowsHeight, currentSelectedKey } = this.state; let rst = []; const rowClassName = props.rowClassName; const rowRef = props.rowRef; const expandedRowClassName = props.expandedRowClassName; const needIndentSpaced = props.data.some(record => record[childrenColumnName]); - const onRowClick = props.onRowClick; const isAnyColumnsFixed = this.isAnyColumnsFixed(); const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; @@ -240,6 +250,10 @@ const Table = React.createClass({ className += ' ' + props.prefixCls + '-row-hover'; } + if (props.highlightSelectedRow && currentSelectedKey === key) { + className += ' ' + props.prefixCls + '-row-selected'; + } + const onHoverProps = {}; if (isAnyColumnsFixed) { onHoverProps.onHover = this.handleRowHover; @@ -267,7 +281,7 @@ const Table = React.createClass({ childrenColumnName={childrenColumnName} columns={columns || this.getCurrentColumns()} expandIconColumnIndex={expandIconColumnIndex} - onRowClick={onRowClick} + onRowClick={this.onRowClick} style={style} {...onHoverProps} key={key} @@ -586,6 +600,32 @@ const Table = React.createClass({ } }, + onRowClick(record, i, e) { + const {onRowClick} = this.props; + const {currentSelectedKey} = this.state; + const eventTag = e.target.tagName.toLowerCase(); + const eventParentTag = e.target.parentElement.tagName.toLowerCase(); + if (eventTag !== 'input' && eventParentTag !== 'label') { + const key = this.getRowKey(record, i); + if (currentSelectedKey !== key) { + this.onRowSelectionChange(record, key, i); + } + } + if (onRowClick) { + onRowClick.apply(null, arguments); + } + }, + + onRowSelectionChange(record, key, index) { + const {onRowSelectionChange} = this.props; + this.setState({ + currentSelectedKey: key, + }); + if (onRowSelectionChange) { + onRowSelectionChange.apply(null, arguments); + } + }, + render() { const props = this.props; const prefixCls = props.prefixCls; From 3e97003af0797111ac2f03590e7106533feeca88 Mon Sep 17 00:00:00 2001 From: Luka Drvoderic Date: Thu, 7 Jul 2016 18:46:03 +0200 Subject: [PATCH 2/4] lint fixes --- examples/highlightSelectedRow.js | 4 ++-- src/Table.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/highlightSelectedRow.js b/examples/highlightSelectedRow.js index 2d8560812..c13485719 100644 --- a/examples/highlightSelectedRow.js +++ b/examples/highlightSelectedRow.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console,func-names,react/no-multi-comp */ +/* eslint-disable no-console,func-names,react/no-multi-comp,react/jsx-boolean-value */ const React = require('react'); const ReactDOM = require('react-dom'); const Table = require('rc-table'); @@ -17,7 +17,7 @@ const MyTable = React.createClass({ const columns = [ {title: '表头1', dataIndex: 'a', key: 'a', width: 100}, {id: '123', title: '表头2', dataIndex: 'b', key: 'b', width: 100}, - {title: '表头3', dataIndex: 'c', key: 'c', width: 200} + {title: '表头3', dataIndex: 'c', key: 'c', width: 200}, ]; return (
Date: Thu, 7 Jul 2016 19:02:40 +0200 Subject: [PATCH 3/4] lint fix --- src/Table.jsx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index 358a1c28c..a92cb86df 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -471,6 +471,22 @@ const Table = React.createClass({ ) : null; }, + onRowClick(record, i, e) { + const {onRowClick} = this.props; + const {currentSelectedKey} = this.state; + const eventTag = e.target.tagName.toLowerCase(); + const eventParentTag = e.target.parentElement.tagName.toLowerCase(); + if (eventTag !== 'input' && eventParentTag !== 'label') { + const key = this.getRowKey(record, i); + if (currentSelectedKey !== key) { + this.onRowSelectionChange(record, key, i); + } + } + if (onRowClick) { + onRowClick.apply(null, arguments); + } + }, + getMaxColumnsPage() { const { columnsPageRange, columnsPageSize } = this.props; return Math.ceil((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize) - 1; @@ -600,22 +616,6 @@ const Table = React.createClass({ } }, - onRowClick(record, i, e) { - const {onRowClick} = this.props; - const {currentSelectedKey} = this.state; - const eventTag = e.target.tagName.toLowerCase(); - const eventParentTag = e.target.parentElement.tagName.toLowerCase(); - if (eventTag !== 'input' && eventParentTag !== 'label') { - const key = this.getRowKey(record, i); - if (currentSelectedKey !== key) { - this.onRowSelectionChange(record, key, i); - } - } - if (onRowClick) { - onRowClick.apply(null, arguments); - } - }, - onRowSelectionChange(record, key, index) { // eslint-disable-line no-unused-vars const {onRowSelectionChange} = this.props; this.setState({ From c7aab11c49d01dbc7d7c5f7c70803f4e760431bc Mon Sep 17 00:00:00 2001 From: Luka Drvoderic Date: Thu, 7 Jul 2016 19:27:29 +0200 Subject: [PATCH 4/4] lint fixes --- src/Table.jsx | 52 +++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index a92cb86df..a04db4540 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -136,6 +136,32 @@ const Table = React.createClass({ clearTimeout(this.timer); }, + onRowClick(record, i, e) { + const {onRowClick} = this.props; + const {currentSelectedKey} = this.state; + const eventTag = e.target.tagName.toLowerCase(); + const eventParentTag = e.target.parentElement.tagName.toLowerCase(); + if (eventTag !== 'input' && eventParentTag !== 'label') { + const key = this.getRowKey(record, i); + if (currentSelectedKey !== key) { + this.onRowSelectionChange(record, key, i); + } + } + if (onRowClick) { + onRowClick.apply(null, arguments); + } + }, + + onRowSelectionChange(record, key, index) { // eslint-disable-line no-unused-vars + const {onRowSelectionChange} = this.props; + this.setState({ + currentSelectedKey: key, + }); + if (onRowSelectionChange) { + onRowSelectionChange.apply(null, arguments); + } + }, + onExpandedRowsChange(expandedRowKeys) { if (!this.props.expandedRowKeys) { this.setState({ @@ -471,22 +497,6 @@ const Table = React.createClass({ ) : null; }, - onRowClick(record, i, e) { - const {onRowClick} = this.props; - const {currentSelectedKey} = this.state; - const eventTag = e.target.tagName.toLowerCase(); - const eventParentTag = e.target.parentElement.tagName.toLowerCase(); - if (eventTag !== 'input' && eventParentTag !== 'label') { - const key = this.getRowKey(record, i); - if (currentSelectedKey !== key) { - this.onRowSelectionChange(record, key, i); - } - } - if (onRowClick) { - onRowClick.apply(null, arguments); - } - }, - getMaxColumnsPage() { const { columnsPageRange, columnsPageSize } = this.props; return Math.ceil((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize) - 1; @@ -616,16 +626,6 @@ const Table = React.createClass({ } }, - onRowSelectionChange(record, key, index) { // eslint-disable-line no-unused-vars - const {onRowSelectionChange} = this.props; - this.setState({ - currentSelectedKey: key, - }); - if (onRowSelectionChange) { - onRowSelectionChange.apply(null, arguments); - } - }, - render() { const props = this.props; const prefixCls = props.prefixCls;