OpenConceptLab/ocl_issues#1460 | fixing resizing

OpenConceptLab · Jan 17, 2023 · caafca9 · caafca9
1 parent 5d8d78a
commit caafca9
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 15 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -205,7 +205,8 @@
           "sourcemappings",
           "upsert",
           "Unmount",
-          "keydown"
+          "keydown",
+          "rect"
         ],
         "skipIfMatch": [
           "http://[^s]*",

diff --git a/src/components/collections/CollectionHome.jsx b/src/components/collections/CollectionHome.jsx
@@ -92,6 +92,12 @@ class CollectionHome extends React.Component {
   componentDidMount() {
     this.setPaths()
     this.refreshDataByURL()
+    this.interval = setInterval(this.setContainerWidth, 100)
+  }
+
+  componentWillUnmount() {
+    if(this.interval)
+      clearInterval(this.interval)
   }
 
   componentDidUpdate(prevProps) {
@@ -273,13 +279,15 @@ class CollectionHome extends React.Component {
   })
 
   getContainerWidth = () => {
-    const { openOperations } = this.context
     const { selected, width, filtersOpen } = this.state;
     let totalWidth = 100
-    let operationsWidth = openOperations ? 60 : 0;
     if(selected) {
+      const resourceDom = document.getElementById('resource-item-container')
+      let itemWidth = 0
+      if(resourceDom)
+        itemWidth = resourceDom.getBoundingClientRect()?.width || 0
       if(width)
-        totalWidth = `calc(${totalWidth}% - ${width - 10}px - ${operationsWidth}px)`
+        totalWidth = `calc(${totalWidth}% - ${itemWidth - 10}px)`
       else
         totalWidth -= filtersOpen ? 46 : 40.5
     }
@@ -288,6 +296,14 @@ class CollectionHome extends React.Component {
     return totalWidth
   }
 
+  setContainerWidth = () => {
+    const el = document.getElementById('coll-container')
+    if(el) {
+      const width = this.getContainerWidth()
+      el.style.width = width
+    }
+  }
+
   getBreadcrumbParams = () => {
     let params = {...this.props.match.params}
     const { selected } = this.state
@@ -342,7 +358,7 @@ class CollectionHome extends React.Component {
                 />
               </div>
 
-              <div className='col-md-12 home-container no-side-padding' style={{width: this.getContainerWidth(), marginTop: '60px'}}>
+              <div id='coll-container' className='col-md-12 home-container no-side-padding' style={{width: this.getContainerWidth(), marginTop: '60px'}}>
                 <CollectionHomeHeader
                   collection={collection}
                   isVersionedObject={this.isVersionedObject()}

diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -433,7 +433,7 @@ class ConceptHome extends React.Component {
       </div>
     )
     return (
-      <div className='col-xs-12 home-container no-side-padding' style={this.props.scoped ? {background: '#f1f1f1'} : {}}>
+      <div id='resource-item-container' className='col-xs-12 home-container no-side-padding' style={this.props.scoped ? {background: '#f1f1f1'} : {}}>
         {
           openHierarchy ?
           <Split className='split' sizes={[25, 75]} minSize={50}>

diff --git a/src/components/mappings/MappingHome.jsx b/src/components/mappings/MappingHome.jsx
@@ -132,7 +132,7 @@ class MappingHome extends React.Component {
         { permissionDenied && <PermissionDenied /> }
         {
           !isLoading && !hasError &&
-          <div className='col-xs-12 home-container no-side-padding'>
+            <div id='resource-item-container' className='col-xs-12 home-container no-side-padding'>
             {
               this.props.scoped ?
               <ScopeHeader

diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -95,6 +95,13 @@ class Search extends React.Component {
     if(this.props.references)
       this.setState({results: {...this.state.results, references: cloneDeep(resourceResultStruct)}})
     this.setQueryParamsInState()
+    if(!this.props.nested)
+      this.interval = setInterval(this.setSearchContainerWidth, 100)
+  }
+
+  componentWillUnmount() {
+    if(this.interval)
+      clearInterval(this.interval)
   }
 
   getLayoutAttrValue(attr, type) {
@@ -706,7 +713,6 @@ class Search extends React.Component {
   }
 
   getContainerLayoutProps = () => {
-    const { openOperations, menuOpen } = this.context
     const layout = {width: 100, paddingRight: this.props.nested ? 0 : '10px', paddingLeft: this.props.nested ? 0: '10px', marginTop: this.props.nested ? 0 : '60px'}
     if(this.state.openFacetsDrawer && !this.props.nested) {
       layout.width -= 12
@@ -715,8 +721,11 @@ class Search extends React.Component {
     }
     if(this.state.selectedItem) {
       if(this.state.width) {
-        let peripheralWidth = openOperations ? (menuOpen ? 250 : 60) : 0
-        layout.width = `calc(${layout.width}% - ${this.state.width - 5}px - ${peripheralWidth}px)`
+        const resourceDom = document.getElementById('resource-item-container')
+        let itemWidth = 0
+        if(resourceDom)
+          itemWidth = resourceDom.getBoundingClientRect()?.width || 0
+        layout.width = `calc(${layout.width}% - ${itemWidth}px)`
       }
       else
         layout.width -= 39.7
@@ -728,6 +737,16 @@ class Search extends React.Component {
     return layout
   }
 
+  setSearchContainerWidth = () => {
+    const el = document.getElementById('search-container')
+    if(el) {
+      const props = this.getContainerLayoutProps()
+      const existingWidth = el.getBoundingClientRect()?.width || 0
+      if(props.width !== existingWidth)
+        el.style.width = props.width
+    }
+  }
+
   getMainContainerProps = () => {
     const layout = {zIndex: 1201, position: 'fixed'}
     if(this.state.openFacetsDrawer && !this.props.nested) {
@@ -798,7 +817,7 @@ class Search extends React.Component {
             />
           }
         </div>
-        <div className='col-xs-12' style={layoutProps}>
+        <div id="search-container" className='col-xs-12' style={layoutProps}>
           <div className='col-xs-12 no-side-padding'>
             {
               nested &&

diff --git a/src/components/sources/SourceHome.jsx b/src/components/sources/SourceHome.jsx
@@ -92,6 +92,12 @@ class SourceHome extends React.Component {
   componentDidMount() {
     this.setPaths()
     this.refreshDataByURL()
+    this.interval = setInterval(this.setContainerWidth, 100)
+  }
+
+  componentWillUnmount() {
+    if(this.interval)
+      clearInterval(this.interval)
   }
 
   componentDidUpdate(prevProps) {
@@ -250,13 +256,15 @@ class SourceHome extends React.Component {
   isVersionTabSelected = () => get(this.currentTabConfig(), 'type') === 'versions';
 
   getContainerWidth = () => {
-    const { openOperations } = this.context
     const { selected, width, filtersOpen } = this.state;
     let totalWidth = 100
-    let operationsWidth = openOperations ? 60 : 0;
     if(selected) {
+      const resourceDom = document.getElementById('resource-item-container')
+      let itemWidth = 0
+      if(resourceDom)
+        itemWidth = resourceDom.getBoundingClientRect()?.width || 0
       if(width)
-        totalWidth = `calc(${totalWidth}% - ${width - 10}px - ${operationsWidth}px)`
+        totalWidth = `calc(${totalWidth}% - ${itemWidth - 10}px)`
       else
         totalWidth -= filtersOpen ? 46 : 40.5
     }
@@ -266,6 +274,14 @@ class SourceHome extends React.Component {
     return totalWidth
   }
 
+  setContainerWidth = () => {
+    const el = document.getElementById('source-container')
+    if(el) {
+      const width = this.getContainerWidth()
+      el.style.width = width
+    }
+  }
+
   getBreadcrumbParams = () => {
     let params = {...this.props.match.params}
     const { selected } = this.state
@@ -313,7 +329,7 @@ class SourceHome extends React.Component {
                   onSplitViewClose={() => this.setState({selected: null, width: false})}
                 />
               </div>
-              <div className='col-xs-12 home-container no-side-padding' style={{width: this.getContainerWidth(), marginTop: '60px'}}>
+              <div id='source-container' className='col-xs-12 home-container no-side-padding' style={{width: this.getContainerWidth(), marginTop: '60px'}}>
                 <SourceHomeHeader
                   source={source}
                   isVersionedObject={this.isVersionedObject()}