+
{this.getLeftFixedTable()}
}
-
+
{this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()}
{this.getFooter()}
{this.columnManager.isAnyColumnsRightFixed() &&
-
+
{this.getRightFixedTable()}
}
);
- },
-});
+ }
+};
+
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps;
export default Table;
diff --git a/src/TableCell.jsx b/src/TableCell.js
similarity index 74%
rename from src/TableCell.jsx
rename to src/TableCell.js
index 37b0f4f..eedeac0 100644
--- a/src/TableCell.jsx
+++ b/src/TableCell.js
@@ -1,28 +1,34 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
import objectPath from 'object-path';
-const TableCell = React.createClass({
- propTypes: {
+const propTypes = {
record: PropTypes.object,
- prefixCls: PropTypes.string,
+ clsPrefix: PropTypes.string,
index: PropTypes.number,
indent: PropTypes.number,
indentSize: PropTypes.number,
column: PropTypes.object,
- expandIcon: PropTypes.node,
- },
+ expandIcon: PropTypes.node
+};
+
+class TableCell extends Component{
+ constructor(props){
+ super(props);
+ this.isInvalidRenderCellText = this.isInvalidRenderCellText.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ }
isInvalidRenderCellText(text) {
return text && !React.isValidElement(text) &&
Object.prototype.toString.call(text) === '[object Object]';
- },
+ }
handleClick(e) {
const { record, column: { onCellClick } } = this.props;
if (onCellClick) {
onCellClick(record, e);
}
- },
+ }
render() {
- const { record, indentSize, prefixCls, indent,
+ const { record, indentSize, clsPrefix, indent,
index, expandIcon, column } = this.props;
const { dataIndex, render, className = '' } = column;
@@ -41,7 +47,7 @@ const TableCell = React.createClass({
}
}
- // Fix https://github.com/ant-design/ant-design/issues/1202
+
if (this.isInvalidRenderCellText(text)) {
text = null;
}
@@ -49,7 +55,7 @@ const TableCell = React.createClass({
const indentText = expandIcon ? (
) : null;
@@ -68,7 +74,9 @@ const TableCell = React.createClass({
{text}
);
- },
-});
+ }
+};
+
+TableCell.propTypes = propTypes;
export default TableCell;
diff --git a/src/TableHeader.jsx b/src/TableHeader.js
similarity index 54%
rename from src/TableHeader.jsx
rename to src/TableHeader.js
index 4a6ca8d..ecfda62 100644
--- a/src/TableHeader.jsx
+++ b/src/TableHeader.js
@@ -1,19 +1,23 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
import shallowequal from 'shallowequal';
-export default React.createClass({
- propTypes: {
- prefixCls: PropTypes.string,
+const propTypes = {
+ clsPrefix: PropTypes.string,
rowStyle: PropTypes.object,
rows: PropTypes.array,
- },
+}
+
+class TableHeader extends Component{
+ constructor(props){
+ super(props);
+ }
shouldComponentUpdate(nextProps) {
return !shallowequal(nextProps, this.props);
- },
+ }
render() {
- const { prefixCls, rowStyle, rows } = this.props;
+ const { clsPrefix, rowStyle, rows } = this.props;
return (
-
+
{
rows.map((row, index) => (
@@ -23,5 +27,9 @@ export default React.createClass({
}
);
- },
-});
+ }
+};
+
+TableHeader.propTypes = propTypes;
+
+export default TableHeader;
diff --git a/src/TableRow.jsx b/src/TableRow.js
similarity index 77%
rename from src/TableRow.jsx
rename to src/TableRow.js
index 781d08b..13f9da6 100644
--- a/src/TableRow.jsx
+++ b/src/TableRow.js
@@ -1,14 +1,13 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
import TableCell from './TableCell';
import ExpandIcon from './ExpandIcon';
-const TableRow = React.createClass({
- propTypes: {
+const propTypes = {
onDestroy: PropTypes.func,
onRowClick: PropTypes.func,
onRowDoubleClick: PropTypes.func,
record: PropTypes.object,
- prefixCls: PropTypes.string,
+ clsPrefix: PropTypes.string,
expandIconColumnIndex: PropTypes.number,
onHover: PropTypes.func,
columns: PropTypes.array,
@@ -29,24 +28,30 @@ const TableRow = React.createClass({
expandIconAsCell: PropTypes.bool,
expandRowByClick: PropTypes.bool,
store: PropTypes.object.isRequired,
- },
+};
- getDefaultProps() {
- return {
- onRowClick() {},
- onRowDoubleClick() {},
- onDestroy() {},
- expandIconColumnIndex: 0,
- expandRowByClick: false,
- onHover() {},
- };
- },
+const defaultProps = {
+ onRowClick() {},
+ onRowDoubleClick() {},
+ onDestroy() {},
+ expandIconColumnIndex: 0,
+ expandRowByClick: false,
+ onHover() {},
+};
+
+class TableRow extends Component{
+ constructor(props){
+ super(props);
+ this.state = {
+ hovered: false,
+ };
+ this.onRowClick = this.onRowClick.bind(this);
+ this.onRowDoubleClick = this.onRowDoubleClick.bind(this);
+ this.onMouseEnter = this.onMouseEnter.bind(this);
+ this.onMouseLeave = this.onMouseLeave.bind(this);
+
+ }
- getInitialState() {
- return {
- hovered: false,
- };
- },
componentDidMount() {
const { store, hoverKey } = this.props;
@@ -57,7 +62,7 @@ const TableRow = React.createClass({
this.setState({ hovered: false });
}
});
- },
+ }
componentWillUnmount() {
const { record, onDestroy, index } = this.props;
@@ -65,7 +70,7 @@ const TableRow = React.createClass({
if (this.unsubscribe) {
this.unsubscribe();
}
- },
+ }
onRowClick(event) {
const {
@@ -81,26 +86,26 @@ const TableRow = React.createClass({
onExpand(!expanded, record, index);
}
onRowClick(record, index, event);
- },
+ }
onRowDoubleClick(event) {
const { record, index, onRowDoubleClick } = this.props;
onRowDoubleClick(record, index, event);
- },
+ }
onMouseEnter() {
const { onHover, hoverKey } = this.props;
onHover(true, hoverKey);
- },
+ }
onMouseLeave() {
const { onHover, hoverKey } = this.props;
onHover(false, hoverKey);
- },
+ }
render() {
const {
- prefixCls, columns, record, height, visible, index,
+ clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,
} = this.props;
@@ -108,7 +113,7 @@ const TableRow = React.createClass({
let { className } = this.props;
if (this.state.hovered) {
- className += ` ${prefixCls}-hover`;
+ className += ` ${clsPrefix}-hover`;
}
const cells = [];
@@ -116,7 +121,7 @@ const TableRow = React.createClass({
const expandIcon = (
{expandIcon}
@@ -139,7 +144,7 @@ const TableRow = React.createClass({
? false : (i === expandIconColumnIndex);
cells.push(
{cells}
);
- },
-});
+ }
+};
+
+TableRow.propTypes = propTypes;
+TableRow.defaultProps = defaultProps;
export default TableRow;
diff --git a/src/animation.scss b/src/animation.scss
deleted file mode 100644
index a6d4e92..0000000
--- a/src/animation.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-
-.move-enter, .move-appear {
- opacity: 0;
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- animation-duration: 2.5s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.move-leave {
- animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
- animation-duration: .5s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.move-enter.move-enter-active, .move-appear.move-enter-active {
- animation-name: moveLeftIn;
- animation-play-state: running;
-}
-
-.move-leave.move-leave-active {
- animation-name: moveRightOut;
- animation-play-state: running;
-}
-
-@keyframes moveLeftIn {
- 0% {
- transform-origin: 0 0;
- transform: translateX(30px);
- opacity: 0;
- background: #fff6de;
- }
- 20% {
- transform-origin: 0 0;
- transform: translateX(0);
- opacity: 1;
- }
- 80%{
- background: #fff6de;
- }
- 100%{
- background: transparent;
- opacity: 1;
- }
-}
-
-@keyframes moveRightOut {
- 0% {
- transform-origin: 0 0;
- transform: translateX(0);
- opacity: 1;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateX(-30px);
- opacity: 0;
- }
-}
diff --git a/src/bordered.scss b/src/bordered.scss
deleted file mode 100644
index b27b99d..0000000
--- a/src/bordered.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-
-$table-border-color: #e9e9e9;
-
-.u-table.bordered {
- table {
- border-collapse: collapse;
- }
- th, td {
- border: 1px solid $table-border-color;
- }
-}
diff --git a/src/index.scss b/src/index.scss
index 6371699..2a49ea9 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -2,10 +2,16 @@
$text-color : #666;
$font-size-base : 12px;
$line-height: 1.5;
-$table-border-color: #e9e9e9;
+$table-border-color: $border-color-base;
$table-head-background-color: #f7f7f7;
$vertical-padding: 16px;
$horizontal-padding: 8px;
+$table-border-color: #e9e9e9;
+
+$table-hover-color: unquote("rgb(#{$palette-blue-50})") !default;
+$table-move-in-color: $bg-color-base;
+
+
.u-table {
font-size: $font-size-base;
@@ -15,6 +21,38 @@ $horizontal-padding: 8px;
line-height: $line-height;
overflow: hidden;
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ text-align: left;
+ }
+
+ th {
+ background: $table-head-background-color;
+ font-weight: bold;
+ transition: background .3s ease;
+ }
+
+ td {
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ tr {
+ transition: all .3s ease;
+ &:hover {
+ background: $table-hover-color;
+ }
+
+ }
+ tr.tr-row-hover {
+ background: $table-hover-color;
+ }
+
+ th, td {
+ padding: $vertical-padding $horizontal-padding;
+ }
+
+
&-scroll {
overflow: auto;
}
@@ -64,39 +102,6 @@ $horizontal-padding: 8px;
position: relative;
}
- table {
- width: 100%;
- border-collapse: separate;
- text-align: left;
- }
-
- th {
- background: $table-head-background-color;
- font-weight: bold;
- transition: background .3s ease;
- }
-
- td {
- border-bottom: 1px solid $table-border-color;
- }
-
- tr {
- transition: all .3s ease;
- &:hover {
- background: #eaf8fe;
- }
-
- }
- tr.tr-row-hover {
- background: #eaf8fe;
- }
-
- th, td {
- padding: $vertical-padding $horizontal-padding;
- }
-}
-
-.u-table {
&-expand-icon-col {
width: 10px;
}
@@ -209,3 +214,75 @@ $horizontal-padding: 8px;
box-shadow: none;
}
}
+
+
+
+
+.u-table.bordered {
+ table {
+ border-collapse: collapse;
+ }
+ th, td {
+ border: 1px solid $table-border-color;
+ }
+}
+
+
+.move-enter, .move-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-duration: 2.5s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.move-leave {
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-duration: .5s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.move-enter.move-enter-active, .move-appear.move-enter-active {
+ animation-name: moveLeftIn;
+ animation-play-state: running;
+}
+
+.move-leave.move-leave-active {
+ animation-name: moveRightOut;
+ animation-play-state: running;
+}
+
+@keyframes moveLeftIn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(30px);
+ opacity: 0;
+ background: $table-move-in-color;
+ }
+ 20% {
+ transform-origin: 0 0;
+ transform: translateX(0);
+ opacity: 1;
+ }
+ 80%{
+ background: $table-move-in-color;
+ }
+ 100%{
+ background: transparent;
+ opacity: 1;
+ }
+}
+
+@keyframes moveRightOut {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(0);
+ opacity: 1;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(-30px);
+ opacity: 0;
+ }
+}