diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js b/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js index 5c576a0816..2c491e2c08 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js @@ -13,10 +13,12 @@ export default class ContentTree extends Component { this.addWidthChangeListener = this.addWidthChangeListener.bind(this); this.handleResizeEnd = this.handleResizeEnd.bind(this); this._refTreeContainer = React.createRef(); + this.scrollTimeout = null; + this.scrollPositionRestored = false; this.state = { resizeStartPositionX: 0, - containerWidth: 0, + containerWidth: this.getConfig('width'), resizedContainerWidth: 0, isResizing: false, }; @@ -26,10 +28,52 @@ export default class ContentTree extends Component { this.clearDocumentResizingListeners(); } + componentDidMount() { + this.containerScrollRef.addEventListener('scroll', (event) => { + window.clearTimeout(this.scrollTimeout); + + this.scrollTimeout = window.setTimeout( + (scrollTop) => { + this.saveConfig('scrollTop', scrollTop); + }, + 50, + event.currentTarget.scrollTop + ); + }); + } + componentDidUpdate(prevState) { if (this.state.containerWidth !== prevState.containerWidth) { + this.saveConfig('width', this.state.containerWidth); + document.body.dispatchEvent(new CustomEvent('ez-content-tree-resized')); } + + if (this.props.items && this.props.items.length && !this.scrollPositionRestored) { + this.scrollPositionRestored = true; + + this.containerScrollRef.scrollTo(0, this.getConfig('scrollTop')); + } + } + + saveConfig(id, value) { + const { userId } = this.props; + const data = JSON.parse(window.localStorage.getItem('ez-content-tree-state') || '{}'); + + if (!data[userId]) { + data[userId] = {}; + } + + data[userId][id] = value; + + window.localStorage.setItem('ez-content-tree-state', JSON.stringify(data)); + } + + getConfig(id) { + const { userId } = this.props; + const data = JSON.parse(window.localStorage.getItem('ez-content-tree-state') || '{}'); + + return data[userId]?.[id]; } changeContainerWidth({ clientX }) { @@ -78,13 +122,8 @@ export default class ContentTree extends Component { } renderList() { - const { items } = this.props; - - if (!items || !items.length) { - return; - } - const { + items, loadMoreSubitems, currentLocationId, onClickItem, @@ -108,8 +147,8 @@ export default class ContentTree extends Component { }; return ( -
- +
(this.containerScrollRef = ref)}> + {!items || !items.length ? null : }
); } @@ -158,4 +197,5 @@ ContentTree.propTypes = { afterItemToggle: PropTypes.func.isRequired, onCollapseAllItems: PropTypes.func.isRequired, onClickItem: PropTypes.func, + userId: PropTypes.number.isRequired, }; diff --git a/src/bundle/ui-dev/src/modules/content-tree/content.tree.module.js b/src/bundle/ui-dev/src/modules/content-tree/content.tree.module.js index 231e7dcb1b..3df57ad3ab 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/content.tree.module.js +++ b/src/bundle/ui-dev/src/modules/content-tree/content.tree.module.js @@ -352,7 +352,7 @@ export default class ContentTreeModule extends Component { } render() { - const { onClickItem, subitemsLimit, subitemsLoadLimit, treeMaxDepth } = this.props; + const { onClickItem, subitemsLimit, subitemsLoadLimit, treeMaxDepth, userId } = this.props; const attrs = { items: this.items, currentLocationId: this.getCurrentLocationId(), @@ -363,6 +363,7 @@ export default class ContentTreeModule extends Component { afterItemToggle: this.updateSubtreeAfterItemToggle, onCollapseAllItems: this.handleCollapseAllItems, onClickItem, + userId, }; return ; @@ -398,6 +399,6 @@ ContentTreeModule.defaultProps = { subitemsLimit: window.eZ.adminUiConfig.contentTree.childrenLoadMaxLimit, subitemsLoadLimit: window.eZ.adminUiConfig.contentTree.loadMoreLimit, treeMaxDepth: window.eZ.adminUiConfig.contentTree.treeMaxDepth, - afterItemToggle: () => { }, + afterItemToggle: () => {}, sort: {}, };