yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-29 17:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding wrapper (connect, select) for using mainValue as prop in DynamicZone/Component

Browse Source
This commit is contained in:
godzzo 2022-03-30 08:16:35 +02:00 committed by Gustav Hansen
parent 20f7fedd9c
commit 56607b6842
4 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
View File

@ -18,7 +18,7 @@ import { useContentTypeLayout } from '../../../../hooks';
import { getTrad } from '../../../../utils';
import FieldComponent from '../../../FieldComponent';
import Rectangle from './Rectangle';
import useMainValue from './hooks/useMainValue';
import { connect, select } from './utils';
const ActionStack = styled(Stack)`
svg {
@ -56,15 +56,11 @@ const Component = ({
removeComponentFromDynamicZone,
showDownIcon,
showUpIcon,
// Passed with the select function
mainValue,
}) => {
const { formatMessage } = useIntl();
const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => {
const layout = getComponentLayout(componentUid);
return layout;
}, [componentUid, getComponentLayout]);
const mainValue = useMainValue(componentLayoutData, [name, index]);
const { icon, friendlyName } = useMemo(() => {
const {
info: { icon, displayName },
@ -193,6 +189,12 @@ Component.propTypes = {
removeComponentFromDynamicZone: PropTypes.func.isRequired,
showDownIcon: PropTypes.bool.isRequired,
showUpIcon: PropTypes.bool.isRequired,
mainValue: PropTypes.string.isRequired,
};
export default memo(Component, isEqual);
const Memoized = memo(Component, isEqual);
export default connect(
Memoized,
select
);

11
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/connect.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function connect(WrappedComponent, select) {
return function(props) {
const selectors = select(props);
return <WrappedComponent {...props} {...selectors} />;
};
}
export default connect;

2
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as connect } from './connect';
export { default as select } from './select';

19
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/select.js Normal file
View File

@ -0,0 +1,19 @@
import { useMemo } from 'react';
import useMainValue from '../hooks/useMainValue';
import { useContentTypeLayout } from '../../../../../hooks';
function useSelect({ componentUid, name, index }) {
const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => {
const layout = getComponentLayout(componentUid);
return layout;
}, [componentUid, getComponentLayout]);
const mainValue = useMainValue(componentLayoutData, [name, index]);
return {
mainValue,
};
}
export default useSelect;