innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

feat： 过滤列样式优化

This commit is contained in:
izbz wh 2019-03-27 16:53:26 +08:00
parent fc74435a1d
commit ddaa5cb63f
10 changed files with 14685 additions and 6238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
build/Table.css
View File

@ -186,7 +186,7 @@
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
border-bottom: 1px solid rgb(233,233,233); }
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@ -217,21 +217,21 @@
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
border: 1px solid rgb(233,233,233);
border: 1px solid rgb(193, 199, 208);
box-sizing: border-box;
table-layout: fixed; }
.u-table-bordered th {
border-bottom: 1px solid rgb(233,233,233);
border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-bordered th,
.u-table-bordered td {
border-right: 1px solid rgb(233,233,233);
border-right: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; }
.u-table-header {
overflow: hidden;
background: rgb(247,247,247);
background: rgb(223, 225, 230);
color: rgb(102, 102, 102); }
.u-table.fixed-height td {
padding: 0px 8px; }
@ -254,12 +254,12 @@
box-sizing: border-box; }
.u-table-title {
padding: 12px 8px;
border-top: 1px solid rgb(233,233,233); }
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 8px;
border-bottom: 1px solid rgb(233,233,233); }
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
@ -267,7 +267,7 @@
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
border-bottom: 1px solid rgb(233,233,233);
border-bottom: 1px solid rgb(193, 199, 208);
text-align: center;
position: relative; }
.u-table-expand-icon-col {
@ -280,7 +280,7 @@
height: 16px;
text-align: center;
line-height: 16px;
border: 1px solid rgb(233,233,233);
border: 1px solid rgb(193, 199, 208);
user-select: none;
background: #fff;
margin-right: 10px; }
@ -356,7 +356,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: rgb(247,247,247);
background: rgb(223, 225, 230);
color: rgb(102, 102, 102);
background-clip: padding-box;
-moz-user-select: -moz-none;
@ -489,7 +489,7 @@
.u-table.bordered th,
.u-table.bordered td {
border: 1px solid rgb(233,233,233); }
border: 1px solid rgb(193, 199, 208); }
.move-enter,
.move-appear {

2
build/lib/multiSelect.js
View File

@ -53,7 +53,7 @@ function multiSelect(Table, Checkbox) {
}
MultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.data != nextProps.data) {
if ('data' in nextProps) {
var obj = this.getCheckedOrIndeter(nextProps.data);
this.setState(_extends({}, obj, {
data: (0, _util.ObjectAssign)(nextProps.data)

51
dist/demo.css vendored
View File

@ -172,7 +172,7 @@
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
border-bottom: 1px solid rgb(233,233,233); }
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@ -203,21 +203,21 @@
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
border: 1px solid rgb(233,233,233);
border: 1px solid rgb(193, 199, 208);
box-sizing: border-box;
table-layout: fixed; }
.u-table-bordered th {
border-bottom: 1px solid rgb(233,233,233);
border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-bordered th,
.u-table-bordered td {
border-right: 1px solid rgb(233,233,233);
border-right: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; }
.u-table-header {
overflow: hidden;
background: rgb(247,247,247);
background: rgb(223, 225, 230);
color: rgb(102, 102, 102); }
.u-table.fixed-height td {
padding: 0px 8px; }
@ -240,12 +240,12 @@
box-sizing: border-box; }
.u-table-title {
padding: 12px 8px;
border-top: 1px solid rgb(233,233,233); }
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 8px;
border-bottom: 1px solid rgb(233,233,233); }
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
@ -253,7 +253,7 @@
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
border-bottom: 1px solid rgb(233,233,233);
border-bottom: 1px solid rgb(193, 199, 208);
text-align: center;
position: relative; }
.u-table-expand-icon-col {
@ -266,7 +266,7 @@
height: 16px;
text-align: center;
line-height: 16px;
border: 1px solid rgb(233,233,233);
border: 1px solid rgb(193, 199, 208);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -348,7 +348,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: rgb(247,247,247);
background: rgb(223, 225, 230);
color: rgb(102, 102, 102);
background-clip: padding-box;
-moz-user-select: -moz-none;
@ -424,36 +424,39 @@
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {
margin: 10px;
margin-top: 0px;
height: 300px;
margin: 0px;
max-height: 300px;
overflow-y: scroll; }
.u-table-filter-column-clear-setting {
border-bottom: 1px solid #ccc;
cursor: pointer; }
margin-bottom: 4px; }
.u-table-filter-column-cont {
position: relative; }
.u-table-filter-column-filter-icon {
position: absolute;
top: 3px;
top: 8px;
right: 18px;
width: 22px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {
background: rgb(223, 225, 230);
text-align: center;
cursor: pointer; }
.u-table-filter-column-filter-icon i.uf {
padding: 0px; }
.u-table-filter-column-pop-cont-item {
margin-top: 10px;
line-height: 30px;
margin-top: 8px;
cursor: pointer; }
.u-table-filter-column-pop-cont-item .u-checkbox {
margin: 0px; }
.u-table-filter-column-pop-cont-item > span {
margin-left: 5px;
width: 100px;
margin-left: -3px;
width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
white-space: nowrap;
display: inline-block;
vertical-align: middle; }
.u-table-filter-column-pop .u-modal-dialog {
border: 1px solid #ccc;
background: #fff; }
@ -477,7 +480,7 @@
.u-table.bordered th,
.u-table.bordered td {
border: 1px solid rgb(233,233,233); }
border: 1px solid rgb(193, 199, 208); }
.move-enter,
.move-appear {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

20798
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
index.html
View File

@ -3,9 +3,11 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>neoui-react-button</title>
<link rel="stylesheet" href="./dist/demo.css">
<link rel="stylesheet" href="./demo/atom-one-dark.css">
<link rel="stylesheet" href="./dist/demo.css">
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
</head>
<body style="background: #eceff1">
<div id="tinperBeeDemo"></div>

8
package.json
View File

@ -47,6 +47,7 @@
},
"dependencies": {
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "^2.0.9",
"bee-dropdown": "^2.0.3",
"bee-form-control": "latest",
@ -56,7 +57,6 @@
"bee-locale": "0.0.11",
"bee-menus": "^2.0.2",
"bee-select": "^2.0.4",
"bee-checkbox": "latest",
"classnames": "^2.2.5",
"component-classes": "^1.2.6",
"lodash.clonedeep": "^4.5.0",
@ -86,6 +86,8 @@
"react": "^16.6.3",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^16.6.3",
"tinper-bee": "latest"
"tinper-bee": "latest",
"bee-pagination": "^2.0.5",
"bee-popover": "^2.0.0"
}
}
}

32
src/Table.scss
View File

@ -470,42 +470,50 @@ $checkbox-height:16px;
&-filter-column{
&-pop-cont{
margin: 10px;
margin-top: 0px;
height: 300px;
margin: 0px;
max-height: 300px;
overflow-y: scroll;
}
&-clear-setting{
border-bottom: 1px solid #ccc;
cursor: pointer;
// border-bottom: 1px solid #ccc;
// cursor: pointer;
margin-bottom: 4px;
}
&-cont{
position: relative;
}
&-filter-icon{
position: absolute;
top: 3px;
top: 8px;
right: 18px;
width: 22px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7;
&i.uf{
background: $table-head-background-color;
text-align: center;
cursor: pointer;
i.uf{
padding: 0px;
}
}
&-pop-cont-item{
margin-top: 10px;
line-height: 30px;
margin-top: 8px;
// line-height: 30px;
cursor: pointer;
.u-checkbox {
margin: 0px;
}
}
&-pop-cont-item>span{
margin-left: 5px;
width: 100px;
margin-left: -3px;
width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
&-pop .u-modal-dialog{
border: 1px solid #ccc;

2
src/lib/multiSelect.js
View File

@ -26,7 +26,7 @@ export default function multiSelect(Table, Checkbox) {
}
componentWillReceiveProps(nextProps){
if(this.props.data != nextProps.data){
if('data' in nextProps){
let obj = this.getCheckedOrIndeter(nextProps.data);
this.setState({
...obj,