Select custom field uids from layout using reselect

This commit is contained in:
Mark Kaylor 2022-11-23 21:40:53 +01:00
parent cfd9262878
commit 0343495ea1
3 changed files with 11 additions and 6 deletions

View File

@ -27,10 +27,10 @@ import useLazyComponents from '../../hooks/useLazyComponents';
import DraftAndPublishBadge from './DraftAndPublishBadge'; import DraftAndPublishBadge from './DraftAndPublishBadge';
import Informations from './Informations'; import Informations from './Informations';
import Header from './Header'; import Header from './Header';
import { getFieldsActionMatchingPermissions, getCustomFieldUidsFromLayout } from './utils'; import { getFieldsActionMatchingPermissions } from './utils';
import DeleteLink from './DeleteLink'; import DeleteLink from './DeleteLink';
import GridRow from './GridRow'; import GridRow from './GridRow';
import { selectCurrentLayout, selectAttributesLayout } from './selectors'; import { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids } from './selectors';
const cmPermissions = permissions.contentManager; const cmPermissions = permissions.contentManager;
const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }]; const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
@ -40,12 +40,12 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { layout, formattedContentTypeLayout } = useSelector((state) => ({ const { layout, formattedContentTypeLayout, customFieldUids } = useSelector((state) => ({
layout: selectCurrentLayout(state), layout: selectCurrentLayout(state),
formattedContentTypeLayout: selectAttributesLayout(state), formattedContentTypeLayout: selectAttributesLayout(state),
customFieldUids: selectCustomFieldUids(state),
})); }));
const customFieldUids = getCustomFieldUidsFromLayout(layout);
const { isLazyLoading, lazyComponentStore } = useLazyComponents(customFieldUids); const { isLazyLoading, lazyComponentStore } = useLazyComponents(customFieldUids);
const { createActionAllowedFields, readActionAllowedFields, updateActionAllowedFields } = const { createActionAllowedFields, readActionAllowedFields, updateActionAllowedFields } =

View File

@ -1,5 +1,5 @@
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { createAttributesLayout } from './utils'; import { createAttributesLayout, getCustomFieldUidsFromLayout } from './utils';
const selectCurrentLayout = (state) => state['content-manager_editViewLayoutManager'].currentLayout; const selectCurrentLayout = (state) => state['content-manager_editViewLayoutManager'].currentLayout;
@ -7,4 +7,8 @@ const selectAttributesLayout = createSelector(selectCurrentLayout, (layout) =>
createAttributesLayout(layout?.contentType ?? {}) createAttributesLayout(layout?.contentType ?? {})
); );
export { selectCurrentLayout, selectAttributesLayout }; const selectCustomFieldUids = createSelector(selectCurrentLayout, (layout) =>
getCustomFieldUidsFromLayout(layout)
);
export { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids };

View File

@ -1,4 +1,5 @@
const getCustomFieldUidsFromLayout = (layout) => { const getCustomFieldUidsFromLayout = (layout) => {
if (!layout) return [];
// Get all the fields on the content-type and its components // Get all the fields on the content-type and its components
const allFields = [ const allFields = [
...layout.contentType.layouts.edit, ...layout.contentType.layouts.edit,