BUGFIX: keep toggled state of inspector panels in state

theDex · Mar 26, 2018 · 5518a4c · 5518a4c
1 parent d32c7a1
commit 5518a4c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/PropertyGroup/index.js
@@ -22,6 +22,7 @@ export default class PropertyGroup extends PureComponent {
         renderSecondaryInspector: PropTypes.func.isRequired,
 
         node: PropTypes.object.isRequired,
+        handlePanelToggle: PropTypes.func.isRequired,
         commit: PropTypes.func.isRequired
     };
 
@@ -30,13 +31,13 @@ export default class PropertyGroup extends PureComponent {
     };
 
     render() {
-        const {properties, views, label, icon, collapsed, renderSecondaryInspector, node, commit} = this.props;
+        const {properties, views, label, icon, collapsed, handlePanelToggle, renderSecondaryInspector, node, commit} = this.props;
         const headerTheme = {
             panel__headline: style.propertyGroupLabel // eslint-disable-line camelcase
         };
 
         const propertyGroup = properties => (
-            <ToggablePanel isOpen={!collapsed} className={sidebarStyle.rightSideBar__section}>
+            <ToggablePanel onPanelToggle={handlePanelToggle} isOpen={!collapsed} className={sidebarStyle.rightSideBar__section}>
                 <ToggablePanel.Header theme={headerTheme}>
                     {icon && <Icon icon={icon}/>} <I18n id={label}/>
                 </ToggablePanel.Header>

diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js
@@ -24,7 +24,7 @@ export default class TabPanel extends PureComponent {
     };
 
     render() {
-        const {groups, renderSecondaryInspector, node, commit} = this.props;
+        const {handlePanelToggle, toggledPanels, groups, renderSecondaryInspector, node, commit} = this.props;
 
         if (!groups) {
             return (<div>...</div>);
@@ -36,10 +36,12 @@ export default class TabPanel extends PureComponent {
                 {
                     groups.filter(g => ($get('properties', g) && $get('properties', g).filter(this.isPropertyEnabled).count()) || ($get('views', g) && $get('views', g).count())).map(group => (
                         <PropertyGroup
+                            handlePanelToggle={() => handlePanelToggle([$get('id', group)])}
                             key={$get('id', group)}
                             label={$get('label', group)}
                             icon={$get('icon', group)}
-                            collapsed={$get('collapsed', group)}
+                            // overlay default collapsed state over current state
+                            collapsed={$get($get('id', group), toggledPanels) != $get('collapsed', group)} // eslint-disable-line eqeqeq
                             properties={$get('properties', group).filter(this.isPropertyEnabled)}
                             views={$get('views', group)}
                             renderSecondaryInspector={renderSecondaryInspector}

diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
@@ -69,7 +69,8 @@ export default class Inspector extends PureComponent {
     };
 
     state = {
-        secondaryInspectorComponent: null
+        secondaryInspectorComponent: null,
+        toggledPanels: Immutable.fromJS({})
     };
 
     constructor(props) {
@@ -197,6 +198,12 @@ export default class Inspector extends PureComponent {
         return (<div className={style.loader}><div><Icon icon="spinner" spin={true} size="big" /></div></div>);
     }
 
+    handlePanelToggle = path => {
+        const value = $get(path, this.state.toggledPanels);
+        const newState = $set(path, !value, this.state.toggledPanels);
+        this.setState({toggledPanels: newState});
+    };
+
     render() {
         const {
             focusedNode,
@@ -252,10 +259,14 @@ export default class Inspector extends PureComponent {
                                     key={$get('id', tab)}
                                     icon={$get('icon', tab)}
                                     groups={$get('groups', tab)}
+                                    toggledPanels={$get($get('id', tab), this.state.toggledPanels)}
                                     tooltip={i18nRegistry.translate($get('label', tab))}
                                     renderSecondaryInspector={this.renderSecondaryInspector}
                                     node={focusedNode}
                                     commit={commit}
+                                    handlePanelToggle={path => {
+                                        this.handlePanelToggle([$get('id', tab), ...path]);
+                                    }}
                                     />);
                         })
                     }