mirror of
https://github.com/strapi/strapi.git
synced 2025-10-27 16:10:08 +00:00
Init ComponentIconPicker
This commit is contained in:
soupette
parent
f9614eeb28
commit
e6d30e0905
@ -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';
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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,
|
||||
|
||||
@ -747,6 +747,7 @@ const forms = {
|
||||
{
|
||||
name: 'icon',
|
||||
type: 'componentIconPicker',
|
||||
size: 12,
|
||||
label: {
|
||||
id: getTrad('modalForm.components.icon.label'),
|
||||
},
|
||||
|
||||
43
yarn.lock
43
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user