diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index b9e6804a3a..1035cd798a 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -119,7 +119,7 @@
"react-refresh": "0.11.0",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
- "react-virtualized": "^9.22.3",
+ "react-window": "1.8.7",
"redux": "^4.0.1",
"redux-saga": "^0.16.0",
"reselect": "^4.0.0",
diff --git a/packages/core/admin/webpack.alias.js b/packages/core/admin/webpack.alias.js
index 827483b2b5..737a914286 100644
--- a/packages/core/admin/webpack.alias.js
+++ b/packages/core/admin/webpack.alias.js
@@ -28,7 +28,7 @@ const aliasExactMatch = [
'react-redux',
'react-router',
'react-router-dom',
- 'react-virtualized',
+ 'react-window',
'react-select',
'redux',
'reselect',
diff --git a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
index ea0f0177b9..c4a0b925d3 100644
--- a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
+++ b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
-import { AutoSizer, Collection } from 'react-virtualized';
+import { FixedSizeGrid } from 'react-window';
import { Searchbar } from '@strapi/design-system/Searchbar';
import { IconButton } from '@strapi/design-system/IconButton';
import Search from '@strapi/icons/Search';
@@ -10,11 +10,14 @@ import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex';
import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography';
+
+import { getIndexFromColAndRow } from './utils/getIndexFromColAndRow';
import useDataManager from '../../hooks/useDataManager';
import getTrad from '../../utils/getTrad';
import Cell from './Cell';
-const CELL_WIDTH = 44;
+const CELL_WIDTH = 42;
+const COLUMN_COUNT = 18;
const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
const { allIcons } = useDataManager();
@@ -37,26 +40,32 @@ const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
setIcons(() => allIcons.filter(icon => icon.includes(value)));
};
- const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+ // eslint-disable-next-line react/prop-types
+ const IconRenderer = ({ columnIndex, rowIndex, style }) => {
+ const icon = icons[getIndexFromColAndRow(columnIndex, rowIndex, COLUMN_COUNT)];
- const cellSizeAndPositionGetter = ({ index }) => {
- const columnCount = 16;
- const columnPosition = index % (columnCount || 1);
-
- const height = CELL_WIDTH;
- const width = CELL_WIDTH;
- const x = columnPosition * (width + 1);
- const y = parseInt(index / 16, 10) * CELL_WIDTH;
-
- return {
- height,
- width,
- x,
- y,
- };
+ return (
+
+ {icon && (
+ | {
+ onChange({ target: { name, value: icon } });
+ }}
+ isSelected={icon === value}
+ as="button"
+ type="button"
+ >
+
+ |
+ )}
+
+ );
};
- const cellCount = icons.length;
+ const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
return (
@@ -105,44 +114,17 @@ const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
)}
-
-
-
- {({ width }) => {
- return (
- {
- const icon = icons[index];
- const isSelected = icon === value;
- const handleClick = () => {
- onChange({ target: { name, value: icon } });
- };
-
- return (
-
- |
-
- |
-
- );
- }}
- cellSizeAndPositionGetter={cellSizeAndPositionGetter}
- height={132}
- width={width}
- />
- );
- }}
-
-
+
+
+ {IconRenderer}
+
{error && (
{
+ return columnIndex + rowIndex * numCols;
+};
diff --git a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/utils/tests/getIndexFromColAndRow.test.js b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/utils/tests/getIndexFromColAndRow.test.js
new file mode 100644
index 0000000000..cfee581b19
--- /dev/null
+++ b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/utils/tests/getIndexFromColAndRow.test.js
@@ -0,0 +1,21 @@
+import { getIndexFromColAndRow } from '../getIndexFromColAndRow';
+
+const FIXTURE = [
+ [[0, 0, 2], 0],
+
+ [[1, 0, 2], 1],
+
+ [[0, 1, 2], 2],
+
+ [[0, 2, 2], 4],
+
+ [[1, 4, 2], 9],
+];
+
+describe('getIndexFromColAndRow', () => {
+ FIXTURE.forEach(([input, expected]) => {
+ test(`returns ${expected} for ${JSON.stringify(input)}`, () => {
+ expect(getIndexFromColAndRow(...input)).toBe(expected);
+ });
+ });
+});
diff --git a/yarn.lock b/yarn.lock
index 1eb791746e..6681188cd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18034,7 +18034,7 @@ memfs@^3.1.2, memfs@^3.2.2, memfs@^3.4.1, memfs@^3.4.3:
dependencies:
fs-monkey "^1.0.3"
-memoize-one@^5.0.0:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -21671,6 +21671,14 @@ react-virtualized@^9.22.3:
prop-types "^15.7.2"
react-lifecycles-compat "^3.0.4"
+react-window@1.8.7:
+ version "1.8.7"
+ resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
+ integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ memoize-one ">=3.1.1 <6"
+
react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"