增加是否可过滤API

src/lib/filterColumn.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
-import Checkbox from 'bee-checkbox';
+import Checkbox from "bee-checkbox";
 import Icon from "bee-icon";
-import {ObjectAssign} from './util';
+import { ObjectAssign } from "./util";
-import i18n from '../i18n'
+import i18n from "../i18n";
-import { getComponentLocale } from 'bee-locale/build/tool';
+import { getComponentLocale } from "bee-locale/build/tool";
 
 function noop() {}
 /**
@@ -13,125 +13,143 @@ function noop() {}
  * @param {*} Icon
  */
 
-export default function filterColumn(Table,Popover) {
+export default function filterColumn(Table, Popover) {
-
   return class FilterColumn extends Component {
     static defaultProps = {
       prefixCls: "u-table-filter-column",
       afterFilter: noop,
-      scroll:{}
+      columnFilterAble: true,
-    }
+      scroll: {}
+    };
 
     constructor(props) {
       super(props);
-      const {columns} = props;
+      const { columns } = props;
       this.state = {
-        columns:this.setColumOrderByIndex(ObjectAssign(columns)),
+        columns: this.setColumOrderByIndex(ObjectAssign(columns)),
-        showModal:false,
+        showModal: false,
-        screenY:0
+        screenY: 0
       };
     }
 
-    setColumOrderByIndex = (_column)=>{
+    setColumOrderByIndex = _column => {
       _column.forEach(da => {
         //默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
-        if(da.hasOwnProperty('ifshow')){
+        if (da.hasOwnProperty("ifshow")) {
-          da.checked = da.ifshow?true:false;
+          da.checked = da.ifshow ? true : false;
           da.ifshow = da.checked;
-        }else{
+        } else {
           da.checked = true;
           da.ifshow = true;
         }
       });
       return _column;
-    }
+    };
-    componentWillReceiveProps(nextProps){
+    componentWillReceiveProps(nextProps) {
-      if(nextProps.columns != this.props.columns){
+      if (nextProps.columns != this.props.columns) {
         this.setState({
-          columns:this.setColumOrderByIndex(ObjectAssign(nextProps.columns))
+          columns: this.setColumOrderByIndex(ObjectAssign(nextProps.columns))
-        })
+        });
       }
       this.setState({
-        showModal:nextProps.showFilterPopover?true:false
+        showModal: nextProps.showFilterPopover ? true : false
-      })
+      });
     }
 
-    checkedColumItemClick = (da)=>{
+    checkedColumItemClick = da => {
-      let {checkMinSize,afterFilter} = this.props;
+      let { checkMinSize, afterFilter } = this.props;
       // if(checkMinSize)
-      let sum = 0,leng=0;
+      let sum = 0,
+        leng = 0;
       this.state.columns.forEach(da => {
-        da.fixed?"":leng++;
+        da.fixed ? "" : leng++;
-        !da.fixed && da.checked?sum++:"";
+        !da.fixed && da.checked ? sum++ : "";
       });
-      if(sum < checkMinSize && da.checked){
+      if (sum < checkMinSize && da.checked) {
         return;
-      }else{
+      } else {
-        if(sum<=1  && da.checked)return;
+        if (sum <= 1 && da.checked) return;
       }
-      da.checked = da.checked?false:true;
+      da.checked = da.checked ? false : true;
-      da.ifshow  = da.checked?true:false;
+      da.ifshow = da.checked ? true : false;
 
       this.setState({
         ...this.state
-      })
-      afterFilter(da,this.state.columns);
-    }
-  
-    openCloumList = ()=>{
-      this.setState({ 
-        showModal:true
       });
-    }
+      afterFilter(da, this.state.columns);
+    };
 
-    getCloumItem=()=>{
+    openCloumList = () => {
-      const {prefixCls} = this.props;
+      this.setState({
-      const {columns} = this.state;
+        showModal: true
-      return columns.map((da,i)=> 
+      });
-      {
+    };
-        if(!da.fixed){
+
-          return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} >
+    getCloumItem = () => {
-            <Checkbox id={da.key} checked={da.checked} onClick={()=>{this.checkedColumItemClick(da)}}/> 
+      const { prefixCls } = this.props;
+      const { columns } = this.state;
+      return columns.map((da, i) => {
+        if (!da.fixed) {
+          return (
+            <div
+              key={da.key + "_" + i}
+              className={`${prefixCls}-pop-cont-item`}
+            >
+              <Checkbox
+                id={da.key}
+                checked={da.checked}
+                onClick={() => {
+                  this.checkedColumItemClick(da);
+                }}
+              />
               <span>{da.title}</span>
-          </div>)
+            </div>
-        }
+          );
-      })
         }
+      });
+    };
 
-    clear=()=>{
+    clear = () => {
-      const {columns} = this.state; 
+      const { columns } = this.state;
       columns.forEach(da => {
         da.checked = true;
         da.ifshow = true;
       });
       this.setState({
         columns
-      })
+      });
-      this.props.afterFilter(this.state.columns,this.state.columns);
+      this.props.afterFilter(this.state.columns, this.state.columns);
-    }
+    };
 
-    getCloumnsScroll=(columns)=>{
+    getCloumnsScroll = columns => {
       let sum = 0;
-      columns.forEach((da)=>{
+      columns.forEach(da => {
-        if(da.checked){
+        if (da.checked) {
           sum += da.width;
         }
-      })
+      });
       // console.log("sum",sum);
-      return (sum);
+      return sum;
-    }
+    };
 
     render() {
-      const {data,prefixCls,scroll:scrollPro} = this.props;
+      const { data, prefixCls, scroll: scrollPro } = this.props;
-      const {columns,showModal} = this.state;
+      const { columns, showModal } = this.state;
 
-      let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
+      let locale = getComponentLocale(
+        this.props,
+        this.context,
+        "Table",
+        () => i18n
+      );
 
-      let _columns = [],widthState=0,scroll=scrollPro;
+      let _columns = [],
-      columns.forEach((da)=>{
+        widthState = 0,
-        if(da.ifshow){
+        scroll = scrollPro;
+      columns.forEach(da => {
+        if (da.ifshow) {
           _columns.push(da);
-          if(da.width){
+          if (da.width) {
             widthState++;
           }
         }
@@ -142,32 +160,40 @@ export default function filterColumn(Table,Popover) {
 
       let content = (
         <div className={`${prefixCls}-pop-cont`}>
-        <span className={`${prefixCls}-clear-setting`} onClick={this.clear}>{locale['resetSettings']}</span>
+          <span className={`${prefixCls}-clear-setting`} onClick={this.clear}>
-        <div>
+            {locale["resetSettings"]}
-           {
+          </span>
-            this.getCloumItem()
+          <div>{this.getCloumItem()}</div>
-           }
         </div>
-      </div>);
+      );
 
-      return <div className={`${prefixCls}-cont`}>
+      return (
-          <Table {...this.props} columns={_columns} data={data}  
+        <div className={`${prefixCls}-cont`}>
+          <Table
+            {...this.props}
+            columns={_columns}
+            data={data}
             // scroll={scroll}
             //  scroll={{x:this.getCloumnsScroll(columns)}}
           />
+          {this.props.columnFilterAble == false ? (
+            ""
+          ) : (
             <div className={`${prefixCls}-filter-icon`}>
               <Popover
                 id="filter_column_popover"
                 placement="left"
                 content={content}
-              show={showModal}   >
+                show={showModal}
+              >
                 <div className={`${prefixCls}-pop-column-filter-cont`}>
-                  <Icon type="uf-grid" onClick={this.openCloumList}/>
+                  <Icon type="uf-grid" onClick={this.openCloumList} />
                 </div>
               </Popover>
             </div>
-        </div>;
+          )}
+        </div>
+      );
     }
   };
-
 }