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 ( -