puckeditor
Cascade parent props to child props
Description
I'm interested in better support for interconnectivity between the fields of a parent component that renders a drop zone and children components that go in that drop zone.
Current state:
Using React Context, I can receive values from the parent in the child's render function but I can't update the child's fields or prop values after consuming the context.
Using resolveFields and the params.parent parameter, I can update the fields, but this only runs when the component is clicked, which means it's not responsive to the parent's fields changing.
Examples:
- Scope a children select field based on a parent select field
Let's say I have an Phone child component that has a select field for phone number with options populated via an api fetch. I also have a Store parent component that renders a drop zone and has a select field to pick a store. When I drag the Phone component onto the page outside of the Store component, I want to see all the phone numbers fetched from the api (storeA.corporate, storeA.tollFree, storeB.corporate, storeB.tollFree). However, when I drag Phone into the Store's drop zone, I want the address field to be scoped to only show the phone numbers related to that store (storeB.corporate, storeB.tollFree).
- Reset child props when the parent or parent field changes
Continuing the previous example, I'd like to be able to automatically change the field values of the Phone component when it is dragged between the page and the Store component's drop zone, or when the store field of the Store component changes.
Proposals
Proposal 1
Make params.parent available in resolveData like in resolveFields.
This doesn't solve the issue but I think it's a prerequisite for the following proposals. Currently I'm updating some props in resolveFields via setting values on data.props but it seems more idiomatic for this to occur in resolveData.
Proposal 2
Add a scoped version of resolveAllData that could run resolveData for all children of a given component/drop zone.
I think if params.parent is available in resolveData, then I think the parent could run resolveAllData when it updates a field value. I don't know if scoping that to only its children would be feasible, but it would help make this less expensive.
Proposal 3
Run resolveData for children components when their parent's data updates. Again, not sure if this is feasible, but since the data of the children components is related to the data of the parent component, it would be nice if all the resolveData functions could run at once.
I spun off adding the parent prop to resolveData into its own issue since it's a prerequisite. Tracking here: #1359
