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

2
build/lib/multiSelect.js
View File

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

51
dist/demo.css vendored
View File

@ -172,7 +172,7 @@
.u-table th ::last-child { .u-table th ::last-child {
overflow: hidden; } overflow: hidden; }
.u-table td { .u-table td {
border-bottom: 1px solid rgb(233,233,233); } border-bottom: 1px solid rgb(193, 199, 208); }
.u-table td a { .u-table td a {
color: #2196F3; } color: #2196F3; }
.u-table td a:hover { .u-table td a:hover {
@ -203,21 +203,21 @@
.u-table-scroll { .u-table-scroll {
overflow: auto; } overflow: auto; }
.u-table-bordered table { .u-table-bordered table {
border: 1px solid rgb(233,233,233); border: 1px solid rgb(193, 199, 208);
box-sizing: border-box; box-sizing: border-box;
table-layout: fixed; } table-layout: fixed; }
.u-table-bordered th { .u-table-bordered th {
border-bottom: 1px solid rgb(233,233,233); border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; } box-sizing: border-box; }
.u-table-bordered th, .u-table-bordered th,
.u-table-bordered td { .u-table-bordered td {
border-right: 1px solid rgb(233,233,233); border-right: 1px solid rgb(193, 199, 208);
box-sizing: border-box; } box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag { .u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; } overflow: hidden; }
.u-table-header { .u-table-header {
overflow: hidden; overflow: hidden;
background: rgb(247,247,247); background: rgb(223, 225, 230);
color: rgb(102, 102, 102); } color: rgb(102, 102, 102); }
.u-table.fixed-height td { .u-table.fixed-height td {
padding: 0px 8px; } padding: 0px 8px; }
@ -240,12 +240,12 @@
box-sizing: border-box; } box-sizing: border-box; }
.u-table-title { .u-table-title {
padding: 12px 8px; padding: 12px 8px;
border-top: 1px solid rgb(233,233,233); } border-top: 1px solid rgb(193, 199, 208); }
.u-table-content { .u-table-content {
position: relative; } position: relative; }
.u-table-footer { .u-table-footer {
padding: 12px 8px; 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 { .u-table-footer .u-table-scroll {
overflow-x: hidden; } overflow-x: hidden; }
.u-table-footer .u-table { .u-table-footer .u-table {
@ -253,7 +253,7 @@
.u-table-placeholder { .u-table-placeholder {
padding: 12px 8px; padding: 12px 8px;
background: #fff; background: #fff;
border-bottom: 1px solid rgb(233,233,233); border-bottom: 1px solid rgb(193, 199, 208);
text-align: center; text-align: center;
position: relative; } position: relative; }
.u-table-expand-icon-col { .u-table-expand-icon-col {
@ -266,7 +266,7 @@
height: 16px; height: 16px;
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
border: 1px solid rgb(233,233,233); border: 1px solid rgb(193, 199, 208);
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -348,7 +348,7 @@
.u-table-thead .filter-wrap .filter-btns { .u-table-thead .filter-wrap .filter-btns {
min-width: 58px; } min-width: 58px; }
.u-table-thead th { .u-table-thead th {
background: rgb(247,247,247); background: rgb(223, 225, 230);
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
background-clip: padding-box; background-clip: padding-box;
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
@ -424,36 +424,39 @@
.u-table-thead-th:last-child-drag-gap { .u-table-thead-th:last-child-drag-gap {
border: none; } border: none; }
.u-table-filter-column-pop-cont { .u-table-filter-column-pop-cont {
margin: 10px; margin: 0px;
margin-top: 0px; max-height: 300px;
height: 300px;
overflow-y: scroll; } overflow-y: scroll; }
.u-table-filter-column-clear-setting { .u-table-filter-column-clear-setting {
border-bottom: 1px solid #ccc; margin-bottom: 4px; }
cursor: pointer; }
.u-table-filter-column-cont { .u-table-filter-column-cont {
position: relative; } position: relative; }
.u-table-filter-column-filter-icon { .u-table-filter-column-filter-icon {
position: absolute; position: absolute;
top: 3px; top: 8px;
right: 18px; right: 18px;
width: 22px; width: 22px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
z-index: 2; z-index: 2;
background: #f7f7f7; } background: rgb(223, 225, 230);
.u-table-filter-column-filter-iconi.uf { text-align: center;
cursor: pointer; }
.u-table-filter-column-filter-icon i.uf {
padding: 0px; } padding: 0px; }
.u-table-filter-column-pop-cont-item { .u-table-filter-column-pop-cont-item {
margin-top: 10px; margin-top: 8px;
line-height: 30px;
cursor: pointer; } cursor: pointer; }
.u-table-filter-column-pop-cont-item .u-checkbox {
margin: 0px; }
.u-table-filter-column-pop-cont-item > span { .u-table-filter-column-pop-cont-item > span {
margin-left: 5px; margin-left: -3px;
width: 100px; width: 132px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap;
display: inline-block;
vertical-align: middle; }
.u-table-filter-column-pop .u-modal-dialog { .u-table-filter-column-pop .u-modal-dialog {
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fff; } background: #fff; }
@ -477,7 +480,7 @@
.u-table.bordered th, .u-table.bordered th,
.u-table.bordered td { .u-table.bordered td {
border: 1px solid rgb(233,233,233); } border: 1px solid rgb(193, 199, 208); }
.move-enter, .move-enter,
.move-appear { .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> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>neoui-react-button</title> <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="./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" /> <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
</head> </head>
<body style="background: #eceff1"> <body style="background: #eceff1">
<div id="tinperBeeDemo"></div> <div id="tinperBeeDemo"></div>

8
package.json
View File

@ -47,6 +47,7 @@
}, },
"dependencies": { "dependencies": {
"bee-button": "latest", "bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "^2.0.9", "bee-datepicker": "^2.0.9",
"bee-dropdown": "^2.0.3", "bee-dropdown": "^2.0.3",
"bee-form-control": "latest", "bee-form-control": "latest",
@ -56,7 +57,6 @@
"bee-locale": "0.0.11", "bee-locale": "0.0.11",
"bee-menus": "^2.0.2", "bee-menus": "^2.0.2",
"bee-select": "^2.0.4", "bee-select": "^2.0.4",
"bee-checkbox": "latest",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"component-classes": "^1.2.6", "component-classes": "^1.2.6",
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
@ -86,6 +86,8 @@
"react": "^16.6.3", "react": "^16.6.3",
"react-addons-test-utils": "^15.5.0", "react-addons-test-utils": "^15.5.0",
"react-dom": "^16.6.3", "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{ &-filter-column{
&-pop-cont{ &-pop-cont{
margin: 10px; margin: 0px;
margin-top: 0px; max-height: 300px;
height: 300px;
overflow-y: scroll; overflow-y: scroll;
} }
&-clear-setting{ &-clear-setting{
border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
cursor: pointer; // cursor: pointer;
margin-bottom: 4px;
} }
&-cont{ &-cont{
position: relative; position: relative;
} }
&-filter-icon{ &-filter-icon{
position: absolute; position: absolute;
top: 3px; top: 8px;
right: 18px; right: 18px;
width: 22px; width: 22px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
z-index: 2; z-index: 2;
background: #f7f7f7; background: $table-head-background-color;
&i.uf{ text-align: center;
cursor: pointer;
i.uf{
padding: 0px; padding: 0px;
} }
} }
&-pop-cont-item{ &-pop-cont-item{
margin-top: 10px; margin-top: 8px;
line-height: 30px; // line-height: 30px;
cursor: pointer; cursor: pointer;
.u-checkbox {
margin: 0px;
}
} }
&-pop-cont-item>span{ &-pop-cont-item>span{
margin-left: 5px; margin-left: -3px;
width: 100px; width: 132px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: inline-block;
vertical-align: middle;
} }
&-pop .u-modal-dialog{ &-pop .u-modal-dialog{
border: 1px solid #ccc; border: 1px solid #ccc;

2
src/lib/multiSelect.js
View File

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