条件栏失去焦点自动收起以及条件栏高度动态设置逻辑

src/components/dashboardDesigner/content.jsx

@@ -28,8 +28,9 @@ class DashboardDesignerContent extends React.Component {
             },
             visibleFilterBox: false,
             visibleFilterList: false,
-            closeFilters: true,
-            filterContentHeight: 40
+            filtersOpened: false, // 展开所有filter
+            filterOvered: false, // filter数量超出了一行
+            filterContentHeight: 40 // filter栏高度
         };
         this.contentRef=React.createRef();
     }
@@ -66,20 +67,21 @@ class DashboardDesignerContent extends React.Component {
         let padding = 0;
         let width = viewContentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2); // 有滚动条时需要减去滚动条的宽度
         let height = viewContentEl.offsetHeight - padding * 2;
+        
         this.setState({
             contentSize: {
                 width,
                 height,
                 _scroll
             },
-        });
+        }, this.resetFilterContentHeight);
     }
 
     createFilters = (filters) => {
         const { dispatch, afterRefresh } = this.props;
         dispatch({ type: 'dashboardDesigner/changeFilters', filters }).then(() => {
             afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
-        });
+        }).then(this.resetFilterContentHeight);
     }
 
     filterUsingChange = (e) => {
@@ -99,10 +101,80 @@ class DashboardDesignerContent extends React.Component {
         });
     }
 
+    isParent = (obj,parentObj) => {
+        while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
+            if (obj == parentObj){
+                return true;
+            }
+            obj = obj.parentNode;
+        }
+        return false;
+    }
+
+    closeFiltersEventListener = e => {
+        let viewContent = document.getElementsByClassName('react-grid-layout')[0];
+        let sider = document.getElementsByClassName('config-sider')[0];
+        let header = document.getElementsByClassName('dashboarddesigner-header')[0];
+
+        if(this.isParent(e.target, viewContent) || this.isParent(e.target, sider) || this.isParent(e.target, header) ) {
+            this.closeFilters();
+        }
+    }
+
+    expandFilters = () => {
+        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
+        let filterContentScrollHeight = filterContent.scrollHeight;
+
+        this.setState({
+            filtersOpened: true,
+            filterContentHeight: filterContentScrollHeight
+        });
+        document.addEventListener('click', this.closeFiltersEventListener)
+    }
+
+    closeFilters = () => {
+        this.setState({
+            filtersOpened: false,
+            filterContentHeight: 40
+        });
+        document.removeEventListener('click', this.closeFiltersEventListener);
+    }
+
+    resetFilterContentHeight = () => {
+        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
+
+        window.clearTimeout(this.resetKey);
+        this.resetKey = window.setTimeout(() => {
+            let filterContentOffsetHeight;
+            let filterContentScrollHeight;
+            let obj = {};
+
+            if(this.state.filtersOpened) {
+                this.filtersRef.style.height = 'auto';
+                filterContentOffsetHeight = filterContent.offsetHeight;
+                filterContentScrollHeight = filterContent.scrollHeight
+
+                console.log(filterContentScrollHeight)
+                if(filterContentScrollHeight === 40) {
+                    obj.filterOvered = false;
+                    obj.filtersOpened = false;
+                }
+                obj.filterContentHeight = filterContentScrollHeight;
+            }else {
+                filterContentOffsetHeight = filterContent.offsetHeight;
+                filterContentScrollHeight = filterContent.scrollHeight
+
+                obj.filterOvered = filterContentScrollHeight > filterContentOffsetHeight;
+            }
+
+            this.setState(obj);
+        }, 300);
+    }
+
     render() {
         const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode } = this.props;
         const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
-        const { visibleFilterBox, visibleFilterList, contentSize, closeFilters, filterContentHeight } = this.state;
+        const { visibleFilterBox, visibleFilterList, contentSize, filtersOpened, filterContentHeight, filterOvered } = this.state;
 
         return <Layout className='content'>
             <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
@@ -116,7 +188,7 @@ class DashboardDesignerContent extends React.Component {
                     <main ref={this.contentRef} className='viewlayout ant-layout-content'>
                         {(editMode || (filters && filters.length > 0) )&& <Header>
                             {/* <div className='toggle'><Icon type="caret-up" /></div> */}
-                            <div ref = {node => this.filterContentRef = node} className={`filters`} style={{ height: `${filterContentHeight}px`, width: `${contentSize.width + (contentSize._scroll ? 10 : 0)}px` }}>
+                            <div ref = {node => this.filtersRef = node} className={`filters`} style={{ height: `${filterContentHeight}px`, width: `${contentSize.width + (contentSize._scroll ? 10 : 0)}px` }}>
                                 <div key={filters.length} className='content'>
                                     {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Tag
                                         onClick={this.showFilterBox}
@@ -132,17 +204,11 @@ class DashboardDesignerContent extends React.Component {
                                         />
                                     ))}
                                 </div>
-                                <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
-                                    <Icon title={closeFilters ? '展开' : '收起'} type={closeFilters ? 'caret-up' : 'caret-down'} onClick={() => {
-                                        let filterContent = this.filterContentRef.getElementsByClassName('content')[0];
-                                        let filterContentScrollHeight = filterContent.scrollHeight;
-                                        let filterContentHeight = closeFilters ? filterContentScrollHeight : 40
-                                        this.setState({
-                                            closeFilters: !closeFilters,
-                                            filterContentHeight
-                                        });
+                                {filterOvered && <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none', fontSize: '20px' }}>
+                                    <Icon title={filtersOpened ? '收起' : '展开'} type={filtersOpened ? 'caret-down' : 'caret-up'} onClick={() => {
+                                        filtersOpened ? this.closeFilters() : this.expandFilters();
                                     }}/>
-                                </div>
+                                </div>}
                                 {/* {overFilters && <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
                                     <Fragment>
                                         <span style={{ cursor: 'pointer' }} onClick={() => {

src/components/dashboardDesigner/header.jsx

@@ -42,7 +42,7 @@ class Header extends React.Component {
         const { editMode } = dashboardDesigner;
 
         return (
-            <div className='dashboarddesigner-header'>
+            <div className='dashboarddesigner-header-content'>
                 <div className='header-item toolbar-back'>
                     {this.isOwner() && <Popconfirm
                         overlayClassName={`close-popconfirm${this.isValid() ? '' : ' confirm-disabled'}`}

src/components/dashboardDesigner/header.less

@@ -1,4 +1,4 @@
-.dashboarddesigner-header {
+.dashboarddesigner-header-content {
     display: flex;
     justify-content: space-between;
 

src/components/dashboardDesigner/layout.jsx

@@ -54,7 +54,7 @@ class DashboardDesigner extends React.Component {
             key={code} // 这个key值很重要，因为不同报表中可能引用相同的图表，如果不在报表这一级加上key值区分的话，会造成首页展示切换不同报表时图表位置错误的问题
             className='layout-dashboarddesigner'
         >
-            {!isShareView && !isShareKeyView && !isViewMode && <Header>
+            {!isShareView && !isShareKeyView && !isViewMode && <Header className='dashboarddesigner-header'>
                 <DashboardDesignerHeader />
             </Header>}
             <Content>