CTB: Make component icons optional, allow reusing the same icon

This commit is contained in:
Gustav Hansen 2022-05-05 10:03:04 +02:00
parent 39047e9f84
commit 4f1dd6f260
4 changed files with 7 additions and 22 deletions

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,

View File

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

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);

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()