Overview
Trigger a state update of a parent slot through its children, by utilizing the built-in React context and hooks functionalities.
The SchedulerEditSlot provides each of it's value/callback pairs through context to be available for each of its child components.
This architecture allows the user to define what is happening on every action. The SchedulerEditSlot already have a default callback handlers, which the developer can override if needed, or explicitly call after custom logic is executed.
Accessing the Parent State
The SchedulerEditSlot internal state can be modified by accessing the value/callback pair you want to modify, and call the callback to trigger an action.
Accessing the parent state through its children does not toggle
controlled-stateof the component, but rather definewhena state change must happen. If you want to control the internal state from outside, please refer to the SchedulerEditSlot Controlled State
Accessing the internal state can be done through:
Custom Hooks
The following hooks are available for each child Functional Component of the SchedulerEditSlot:
In order to trigger a state change, use the desired hook inside your custom component:
const CustomSchedulerSlot = (props) => {
const [formItem, setFormItem] = useSchedulerEditSlotFormItemContext();
const handleClick = React.useCallback(
() => { setFormItem(createEmptyFormItem()); },
[setFormItem]
)
return (<SchedulerSlot {...props} onClick={handleClick} />)
}Context.Consumer
The following Contexts are available for each child Class Component of the SchedulerEditSlot:
In order to trigger a state change, use the desired context inside your custom component:
class CustomSchedulerSlot extends React.Component {
render() {
return (
<SchedulerEditSlotFormItemContext.Consumer>
{([formItem, setFormItem]) => (
<SchedulerSlot
{...this.props}
onClick={() => { setFormItem(createEmptyFormItem()); }}
/>
)}
</SchedulerEditSlotFormItemContext.Consumer>
)
}
}Custom Action Binding
Providing custom bindings for a specific component provides the ability to bind specific actions to state changes. This allows the developer to define a middleware to change what is happening on a specific event.
For example, the default onDoubleClick handler is changing the internal formItem state from null to an empty DataItem with predefined start, end, isAllDay and resources of the slot. This state change triggers the display of the form dialog, thus triggering edit . If the application requires such action to be triggered on onClick, the developer must handle the onClick callback of the SchedulerSlot and set the corresponding formItem state of it's SchedulerEditSlot parent.
The following example demonstrates changing the internal formItem state of the SchedulerEditSlot through the onClick event of the SchedulerSlot.