62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import React, { createContext, Component, useContext, useState, createRef, useMemo } from 'react'
|
|
|
|
|
|
|
|
// NOTE: using this context provider causes many re-rendering when the canvas is panned the toolbar updates unnecessarily
|
|
|
|
|
|
// Create the Context
|
|
export const ActiveWidgetContext = createContext()
|
|
|
|
// Create the Provider component
|
|
export class ActiveWidgetProvider extends Component {
|
|
state = {
|
|
activeWidgetId: null,
|
|
activeWidgetAttrs: {}
|
|
}
|
|
|
|
updateActiveWidget = (widget) => {
|
|
this.setState({ activeWidgetId: widget })
|
|
}
|
|
|
|
updateToolAttrs = (widgetAttrs) => {
|
|
this.setState({activeWidgetAttrs: widgetAttrs})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ActiveWidgetContext.Provider
|
|
value={{ ...this.state, updateActiveWidget: this.updateActiveWidget, updateToolAttrs: this.updateToolAttrs }}
|
|
>
|
|
{this.props.children}
|
|
</ActiveWidgetContext.Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
// Custom hook for function components
|
|
export const useActiveWidget = () => {
|
|
const context = useContext(ActiveWidgetContext)
|
|
if (context === undefined) {
|
|
throw new Error('useActiveWidget must be used within an ActiveWidgetProvider')
|
|
}
|
|
return useMemo(() => context, [context.activeWidgetId, context.activeWidgetAttrs, context.updateToolAttrs, context.updateActiveWidget])
|
|
}
|
|
|
|
// Higher-Order Component for class-based components
|
|
export const withActiveWidget = (WrappedComponent) => {
|
|
return class extends Component {
|
|
|
|
render() {
|
|
return (
|
|
<ActiveWidgetContext.Consumer>
|
|
{context => <WrappedComponent {...this.props} {...context} />}
|
|
</ActiveWidgetContext.Consumer>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|