diff --git a/package-lock.json b/package-lock.json
index 8573881..b7e9f41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,10 @@
"version": "0.0.0",
"dependencies": {
"@heroicons/react": "^1.0.6",
- "framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-svg-pan-zoom": "^3.11.0"
+ "react-svg-pan-zoom": "^3.11.0",
+ "react-window": "^1.8.7"
},
"devDependencies": {
"@testing-library/dom": "^8.16.1",
@@ -22,6 +22,7 @@
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-svg-pan-zoom": "^3.3.5",
+ "@types/react-window": "^1.8.5",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"@vitejs/plugin-react": "^2.0.0",
@@ -424,7 +425,6 @@
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
"integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
- "dev": true,
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
@@ -480,21 +480,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@emotion/is-prop-valid": {
- "version": "0.8.8",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
- "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
- "optional": true,
- "dependencies": {
- "@emotion/memoize": "0.7.4"
- }
- },
- "node_modules/@emotion/memoize": {
- "version": "0.7.4",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
- "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
- "optional": true
- },
"node_modules/@eslint/eslintrc": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -617,89 +602,6 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
- "node_modules/@motionone/animation": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.13.1.tgz",
- "integrity": "sha512-dxQ+1wWxL6iFHDy1uv6hhcPjIdOg36eDT56jN4LI7Z5HZRyLpq8x1t7JFQclo/IEIb+6Bk4atmyinGFdXVECuA==",
- "dependencies": {
- "@motionone/easing": "^10.13.1",
- "@motionone/types": "^10.13.0",
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- }
- },
- "node_modules/@motionone/animation/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
- "node_modules/@motionone/dom": {
- "version": "10.12.0",
- "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
- "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
- "dependencies": {
- "@motionone/animation": "^10.12.0",
- "@motionone/generators": "^10.12.0",
- "@motionone/types": "^10.12.0",
- "@motionone/utils": "^10.12.0",
- "hey-listen": "^1.0.8",
- "tslib": "^2.3.1"
- }
- },
- "node_modules/@motionone/dom/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
- "node_modules/@motionone/easing": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.13.1.tgz",
- "integrity": "sha512-INEsInHHDHVgx0dp5qlXi1lMXBqYicgLMMSn3zfGzaIvcaEbI1Uz8BoyNV4BiclTupG7RYIh+T6BU83ZcEe74g==",
- "dependencies": {
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- }
- },
- "node_modules/@motionone/easing/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
- "node_modules/@motionone/generators": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.13.1.tgz",
- "integrity": "sha512-+HK5u2YcNJCckTTqfOLgSVcrWv2z1dVwrSZEMVJuAh0EnWEWGDJRvMBoPc0cFf/osbkA2Rq9bH2+vP0Ex/D8uw==",
- "dependencies": {
- "@motionone/types": "^10.13.0",
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- }
- },
- "node_modules/@motionone/generators/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
- "node_modules/@motionone/types": {
- "version": "10.13.0",
- "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.13.0.tgz",
- "integrity": "sha512-qegk4qg8U1N9ZwAJ187BG3TkZz1k9LP/pvNtCSlqdq/PMUDKlCFG4ZnjJ481P0IOH/vIw1OzIbKIuyg0A3rk9g=="
- },
- "node_modules/@motionone/utils": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.13.1.tgz",
- "integrity": "sha512-TjDPTIppaf3ofBXQv4ZzAketJgN0sclALXfZ6mfrkjJkOy83mLls9744F+6S+VKCpBmvbZcBY4PQfrfhAfeMtA==",
- "dependencies": {
- "@motionone/types": "^10.13.0",
- "hey-listen": "^1.0.8",
- "tslib": "^2.3.1"
- }
- },
- "node_modules/@motionone/utils/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1082,6 +984,15 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-window": {
+ "version": "1.8.5",
+ "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz",
+ "integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==",
+ "dev": true,
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3355,44 +3266,6 @@
"url": "https://www.patreon.com/infusion"
}
},
- "node_modules/framer-motion": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
- "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
- "dependencies": {
- "@motionone/dom": "10.12.0",
- "framesync": "6.0.1",
- "hey-listen": "^1.0.8",
- "popmotion": "11.0.3",
- "style-value-types": "5.0.0",
- "tslib": "^2.1.0"
- },
- "optionalDependencies": {
- "@emotion/is-prop-valid": "^0.8.2"
- },
- "peerDependencies": {
- "react": ">=16.8 || ^17.0.0 || ^18.0.0",
- "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
- }
- },
- "node_modules/framer-motion/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
- "node_modules/framesync": {
- "version": "6.0.1",
- "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
- "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
- "dependencies": {
- "tslib": "^2.1.0"
- }
- },
- "node_modules/framesync/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3630,11 +3503,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/hey-listen": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
- "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
- },
"node_modules/html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4452,6 +4320,11 @@
"node": ">=12"
}
},
+ "node_modules/memoize-one": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+ "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4860,22 +4733,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/popmotion": {
- "version": "11.0.3",
- "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
- "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
- "dependencies": {
- "framesync": "6.0.1",
- "hey-listen": "^1.0.8",
- "style-value-types": "5.0.0",
- "tslib": "^2.1.0"
- }
- },
- "node_modules/popmotion/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
"node_modules/postcss": {
"version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -5153,6 +5010,22 @@
"react": ">=17.0.0"
}
},
+ "node_modules/react-window": {
+ "version": "1.8.7",
+ "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.7.tgz",
+ "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+ "dependencies": {
+ "@babel/runtime": "^7.0.0",
+ "memoize-one": ">=3.1.1 <6"
+ },
+ "engines": {
+ "node": ">8.0.0"
+ },
+ "peerDependencies": {
+ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5190,8 +5063,7 @@
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
- "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
- "dev": true
+ "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/regexp.prototype.flags": {
"version": "1.4.3",
@@ -5560,20 +5432,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/style-value-types": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
- "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
- "dependencies": {
- "hey-listen": "^1.0.8",
- "tslib": "^2.1.0"
- }
- },
- "node_modules/style-value-types/node_modules/tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -6443,7 +6301,6 @@
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
"integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
- "dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -6487,21 +6344,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@emotion/is-prop-valid": {
- "version": "0.8.8",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
- "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
- "optional": true,
- "requires": {
- "@emotion/memoize": "0.7.4"
- }
- },
- "@emotion/memoize": {
- "version": "0.7.4",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
- "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
- "optional": true
- },
"@eslint/eslintrc": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -6600,99 +6442,6 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
- "@motionone/animation": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.13.1.tgz",
- "integrity": "sha512-dxQ+1wWxL6iFHDy1uv6hhcPjIdOg36eDT56jN4LI7Z5HZRyLpq8x1t7JFQclo/IEIb+6Bk4atmyinGFdXVECuA==",
- "requires": {
- "@motionone/easing": "^10.13.1",
- "@motionone/types": "^10.13.0",
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
- "@motionone/dom": {
- "version": "10.12.0",
- "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
- "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
- "requires": {
- "@motionone/animation": "^10.12.0",
- "@motionone/generators": "^10.12.0",
- "@motionone/types": "^10.12.0",
- "@motionone/utils": "^10.12.0",
- "hey-listen": "^1.0.8",
- "tslib": "^2.3.1"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
- "@motionone/easing": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.13.1.tgz",
- "integrity": "sha512-INEsInHHDHVgx0dp5qlXi1lMXBqYicgLMMSn3zfGzaIvcaEbI1Uz8BoyNV4BiclTupG7RYIh+T6BU83ZcEe74g==",
- "requires": {
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
- "@motionone/generators": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.13.1.tgz",
- "integrity": "sha512-+HK5u2YcNJCckTTqfOLgSVcrWv2z1dVwrSZEMVJuAh0EnWEWGDJRvMBoPc0cFf/osbkA2Rq9bH2+vP0Ex/D8uw==",
- "requires": {
- "@motionone/types": "^10.13.0",
- "@motionone/utils": "^10.13.1",
- "tslib": "^2.3.1"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
- "@motionone/types": {
- "version": "10.13.0",
- "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.13.0.tgz",
- "integrity": "sha512-qegk4qg8U1N9ZwAJ187BG3TkZz1k9LP/pvNtCSlqdq/PMUDKlCFG4ZnjJ481P0IOH/vIw1OzIbKIuyg0A3rk9g=="
- },
- "@motionone/utils": {
- "version": "10.13.1",
- "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.13.1.tgz",
- "integrity": "sha512-TjDPTIppaf3ofBXQv4ZzAketJgN0sclALXfZ6mfrkjJkOy83mLls9744F+6S+VKCpBmvbZcBY4PQfrfhAfeMtA==",
- "requires": {
- "@motionone/types": "^10.13.0",
- "hey-listen": "^1.0.8",
- "tslib": "^2.3.1"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7000,6 +6749,15 @@
"@types/react": "*"
}
},
+ "@types/react-window": {
+ "version": "1.8.5",
+ "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz",
+ "integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==",
+ "dev": true,
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -8547,42 +8305,6 @@
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true
},
- "framer-motion": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
- "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
- "requires": {
- "@emotion/is-prop-valid": "^0.8.2",
- "@motionone/dom": "10.12.0",
- "framesync": "6.0.1",
- "hey-listen": "^1.0.8",
- "popmotion": "11.0.3",
- "style-value-types": "5.0.0",
- "tslib": "^2.1.0"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
- "framesync": {
- "version": "6.0.1",
- "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
- "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
- "requires": {
- "tslib": "^2.1.0"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8747,11 +8469,6 @@
"has-symbols": "^1.0.2"
}
},
- "hey-listen": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
- "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
- },
"html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -9350,6 +9067,11 @@
"sourcemap-codec": "^1.4.8"
}
},
+ "memoize-one": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+ "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+ },
"merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -9647,24 +9369,6 @@
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true
},
- "popmotion": {
- "version": "11.0.3",
- "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
- "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
- "requires": {
- "framesync": "6.0.1",
- "hey-listen": "^1.0.8",
- "style-value-types": "5.0.0",
- "tslib": "^2.1.0"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
"postcss": {
"version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -9833,6 +9537,15 @@
"transformation-matrix": "^2.11.1"
}
},
+ "react-window": {
+ "version": "1.8.7",
+ "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.7.tgz",
+ "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+ "requires": {
+ "@babel/runtime": "^7.0.0",
+ "memoize-one": ">=3.1.1 <6"
+ }
+ },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -9864,8 +9577,7 @@
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
- "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
- "dev": true
+ "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"regexp.prototype.flags": {
"version": "1.4.3",
@@ -10122,22 +9834,6 @@
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
- "style-value-types": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
- "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
- "requires": {
- "hey-listen": "^1.0.8",
- "tslib": "^2.1.0"
- },
- "dependencies": {
- "tslib": {
- "version": "2.4.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
- "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
- }
- }
- },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 0f0d27f..5fdcfa7 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,10 @@
},
"dependencies": {
"@heroicons/react": "^1.0.6",
- "framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-svg-pan-zoom": "^3.11.0"
+ "react-svg-pan-zoom": "^3.11.0",
+ "react-window": "^1.8.7"
},
"devDependencies": {
"@testing-library/dom": "^8.16.1",
@@ -27,6 +27,7 @@
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-svg-pan-zoom": "^3.3.5",
+ "@types/react-window": "^1.8.5",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"@vitejs/plugin-react": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 469528f..be1cc19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
'@types/react': ^18.0.15
'@types/react-dom': ^18.0.6
'@types/react-svg-pan-zoom': ^3.3.5
+ '@types/react-window': ^1.8.5
'@typescript-eslint/eslint-plugin': ^5.31.0
'@typescript-eslint/parser': ^5.31.0
'@vitejs/plugin-react': ^2.0.0
@@ -23,12 +24,12 @@ specifiers:
eslint-plugin-promise: ^6.0.0
eslint-plugin-react: ^7.30.1
eslint-plugin-react-hooks: ^4.6.0
- framer-motion: ^6.5.1
jsdom: ^20.0.0
postcss: ^8.4.14
react: ^18.2.0
react-dom: ^18.2.0
react-svg-pan-zoom: ^3.11.0
+ react-window: ^1.8.7
sass: ^1.54.0
tailwindcss: ^3.1.7
typescript: ^4.6.4
@@ -37,10 +38,10 @@ specifiers:
dependencies:
'@heroicons/react': 1.0.6_react@18.2.0
- framer-motion: 6.5.1_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-svg-pan-zoom: 3.11.0_react@18.2.0
+ react-window: 1.8.7_biqbaboplfbrettd7655fr4n2y
devDependencies:
'@testing-library/dom': 8.16.1
@@ -50,6 +51,7 @@ devDependencies:
'@types/react': 18.0.17
'@types/react-dom': 18.0.6
'@types/react-svg-pan-zoom': 3.3.5
+ '@types/react-window': 1.8.5
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
'@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
'@vitejs/plugin-react': 2.0.0_vite@3.0.4
@@ -314,7 +316,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.9
- dev: true
/@babel/template/7.18.10:
resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
@@ -352,19 +353,6 @@ packages:
to-fast-properties: 2.0.0
dev: true
- /@emotion/is-prop-valid/0.8.8:
- resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
- requiresBuild: true
- dependencies:
- '@emotion/memoize': 0.7.4
- dev: false
- optional: true
-
- /@emotion/memoize/0.7.4:
- resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
- dev: false
- optional: true
-
/@esbuild/linux-loong64/0.14.54:
resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
engines: {node: '>=12'}
@@ -463,53 +451,6 @@ packages:
'@jridgewell/sourcemap-codec': 1.4.14
dev: true
- /@motionone/animation/10.13.2:
- resolution: {integrity: sha512-YGWss58IR2X4lOjW89rv1Q+/Nq/QhfltaggI7i8sZTpKC1yUvM+XYDdvlRpWc6dk8LviMBrddBJAlLdbaqeRmw==}
- dependencies:
- '@motionone/easing': 10.13.2
- '@motionone/types': 10.13.2
- '@motionone/utils': 10.13.2
- tslib: 2.4.0
- dev: false
-
- /@motionone/dom/10.12.0:
- resolution: {integrity: sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==}
- dependencies:
- '@motionone/animation': 10.13.2
- '@motionone/generators': 10.13.2
- '@motionone/types': 10.13.2
- '@motionone/utils': 10.13.2
- hey-listen: 1.0.8
- tslib: 2.4.0
- dev: false
-
- /@motionone/easing/10.13.2:
- resolution: {integrity: sha512-3HqctS5NyDfDQ+8+cZqc3Pu7I6amFCt9zDUjcozHyFXHh4PKYHK4+GJDFjJIS8bCAF2BrJmpmduDQ2V7lFEYeQ==}
- dependencies:
- '@motionone/utils': 10.13.2
- tslib: 2.4.0
- dev: false
-
- /@motionone/generators/10.13.2:
- resolution: {integrity: sha512-QMoXV1MXEEhR6D3dct/RMMS1FwJlAsW+kMPbFGzBA4NbweblgeYQCft9DcDAVpV9wIwD6qvlBG9u99sOXLfHiA==}
- dependencies:
- '@motionone/types': 10.13.2
- '@motionone/utils': 10.13.2
- tslib: 2.4.0
- dev: false
-
- /@motionone/types/10.13.2:
- resolution: {integrity: sha512-yYV4q5v5F0iADhab4wHfqaRJnM/eVtQLjUPhyEcS72aUz/xyOzi09GzD/Gu+K506BDfqn5eULIilUI77QNaqhw==}
- dev: false
-
- /@motionone/utils/10.13.2:
- resolution: {integrity: sha512-6Lw5bDA/w7lrPmT/jYWQ76lkHlHs9fl2NZpJ22cVy1kKDdEH+Cl1U6hMTpdphO6VQktQ6v2APngag91WBKLqlA==}
- dependencies:
- '@motionone/types': 10.13.2
- hey-listen: 1.0.8
- tslib: 2.4.0
- dev: false
-
/@nodelib/fs.scandir/2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@@ -645,6 +586,12 @@ packages:
'@types/react': 18.0.17
dev: true
+ /@types/react-window/1.8.5:
+ resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
+ dependencies:
+ '@types/react': 18.0.17
+ dev: true
+
/@types/react/18.0.17:
resolution: {integrity: sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==}
dependencies:
@@ -1997,30 +1944,6 @@ packages:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
dev: true
- /framer-motion/6.5.1_biqbaboplfbrettd7655fr4n2y:
- resolution: {integrity: sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==}
- peerDependencies:
- react: '>=16.8 || ^17.0.0 || ^18.0.0'
- react-dom: '>=16.8 || ^17.0.0 || ^18.0.0'
- dependencies:
- '@motionone/dom': 10.12.0
- framesync: 6.0.1
- hey-listen: 1.0.8
- popmotion: 11.0.3
- react: 18.2.0
- react-dom: 18.2.0_react@18.2.0
- style-value-types: 5.0.0
- tslib: 2.4.0
- optionalDependencies:
- '@emotion/is-prop-valid': 0.8.8
- dev: false
-
- /framesync/6.0.1:
- resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==}
- dependencies:
- tslib: 2.4.0
- dev: false
-
/fs.realpath/1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
dev: true
@@ -2172,10 +2095,6 @@ packages:
function-bind: 1.1.1
dev: true
- /hey-listen/1.0.8:
- resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
- dev: false
-
/html-encoding-sniffer/3.0.0:
resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
engines: {node: '>=12'}
@@ -2560,6 +2479,10 @@ packages:
sourcemap-codec: 1.4.8
dev: true
+ /memoize-one/5.2.1:
+ resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+ dev: false
+
/merge2/1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
@@ -2830,15 +2753,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
- /popmotion/11.0.3:
- resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==}
- dependencies:
- framesync: 6.0.1
- hey-listen: 1.0.8
- style-value-types: 5.0.0
- tslib: 2.4.0
- dev: false
-
/postcss-import/14.1.0_postcss@8.4.16:
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
engines: {node: '>=10.0.0'}
@@ -2998,6 +2912,19 @@ packages:
transformation-matrix: 2.12.0
dev: false
+ /react-window/1.8.7_biqbaboplfbrettd7655fr4n2y:
+ resolution: {integrity: sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==}
+ engines: {node: '>8.0.0'}
+ peerDependencies:
+ react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@babel/runtime': 7.18.9
+ memoize-one: 5.2.1
+ react: 18.2.0
+ react-dom: 18.2.0_react@18.2.0
+ dev: false
+
/react/18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
@@ -3027,7 +2954,6 @@ packages:
/regenerator-runtime/0.13.9:
resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
- dev: true
/regexp.prototype.flags/1.4.3:
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
@@ -3238,13 +3164,6 @@ packages:
engines: {node: '>=8'}
dev: true
- /style-value-types/5.0.0:
- resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==}
- dependencies:
- hey-listen: 1.0.8
- tslib: 2.4.0
- dev: false
-
/supports-color/5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
@@ -3363,10 +3282,6 @@ packages:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
dev: true
- /tslib/2.4.0:
- resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
- dev: false
-
/tsutils/3.21.0_typescript@4.7.4:
resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
engines: {node: '>= 6'}
diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index e62f3db..30f1617 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { motion } from 'framer-motion';
+import { FixedSizeList as List } from 'react-window';
import { Properties } from '../Properties/Properties';
import ContainerProperties from '../../Interfaces/IProperties';
import { IContainerModel } from '../../Interfaces/IContainerModel';
@@ -21,45 +21,6 @@ interface IElementsSidebarProps {
AddContainer: (index: number, type: string, parent: string) => void
}
-function createRows(
- container: IContainerModel,
- props: IElementsSidebarProps,
- containerRows: React.ReactNode[]
-): void {
- const depth: number = getDepth(container);
- const key = container.properties.id.toString();
- const text = '|\t'.repeat(depth) + key;
- const selectedClass: string = props.SelectedContainer !== undefined &&
- props.SelectedContainer !== null &&
- props.SelectedContainer.properties.id === container.properties.id
- ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
- : 'bg-slate-300/60 hover:bg-slate-300';
-
- containerRows.push(
- handleOnDrop(event, props.MainContainer, props.AddContainer)}
- onDragOver={(event) => handleDragOver(event, props.MainContainer)}
- onDragLeave={(event) => handleDragLeave(event)}
- onClick={() => props.SelectContainer(container)}
- >
- { text }
-
- );
-};
-
export const ElementsSidebar: React.FC = (props: IElementsSidebarProps): JSX.Element => {
// States
const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
@@ -117,24 +78,55 @@ export const ElementsSidebar: React.FC = (props: IElement
: 'right-0';
}
- const containerRows: React.ReactNode[] = [];
-
const it = MakeIterator(props.MainContainer);
- for (const container of it) {
- createRows(
- container,
- props,
- containerRows
- );
- }
+ const containers = [...it];
+ const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
+ const container = containers[index];
+ const depth: number = getDepth(container);
+ const key = container.properties.id.toString();
+ const text = '|\t'.repeat(depth) + key;
+ const selectedClass: string = props.SelectedContainer !== undefined &&
+ props.SelectedContainer !== null &&
+ props.SelectedContainer.properties.id === container.properties.id
+ ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
+ : 'bg-slate-300/60 hover:bg-slate-300';
+ return (
+
+ );
+ };
+
+ const ROW_HEIGHT = 35;
+ const NUMBERS_OF_ROWS = 10;
return (
-
+
Elements
-
- { containerRows }
+
+
+ { Row }
+