filter 样式优化
This commit is contained in:
jonyshi
parent
435a010006
commit
bde42209b5
|
|
@ -8036,6 +8036,33 @@ ul {
|
|||
background: #ccc; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
margin: 10px;
|
||||
margin-top: 0px; }
|
||||
.u-table-filter-column-clear-setting {
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-cont {
|
||||
position: relative; }
|
||||
.u-table-filter-column-pop-column-filter {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px; }
|
||||
.u-table-filter-column-pop-cont-item {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-pop-cont-item > span {
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
|
@ -8210,40 +8237,6 @@ ul {
|
|||
color: #999;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.bee-table-column-filter-cont {
|
||||
position: relative; }
|
||||
|
||||
.bee-table-column-filter {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px; }
|
||||
|
||||
.pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
|
||||
.clear-setting {
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer; }
|
||||
|
||||
.pop-cont {
|
||||
margin: 10px;
|
||||
margin-top: 0px; }
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer; }
|
||||
|
||||
.item > span {
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -55382,7 +55382,9 @@
|
|||
}
|
||||
|
||||
filterColumn.prototype.render = function render() {
|
||||
var data = this.props.data;
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
prefixCls = _props.prefixCls;
|
||||
var _state = this.state,
|
||||
columns = _state.columns,
|
||||
showModal = _state.showModal,
|
||||
|
|
@ -55399,10 +55401,10 @@
|
|||
|
||||
var content = _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "pop-cont" },
|
||||
{ className: prefixCls + "-pop-cont" },
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
{ className: "clear-setting", onClick: this.clear },
|
||||
{ className: prefixCls + "-clear-setting", onClick: this.clear },
|
||||
"\u6E05\u9664\u8BBE\u7F6E"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
|
|
@ -55414,7 +55416,7 @@
|
|||
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "bee-table-column-filter-cont" },
|
||||
{ className: prefixCls + "-cont" },
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
|
||||
_react2["default"].createElement(
|
||||
_beePopover2["default"],
|
||||
|
|
@ -55424,7 +55426,7 @@
|
|||
show: showModal },
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "bee-table-column-filter" },
|
||||
{ className: prefixCls + "-pop-column-filter" },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: "uf-navmenu", onClick: this.openCloumList })
|
||||
)
|
||||
)
|
||||
|
|
@ -55432,7 +55434,9 @@
|
|||
};
|
||||
|
||||
return filterColumn;
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-filter-column"
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.getShowModal = function (event) {
|
||||
|
|
@ -55463,12 +55467,13 @@
|
|||
};
|
||||
|
||||
this.getCloumItem = function () {
|
||||
var prefixCls = _this2.props.prefixCls;
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
return columns.map(function (da, i) {
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ key: da.key + "_" + i, className: "item", onClick: function onClick() {
|
||||
{ key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
|
||||
_this2.checkedColumItemClick(da);
|
||||
} },
|
||||
_react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -301,6 +301,45 @@ $table-move-in-color: $bg-color-base;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-filter-column{
|
||||
|
||||
&-pop-cont{
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
&-clear-setting{
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
&-cont{
|
||||
position: relative;
|
||||
}
|
||||
&-pop-column-filter{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&-pop-cont-item{
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&-pop-cont-item>span{
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-pop .u-modal-dialog{
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table.bordered {
|
||||
|
|
@ -511,47 +550,7 @@ $table-move-in-color: $bg-color-base;
|
|||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.bee-table-column-filter-cont{
|
||||
position: relative;
|
||||
}
|
||||
.bee-table-column-filter{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.pop .u-modal-dialog{
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
}
|
||||
.clear-setting{
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pop-cont{
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.item{
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item>span{
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
export default class Table extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<table className="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -9,10 +9,17 @@ import Popover from 'bee-popover';
|
|||
*/
|
||||
|
||||
|
||||
|
||||
export default function filterColumn(Table) {
|
||||
|
||||
|
||||
|
||||
return class filterColumn extends Component {
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: "u-table-filter-column"
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const {columns} = props;
|
||||
|
|
@ -59,8 +66,9 @@ export default function filterColumn(Table) {
|
|||
}
|
||||
|
||||
getCloumItem=()=>{
|
||||
const {prefixCls} = this.props;
|
||||
const {columns} = this.state;
|
||||
return columns.map((da,i)=> (<div key={da.key+"_"+i} className="item" onClick={()=>{this.checkedColumItemClick(da)}}>
|
||||
return columns.map((da,i)=> (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
|
||||
<Checkbox id={da.key} checked={da.checked}/>
|
||||
<span>{da.title}</span>
|
||||
</div>))
|
||||
|
|
@ -79,7 +87,7 @@ export default function filterColumn(Table) {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.props;
|
||||
const {data,prefixCls} = this.props;
|
||||
const {columns,showModal,width,screenX,screenY} = this.state;
|
||||
let _columns = [];
|
||||
columns.forEach((da)=>{
|
||||
|
|
@ -89,8 +97,8 @@ export default function filterColumn(Table) {
|
|||
});
|
||||
|
||||
let content = (
|
||||
<div className="pop-cont">
|
||||
<span className="clear-setting" onClick={this.clear}>清除设置</span>
|
||||
<div className={`${prefixCls}-pop-cont`}>
|
||||
<span className={`${prefixCls}-clear-setting`} onClick={this.clear}>清除设置</span>
|
||||
<div>
|
||||
{
|
||||
this.getCloumItem()
|
||||
|
|
@ -98,15 +106,15 @@ export default function filterColumn(Table) {
|
|||
</div>
|
||||
</div>);
|
||||
|
||||
return <div className="bee-table-column-filter-cont">
|
||||
return <div className={`${prefixCls}-cont`}>
|
||||
<Table {...this.props} columns={_columns} data={data} />
|
||||
<Popover
|
||||
placement="leftTop"
|
||||
content={content} id="aa"
|
||||
show={showModal} >
|
||||
<div className="bee-table-column-filter"><Icon type="uf-navmenu" onClick={this.openCloumList}/></div>
|
||||
<div className={`${prefixCls}-pop-column-filter`}><Icon type="uf-navmenu" onClick={this.openCloumList}/></div>
|
||||
</Popover>
|
||||
</div>;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue