Merge pull request #77 from walkframe/feature/plugin

feat: PluginBase

src/components/GridSheet.tsx

@@ -173,6 +173,17 @@ export function GridSheet({
     }, 1000);
     return () => window.clearInterval(intervalId);
   }, []);
+  React.useEffect(() => {
+    if (options.sheetHeight) {
+      setSheetHeight(options.sheetHeight);
+    }
+  }, [options.sheetHeight]);
+  React.useEffect(() => {
+    if (options.sheetWidth) {
+      setSheetWidth(options.sheetWidth);
+    }
+  }, [options.sheetWidth]);
+
   const { onChange, onSelect, mode = 'light' } = options;
   return (
     <Context.Provider value={{ store, dispatch }}>

src/components/PluginBase.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { StoreType } from '../types';
+import { Dispatcher } from '../store';
+
+export type PluginContextType = {
+  provided: boolean;
+  store?: StoreType;
+  dispatch?: Dispatcher;
+  setStore: (store: StoreType) => void;
+  setDispatch: (dispatch: Dispatcher) => void;
+};
+
+export const PluginContext = React.createContext({} as PluginContextType);
+
+export function useInitialPluginContext(): PluginContextType {
+  const [store, setStore] = React.useState<StoreType | undefined>(undefined);
+  const [dispatch, setDispatch] = React.useState<Dispatcher>();
+  return {
+    provided: true,
+    store,
+    dispatch,
+    setStore,
+    setDispatch,
+  };
+}
+
+export function usePluginContext(): [boolean, PluginContextType] {
+  const ctx = React.useContext(PluginContext);
+  if (ctx?.provided == null) {
+    return [false, ctx];
+  }
+  return [true, ctx];
+}
+
+export function usePluginDispatch() {
+  const dispatch = React.useContext(PluginContext);
+  if (!dispatch) {
+    return undefined;
+  }
+  return dispatch;
+}
+
+type Props = {
+  children: React.ReactNode;
+  context: PluginContextType;
+};
+
+export function PluginBase({ children, context }: Props) {
+  return <PluginContext.Provider value={context}>{children}</PluginContext.Provider>;
+}

src/components/SheetProvider.tsx

@@ -34,7 +34,11 @@ export function useSheetDispatch() {
   return dispatch;
 }
 
-export function SheetProvider({ children }: { children: React.ReactNode }) {
+type Props = {
+  children: React.ReactNode;
+};
+
+export function SheetProvider({ children }: Props) {
   const [mounted, setMounted] = React.useState(false);
   const [version, setVersion] = React.useState(0);
   const head = React.useRef(1);

src/components/StoreInitializer.tsx

@@ -16,6 +16,7 @@ import {
 
 import { HEADER_HEIGHT, HEADER_WIDTH } from '../constants';
 import { useSheetContext } from './SheetProvider';
+import { usePluginContext } from './PluginBase';
 
 export const StoreInitializer: React.FC<Props> = ({ options = {} }) => {
   const {
@@ -79,5 +80,14 @@ export const StoreInitializer: React.FC<Props> = ({ options = {} }) => {
     }
   }, [onSave]);
 
+  const [pluginProvided, pluginContext] = usePluginContext();
+  React.useEffect(() => {
+    if (!pluginProvided) {
+      return;
+    }
+    pluginContext.setStore(store);
+    pluginContext.setDispatch(() => dispatch);
+  }, [store, dispatch]);
+
   return <></>;
 };