yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 06:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13256 from strapi/fix/component-icons-optional

Browse Source 
Make component icons optional
This commit is contained in:
Gustav Hansen 2022-05-18 12:53:39 +02:00 committed by GitHub
commit d947be6859
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 11 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/core/admin/admin/src/content-manager/components/DynamicComponentCard/index.js
View File

@ -1,43 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Wrapper from './Wrapper';
const DynamicComponentCard = ({ children, componentUid, friendlyName, icon, onClick }) => {
return (
<Wrapper
onClick={e => {
e.preventDefault();
e.stopPropagation();
onClick(componentUid);
}}
>
<button className="component-icon" type="button">
<FontAwesomeIcon icon={icon} />
</button>
<div className="component-uid">
<span>{friendlyName}</span>
</div>
{children}
</Wrapper>
);
};
DynamicComponentCard.defaultProps = {
children: null,
friendlyName: '',
onClick: () => {},
icon: 'smile',
};
DynamicComponentCard.propTypes = {
children: PropTypes.node,
componentUid: PropTypes.string.isRequired,
friendlyName: PropTypes.string,
icon: PropTypes.string,
onClick: PropTypes.func,
};
export default DynamicComponentCard;

2
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js
View File

@ -74,7 +74,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
}
ComponentCard.defaultProps = {
icon: 'smile',
icon: 'dice-d6',
onClick: () => {},
};

2
packages/core/content-type-builder/admin/src/components/ComponentCard/index.js
View File

@ -106,7 +106,7 @@ function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode
paddingRight={4}
>
<StackCentered spacing={1}>
<StyledFontAwesomeIcon icon={icon} />
<StyledFontAwesomeIcon icon={icon || 'dice-d6'} />
<Box maxWidth={`calc(${pxToRem(140)} - 32px)`}>
<Typography variant="pi" fontWeight="bold" ellipsis>
{displayName}

20
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
View File

@ -16,23 +16,14 @@ import Cell from './Cell';
const CELL_WIDTH = 44;
const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, value }) => {
const { allIcons, allComponentsIconAlreadyTaken } = useDataManager();
const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
const { allIcons } = useDataManager();
const { formatMessage } = useIntl();
const [originalIcon] = useState(value);
const initialIcons = allIcons.filter(ico => {
if (isCreating) {
return !allComponentsIconAlreadyTaken.includes(ico);
}
// Edition
return !allComponentsIconAlreadyTaken.filter(icon => icon !== originalIcon).includes(ico);
});
const searchWrapperRef = useRef();
const [showSearch, setShowSearch] = useState(false);
const [search, setSearch] = useState('');
const [icons, setIcons] = useState(initialIcons);
const [icons, setIcons] = useState(allIcons);
const toggleSearch = () => setShowSearch(prev => !prev);
useEffect(() => {
@ -43,7 +34,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
const handleChangeSearch = ({ target: { value } }) => {
setSearch(value);
setIcons(() => initialIcons.filter(icon => icon.includes(value)));
setIcons(() => allIcons.filter(icon => icon.includes(value)));
};
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
@ -91,7 +82,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
}}
onClear={() => {
setSearch('');
setIcons(initialIcons);
setIcons(allIcons);
toggleSearch();
}}
value={search}
@ -175,7 +166,6 @@ ComponentIconPicker.defaultProps = {
ComponentIconPicker.propTypes = {
error: PropTypes.string,
isCreating: PropTypes.bool.isRequired,
intlLabel: PropTypes.shape({
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,

4
packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js
View File

@ -541,10 +541,6 @@ const DataManagerProvider = ({
addAttribute,
addCreatedComponentToDynamicZone,
allComponentsCategories: retrieveSpecificInfoFromComponents(components, ['category']),
allComponentsIconAlreadyTaken: retrieveSpecificInfoFromComponents(components, [
'schema',
'icon',
]),
allIcons,
changeDynamicZoneComponents,
components,

2
packages/core/content-type-builder/admin/src/components/FormModal/component/createComponentSchema.js
View File

@ -39,7 +39,7 @@ const createComponentSchema = (usedComponentNames, reservedNames, category) => {
.matches(CATEGORY_NAME_REGEX, errorsTrads.regex)
.required(errorsTrads.required),
icon: yup.string().required(errorsTrads.required),
icon: yup.string(),
};
return yup.object(shape);

3
packages/core/content-type-builder/server/controllers/validation/component.js
View File

@ -22,8 +22,7 @@ const componentSchema = createSchema(VALID_TYPES, VALID_RELATIONS, {
icon: yup
.string()
.nullable()
.test(isValidIcon)
.required('icon.required'),
.test(isValidIcon),
category: yup
.string()
.nullable()

14
packages/core/content-type-builder/tests/components.test.e2e.js
View File

@ -47,11 +47,6 @@ describe('Content Type Builder - Components', () => {
name: 'ValidationError',
path: ['component', 'displayName'],
},
{
message: 'icon.required',
name: 'ValidationError',
path: ['component', 'icon'],
},
{
message: 'category.required',
name: 'ValidationError',
@ -59,7 +54,7 @@ describe('Content Type Builder - Components', () => {
},
],
},
message: '4 errors occurred',
message: '3 errors occurred',
name: 'ValidationError',
},
});
@ -242,11 +237,6 @@ describe('Content Type Builder - Components', () => {
name: 'ValidationError',
path: ['component', 'displayName'],
},
{
message: 'icon.required',
name: 'ValidationError',
path: ['component', 'icon'],
},
{
message: 'category.required',
name: 'ValidationError',
@ -254,7 +244,7 @@ describe('Content Type Builder - Components', () => {
},
],
},
message: '3 errors occurred',
message: '2 errors occurred',
name: 'ValidationError',
},
});