Init ComponentIconPicker

packages/strapi-admin/admin/src/app.js

@@ -12,6 +12,8 @@ import 'sanitize.css/sanitize.css';
 import 'react-datetime/css/react-datetime.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'font-awesome/css/font-awesome.min.css';
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/js/all.min.js';
 
 import React from 'react';
 import ReactDOM from 'react-dom';

packages/strapi-admin/package.json

@@ -27,6 +27,9 @@
     "@buffetjs/icons": "^1.0.6",
     "@buffetjs/styles": "^1.0.5",
     "@buffetjs/utils": "^1.0.5",
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "autoprefixer": "^9.5.1",
     "babel-loader": "^8.0.5",
     "bcryptjs": "^2.4.3",
@@ -67,6 +70,7 @@
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-transition-group": "^2.9.0",
+    "react-virtualized": "^9.21.2",
     "reactstrap": "^5.0.0",
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",

packages/strapi-admin/webpack.alias.js

@@ -7,6 +7,8 @@ const alias = [
   '@buffetjs/icons',
   '@buffetjs/styles',
   '@buffetjs/utils',
+  '@fortawesome/fontawesome-svg-core',
+  '@fortawesome/free-solid-svg-icons',
   'classnames',
   'history',
   'hoist-non-react-statics',
@@ -24,6 +26,7 @@ const alias = [
   'react-router',
   'react-router-dom',
   'react-transition-group',
+  'react-virtualized',
   'reactstrap',
   'redux',
   'redux-immutable',

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/CellRenderer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import icons from './utils/icons';
+
+const CellRenderer = ({ index, key, style }) => {
+  return (
+    <div className="cell" key={key} style={style}>
+      <i className={`fa fa-${icons[index]}`} />
+    </div>
+  );
+};
+
+CellRenderer.propTypes = {
+  key: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  style: PropTypes.object.isRequired,
+};
+
+export default CellRenderer;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/Wrapper.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 150px;
+  margin-top: -1px;
+
+  .collection {
+    background-color: #fff;
+  }
+
+  .cell {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.25rem;
+    // color: #fff;
+    color: black;
+  }
+
+  .noCells {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    color: #bdbdbd;
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Label, ErrorMessage } from '@buffetjs/styles';
+import { AutoSizer, Collection } from 'react-virtualized';
+import PropTypes from 'prop-types';
+import CellRenderer from './CellRenderer';
+import Wrapper from './Wrapper';
+const GUTTER_SIZE = 0;
+
+import icons from './utils/icons';
+
+const ComponentIconPicker = ({ error, label, name }) => {
+  const cellCount = icons.length;
+
+  const cellSizeAndPositionGetter = ({ index }) => {
+    const columnCount = 16;
+    const columnPosition = index % (columnCount || 1);
+    const height = 48;
+    const width = 48;
+    const x = columnPosition * (GUTTER_SIZE + width);
+    const y = parseInt(index / 16, 10) * 48;
+
+    return {
+      height,
+      width,
+      x,
+      y,
+    };
+  };
+
+  return (
+    <Wrapper>
+      <Label htmlFor={name}>{label}</Label>
+      <AutoSizer disableHeight>
+        {({ width }) => {
+          return (
+            <Collection
+              cellCount={cellCount}
+              cellRenderer={CellRenderer}
+              cellSizeAndPositionGetter={cellSizeAndPositionGetter}
+              className="collection"
+              height={144}
+              width={width}
+            />
+          );
+        }}
+      </AutoSizer>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
+    </Wrapper>
+  );
+};
+
+ComponentIconPicker.propTypes = {
+  error: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default ComponentIconPicker;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/utils/icons.js

@@ -0,0 +1,8 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+library.add(fas);
+
+const icons = Object.keys(library.definitions.fas);
+
+export default icons;

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -20,6 +20,7 @@ import useQuery from '../../hooks/useQuery';
 import useDataManager from '../../hooks/useDataManager';
 import AttributeOption from '../../components/AttributeOption';
 import BooleanBox from '../../components/BooleanBox';
+import ComponentIconPicker from '../../components/ComponentIconPicker';
 import CustomCheckbox from '../../components/CustomCheckbox';
 import CreatableSelect from '../../components/CreatableSelect';
 import ModalHeader from '../../components/ModalHeader';
@@ -544,6 +545,7 @@ const FormModal = () => {
                                 <Inputs
                                   customInputs={{
                                     // addon: InputsIndex,
+                                    componentIconPicker: ComponentIconPicker,
                                     creatableSelect: CreatableSelect,
                                     customCheckboxWithChildren: CustomCheckbox,
                                     booleanBox: BooleanBox,

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js

@@ -747,6 +747,7 @@ const forms = {
             {
               name: 'icon',
               type: 'componentIconPicker',
+              size: 12,
               label: {
                 id: getTrad('modalForm.components.icon.label'),
               },

yarn.lock

@@ -719,6 +719,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.6.3":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b"
+  integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -993,6 +1000,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
   integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
 
+"@fortawesome/fontawesome-free@^5.11.2":
+  version "5.11.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz#8644bc25b19475779a7b7c1fc104bc0a794f4465"
+  integrity sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ==
+
 "@fortawesome/fontawesome-svg-core@^1.2.22", "@fortawesome/fontawesome-svg-core@^1.2.25":
   version "1.2.25"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz#24b03391d14f0c6171e8cad7057c687b74049790"
@@ -3882,7 +3894,7 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
-babel-runtime@6.x, babel-runtime@^6.18.0:
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -4884,6 +4896,11 @@ cls-bluebird@^2.1.0:
     is-bluebird "^1.0.2"
     shimmer "^1.1.0"
 
+clsx@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
+  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
+
 cluster-key-slot@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz#30474b2a981fb12172695833052bc0d01336d10d"
@@ -5802,7 +5819,7 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.6:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.6, csstype@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
@@ -6398,6 +6415,14 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.0.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
+  integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    csstype "^2.6.7"
+
 dom-helpers@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.0.tgz#57a726de04abcc2a8bbfe664b3e21c584bde514e"
@@ -11618,7 +11643,7 @@ longest@^1.0.0:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -15011,6 +15036,18 @@ react-transition-group@^4.0.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized@^9.21.2:
+  version "9.21.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.2.tgz#02e6df65c1e020c8dbf574ec4ce971652afca84e"
+  integrity sha512-oX7I7KYiUM7lVXQzmhtF4Xg/4UA5duSA+/ZcAvdWlTLFCoFYq1SbauJT5gZK9cZS/wdYR6TPGpX/dqzvTqQeBA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    clsx "^1.0.1"
+    dom-helpers "^5.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
 react-with-direction@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.3.1.tgz#9fd414564f0ffe6947e5ff176f6132dd83f8b8df"