Merge branch 'main' into date-picker-fix

Author: bocembocem

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.14.0](https://github.com/gravity-ui/dynamic-forms/compare/v4.13.0...v4.14.0) (2024-10-17)
+
+
+### Features
+
+* add ability to use external values for shared context ([#240](https://github.com/gravity-ui/dynamic-forms/issues/240)) ([d1b69cb](https://github.com/gravity-ui/dynamic-forms/commit/d1b69cb8f98672423616b40f245d61120dbf21c4))
+
 ## [4.13.0](https://github.com/gravity-ui/dynamic-forms/compare/v4.12.0...v4.13.0) (2024-10-15)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",

package.json

@@ -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/DynamicField.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/Form/hooks/useFormSharedStore.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/DynamicView.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};
 };