From d8eb70d98b09a5d4ede5f588b8d69255e1876fce Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Thu, 21 Mar 2019 01:54:34 -0400 Subject: [PATCH] stuff kinda works??? --- package.json | 4 +- src/react-sortable-tree.js | 81 ++++++++++++++++++++++---------------- yarn.lock | 31 +++++++++++++++ 3 files changed, 81 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 4295541e..b0041ed4 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,9 @@ "react-dnd-html5-backend": "^7.0.1", "react-lifecycles-compat": "^3.0.4", "react-sortable-tree": "^2.6.0", - "react-virtualized": "^9.19.1" + "react-virtualized": "^9.19.1", + "react-virtualized-auto-sizer": "^1.0.2", + "react-window": "^1.7.1" }, "peerDependencies": { "react": "^16.3.0", diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index 1c4fb743..dd00c4ec 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { AutoSizer, List } from 'react-virtualized'; +import AutoSizer from 'react-virtualized-auto-sizer'; +import { VariableSizeList } from 'react-window'; import isEqual from 'lodash.isequal'; import withScrolling, { - createScrollingComponent, createVerticalStrength, createHorizontalStrength, } from 'frontend-collective-react-dnd-scrollzone'; @@ -98,11 +98,10 @@ class ReactSortableTree extends Component { // Prepare scroll-on-drag options for this list if (isVirtualized) { - this.scrollZoneVirtualList = (createScrollingComponent || withScrolling)( - List - ); + this.scrollZoneVirtualList = withScrolling(VariableSizeList); this.vStrength = createVerticalStrength(slideRegionSize); this.hStrength = createHorizontalStrength(slideRegionSize); + this.variableSizeListRef = React.createRef(); } this.state = { @@ -209,6 +208,25 @@ class ReactSortableTree extends Component { }); } } + + // if there is search, scroll to component + if ( + this.state.searchFocusTreeIndex !== null && + this.variableSizeListRef.current + ) { + this.variableSizeListRef.current.scrollToItem( + this.state.searchFocusTreeIndex, + 'start' + ); + } + } + + shouldComponentUpdate(nextProps, nextState) { + if (nextState.draggedNode !== this.state.draggedNode) { + return false; + } + + return true; } componentWillUnmount() { @@ -585,7 +603,7 @@ class ReactSortableTree extends Component { return ( {({ height, width }) => ( { - this.scrollTop = scrollTop; + onScroll={({ scrollOffset }) => { + this.scrollTop = scrollOffset; }} height={height} style={innerStyle} - rowCount={rows.length} - estimatedRowSize={ + itemCount={rows.length} + estimatedItemSize={ typeof rowHeight !== 'function' ? rowHeight : undefined } - rowHeight={ - typeof rowHeight !== 'function' - ? rowHeight - : ({ index }) => - rowHeight({ - index, - treeIndex: index, - node: rows[index].node, - path: rows[index].path, - }) + itemSize={({ index }) => + typeof rowHeight === 'function' + ? rowHeight({ + index, + treeIndex: index, + node: rows[index].node, + path: rows[index].path, + }) + : rowHeight } - rowRenderer={({ index, style: rowStyle }) => + {...reactVirtualizedListProps} + > + {({ index, style: rowStyle }) => this.renderRow(rows[index], { listIndex: index, style: rowStyle, @@ -728,13 +742,12 @@ class ReactSortableTree extends Component { swapLength, }) } - {...reactVirtualizedListProps} - /> + )} ); } else { - // Render list without react-virtualized + // Render list without react-window list = rows.map((row, index) => this.renderRow(row, { listIndex: index, diff --git a/yarn.lock b/yarn.lock index 2ce74e9d..962a25da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5780,6 +5780,19 @@ frontend-collective-react-dnd-scrollzone@^1.0.1: react-display-name "^0.2.0" react-dom "^16.3.0" +frontend-collective-react-dnd-scrollzone@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/frontend-collective-react-dnd-scrollzone/-/frontend-collective-react-dnd-scrollzone-1.0.2.tgz#cf5ed6165335f7d26504a40126f8e972ee644698" + integrity sha512-me/D9PZJq9j/sjEjs/OPmm6V6nbaHbhgeQiwrWu0t35lhwAOKWc+QBzzKKcZQeboYTkgE8UvCD9el+5ANp+g5Q== + dependencies: + hoist-non-react-statics "^3.1.0" + lodash.throttle "^4.0.1" + prop-types "^15.5.9" + raf "^3.2.0" + react "^16.3.0" + react-display-name "^0.2.0" + react-dom "^16.3.0" + fs-access@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a" @@ -8333,6 +8346,11 @@ mem@^1.1.0: dependencies: mimic-fn "^1.0.0" +"memoize-one@>=3.1.1 <6": + version "5.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.0.tgz#d55007dffefb8de7546659a1722a5d42e128286e" + integrity sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw== + memory-fs@^0.4.0, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -10906,6 +10924,11 @@ react-treebeard@^3.1.0: shallowequal "^1.1.0" velocity-react "^1.4.1" +react-virtualized-auto-sizer@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd" + integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg== + react-virtualized@^9.13.0, react-virtualized@^9.19.1: version "9.21.0" resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506" @@ -10918,6 +10941,14 @@ react-virtualized@^9.13.0, react-virtualized@^9.19.1: prop-types "^15.6.0" react-lifecycles-compat "^3.0.4" +react-window@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.1.tgz#c1db640415b97b85bc0a1c66eb82dadabca39b86" + integrity sha512-y4/Qc98agCtHulpeI5b6K2Hh8J7TeZIfvccBVesfqOFx4CS+TSUpnJl1/ipeXzhfvzPwvVEmaU/VosQ6O5VhTg== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + react@^16.3.0: version "16.6.3" resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"