@nvs-dynamic-form/react-core 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/nvs-dynamic-form/components/groupField/_template.d.ts +1 -1
- package/dist/cjs/nvs-dynamic-form/components/groupField/_template.js +7 -4
- package/dist/cjs/nvs-dynamic-form/components/groupField/_template.js.map +1 -1
- package/dist/cjs/types/group-field.type.d.ts +2 -0
- package/dist/cjs/types/group-field.type.js +2 -0
- package/dist/cjs/types/group-field.type.js.map +1 -1
- package/dist/esm/nvs-dynamic-form/components/groupField/_template.d.ts +1 -1
- package/dist/esm/nvs-dynamic-form/components/groupField/_template.js +8 -5
- package/dist/esm/nvs-dynamic-form/components/groupField/_template.js.map +1 -1
- package/dist/esm/types/group-field.type.d.ts +2 -0
- package/dist/esm/types/group-field.type.js +2 -0
- package/dist/esm/types/group-field.type.js.map +1 -1
- package/lib/nvs-dynamic-form/components/groupField/_template.tsx +12 -7
- package/lib/types/group-field.type.tsx +4 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IGroupField } from "./_type";
|
|
3
|
-
export declare const GroupField: ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }: IGroupField) => React.JSX.Element;
|
|
3
|
+
export declare const GroupField: ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }: IGroupField) => React.JSX.Element | undefined;
|
|
@@ -28,10 +28,13 @@ const react_1 = __importStar(require("react"));
|
|
|
28
28
|
const elements_1 = require("../elements");
|
|
29
29
|
const formBuilder_1 = require("../formBuilder");
|
|
30
30
|
const GroupField = ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }) => {
|
|
31
|
-
const [fields,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
const [fields, setFields] = (0, react_1.useState)();
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
setFields(groupField.fields.map((field) => {
|
|
34
|
+
field.id = `${groupField.id}.${field.id}`;
|
|
35
|
+
return field;
|
|
36
|
+
}));
|
|
37
|
+
}, [groupField.fields]);
|
|
35
38
|
const isContainerVisible = () => {
|
|
36
39
|
return groupField.containerVisible && useGroupContainer && containerVisible;
|
|
37
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/groupField/_template.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/groupField/_template.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AAEnD,0CAAuC;AAEvC,gDAA6C;AAGtC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,yBAAyB,EACzB,iBAAiB,EACjB,eAAe,GACH,EAAE,EAAE;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,GAAoB,CAAC;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,SAAS,CACP,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9B,KAAK,CAAC,EAAE,GAAG,GAAG,UAAU,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,EAAE,CAAC;YAC1C,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,OAAO,UAAU,CAAC,gBAAgB,IAAI,iBAAiB,IAAI,gBAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,MAAM;QACN,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CACtB,8BAAC,yBAAW,IACV,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,YAAY,EAC1B,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,mBAAQ,IACP,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,YAAY,EAC1B,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CACH,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,UAAU,cAiDrB"}
|
|
@@ -6,6 +6,8 @@ class GroupField {
|
|
|
6
6
|
this.id = options.id;
|
|
7
7
|
this.fields = options.fields ?? [];
|
|
8
8
|
this.containerVisible = options.containerVisible ?? false;
|
|
9
|
+
this.useContainersOutsideGroup = options.useContainersOutsideGroup ?? false;
|
|
10
|
+
this.useGroupContainer = options.useGroupContainer ?? false;
|
|
9
11
|
this.containerOptions = options.containerOptions ?? {};
|
|
10
12
|
}
|
|
11
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":";;;AAEA,MAAa,UAAU;
|
|
1
|
+
{"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":";;;AAEA,MAAa,UAAU;IAQrB,YAAY,OAAmB;QAC7B,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,KAAK,CAAC;QAC1D,IAAI,CAAC,yBAAyB,GAAG,OAAO,CAAC,yBAAyB,IAAI,KAAK,CAAC;QAC5E,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,IAAI,KAAK,CAAC;QAC5D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACzD,CAAC;CACF;AAhBD,gCAgBC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IGroupField } from "./_type";
|
|
3
|
-
export declare const GroupField: ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }: IGroupField) => React.JSX.Element;
|
|
3
|
+
export declare const GroupField: ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }: IGroupField) => React.JSX.Element | undefined;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { Elements } from "../elements";
|
|
3
3
|
import { FormBuilder } from "../formBuilder";
|
|
4
4
|
export const GroupField = ({ field: groupField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent, }) => {
|
|
5
|
-
const [fields,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
const [fields, setFields] = useState();
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
setFields(groupField.fields.map((field) => {
|
|
8
|
+
field.id = `${groupField.id}.${field.id}`;
|
|
9
|
+
return field;
|
|
10
|
+
}));
|
|
11
|
+
}, [groupField.fields]);
|
|
9
12
|
const isContainerVisible = () => {
|
|
10
13
|
return groupField.containerVisible && useGroupContainer && containerVisible;
|
|
11
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/groupField/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/groupField/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,yBAAyB,EACzB,iBAAiB,EACjB,eAAe,GACH,EAAE,EAAE;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CACP,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9B,KAAK,CAAC,EAAE,GAAG,GAAG,UAAU,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,EAAE,CAAC;YAC1C,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,OAAO,UAAU,CAAC,gBAAgB,IAAI,iBAAiB,IAAI,gBAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,MAAM;QACN,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CACtB,oBAAC,WAAW,IACV,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,YAAY,EAC1B,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,YAAY,EAC1B,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,8 @@ export class GroupField {
|
|
|
3
3
|
this.id = options.id;
|
|
4
4
|
this.fields = options.fields ?? [];
|
|
5
5
|
this.containerVisible = options.containerVisible ?? false;
|
|
6
|
+
this.useContainersOutsideGroup = options.useContainersOutsideGroup ?? false;
|
|
7
|
+
this.useGroupContainer = options.useGroupContainer ?? false;
|
|
6
8
|
this.containerOptions = options.containerOptions ?? {};
|
|
7
9
|
}
|
|
8
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;
|
|
1
|
+
{"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IAQrB,YAAY,OAAmB;QAC7B,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,KAAK,CAAC;QAC1D,IAAI,CAAC,yBAAyB,GAAG,OAAO,CAAC,yBAAyB,IAAI,KAAK,CAAC;QAC5E,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,IAAI,KAAK,CAAC;QAC5D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACzD,CAAC;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
import { Elements } from "../elements";
|
|
4
|
+
import { FieldType } from "../../_type";
|
|
4
5
|
import { FormBuilder } from "../formBuilder";
|
|
5
6
|
import { IGroupField } from "./_type";
|
|
6
7
|
|
|
@@ -13,12 +14,16 @@ export const GroupField = ({
|
|
|
13
14
|
useGroupContainer,
|
|
14
15
|
buttonComponent,
|
|
15
16
|
}: IGroupField) => {
|
|
16
|
-
const [fields,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
const [fields, setFields] = useState<Array<FieldType>>();
|
|
18
|
+
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
setFields(
|
|
21
|
+
groupField.fields.map((field) => {
|
|
22
|
+
field.id = `${groupField.id}.${field.id}`;
|
|
23
|
+
return field;
|
|
24
|
+
}),
|
|
25
|
+
);
|
|
26
|
+
}, [groupField.fields]);
|
|
22
27
|
|
|
23
28
|
const isContainerVisible = () => {
|
|
24
29
|
return groupField.containerVisible && useGroupContainer && containerVisible;
|
|
@@ -5,11 +5,15 @@ export class GroupField {
|
|
|
5
5
|
fields: Array<FieldType>;
|
|
6
6
|
containerVisible?: boolean;
|
|
7
7
|
containerOptions?: Record<string, any>;
|
|
8
|
+
useContainersOutsideGroup?: boolean;
|
|
9
|
+
useGroupContainer?: boolean;
|
|
8
10
|
|
|
9
11
|
constructor(options: GroupField) {
|
|
10
12
|
this.id = options.id;
|
|
11
13
|
this.fields = options.fields ?? [];
|
|
12
14
|
this.containerVisible = options.containerVisible ?? false;
|
|
15
|
+
this.useContainersOutsideGroup = options.useContainersOutsideGroup ?? false;
|
|
16
|
+
this.useGroupContainer = options.useGroupContainer ?? false;
|
|
13
17
|
this.containerOptions = options.containerOptions ?? {};
|
|
14
18
|
}
|
|
15
19
|
}
|