1
1
import { useWatch } from "react-hook-form" ;
2
2
import isEqual from "lodash/isEqual" ; // lodash for deep comparison
3
+ import React from "react" ;
3
4
4
5
export const CippFormCondition = ( props ) => {
5
- let { field, compareType = "is" , compareValue, children, formControl } = props ;
6
+ let { field, compareType = "is" , compareValue, action = 'hide' , children, formControl } = props ;
6
7
7
8
if (
8
9
field === undefined ||
@@ -22,24 +23,48 @@ export const CippFormCondition = (props) => {
22
23
compareValue = compareValue . value ;
23
24
}
24
25
26
+ const disableChildren = ( children ) => {
27
+ return React . Children . map ( children , ( child ) => {
28
+ if ( React . isValidElement ( child ) ) {
29
+ if ( child . props ?. children && child . type . name !== "CippFormCondition" ) {
30
+ return React . cloneElement ( child , {
31
+ children : disableChildren ( child . props . children ) ,
32
+ disabled : true ,
33
+ } ) ;
34
+ }
35
+ return React . cloneElement ( child , { disabled : true } ) ;
36
+ }
37
+ return child ;
38
+ } ) ;
39
+ } ;
40
+
25
41
switch ( compareType ) {
26
42
case "regex" :
27
43
if ( watcher ?. match ( new RegExp ( compareValue ) ) ) {
28
44
return children ;
29
45
}
46
+ if ( action === "disable" ) {
47
+ return disableChildren ( children ) ;
48
+ }
30
49
return null ;
31
50
case "is" :
32
51
// Deep comparison for objects and arrays
33
52
if ( isEqual ( watcher , compareValue ) ) {
34
53
return children ;
35
54
}
55
+ if ( action === "disable" ) {
56
+ return disableChildren ( children ) ;
57
+ }
36
58
return null ;
37
59
38
60
case "isNot" :
39
61
// Deep comparison for objects and arrays (negation)
40
62
if ( ! isEqual ( watcher , compareValue ) ) {
41
63
return children ;
42
64
}
65
+ if ( action === "disable" ) {
66
+ return disableChildren ( children ) ;
67
+ }
43
68
return null ;
44
69
45
70
case "contains" :
@@ -55,6 +80,9 @@ export const CippFormCondition = (props) => {
55
80
// Check if object contains the key
56
81
return children ;
57
82
}
83
+ if ( action === "disable" ) {
84
+ return disableChildren ( children ) ;
85
+ }
58
86
return null ;
59
87
60
88
case "doesNotContain" :
@@ -73,6 +101,9 @@ export const CippFormCondition = (props) => {
73
101
// Check if object does not contain the key
74
102
return children ;
75
103
}
104
+ if ( action === "disable" ) {
105
+ return disableChildren ( children ) ;
106
+ }
76
107
return null ;
77
108
78
109
case "greaterThan" :
@@ -83,6 +114,9 @@ export const CippFormCondition = (props) => {
83
114
) {
84
115
return children ;
85
116
}
117
+ if ( action === "disable" ) {
118
+ return disableChildren ( children ) ;
119
+ }
86
120
return null ;
87
121
88
122
case "lessThan" :
@@ -93,6 +127,9 @@ export const CippFormCondition = (props) => {
93
127
) {
94
128
return children ;
95
129
}
130
+ if ( action === "disable" ) {
131
+ return disableChildren ( children ) ;
132
+ }
96
133
return null ;
97
134
98
135
case "arrayLength" :
@@ -103,12 +140,18 @@ export const CippFormCondition = (props) => {
103
140
) {
104
141
return children ;
105
142
}
143
+ if ( action === "disable" ) {
144
+ return disableChildren ( children ) ;
145
+ }
106
146
return null ;
107
147
108
148
case "hasValue" :
109
149
if ( watcher !== undefined && watcher !== null && watcher !== "" ) {
110
150
return children ;
111
151
}
152
+ if ( action === "disable" ) {
153
+ return disableChildren ( children ) ;
154
+ }
112
155
return null ;
113
156
114
157
/*
@@ -119,6 +162,9 @@ export const CippFormCondition = (props) => {
119
162
if ( Array . isArray ( watcher ) && watcher . some ( ( item ) => item ?. label === compareValue ) ) {
120
163
return children ;
121
164
}
165
+ if ( action === "disable" ) {
166
+ return disableChildren ( children ) ;
167
+ }
122
168
return null ;
123
169
124
170
case "labelContains" :
@@ -129,13 +175,19 @@ export const CippFormCondition = (props) => {
129
175
) {
130
176
return children ;
131
177
}
178
+ if ( action === "disable" ) {
179
+ return disableChildren ( children ) ;
180
+ }
132
181
return null ;
133
182
134
183
case "valueEq" :
135
184
// Checks if any object in array has .value exactly equal to compareValue
136
185
if ( Array . isArray ( watcher ) && watcher . some ( ( item ) => item ?. value === compareValue ) ) {
137
186
return children ;
138
187
}
188
+ if ( action === "disable" ) {
189
+ return disableChildren ( children ) ;
190
+ }
139
191
return null ;
140
192
141
193
case "valueContains" :
@@ -146,9 +198,15 @@ export const CippFormCondition = (props) => {
146
198
) {
147
199
return children ;
148
200
}
201
+ if ( action === "disable" ) {
202
+ return disableChildren ( children ) ;
203
+ }
149
204
return null ;
150
205
151
206
default :
207
+ if ( action === "disable" ) {
208
+ return disableChildren ( children ) ;
209
+ }
152
210
return null ;
153
211
}
154
212
} ;
0 commit comments