-
-
Save bvaughn/5d939e414f8424648874e4ddde4f7e2c to your computer and use it in GitHub Desktop.
Fork of gist.github.com/AlexFrazer/aed3810407aaf23b23168449a7ef83bf to answer question
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import {SelectableContext} from './Selectable'; | |
export interface Props { | |
selectableKey: string; | |
children?: React.ReactNode; | |
} | |
export interface ComponentProps { | |
selectableRef: React.Ref<HTMLElement>; | |
} | |
export default function createSelectable<TProps>( | |
Wrapped: React.ComponentType<ComponentProps & TProps> | |
) { | |
return function SelectableWrapper(props) { | |
return ( | |
<SelectableContext.Consumer> | |
{selectableContext => ( | |
<WrappedComponent {...this.props} selectableContext={selectableContext} /> | |
)} | |
</SelectableContext.Consumer> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import * as rbush from "rbush"; | |
export const SelectableContext = React.createContext(); | |
export class SelectableGroup extends React.PureComponent { | |
static defaultProps = { | |
tolerance: 10 | |
}; | |
// Pass references to insert and remove nodes down via context | |
selectableContext = { | |
insert: this.insert, | |
remove: this.remove | |
}; | |
insert = (key: string, node: HTMLElement) => { | |
this.nodes.set(key, node); | |
this.tree.insert(createTreeNode(node)); | |
}; | |
remove = (key: string, node: HTMLElement) => { | |
this.nodes.delete(key); | |
this.tree.remove(createTreeNode(node), ({ key: a }, { key: b }) => a === b); | |
}; | |
render() { | |
return ( | |
// All descendants of this component can access this context via SelectableContext.Consumer | |
<SelectableContext.Provider value={this.selectableContext}> | |
<Container {...props} onMouseDown={this.onMouseDown}> | |
{children} | |
</Container> | |
</SelectableContext.Provider> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment