mirror of
https://github.com/strapi/strapi.git
synced 2025-12-28 07:33:17 +00:00
CTB: Make component icons optional, allow reusing the same icon
This commit is contained in:
parent
39047e9f84
commit
4f1dd6f260
@ -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,
|
||||
|
||||
@ -541,10 +541,6 @@ const DataManagerProvider = ({
|
||||
addAttribute,
|
||||
addCreatedComponentToDynamicZone,
|
||||
allComponentsCategories: retrieveSpecificInfoFromComponents(components, ['category']),
|
||||
allComponentsIconAlreadyTaken: retrieveSpecificInfoFromComponents(components, [
|
||||
'schema',
|
||||
'icon',
|
||||
]),
|
||||
allIcons,
|
||||
changeDynamicZoneComponents,
|
||||
components,
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user