Skip to content

Commit c65a38b

Browse files
nosferatu500nosferatu500
committed
Replace react-virtualized with react-vitruoso.
1 parent b9ea779 commit c65a38b

11 files changed

+1473
-1397
lines changed

‎.size-snapshot.json

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎CHANGELOG.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5-
## Next
6-
* Migrate to TS
5+
## 4.0.0-beta.1
6+
* Migrate to TS (partially)
7+
* Node >= 14
8+
* Drop IE from support list
9+
* Replace react-virtualized with react-virtuoso
710
* Replace theme package by own theme package
811
* Bump deps
912

‎README.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,18 +125,13 @@ export default class Tree extends Component {
125125
| searchFinishCallback | func | Get the nodes that match the search criteria. Used for counting total matches, etc.<div>`(matches: { node: object, path: number[] or string[], treeIndex: number }[]): void`</div> |
126126
| dndType | string | String value used by [react-dnd](https://react-dnd.github.io/react-dnd/about) (see overview at the link) for dropTargets and dragSources types. If not set explicitly, a default value is applied by react-sortable-tree for you for its internal use. **NOTE:** Must be explicitly set and the same value used in order for correct functioning of external nodes |
127127
| shouldCopyOnOutsideDrop | func or bool | Return true, or a callback returning true, and dropping nodes to react-dnd drop targets outside of the tree will not remove them from the tree. Defaults to `false`. <div>`({ node: object, prevPath: number[] or string[], prevTreeIndex: number, }): bool`</div> |
128-
| reactVirtualizedListProps | object | Custom properties to hand to the internal [react-virtualized List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types) |
129128
| style | object | Style applied to the container wrapping the tree (style defaults to `{height: '100%'}`) |
130129
| innerStyle | object | Style applied to the inner, scrollable container (for padding, etc.) |
131130
| className | string | Class name for the container wrapping the tree |
132-
| rowHeight | number or func | Used by react-sortable-tree. Defaults to `62`. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ treeIndex: number, node: object, path: number[] or string[] }): number` |
133131
| slideRegionSize | number | Size in px of the region near the edges that initiates scrolling on dragover. Defaults to `100`. |
134132
| scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`. |
135-
| isVirtualized | bool | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled. |
136133
| nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](https://github.com/nosferatu500/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed. |
137134
| placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/nosferatu500/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead. |
138-
| cssNonce | string | Content-Security-Policy nonce to use with inline `<style>` tags in virtualized mode. |
139-
140135
## Data Helper Functions
141136

142137
Need a hand turning your flat data into nested tree data?

‎__mocks__/react-virtualized.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
"publish:beta": "cd dist && npm publish --tag beta",
3636
"publish:release": "cd dist && npm publish"
3737
},
38+
"engines": {
39+
"node": ">=14"
40+
},
3841
"prettier": {
3942
"semi": false,
4043
"trailingComma": "es5",
@@ -121,65 +124,61 @@
121124
"@nosferatu500/react-dnd-scrollzone": "^2.0.2",
122125
"lodash.isequal": "^4.5.0",
123126
"prop-types": "^15.7.2",
124-
"react-dnd": "^14.0.3",
125-
"react-dnd-html5-backend": "^14.0.1",
126-
"react-lifecycles-compat": "^3.0.4",
127-
"react-virtualized": "^9.22.3"
127+
"react-dnd": "^14.0.4",
128+
"react-dnd-html5-backend": "^14.0.2",
129+
"react-virtuoso": "^2.2.1"
128130
},
129131
"devDependencies": {
130132
"@babel/core": "^7.15.5",
131-
"@babel/eslint-parser": "^7.15.4",
133+
"@babel/eslint-parser": "^7.15.7",
132134
"@babel/helper-module-imports": "^7.15.4",
133135
"@babel/plugin-transform-react-jsx": "^7.14.9",
134136
"@babel/preset-env": "^7.15.6",
135137
"@babel/types": "^7.15.6",
136138
"@nosferatu500/theme-file-explorer": "^3.0.6",
137139
"@rollup/plugin-babel": "^5.3.0",
138-
"@rollup/plugin-node-resolve": "^13.0.4",
140+
"@rollup/plugin-node-resolve": "^13.0.5",
139141
"@rollup/plugin-typescript": "^8.2.5",
140-
"@storybook/addon-storyshots": "^6.3.8",
141-
"@storybook/addons": "^6.3.8",
142-
"@storybook/react": "^6.3.8",
143-
"@storybook/theming": "^6.3.8",
144-
"@testing-library/react": "^12.1.0",
142+
"@storybook/addon-storyshots": "^6.3.9",
143+
"@storybook/addons": "^6.3.9",
144+
"@storybook/react": "^6.3.9",
145+
"@storybook/theming": "^6.3.9",
146+
"@testing-library/react": "^12.1.1",
145147
"@types/babel-plugin-macros": "^2.8.5",
146148
"@types/enzyme": "^3.10.9",
147-
"@types/jest": "^27.0.1",
149+
"@types/jest": "^27.0.2",
148150
"@types/lodash.isequal": "^4.5.5",
149-
"@types/react": "^17.0.20",
151+
"@types/react": "^17.0.26",
150152
"@types/react-dom": "^17.0.9",
151-
"@types/react-lifecycles-compat": "^3.0.1",
152153
"@types/react-test-renderer": "^17.0.1",
153-
"@types/react-virtualized": "^9.21.13",
154-
"@typescript-eslint/eslint-plugin": "^4.31.0",
155-
"@typescript-eslint/parser": "^4.31.0",
154+
"@typescript-eslint/eslint-plugin": "^4.32.0",
155+
"@typescript-eslint/parser": "^4.32.0",
156156
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
157157
"acorn-jsx": "^5.3.2",
158158
"babel-plugin-macros": "^3.1.0",
159159
"babel-plugin-tester": "^10.1.0",
160160
"enzyme": "^3.11.0",
161-
"esbuild": "^0.12.26",
161+
"esbuild": "^0.13.3",
162162
"eslint": "^7.32.0",
163163
"eslint-config-prettier": "^8.3.0",
164164
"eslint-plugin-import": "^2.24.2",
165-
"eslint-plugin-jest": "^24.4.0",
165+
"eslint-plugin-jest": "^24.5.0",
166166
"eslint-plugin-prettier": "^4.0.0",
167-
"eslint-plugin-react": "^7.25.1",
168-
"jest": "^27.1.1",
167+
"eslint-plugin-react": "^7.26.1",
168+
"jest": "^27.2.4",
169169
"jest-enzyme": "^7.1.2",
170170
"json": "^11.0.0",
171-
"postcss": "^8.3.6",
172-
"prettier": "^2.4.0",
171+
"postcss": "^8.3.8",
172+
"prettier": "^2.4.1",
173173
"react": "^17.0.2",
174-
"react-dnd-test-backend": "^14.0.0",
175-
"react-dnd-touch-backend": "^14.1.0",
174+
"react-dnd-test-backend": "^14.0.1",
175+
"react-dnd-touch-backend": "^14.1.1",
176176
"react-dom": "^17.0.2",
177177
"react-test-renderer": "^17.0.2",
178178
"rimraf": "^3.0.2",
179-
"rollup": "^2.56.3",
179+
"rollup": "^2.58.0",
180180
"rollup-plugin-esbuild": "^4.5.0",
181181
"rollup-plugin-postcss": "^4.0.1",
182-
"rollup-plugin-size-snapshot": "^0.12.0",
183182
"shx": "^0.3.3",
184183
"ts-jest": "^27.0.5",
185184
"tslib": "^2.3.1",
@@ -194,7 +193,7 @@
194193
"production": [
195194
">0.2%",
196195
"not dead",
197-
"not ie <= 11",
196+
"not ie",
198197
"not op_mini all"
199198
],
200199
"development": [

‎rollup.config.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import typescript from '@rollup/plugin-typescript'
55
import jsx from 'acorn-jsx'
66
import esbuild from 'rollup-plugin-esbuild'
77
import postcss from 'rollup-plugin-postcss'
8-
import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
98
const createBabelConfig = require('./babel.config')
109

1110
const extensions = ['.js', '.ts', '.tsx']
@@ -54,13 +53,15 @@ function createDeclarationConfig(input, output) {
5453
function createESMConfig(input, output) {
5554
return {
5655
input,
57-
output: { file: output, format: 'esm' },
56+
output: [
57+
{ file: `${output}.js`, format: 'esm' },
58+
{ file: `${output}.mjs`, format: 'esm' },
59+
],
5860
external,
5961
plugins: [
6062
nodeResolve({ extensions }),
6163
postcss({ extract: 'style.css' }),
6264
getEsbuild('node12'),
63-
sizeSnapshot(),
6465
],
6566
}
6667
}
@@ -76,7 +77,6 @@ function createCommonJSConfig(input, output) {
7677
postcss({ extract: 'style.css' }),
7778
typescript(),
7879
babel(getBabelOptions({ ie: 11 })),
79-
sizeSnapshot(),
8080
],
8181
}
8282
}
@@ -85,7 +85,6 @@ export default function (args) {
8585
return [
8686
createDeclarationConfig('src/index.ts', 'dist'),
8787
createCommonJSConfig('src/index.ts', 'dist/index.js'),
88-
createESMConfig('src/index.ts', 'dist/esm/index.mjs'),
89-
createESMConfig('src/index.ts', 'dist/esm/index.js'),
88+
createESMConfig('src/index.ts', 'dist/esm/index'),
9089
]
9190
}

‎src/react-sortable-tree.test.tsx

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
99
import { TestBackend } from 'react-dnd-test-backend'
1010
import { TouchBackend } from 'react-dnd-touch-backend'
1111
import renderer from 'react-test-renderer'
12-
import { List } from 'react-virtualized'
1312
import DefaultNodeRenderer from './node-renderer-default'
1413
import SortableTree, {
1514
SortableTreeWithoutDndContext,
@@ -165,46 +164,6 @@ describe('<SortableTree />', () => {
165164
)
166165
})
167166

168-
it('should change height according to rowHeight prop', () => {
169-
const wrapper = mount(
170-
<SortableTree
171-
treeData={[{ title: 'a' }, { title: 'b', extraHeight: 2 }]}
172-
onChange={() => {}}
173-
rowHeight={12}
174-
/>
175-
)
176-
177-
// Works with static value
178-
expect(wrapper.find(TreeNode).first()).toHaveStyle('height', 12)
179-
180-
// Works with function callback
181-
wrapper.setProps({ rowHeight: ({ node }) => 42 + (node.extraHeight || 0) })
182-
expect(wrapper.find(TreeNode).first()).toHaveStyle('height', 42)
183-
expect(wrapper.find(TreeNode).last()).toHaveStyle('height', 44)
184-
})
185-
186-
it('should toggle virtualization according to isVirtualized prop', () => {
187-
const virtualized = mount(
188-
<SortableTree
189-
treeData={[{ title: 'a' }, { title: 'b' }]}
190-
onChange={() => {}}
191-
isVirtualized
192-
/>
193-
)
194-
195-
expect(virtualized.find(List).length).toEqual(1)
196-
197-
const notVirtualized = mount(
198-
<SortableTree
199-
treeData={[{ title: 'a' }, { title: 'b' }]}
200-
onChange={() => {}}
201-
isVirtualized={false}
202-
/>
203-
)
204-
205-
expect(notVirtualized.find(List).length).toEqual(0)
206-
})
207-
208167
it('should change scaffold width according to scaffoldBlockPxWidth prop', () => {
209168
const wrapper = mount(
210169
<SortableTree

0 commit comments

Comments
 (0)