diff --git a/src/lib/core/components/Form/DynamicField.tsx b/src/lib/core/components/Form/DynamicField.tsx index 4bdc0feb..4ebc37ad 100644 --- a/src/lib/core/components/Form/DynamicField.tsx +++ b/src/lib/core/components/Form/DynamicField.tsx @@ -14,6 +14,7 @@ import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, + useFormSharedStore, useIntegrationFF, useMutators, useSearchStore, @@ -53,6 +54,7 @@ export const DynamicField: React.FC = ({ const watcher = useIntegrationFF(store, withoutInsertFFDebounce, destroyOnUnregister); const {mutatorsStore, mutateDFState} = useMutators(externalMutators); const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore(); + const shared = useFormSharedStore(); const context = React.useMemo( () => ({ @@ -61,10 +63,21 @@ export const DynamicField: React.FC = ({ generateRandomValue, tools: {...tools, mutateDFState}, store, + shared, mutatorsStore, __mirror, }), - [tools, config, Monaco, __mirror, generateRandomValue, mutatorsStore, mutateDFState, store], + [ + tools, + shared, + config, + Monaco, + __mirror, + generateRandomValue, + mutatorsStore, + mutateDFState, + store, + ], ); const searchContext = React.useMemo( diff --git a/src/lib/core/components/Form/hooks/index.tsx b/src/lib/core/components/Form/hooks/index.tsx index 37b00822..8e2674f1 100644 --- a/src/lib/core/components/Form/hooks/index.tsx +++ b/src/lib/core/components/Form/hooks/index.tsx @@ -2,6 +2,8 @@ export * from './useControllerMirror'; export * from './useCreateContext'; export * from './useDynamicFieldMirror'; export * from './useDynamicFormsCtx'; +export * from './useFormShared'; +export * from './useFormSharedStore'; export * from './useGenerateRandomValue'; export * from './useIntegrationFF'; export * from './useMutateDFState'; diff --git a/src/lib/core/components/Form/hooks/useFormShared.tsx b/src/lib/core/components/Form/hooks/useFormShared.tsx new file mode 100644 index 00000000..305c85ac --- /dev/null +++ b/src/lib/core/components/Form/hooks/useFormShared.tsx @@ -0,0 +1,10 @@ +import {useDynamicFormsCtx} from './useDynamicFormsCtx'; + +export const useFormShared = >() => + useDynamicFormsCtx().shared as { + store: SharedStore; + onChangeShared: ( + name: Name, + value: Value, + ) => void; + }; diff --git a/src/lib/core/components/Form/hooks/useFormSharedStore.tsx b/src/lib/core/components/Form/hooks/useFormSharedStore.tsx new file mode 100644 index 00000000..4f537468 --- /dev/null +++ b/src/lib/core/components/Form/hooks/useFormSharedStore.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const useFormSharedStore = () => { + const [store, setStore] = React.useState({}); + + const onChangeShared = React.useCallback( + (name: string, value: any) => setStore((s) => ({...s, [name]: value})), + [setStore], + ); + + return {store, onChangeShared}; +}; diff --git a/src/lib/core/components/Form/index.ts b/src/lib/core/components/Form/index.ts index f3dfa276..b0b811f9 100644 --- a/src/lib/core/components/Form/index.ts +++ b/src/lib/core/components/Form/index.ts @@ -1,6 +1,6 @@ export * from './constants'; export * from './Controller'; export * from './DynamicField'; -export {useMutateDFState, useStoreValue} from './hooks'; +export {useMutateDFState, useStoreValue, useFormShared} from './hooks'; export * from './types'; export * from './utils'; diff --git a/src/lib/core/components/Form/types/context.ts b/src/lib/core/components/Form/types/context.ts index 90e0b31c..92498393 100644 --- a/src/lib/core/components/Form/types/context.ts +++ b/src/lib/core/components/Form/types/context.ts @@ -26,6 +26,10 @@ export interface DynamicFormsContext { mutateDFState: (mutators: DynamicFormMutators) => void; }; store: DynamicFieldStore; + shared: { + store: Record; + onChangeShared: (name: string, value: any) => void; + }; mutatorsStore: DynamicFormMutatorsStore; __mirror?: WonderMirror; } diff --git a/src/lib/core/components/View/DynamicView.tsx b/src/lib/core/components/View/DynamicView.tsx index e636685a..f23e87cc 100644 --- a/src/lib/core/components/View/DynamicView.tsx +++ b/src/lib/core/components/View/DynamicView.tsx @@ -8,7 +8,7 @@ import {FormValue, Spec} from '../../types'; import {ViewController} from './ViewController'; import {isCorrectViewConfig} from './helpers'; -import {useCreateContext} from './hooks'; +import {useCreateContext, useViewSharedStore} from './hooks'; import {DynamicViewConfig} from './types'; export interface DynamicViewProps { @@ -32,6 +32,7 @@ export const DynamicView = ({ showLayoutDescription, }: DynamicViewProps) => { const DynamicFormsCtx = useCreateContext(); + const shared = useViewSharedStore(); const context = React.useMemo( () => ({ @@ -40,8 +41,9 @@ export const DynamicView = ({ showLayoutDescription, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined, + shared, }), - [config, value, Link, Monaco, showLayoutDescription], + [config, value, Link, Monaco, showLayoutDescription, shared], ); if (isCorrectSpec(spec) && isCorrectViewConfig(config)) { diff --git a/src/lib/core/components/View/hooks/index.tsx b/src/lib/core/components/View/hooks/index.tsx index a5e7fd4a..76d21ed2 100644 --- a/src/lib/core/components/View/hooks/index.tsx +++ b/src/lib/core/components/View/hooks/index.tsx @@ -3,3 +3,5 @@ export * from './useCreateContext'; export * from './useDynamicFormsCtx'; export * from './useRender'; export * from './useMonaco'; +export * from './useViewShared'; +export * from './useViewSharedStore'; diff --git a/src/lib/core/components/View/hooks/useViewShared.tsx b/src/lib/core/components/View/hooks/useViewShared.tsx new file mode 100644 index 00000000..d6937a1f --- /dev/null +++ b/src/lib/core/components/View/hooks/useViewShared.tsx @@ -0,0 +1,10 @@ +import {useDynamicFormsCtx} from './useDynamicFormsCtx'; + +export const useViewShared = >() => + useDynamicFormsCtx().shared as { + store: SharedStore; + onChangeShared: ( + name: Name, + value: Value, + ) => void; + }; diff --git a/src/lib/core/components/View/hooks/useViewSharedStore.tsx b/src/lib/core/components/View/hooks/useViewSharedStore.tsx new file mode 100644 index 00000000..1ebfa121 --- /dev/null +++ b/src/lib/core/components/View/hooks/useViewSharedStore.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const useViewSharedStore = () => { + const [store, setStore] = React.useState({}); + + const onChangeShared = React.useCallback( + (name: string, value: any) => setStore((s) => ({...s, [name]: value})), + [setStore], + ); + + return {store, onChangeShared}; +}; diff --git a/src/lib/core/components/View/index.ts b/src/lib/core/components/View/index.ts index 96e59804..c9faded4 100644 --- a/src/lib/core/components/View/index.ts +++ b/src/lib/core/components/View/index.ts @@ -2,4 +2,4 @@ export * from './DynamicView'; export * from './ViewController'; export * from './helpers'; export * from './types'; -export {useDynamicFormsCtx} from './hooks'; +export {useDynamicFormsCtx, useViewShared} from './hooks'; diff --git a/src/lib/core/components/View/types/context.ts b/src/lib/core/components/View/types/context.ts index 89e8e3d8..911019e1 100644 --- a/src/lib/core/components/View/types/context.ts +++ b/src/lib/core/components/View/types/context.ts @@ -15,4 +15,8 @@ export interface DynamicViewContext { link: Spec['viewSpec']['link']; }>; Monaco?: React.ComponentType; + shared: { + store: Record; + onChangeShared: (name: string, value: any) => void; + }; }