From c23e4597ca07f0378891c5de57713dd47d8f713b Mon Sep 17 00:00:00 2001
From: BoyuZhou <386607913@qq.com>
Date: Mon, 26 Dec 2016 22:04:16 +0800
Subject: [PATCH] change some
---
demo/TableDemo.scss | 8 +-
demo/demolist/Demo1.js | 68 +++++-
demo/demolist/Demo2.js | 90 +++++++
demo/demolist/Demo3.js | 49 ++++
demo/demolist/Demo4.js | 112 +++++++++
demo/demolist/Demo5.js | 102 ++++++++
demo/index-demo-base.js | 3 +
demo/index.js | 507 ++++++++++++++++++++++++++++++++++++++++
package.json | 56 +++--
src/Column.jsx | 14 +-
src/Table.jsx | 2 +-
src/bordered.scss | 8 +-
src/index.scss | 77 +++---
13 files changed, 1014 insertions(+), 82 deletions(-)
create mode 100644 demo/demolist/Demo2.js
create mode 100644 demo/demolist/Demo3.js
create mode 100644 demo/demolist/Demo4.js
create mode 100644 demo/demolist/Demo5.js
create mode 100644 demo/index.js
diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss
index 40f2366..c85c48a 100644
--- a/demo/TableDemo.scss
+++ b/demo/TableDemo.scss
@@ -1,6 +1,10 @@
@import "../node_modules/tinper-bee-core/scss/index.scss";
-@import "../src/Table.scss";
@import "../node_modules/bee-panel/src/Panel.scss";
@import "../node_modules/bee-layout/src/Layout.scss";
@import "../node_modules/bee-button/src/Button.scss";
-@import "../node_modules/bee-transition/src/Transition.scss";
\ No newline at end of file
+@import "../node_modules/bee-transition/src/Transition.scss";
+@import "../src/animation.scss";
+@import "../src/bordered.scss";
+@import "../src/index.scss";
+@import "../node_modules/bee-dropdown/src/Dropdown.scss";
+@import "../node_modules/bee-menus/src/Menus.scss";
diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js
index 123fa06..42a150f 100644
--- a/demo/demolist/Demo1.js
+++ b/demo/demolist/Demo1.js
@@ -4,12 +4,64 @@
* @description 这是描述
*
*/
-class Demo1 extends Component {
-render () {
-return (
-
-欢迎使用老赵DEMO系统
-
-)
+class Demo1 extends React.Component {
+ constructor(props) {
+ super(props);
+ this.columns = [
+ { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+ { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+ { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+ {
+ title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
+ this.onDelete(record.key, e)} href="#">Delete,
+ },
+ ];
+ this.state = {
+ data: [
+ { a: '123', key: '1' },
+ { a: 'cdd', b: 'edd', key: '2' },
+ { a: '1333', c: 'eee', key: '3' },
+ ],
+ };
+ }
+
+ onDelete(key, e) {
+ console.log('Delete', key);
+ e.preventDefault();
+ const data = this.state.data.filter(item => item.key !== key);
+ this.setState({ data });
+ }
+
+ onAdd() {
+ const data = [...this.state.data];
+ data.push({
+ a: 'new data',
+ b: 'new data',
+ c: 'new data',
+ key: Date.now(),
+ });
+ this.setState({ data });
+ }
+
+ getBodyWrapper(body) {
+ return (
+
+ {body.props.children}
+
+ );
+ }
+
+ render() {
+ return (
+
+
Table row with animation
+
+
+
+
rowClassName and className
+
`row-${i}`}
+ expandedRowRender={record => extra: {record.a}
}
+ expandedRowClassName={(record, i) => `ex-row-${i}`}
+ data={data2}
+ className="table"
+ />
+
+ )
+ }
+}
diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js
new file mode 100644
index 0000000..9b17fd7
--- /dev/null
+++ b/demo/demolist/Demo4.js
@@ -0,0 +1,112 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+const columns3 = [
+ { title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ // 设置第一行为链接
+ if (index === 0) {
+ obj.children = {o};
+ }
+ // 第5行合并两列
+ if (index === 4) {
+ obj.props.colSpan = 2;
+ }
+
+ if (index === 5) {
+ obj.props.colSpan = 6;
+ }
+ return obj;
+ } },
+ { title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ // 列合并掉的表格设置colSpan=0，不会去渲染
+ if (index === 4 || index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ { title: 'Name', dataIndex: 'c', width: 100, key: 'c', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+
+ if (index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ { title: 'Address', dataIndex: 'd', width: 200, key: 'd', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ if (index === 0) {
+ obj.props.rowSpan = 2;
+ }
+ if (index === 1 || index === 5) {
+ obj.props.rowSpan = 0;
+ }
+
+ return obj;
+ } },
+ { title: 'Gender', dataIndex: 'e', width: 200, key: 'e', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ if (index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ {
+ title: 'Operations', dataIndex: '', key: 'f',
+ render(o, row, index) {
+ if (index === 5) {
+ return {
+ props: {
+ colSpan: 0,
+ },
+ };
+ }
+ return Operations;
+ },
+ },
+];
+
+const data3 = [
+ { a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: '1' },
+ { a: '13812340986', b: '0571-98787658', c: '张夫人', d: '文一西路', e: 'Female', key: '2' },
+ { a: '13812988888', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: '3' },
+ { a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: '4' },
+ { a: '0571-88888110', c: '李警官', d: '武林门', e: 'Male', key: '5' },
+ { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
+];
+
+
+class Demo4 extends Component {
+ render () {
+ return (
+
+ )
+ }
+}
diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js
new file mode 100644
index 0000000..a894084
--- /dev/null
+++ b/demo/demolist/Demo5.js
@@ -0,0 +1,102 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+
+const data = [];
+for (let i = 0; i < 10; i++) {
+ data.push({
+ key: i,
+ a: `a${i}`,
+ b: `b${i}`,
+ c: `c${i}`,
+ });
+}
+
+const Demo5 = React.createClass({
+ getInitialState() {
+ this.filters = [];
+ return {
+ visible: false,
+ };
+ },
+
+ handleVisibleChange(visible) {
+ this.setState({ visible });
+ },
+
+ handleSelect(selected) {
+ this.filters.push(selected);
+ },
+
+ handleDeselect(key) {
+ const index = this.filters.indexOf(key);
+ if (index !== -1) {
+ this.filters.splice(index, 1);
+ }
+ },
+
+ confirmFilter() {
+ console.log(this.filters.join(','));
+ this.setState({
+ visible: false,
+ });
+ },
+
+ render() {
+ const menu = (
+
+ );
+
+ const columns = [
+ {
+ title: (
+
+ ), key: 'a', dataIndex: 'a', width: 100,
+ },
+ { title: 'title2', key: 'b', dataIndex: 'b', width: 100 },
+ { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
+ ];
+
+ return (
+ record.key}
+ />
+ );
+ },
+});
diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js
index f17ac8d..e5eed99 100644
--- a/demo/index-demo-base.js
+++ b/demo/index-demo-base.js
@@ -5,6 +5,9 @@ import Button from 'bee-button';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Table from '../src';
+import Animate from 'bee-animate';
+import Menu, { Item, Divider } from 'bee-menus';
+import DropDown from 'bee-dropdown';
const CARET = ;
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..b95cef0
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,507 @@
+
+import { Con, Row, Col } from 'bee-layout';
+import { Panel } from 'bee-panel';
+import Button from 'bee-button';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Table from '../src';
+import Animate from 'bee-animate';
+import Menu, { Item, Divider } from 'bee-menus';
+import DropDown from 'bee-dropdown';
+
+
+const CARET = ;
+
+const CARETUP = ;
+
+
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+class Demo1 extends React.Component {
+ constructor(props) {
+ super(props);
+ this.columns = [
+ { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+ { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+ { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+ {
+ title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
+ this.onDelete(record.key, e)} href="#">Delete,
+ },
+ ];
+ this.state = {
+ data: [
+ { a: '123', key: '1' },
+ { a: 'cdd', b: 'edd', key: '2' },
+ { a: '1333', c: 'eee', key: '3' },
+ ],
+ };
+ }
+
+ onDelete(key, e) {
+ console.log('Delete', key);
+ e.preventDefault();
+ const data = this.state.data.filter(item => item.key !== key);
+ this.setState({ data });
+ }
+
+ onAdd() {
+ const data = [...this.state.data];
+ data.push({
+ a: 'new data',
+ b: 'new data',
+ c: 'new data',
+ key: Date.now(),
+ });
+ this.setState({ data });
+ }
+
+ getBodyWrapper(body) {
+ return (
+
+ {body.props.children}
+
+ );
+ }
+
+ render() {
+ return (
+
+
Table row with animation
+
+
+
+
rowClassName and className
+
`row-${i}`}
+ expandedRowRender={record => extra: {record.a}
}
+ expandedRowClassName={(record, i) => `ex-row-${i}`}
+ data={data2}
+ className="table"
+ />
+
+ )
+ }
+}
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+const columns3 = [
+ { title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ // 设置第一行为链接
+ if (index === 0) {
+ obj.children = {o};
+ }
+ // 第5行合并两列
+ if (index === 4) {
+ obj.props.colSpan = 2;
+ }
+
+ if (index === 5) {
+ obj.props.colSpan = 6;
+ }
+ return obj;
+ } },
+ { title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ // 列合并掉的表格设置colSpan=0，不会去渲染
+ if (index === 4 || index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ { title: 'Name', dataIndex: 'c', width: 100, key: 'c', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+
+ if (index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ { title: 'Address', dataIndex: 'd', width: 200, key: 'd', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ if (index === 0) {
+ obj.props.rowSpan = 2;
+ }
+ if (index === 1 || index === 5) {
+ obj.props.rowSpan = 0;
+ }
+
+ return obj;
+ } },
+ { title: 'Gender', dataIndex: 'e', width: 200, key: 'e', render(o, row, index) {
+ const obj = {
+ children: o,
+ props: {},
+ };
+ if (index === 5) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ } },
+ {
+ title: 'Operations', dataIndex: '', key: 'f',
+ render(o, row, index) {
+ if (index === 5) {
+ return {
+ props: {
+ colSpan: 0,
+ },
+ };
+ }
+ return Operations;
+ },
+ },
+];
+
+const data3 = [
+ { a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: '1' },
+ { a: '13812340986', b: '0571-98787658', c: '张夫人', d: '文一西路', e: 'Female', key: '2' },
+ { a: '13812988888', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: '3' },
+ { a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: '4' },
+ { a: '0571-88888110', c: '李警官', d: '武林门', e: 'Male', key: '5' },
+ { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
+];
+
+
+class Demo4 extends Component {
+ render () {
+ return (
+
+ )
+ }
+}
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+
+const data = [];
+for (let i = 0; i < 10; i++) {
+ data.push({
+ key: i,
+ a: `a${i}`,
+ b: `b${i}`,
+ c: `c${i}`,
+ });
+}
+
+const Demo5 = React.createClass({
+ getInitialState() {
+ this.filters = [];
+ return {
+ visible: false,
+ };
+ },
+
+ handleVisibleChange(visible) {
+ this.setState({ visible });
+ },
+
+ handleSelect(selected) {
+ this.filters.push(selected);
+ },
+
+ handleDeselect(key) {
+ const index = this.filters.indexOf(key);
+ if (index !== -1) {
+ this.filters.splice(index, 1);
+ }
+ },
+
+ confirmFilter() {
+ console.log(this.filters.join(','));
+ this.setState({
+ visible: false,
+ });
+ },
+
+ render() {
+ const menu = (
+
+ );
+
+ const columns = [
+ {
+ title: (
+
+ ), key: 'a', dataIndex: 'a', width: 100,
+ },
+ { title: 'title2', key: 'b', dataIndex: 'b', width: 100 },
+ { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
+ ];
+
+ return (
+ record.key}
+ />
+ );
+ },
+});
+var DemoArray = [{"example":,"title":" 这是标题","code":"/**\n*\n* @title 这是标题\n* @description 这是描述\n*\n*/\nclass Demo1 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },\n { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>\n this.onDelete(record.key, e)} href=\"#\">Delete,\n },\n ];\n this.state = {\n data: [\n { a: '123', key: '1' },\n { a: 'cdd', b: 'edd', key: '2' },\n { a: '1333', c: 'eee', key: '3' },\n ],\n };\n }\n\n onDelete(key, e) {\n console.log('Delete', key);\n e.preventDefault();\n const data = this.state.data.filter(item => item.key !== key);\n this.setState({ data });\n }\n\n onAdd() {\n const data = [...this.state.data];\n data.push({\n a: 'new data',\n b: 'new data',\n c: 'new data',\n key: Date.now(),\n });\n this.setState({ data });\n }\n\n getBodyWrapper(body) {\n return (\n \n {body.props.children}\n \n );\n }\n\n render() {\n return (\n \n
Table row with animation
\n
\n
\n
\r\n
rowClassName and className
\r\n
`row-${i}`}\r\n expandedRowRender={record => extra: {record.a}
}\r\n expandedRowClassName={(record, i) => `ex-row-${i}`}\r\n data={data2}\r\n className=\"table\"\r\n />\r\n \r\n
colSpan & rowSpan
\r\n
\r\n
- one
\r\n - two
\r\n - three
\r\n \r\n - \r\n 确定\r\n
\r\n \r\n );\r\n\r\n const columns = [\r\n {\r\n title: (\r\n \r\n title1\r\n
\r\n filter\r\n \r\n
+
+ { example }
+
+
+
+
+
+ );
+ return (
+
+ { title }
+ { desc }
+
+ { code }
+
+
+ )
+ }
+}
+
+class DemoGroup extends Component {
+ constructor(props){
+ super(props)
+ }
+ render () {
+ return (
+
+ {DemoArray.map((child,index) => {
+
+ return (
+
+ )
+
+ })}
+
+ )
+ }
+}
+
+ReactDOM.render(, document.getElementById('tinperBeeDemo'));
diff --git a/package.json b/package.json
index d4c5748..d509103 100644
--- a/package.json
+++ b/package.json
@@ -15,15 +15,14 @@
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
- "repository": "http://github.com/tinper-bee/bee-table",
- "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
- "license": "MIT",
-
- "main":"./build/index.js",
- "config":{
+ "repository": "http://github.com/tinper-bee/bee-table",
+ "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+ "license": "MIT",
+ "main": "./build/index.js",
+ "config": {
"port": 3000
- },
- "scripts": {
+ },
+ "scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
@@ -32,21 +31,28 @@
"coveralls": "bee-tools run coverage",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub"
- },
- "dependencies": {
- "classnames": "^2.2.5",
- "tinper-bee-core": "latest"
- },
- "devDependencies": {
- "chai": "^3.5.0",
- "enzyme": "^2.4.1",
- "react": "~0.14.0",
- "react-addons-test-utils": "15.3.2",
- "react-dom": "~0.14.0",
- "console-polyfill": "~0.2.1",
- "es5-shim": "~4.1.10",
- "bee-panel": "latest",
- "bee-layout": "latest",
- "bee-button": "latest"
- }
+ },
+ "dependencies": {
+ "classnames": "^2.2.5",
+ "object-path": "^0.11.3",
+ "rc-util": "^4.0.2",
+ "shallowequal": "^0.2.2",
+ "tinper-bee-core": "latest",
+ "warning": "^3.0.0"
+ },
+ "devDependencies": {
+ "bee-animate": "0.0.3",
+ "bee-button": "latest",
+ "bee-dropdown": "^0.1.4",
+ "bee-layout": "latest",
+ "bee-menus": "0.0.5",
+ "bee-panel": "latest",
+ "chai": "^3.5.0",
+ "console-polyfill": "~0.2.1",
+ "enzyme": "^2.4.1",
+ "es5-shim": "~4.1.10",
+ "react": "~0.14.0",
+ "react-addons-test-utils": "15.3.2",
+ "react-dom": "~0.14.0"
+ }
}
diff --git a/src/Column.jsx b/src/Column.jsx
index 8a167ea..e73f633 100644
--- a/src/Column.jsx
+++ b/src/Column.jsx
@@ -1,7 +1,6 @@
import { Component, PropTypes } from 'react';
-export default class Column extends Component {
- static propTypes = {
+const propTypes = {
className: PropTypes.string,
colSpan: PropTypes.number,
title: PropTypes.node,
@@ -16,6 +15,13 @@ export default class Column extends Component {
'right',
]),
render: PropTypes.func,
- onCellClick: PropTypes.func,
- }
+ onCellClick: PropTypes.func
}
+
+class Column extends Component {
+
+}
+
+Column.propTypes = propTypes;
+
+export default Column;
diff --git a/src/Table.jsx b/src/Table.jsx
index 420de16..a73b558 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -53,7 +53,7 @@ const Table = React.createClass({
onExpandedRowsChange() {},
onRowClick() {},
onRowDoubleClick() {},
- prefixCls: 'rc-table',
+ prefixCls: 'u-table',
bodyStyle: {},
style: {},
childrenColumnName: 'children',
diff --git a/src/bordered.scss b/src/bordered.scss
index f3ad2e8..b27b99d 100644
--- a/src/bordered.scss
+++ b/src/bordered.scss
@@ -1,11 +1,11 @@
-@tablePrefixCls: rc-table;
-@table-border-color: #e9e9e9;
-.@{tablePrefixCls}.bordered {
+$table-border-color: #e9e9e9;
+
+.u-table.bordered {
table {
border-collapse: collapse;
}
th, td {
- border: 1px solid @table-border-color;
+ border: 1px solid $table-border-color;
}
}
diff --git a/src/index.scss b/src/index.scss
index 97aa433..6371699 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,27 +1,27 @@
-@tablePrefixCls: rc-table;
-@text-color : #666;
-@font-size-base : 12px;
-@line-height: 1.5;
-@table-border-color: #e9e9e9;
-@table-head-background-color: #f7f7f7;
-@vertical-padding: 16px;
-@horizontal-padding: 8px;
-.@{tablePrefixCls} {
- font-size: @font-size-base;
- color: @text-color;
+$text-color : #666;
+$font-size-base : 12px;
+$line-height: 1.5;
+$table-border-color: #e9e9e9;
+$table-head-background-color: #f7f7f7;
+$vertical-padding: 16px;
+$horizontal-padding: 8px;
+
+.u-table {
+ font-size: $font-size-base;
+ color: $text-color;
transition: opacity 0.3s ease;
position: relative;
- line-height: @line-height;
+ line-height: $line-height;
overflow: hidden;
- .@{tablePrefixCls}-scroll {
+ &-scroll {
overflow: auto;
}
- .@{tablePrefixCls}-header {
+ &-header {
overflow: hidden;
- background: @table-head-background-color;
+ background: $table-head-background-color;
}
&-fixed-header &-body {
@@ -42,24 +42,24 @@
box-sizing: border-box;
}
- .@{tablePrefixCls}-title {
- padding: @vertical-padding @horizontal-padding;
- border-top: 1px solid @table-border-color;
+ &-title {
+ padding: $vertical-padding $horizontal-padding;
+ border-top: 1px solid $table-border-color;
}
- .@{tablePrefixCls}-content {
+ &-content {
position: relative;
}
- .@{tablePrefixCls}-footer {
- padding: @vertical-padding @horizontal-padding;
- border-bottom: 1px solid @table-border-color;
+ &-footer {
+ padding: $vertical-padding $horizontal-padding;
+ border-bottom: 1px solid $table-border-color;
}
- .@{tablePrefixCls}-placeholder {
+ &-placeholder {
padding: 16px 8px;
background: #fff;
- border-bottom: 1px solid @table-border-color;
+ border-bottom: 1px solid $table-border-color;
text-align: center;
position: relative;
}
@@ -71,13 +71,13 @@
}
th {
- background: @table-head-background-color;
+ background: $table-head-background-color;
font-weight: bold;
transition: background .3s ease;
}
td {
- border-bottom: 1px solid @table-border-color;
+ border-bottom: 1px solid $table-border-color;
}
tr {
@@ -85,17 +85,18 @@
&:hover {
background: #eaf8fe;
}
- &.@{tablePrefixCls}-row-hover {
- background: #eaf8fe;
- }
+
+ }
+ tr.tr-row-hover {
+ background: #eaf8fe;
}
th, td {
- padding: @vertical-padding @horizontal-padding;
+ padding: $vertical-padding $horizontal-padding;
}
}
-.@{tablePrefixCls} {
+.u-table {
&-expand-icon-col {
width: 10px;
}
@@ -107,7 +108,7 @@
height: 16px;
text-align: center;
line-height: 16px;
- border: 1px solid @table-border-color;
+ border: 1px solid $table-border-color;
user-select: none;
background: #fff;
}
@@ -126,7 +127,7 @@
content: '+'
}
}
- tr&-expanded-row {
+ tr.u-table-expanded-row {
background: #f7f7f7;
&:hover {
background: #f7f7f7;
@@ -179,11 +180,11 @@
&-fixed-left {
left: 0;
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
- & .@{tablePrefixCls}-body-inner {
+ & &-body-inner {
margin-right: -20px;
padding-right: 20px;
}
- .@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner {
+ &-fixed-header & &-body-inner {
padding-right: 0;
}
}
@@ -194,17 +195,17 @@
// hide expand row content in right fixed Table
// https://github.com/ant-design/ant-design/issues/1898
- .@{tablePrefixCls}-expanded-row {
+ &-expanded-row {
color: transparent;
pointer-events: none;
}
}
- &&-scroll-position-left &-fixed-left {
+ & &-scroll-position-left &-fixed-left {
box-shadow: none;
}
- &&-scroll-position-right &-fixed-right {
+ & &-scroll-position-right &-fixed-right {
box-shadow: none;
}
}