@nvs-dynamic-form/react-core 2.4.3 → 2.5.0
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/arrayField/_template.js +16 -9
- package/dist/cjs/nvs-dynamic-form/components/arrayField/_template.js.map +1 -1
- package/dist/esm/nvs-dynamic-form/components/arrayField/_template.js +16 -9
- package/dist/esm/nvs-dynamic-form/components/arrayField/_template.js.map +1 -1
- package/lib/nvs-dynamic-form/components/arrayField/_template.tsx +33 -19
- package/lib/nvs-dynamic-form/stories/fields/arrayField/container.stories.tsx +99 -0
- package/package.json +1 -1
|
@@ -30,7 +30,7 @@ const formik_1 = require("formik");
|
|
|
30
30
|
const react_1 = __importStar(require("react"));
|
|
31
31
|
const elements_1 = require("../elements");
|
|
32
32
|
const _template_1 = require("../list/_template");
|
|
33
|
-
const ArrayField = ({ field: arrayField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent: ButtonComponent, addButtonDefaultOptions, removeButtonDefaultOptions, labelDefaultOptions, }) => {
|
|
33
|
+
const ArrayField = ({ field: arrayField, formElements, containerComponent: ContainerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent: ButtonComponent, addButtonDefaultOptions, removeButtonDefaultOptions, labelDefaultOptions, }) => {
|
|
34
34
|
const createArrayItem = (0, react_1.useCallback)((index) => {
|
|
35
35
|
return lodash.cloneDeep(arrayField.fields).map((field) => {
|
|
36
36
|
field.id = `${arrayField.id}[${index}].${field.id}`;
|
|
@@ -55,7 +55,7 @@ const ArrayField = ({ field: arrayField, formElements, containerComponent, conta
|
|
|
55
55
|
return (react_1.default.createElement("div", { className: "df-array-field-content" },
|
|
56
56
|
react_1.default.createElement("div", { className: "nvs-container-fluid" },
|
|
57
57
|
react_1.default.createElement("div", { className: "nvs-row" },
|
|
58
|
-
react_1.default.createElement(elements_1.Elements, { fields: createArrayItem(index), formElements: formElements, containerComponent:
|
|
58
|
+
react_1.default.createElement(elements_1.Elements, { fields: createArrayItem(index), formElements: formElements, containerComponent: ContainerComponent, useContainersOutsideGroup: useContainersOutsideGroup, useGroupContainer: useGroupContainer, containerVisible: containerVisible, buttonComponent: ButtonComponent, fieldArrayAddButtonDefaultOptions: addButtonDefaultOptions, fieldArrayRemoveButtonDefaultOptions: removeButtonDefaultOptions, labelDefaultOptions: labelDefaultOptions })))));
|
|
59
59
|
};
|
|
60
60
|
const createRemoveButton = (onRemoveItem) => {
|
|
61
61
|
return (react_1.default.createElement("div", { className: "nvs-col-12" },
|
|
@@ -103,13 +103,20 @@ const ArrayField = ({ field: arrayField, formElements, containerComponent, conta
|
|
|
103
103
|
const error = getArrayFieldErrorMessage(form);
|
|
104
104
|
return error && react_1.default.createElement(_template_1.List, { items: [error] });
|
|
105
105
|
};
|
|
106
|
-
|
|
107
|
-
arrayField.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
const isContainerVisible = () => {
|
|
107
|
+
return arrayField.containerVisible && useGroupContainer && containerVisible;
|
|
108
|
+
};
|
|
109
|
+
const ContentArrayField = () => {
|
|
110
|
+
return (react_1.default.createElement(formik_1.FieldArray, { name: arrayField.id }, ({ push, remove, form }) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
111
|
+
arrayField.label && createArrayFieldLabel(),
|
|
112
|
+
lodash
|
|
113
|
+
.get(form.values, arrayField.id)
|
|
114
|
+
?.map((_, index) => createFieldArrayContent(remove, index)),
|
|
115
|
+
checkFieldArrayMaxSize(lodash.get(form.values, arrayField.id)?.length) && createArrayItemAddButton(push),
|
|
116
|
+
createErrorList(form)))));
|
|
117
|
+
};
|
|
118
|
+
return isContainerVisible() ? (react_1.default.createElement(ContainerComponent, null,
|
|
119
|
+
react_1.default.createElement(ContentArrayField, null))) : (react_1.default.createElement(ContentArrayField, null));
|
|
113
120
|
};
|
|
114
121
|
exports.ArrayField = ArrayField;
|
|
115
122
|
//# sourceMappingURL=_template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/arrayField/_template.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiC;AAEjC,0CAIwB;AACxB,mCAAiD;AACjD,+CAAgE;AAEhE,0CAAuC;AAEvC,iDAAyC;AAElC,MAAM,UAAU,GAA0B,CAAC,EAChD,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,kBAAkB,
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/arrayField/_template.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { FieldArray } from "formik";
|
|
|
4
4
|
import React, { useCallback, useState } from "react";
|
|
5
5
|
import { Elements } from "../elements";
|
|
6
6
|
import { List } from "../list/_template";
|
|
7
|
-
export const ArrayField = ({ field: arrayField, formElements, containerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent: ButtonComponent, addButtonDefaultOptions, removeButtonDefaultOptions, labelDefaultOptions, }) => {
|
|
7
|
+
export const ArrayField = ({ field: arrayField, formElements, containerComponent: ContainerComponent, containerVisible, useContainersOutsideGroup, useGroupContainer, buttonComponent: ButtonComponent, addButtonDefaultOptions, removeButtonDefaultOptions, labelDefaultOptions, }) => {
|
|
8
8
|
const createArrayItem = useCallback((index) => {
|
|
9
9
|
return lodash.cloneDeep(arrayField.fields).map((field) => {
|
|
10
10
|
field.id = `${arrayField.id}[${index}].${field.id}`;
|
|
@@ -29,7 +29,7 @@ export const ArrayField = ({ field: arrayField, formElements, containerComponent
|
|
|
29
29
|
return (React.createElement("div", { className: "df-array-field-content" },
|
|
30
30
|
React.createElement("div", { className: "nvs-container-fluid" },
|
|
31
31
|
React.createElement("div", { className: "nvs-row" },
|
|
32
|
-
React.createElement(Elements, { fields: createArrayItem(index), formElements: formElements, containerComponent:
|
|
32
|
+
React.createElement(Elements, { fields: createArrayItem(index), formElements: formElements, containerComponent: ContainerComponent, useContainersOutsideGroup: useContainersOutsideGroup, useGroupContainer: useGroupContainer, containerVisible: containerVisible, buttonComponent: ButtonComponent, fieldArrayAddButtonDefaultOptions: addButtonDefaultOptions, fieldArrayRemoveButtonDefaultOptions: removeButtonDefaultOptions, labelDefaultOptions: labelDefaultOptions })))));
|
|
33
33
|
};
|
|
34
34
|
const createRemoveButton = (onRemoveItem) => {
|
|
35
35
|
return (React.createElement("div", { className: "nvs-col-12" },
|
|
@@ -77,12 +77,19 @@ export const ArrayField = ({ field: arrayField, formElements, containerComponent
|
|
|
77
77
|
const error = getArrayFieldErrorMessage(form);
|
|
78
78
|
return error && React.createElement(List, { items: [error] });
|
|
79
79
|
};
|
|
80
|
-
|
|
81
|
-
arrayField.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
const isContainerVisible = () => {
|
|
81
|
+
return arrayField.containerVisible && useGroupContainer && containerVisible;
|
|
82
|
+
};
|
|
83
|
+
const ContentArrayField = () => {
|
|
84
|
+
return (React.createElement(FieldArray, { name: arrayField.id }, ({ push, remove, form }) => (React.createElement(React.Fragment, null,
|
|
85
|
+
arrayField.label && createArrayFieldLabel(),
|
|
86
|
+
lodash
|
|
87
|
+
.get(form.values, arrayField.id)
|
|
88
|
+
?.map((_, index) => createFieldArrayContent(remove, index)),
|
|
89
|
+
checkFieldArrayMaxSize(lodash.get(form.values, arrayField.id)?.length) && createArrayItemAddButton(push),
|
|
90
|
+
createErrorList(form)))));
|
|
91
|
+
};
|
|
92
|
+
return isContainerVisible() ? (React.createElement(ContainerComponent, null,
|
|
93
|
+
React.createElement(ContentArrayField, null))) : (React.createElement(ContentArrayField, null));
|
|
87
94
|
};
|
|
88
95
|
//# sourceMappingURL=_template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/arrayField/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,UAAU,EAAe,MAAM,QAAQ,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,GAA0B,CAAC,EAChD,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,kBAAkB,
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/components/arrayField/_template.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ import { List } from "../list/_template";
|
|
|
15
15
|
export const ArrayField: React.FC<IArrayField> = ({
|
|
16
16
|
field: arrayField,
|
|
17
17
|
formElements,
|
|
18
|
-
containerComponent,
|
|
18
|
+
containerComponent: ContainerComponent,
|
|
19
19
|
containerVisible,
|
|
20
20
|
useContainersOutsideGroup,
|
|
21
21
|
useGroupContainer,
|
|
@@ -79,7 +79,7 @@ export const ArrayField: React.FC<IArrayField> = ({
|
|
|
79
79
|
<Elements
|
|
80
80
|
fields={createArrayItem(index)}
|
|
81
81
|
formElements={formElements}
|
|
82
|
-
containerComponent={
|
|
82
|
+
containerComponent={ContainerComponent}
|
|
83
83
|
useContainersOutsideGroup={useContainersOutsideGroup}
|
|
84
84
|
useGroupContainer={useGroupContainer}
|
|
85
85
|
containerVisible={containerVisible}
|
|
@@ -183,22 +183,36 @@ export const ArrayField: React.FC<IArrayField> = ({
|
|
|
183
183
|
return error && <List items={[error]} />;
|
|
184
184
|
};
|
|
185
185
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
)}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
186
|
+
const isContainerVisible = () => {
|
|
187
|
+
return arrayField.containerVisible && useGroupContainer && containerVisible;
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
const ContentArrayField = () => {
|
|
191
|
+
return (
|
|
192
|
+
<FieldArray name={arrayField.id}>
|
|
193
|
+
{({ push, remove, form }) => (
|
|
194
|
+
<>
|
|
195
|
+
{arrayField.label && createArrayFieldLabel()}
|
|
196
|
+
{lodash
|
|
197
|
+
.get(form.values, arrayField.id)
|
|
198
|
+
?.map((_: any, index: number) =>
|
|
199
|
+
createFieldArrayContent(remove, index),
|
|
200
|
+
)}
|
|
201
|
+
{checkFieldArrayMaxSize(
|
|
202
|
+
lodash.get(form.values, arrayField.id)?.length,
|
|
203
|
+
) && createArrayItemAddButton(push)}
|
|
204
|
+
{createErrorList(form)}
|
|
205
|
+
</>
|
|
206
|
+
)}
|
|
207
|
+
</FieldArray>
|
|
208
|
+
);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
return isContainerVisible() ? (
|
|
212
|
+
<ContainerComponent>
|
|
213
|
+
<ContentArrayField />
|
|
214
|
+
</ContainerComponent>
|
|
215
|
+
) : (
|
|
216
|
+
<ContentArrayField />
|
|
203
217
|
);
|
|
204
218
|
};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import * as Yup from "yup";
|
|
2
|
+
|
|
3
|
+
import { ArrayField, GroupField } from "../../../../types";
|
|
4
|
+
import {
|
|
5
|
+
ButtonComponent,
|
|
6
|
+
Container,
|
|
7
|
+
TextboxElement,
|
|
8
|
+
TextboxField,
|
|
9
|
+
} from "../../components";
|
|
10
|
+
import { INvsDynamicForm, NvsDynamicForm } from "../../..";
|
|
11
|
+
|
|
12
|
+
import { ChangeEvent } from "react";
|
|
13
|
+
|
|
14
|
+
export default {
|
|
15
|
+
component: NvsDynamicForm,
|
|
16
|
+
title: "Array Field",
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const ArrayAndContainer: { args: INvsDynamicForm; name: string } = {
|
|
20
|
+
name: "Container",
|
|
21
|
+
args: {
|
|
22
|
+
onSubmit: (values) => {
|
|
23
|
+
alert(JSON.stringify(values));
|
|
24
|
+
},
|
|
25
|
+
container: Container,
|
|
26
|
+
containerVisible: true,
|
|
27
|
+
useGroupContainer: true,
|
|
28
|
+
useContainersOutsideGroup: true,
|
|
29
|
+
containerOptions: {
|
|
30
|
+
title: "Personal Information",
|
|
31
|
+
},
|
|
32
|
+
submitButtonDefaultOptions: {
|
|
33
|
+
label: "Save",
|
|
34
|
+
isFullWidth: true,
|
|
35
|
+
position: "right",
|
|
36
|
+
},
|
|
37
|
+
buttonComponent: ButtonComponent,
|
|
38
|
+
formElements: {
|
|
39
|
+
textbox: {
|
|
40
|
+
component: TextboxElement,
|
|
41
|
+
class: TextboxField,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
fields: [
|
|
45
|
+
new TextboxField({
|
|
46
|
+
id: "firstName",
|
|
47
|
+
label: "First Name",
|
|
48
|
+
placeholder: "Enter your first name",
|
|
49
|
+
defaultValue: "ismet",
|
|
50
|
+
validate: Yup.string().required(),
|
|
51
|
+
onChange: (event) => {
|
|
52
|
+
console.log((event as ChangeEvent<HTMLInputElement>).target.value);
|
|
53
|
+
},
|
|
54
|
+
screenSize: {
|
|
55
|
+
desktop: 6,
|
|
56
|
+
mobile: 6,
|
|
57
|
+
},
|
|
58
|
+
}),
|
|
59
|
+
new TextboxField({
|
|
60
|
+
id: "lastName",
|
|
61
|
+
label: "Last Name",
|
|
62
|
+
placeholder: "Enter your last name",
|
|
63
|
+
validate: Yup.string().required(),
|
|
64
|
+
screenSize: {
|
|
65
|
+
desktop: 6,
|
|
66
|
+
mobile: 6,
|
|
67
|
+
},
|
|
68
|
+
}),
|
|
69
|
+
new ArrayField({
|
|
70
|
+
id: "addresses",
|
|
71
|
+
label: "Addresses",
|
|
72
|
+
containerVisible: true,
|
|
73
|
+
addButtonOptions: {
|
|
74
|
+
label: "Add Address",
|
|
75
|
+
},
|
|
76
|
+
defaultValues: [
|
|
77
|
+
{ cityName: "İzmir", districtName: "Göztepe" },
|
|
78
|
+
{ cityName: "İstanbul", districtName: "Kadıköy" },
|
|
79
|
+
],
|
|
80
|
+
validate: Yup.array().min(2).max(3),
|
|
81
|
+
fields: [
|
|
82
|
+
new TextboxField({
|
|
83
|
+
id: "cityName",
|
|
84
|
+
label: "City Name",
|
|
85
|
+
placeholder: "Enter your city name",
|
|
86
|
+
screenSize: 6,
|
|
87
|
+
validate: Yup.string().required(),
|
|
88
|
+
}),
|
|
89
|
+
new TextboxField({
|
|
90
|
+
id: "districtName",
|
|
91
|
+
label: "district Name",
|
|
92
|
+
placeholder: "Enter your district name",
|
|
93
|
+
screenSize: 6,
|
|
94
|
+
}),
|
|
95
|
+
],
|
|
96
|
+
}),
|
|
97
|
+
],
|
|
98
|
+
},
|
|
99
|
+
};
|