feat: add ability to use external values for shared context (#240)

Author: bocembocem

src/lib/core/components/Form/DynamicField.tsx

@@ -33,6 +33,7 @@ export interface DynamicFieldProps {
     withoutInsertFFDebounce?: boolean;
     destroyOnUnregister?: boolean;
     mutators?: DynamicFormMutators;
+    shared?: Record<string, any>;
     __mirror?: WonderMirror;
 }
 
@@ -46,6 +47,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     withoutInsertFFDebounce,
     destroyOnUnregister = true,
     mutators: externalMutators,
+    shared: externalShared,
     __mirror,
 }) => {
     const DynamicFormsCtx = useCreateContext();
@@ -54,7 +56,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     const watcher = useIntegrationFF(store, withoutInsertFFDebounce, destroyOnUnregister);
     const {mutatorsStore, mutateDFState} = useMutators(externalMutators);
     const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore();
-    const shared = useFormSharedStore();
+    const shared = useFormSharedStore(externalShared);
 
     const context = React.useMemo(
         () => ({

src/lib/core/components/Form/hooks/useFormSharedStore.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
 
-export const useFormSharedStore = () => {
-    const [store, setStore] = React.useState({});
+export const useFormSharedStore = (shared?: Record<string, any>) => {
+    const firstRender = React.useRef(true);
+    const [store, setStore] = React.useState(shared || {});
 
     const onChangeShared = React.useCallback(
         (name: string, value: any) => setStore((s) => ({...s, [name]: value})),
         [setStore],
     );
 
+    React.useEffect(() => {
+        if (firstRender.current) {
+            firstRender.current = false;
+        } else if (shared) {
+            setStore({
+                ...store,
+                ...shared,
+            });
+        }
+    }, [shared]);
+
     return {store, onChangeShared};
 };

src/lib/core/components/View/DynamicView.tsx

@@ -21,6 +21,7 @@ export interface DynamicViewProps {
     }>;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     showLayoutDescription?: boolean;
+    shared?: Record<string, any>;
 }
 
 export const DynamicView = ({
@@ -30,9 +31,10 @@ export const DynamicView = ({
     Link,
     Monaco,
     showLayoutDescription,
+    shared: externalShared,
 }: DynamicViewProps) => {
     const DynamicFormsCtx = useCreateContext();
-    const shared = useViewSharedStore();
+    const shared = useViewSharedStore(externalShared);
 
     const context = React.useMemo(
         () => ({

src/lib/core/components/View/hooks/useViewSharedStore.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
 
-export const useViewSharedStore = () => {
-    const [store, setStore] = React.useState({});
+export const useViewSharedStore = (shared?: Record<string, any>) => {
+    const firstRender = React.useRef(true);
+    const [store, setStore] = React.useState(shared || {});
 
     const onChangeShared = React.useCallback(
         (name: string, value: any) => setStore((s) => ({...s, [name]: value})),
         [setStore],
     );
 
+    React.useEffect(() => {
+        if (firstRender.current) {
+            firstRender.current = false;
+        } else if (shared) {
+            setStore({
+                ...store,
+                ...shared,
+            });
+        }
+    }, [shared]);
+
     return {store, onChangeShared};
 };