filter 样式优化

dist/demo.css

@@ -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; }

dist/demo.js

@@ -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 }),

src/Table.scss

@@ -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;

src/lib/Table.js

@@ -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>
-    )
-  }
-}

src/lib/filterColumn.js

@@ -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"> 
+        <div className={`${prefixCls}-pop-cont`}> 
-        <span className="clear-setting" onClick={this.clear}>清除设置</span>
+        <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>;
     }
   };
-}
+}