Does anyone know how to create a react component with responsive grid and options so that we can drag and add other additional components?
The goal for us is to create a popup component and within this popup component we are going to name the component within the options menu. In the meantime also has the ability to drag and add other react components we have created. The purpose of the Popup Name is to be able to pass the data into react and link it with other AEM React component so that it can be triggered with an event.
For example
Add a button component
within the button component, there a option we can indicate which popup should it open if a user clicks on it options menu for any other react components
once the user clicks on the button, it then looks for the popup component with the same name and the popup should be revealed. options menu for the popup component
within the popup we can add whatever the component we want, for example, video component or image component. the popup component, and within it, ability to add other component
Problem:
we tried several ways of doing it, adding responsive grid from @adobe/aem-react-editable-components into the functional popup component we created, it didnt work.
we also tried creating a class based popup component which extents from the responsive grid, this works however when we try to add the options menu in by creating the java file and the .content.xml, we weren't able to add any of the components in(even though the options are there, but its not responding). However, the name of the popup component is being passed into React correctly.
class based popup component that extents from responsive grid
when we console.log props, we do see the name of the component is being passed into react correctly along with other data console.logged props
below are the xml files created _cq_dialog is there for the option menu to work. _cq_template, new, and _cq_editConfig is there for the responsive grid of adding additional components to work
it works all fine, until we add the java files which handles the functionality of passing the data from the options menu into react
Note: I also see other people trying to achieve the same thing as us, but the solutions they get points them to the SPA documentation which did not mention any complex use case.
