@@ -3,10 +3,16 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
3
3
import { useExpressionEvaluation , useDeepCompareMemoize , usePrevious } from '../../hooks' ;
4
4
import { isObject } from 'min-dash' ;
5
5
import { isEqual } from 'lodash' ;
6
- import { v4 as uuidv4 } from 'uuid' ;
7
6
8
7
export function JSFunctionField ( props ) {
9
- const { field, onChange, value } = props ;
8
+
9
+ const {
10
+ field,
11
+ onChange,
12
+ value,
13
+ domId
14
+ } = props ;
15
+
10
16
const {
11
17
jsFunction : functionDefinition ,
12
18
functionParameters : paramsDefinition ,
@@ -16,7 +22,6 @@ export function JSFunctionField(props) {
16
22
17
23
const [ sandbox , setSandbox ] = useState ( null ) ;
18
24
const [ hasRunLoad , setHasRunLoad ] = useState ( false ) ;
19
- const [ iframeContainerId ] = useState ( `fjs-sandbox-iframe-container_${ uuidv4 ( ) } ` ) ;
20
25
const iframeContainerRef = useRef ( null ) ;
21
26
22
27
const paramsEval = useExpressionEvaluation ( paramsDefinition ) ;
@@ -103,7 +108,7 @@ export function JSFunctionField(props) {
103
108
` ;
104
109
105
110
const _sandbox = Sandbox . create ( hostAPI , {
106
- frameContainer : `#${ iframeContainerId } ` ,
111
+ frameContainer : `#${ domId } ` ,
107
112
frameClassName : 'fjs-sandbox-iframe'
108
113
} ) ;
109
114
@@ -119,7 +124,7 @@ export function JSFunctionField(props) {
119
124
return ( ) => {
120
125
_sandbox . destroy ( ) ;
121
126
} ;
122
- } , [ clearValue , functionDefinition , iframeContainerId , safeSetValue , sandboxError ] ) ;
127
+ } , [ clearValue , functionDefinition , domId , safeSetValue , sandboxError ] ) ;
123
128
124
129
const prevParams = usePrevious ( params ) ;
125
130
const prevSandbox = usePrevious ( sandbox ) ;
@@ -151,7 +156,7 @@ export function JSFunctionField(props) {
151
156
} , [ params , prevParams , sandbox , prevSandbox , field , computeOn , hasRunLoad , interval , clearValue , safeSetValue ] ) ;
152
157
153
158
return (
154
- < div ref = { iframeContainerRef } id = { iframeContainerId } className = "fjs-sandbox-iframe-container" > </ div >
159
+ < div ref = { iframeContainerRef } id = { domId } className = "fjs-sandbox-iframe-container" > </ div >
155
160
) ;
156
161
}
157
162
0 commit comments