Active/inactive switch in dynamic-zone sections #84
Description
We love working with the architecture of launchpad.
However often we like to dynamically disable a zone without deleting it.
Therefore we added the following shared component:
{ "category": "shared", "attributes": { "isVisible": { "type": "boolean", "default": true, "required": false } }, "displayName": "visibility" }
This must be added to each Section that should be hideable.
in the frontend following changes are required in manager.tsx :
interface DynamicZoneComponent { __component: string; id: number; documentId?: string; visibility?: { isVisible?: boolean; }; [key: string]: any; }
const DynamicZoneManager: React.FC = ({ dynamicZone, locale }) => {
return (
<>
{dynamicZone.map((componentData) => {
// Check visibility - hide if explicitly set to false
if (componentData.visibility?.isVisible === false) {
return null;
}
const Component = componentMapping[componentData.__component];
if (!Component) {
console.warn(`No component found for: ${componentData.__component}`);
return null;
}
return <Component key={componentData.id} {...componentData} locale={locale} />;
})}
</>
);
};
By this sections finally can be disabled in the frontend without loosing the content.
You may consider to integrate it in a future release.