yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-03 11:25:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add components to dynamic zone

Browse Source
This commit is contained in:
soupette 2019-11-28 15:10:59 +01:00
parent 3fc5c8fda9
commit 28aecbae74
5 changed files with 71 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MultipleMenuList.js
View File

@ -9,7 +9,7 @@ import Ul from './Ul';
import hasSubArray from './utils/hasSubArray';
const MultipleMenuList = ({
selectProps: { name, onClickAddComponentsToDynamicZone, refState, value },
selectProps: { name, addComponentsToDynamicZone, refState, value },
...rest
}) => {
const { componentsGroupedByCategory } = useDataManager();
@ -41,7 +41,7 @@ const MultipleMenuList = ({
components: allComponentsCategory[target.name],
shouldAddComponents: target.value,
};
onClickAddComponentsToDynamicZone({ target: dataTarget });
addComponentsToDynamicZone({ target: dataTarget });
};
const handleChange = ({ target }) => {
@ -51,7 +51,7 @@ const MultipleMenuList = ({
shouldAddComponents: target.value,
};
onClickAddComponentsToDynamicZone({ target: dataTarget });
addComponentsToDynamicZone({ target: dataTarget });
};
return (
@ -140,8 +140,8 @@ MultipleMenuList.defaultProps = {
MultipleMenuList.propTypes = {
selectProps: PropTypes.shape({
addComponentsToDynamicZone: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
onClickAddComponentsToDynamicZone: PropTypes.func.isRequired,
refState: PropTypes.object,
value: PropTypes.object,
}).isRequired,

7
packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js
View File

@ -6,12 +6,12 @@ import MultipleMenuList from './MultipleMenuList';
import Value from './Value';
const ComponentSelect = ({
addComponentsToDynamicZone,
componentCategoryNeededForAddingAfieldWhileCreatingAComponent,
componentNameNeededForAddingAfieldWhileCreatingAComponent,
isCreatingComponentWhileAddingAField,
isMultiple,
onChange,
onClickAddComponentsToDynamicZone,
name,
value,
styles,
@ -34,6 +34,7 @@ const ComponentSelect = ({
return (
<Select
addComponentsToDynamicZone={addComponentsToDynamicZone}
isClearable={!isMultiple}
isDisabled={isCreatingComponentWhileAddingAField}
isCreatingComponent={isCreatingComponentWhileAddingAField}
@ -44,7 +45,6 @@ const ComponentSelect = ({
componentName={componentNameNeededForAddingAfieldWhileCreatingAComponent}
name={name}
onChange={handleChange}
onClickAddComponentsToDynamicZone={onClickAddComponentsToDynamicZone}
onClickOption={onChange}
styles={styles}
value={{ label: value, value }}
@ -69,6 +69,7 @@ ComponentSelect.defaultProps = {
};
ComponentSelect.propTypes = {
addComponentsToDynamicZone: PropTypes.func.isRequired,
componentCategoryNeededForAddingAfieldWhileCreatingAComponent:
PropTypes.string,
componentNameNeededForAddingAfieldWhileCreatingAComponent: PropTypes.string,
@ -76,7 +77,7 @@ ComponentSelect.propTypes = {
isMultiple: PropTypes.bool,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
onClickAddComponentsToDynamicZone: PropTypes.func.isRequired,
styles: PropTypes.object.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,

18
packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/index.js
View File

@ -94,9 +94,12 @@ const DataManagerProvider = ({ allIcons, children }) => {
shouldAddComponentToData,
});
};
const addComponentsToDynamicZone = (dynamicZoneTarget, componentsToAdd) => {
const addCreatedComponentToDynamicZone = (
dynamicZoneTarget,
componentsToAdd
) => {
dispatch({
type: 'ADD_COMPONENTS_TO_DYNAMIC_ZONE',
type: 'ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE',
dynamicZoneTarget,
componentsToAdd,
});
@ -122,6 +125,14 @@ const DataManagerProvider = ({ allIcons, children }) => {
shouldAddComponentToData,
});
};
const changeDynamicZoneComponents = (dynamicZoneTarget, newComponents) => {
console.log({ newComponents });
dispatch({
type: 'CHANGE_DYNAMIC_ZONE_COMPONENTS',
dynamicZoneTarget,
newComponents,
});
};
const removeAttribute = (
mainDataKey,
attributeToRemoveName,
@ -204,7 +215,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
<DataManagerContext.Provider
value={{
addAttribute,
addComponentsToDynamicZone,
addCreatedComponentToDynamicZone,
allComponentsCategories: retrieveSpecificInfoFromComponents(
components,
['category']
@ -213,6 +224,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
components,
['schema', 'icon']
),
changeDynamicZoneComponents,
components,
componentsGroupedByCategory: groupBy(components, 'category'),
contentTypes,

28
packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/reducer.js
View File

@ -93,7 +93,7 @@ const reducer = (state, action) => {
return existingCompos;
});
}
case 'ADD_COMPONENTS_TO_DYNAMIC_ZONE': {
case 'ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE': {
const { dynamicZoneTarget, componentsToAdd } = action;
return state.updateIn(
@ -110,6 +110,32 @@ const reducer = (state, action) => {
}
);
}
case 'CHANGE_DYNAMIC_ZONE_COMPONENTS': {
const { dynamicZoneTarget, newComponents } = action;
return state
.updateIn(
[
'modifiedData',
'contentType',
'schema',
'attributes',
dynamicZoneTarget,
'components',
],
() => fromJS(newComponents)
)
.updateIn(['modifiedData', 'components'], old => {
const componentsSchema = newComponents.reduce((acc, current) => {
const addedCompoSchema = state.getIn(['components', current]);
return acc.set(current, addedCompoSchema);
}, old);
return componentsSchema;
});
}
case 'CREATE_SCHEMA': {
const newSchema = {
uid: action.uid,

29
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
View File

@ -47,7 +47,8 @@ const FormModal = () => {
const attributeOptionRef = useRef();
const {
addAttribute,
addComponentsToDynamicZone,
addCreatedComponentToDynamicZone,
changeDynamicZoneComponents,
contentTypes,
components,
createSchema,
@ -128,7 +129,6 @@ const FormModal = () => {
// This condition is added to prevent the reducer state to be cleared when navigating from the base tab to tha advanced one
state.modalType !== 'attribute'
) {
console.log('effect');
const attributeToEditNotFormatted = get(
allDataSchema,
[...pathToSchema, 'schema', 'attributes', attributeName],
@ -538,10 +538,23 @@ const FormModal = () => {
// Like explained above we will be able to modify the created component structure
isCreatingComponentFromAView
);
addComponentsToDynamicZone(state.dynamicZoneTarget, [componentUid]);
// Add the created component to the DZ
// We don't want to remove the old ones
addCreatedComponentToDynamicZone(state.dynamicZoneTarget, [
componentUid,
]);
// TODO change routing so the user can add fields to the created component
push({ search: '' });
} else {
console.log('not ready');
// TODO apply components to DZ
// Add the components to the DZ
changeDynamicZoneComponents(
state.dynamicZoneTarget,
modifiedData.components
);
// TODO nav
push({ search: '' });
}
} else {
console.log('step 2???');
@ -825,6 +838,9 @@ const FormModal = () => {
key={input.name}
>
<Inputs
addComponentsToDynamicZone={
handleClickAddComponentsToDynamicZone
}
customInputs={{
componentIconPicker: ComponentIconPicker,
componentSelect: WrapperSelect,
@ -859,9 +875,6 @@ const FormModal = () => {
: formatMessage({ id: errorId })
}
onChange={handleChange}
onClickAddComponentsToDynamicZone={
handleClickAddComponentsToDynamicZone
}
onBlur={() => {}}
description={
get(input, 'description.id', null)