on master help sign in
bridge/src/store/pointCursor.jsx
59 lines 1.4 kB history raw
1import React, {
2 createContext,
3 forwardRef,
4 useCallback,
5 useContext,
6 useState,
7} from 'react';
8import { Nothing } from 'folktale/maybe';
9import { useRollerStore } from './rollerStore';
10import { noop } from 'lodash';
12const initialContext = {
13 pointCursor: Nothing(),
14 setPointCursor: noop,
15};
17export const PointCursorContext = createContext(initialContext);
19// pointCursor is Maybe<number>
20function _usePointCursor(initialPointCursor = Nothing()) {
21 const [pointCursor, setPointCursor] = useState(initialPointCursor);
22 const { setPoint } = useRollerStore();
24 const handleSetPointCursor = useCallback(
25 point => {
26 setPoint(Number(point?.value));
27 setPointCursor(point);
28 },
29 [setPoint, setPointCursor]
30 );
32 return {
33 pointCursor,
34 setPointCursor: handleSetPointCursor,
35 };
38export function PointCursorProvider({ initialPointCursor, children }) {
39 const pointCursor = _usePointCursor(initialPointCursor);
41 return (
42 <PointCursorContext.Provider value={pointCursor}>
43 {children}
44 </PointCursorContext.Provider>
45 );
48// Hook version
49export function usePointCursor() {
50 return useContext(PointCursorContext);
53// HOC version
54export const withPointCursor = Component =>
55 forwardRef((props, ref) => (
56 <PointCursorContext.Consumer>
57 {pointCursor => <Component ref={ref} {...pointCursor} {...props} />}
58 </PointCursorContext.Consumer>
59 ));