@nvs-dynamic-form/react-core 1.4.0 → 1.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/elements/field/_template.d.ts +1 -1
- package/dist/cjs/nvs-dynamic-form/elements/field/_template.js +10 -4
- package/dist/cjs/nvs-dynamic-form/elements/field/_template.js.map +1 -1
- package/dist/cjs/types/form-field.type.d.ts +1 -1
- package/dist/esm/nvs-dynamic-form/elements/field/_template.d.ts +1 -1
- package/dist/esm/nvs-dynamic-form/elements/field/_template.js +10 -4
- package/dist/esm/nvs-dynamic-form/elements/field/_template.js.map +1 -1
- package/dist/esm/types/form-field.type.d.ts +1 -1
- package/lib/nvs-dynamic-form/_stories.tsx +6 -2
- package/lib/nvs-dynamic-form/elements/field/_template.tsx +10 -12
- package/lib/types/form-field.type.tsx +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IField } from "./_type";
|
|
3
|
-
export declare const Field: ({ formElements, field: { fieldType, screenSize,
|
|
3
|
+
export declare const Field: ({ formElements, field: { fieldType, screenSize, onBlur, onChange, ...fieldProps }, }: IField) => React.JSX.Element;
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.Field = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const formik_1 = require("formik");
|
|
9
|
-
const Field = ({ formElements, field: { fieldType, screenSize = 12,
|
|
10
|
-
const [formikField, meta] = (0, formik_1.useField)({
|
|
9
|
+
const Field = ({ formElements, field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps }, }) => {
|
|
10
|
+
const [formikField, meta, helpers] = (0, formik_1.useField)({
|
|
11
11
|
id: fieldProps.id,
|
|
12
12
|
name: fieldProps.id,
|
|
13
13
|
});
|
|
@@ -25,8 +25,14 @@ const Field = ({ formElements, field: { fieldType, screenSize = 12, defaultValue
|
|
|
25
25
|
return className.join(" ");
|
|
26
26
|
};
|
|
27
27
|
const onChangeHandler = (event) => {
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
if (Array.isArray(event)) {
|
|
29
|
+
helpers.setValue(event);
|
|
30
|
+
onChange && onChange(event);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
onChange && onChange(event);
|
|
34
|
+
formikField.onChange(event);
|
|
35
|
+
}
|
|
30
36
|
};
|
|
31
37
|
const onBlurHandler = (event) => {
|
|
32
38
|
onBlur && onBlur(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAuD;AAGvD,mCAAkC;AAE3B,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAuD;AAGvD,mCAAkC;AAE3B,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAC/D,EAAE,EAAE;IACX,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,iBAAQ,EAAC;QAC5C,EAAE,EAAE,UAAU,CAAC,EAAE;QACjB,IAAI,EAAE,UAAU,CAAC,EAAE;KACpB,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,GAAW,EAAE;QACxC,MAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,IAAI,OAAO,UAAU,IAAI,QAAQ;YAAE,SAAS,CAAC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,CAAC;aACtE,CAAC;YACJ,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAmC,EAAE,EAAE;QAC9D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxB,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC5B,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC1C,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,YAAY,CAAC,SAAU,CAAC,EAAE,SAAS,CAAC;IAClD,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,uCAAK,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE;QACxD,8BAAC,KAAK,OACA,UAAU,KACV,WAAW,EACf,QAAQ,EAAE,eAAe,EACzB,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAC1D,CACE,CACP,CAAC,CAAC,CAAC,CACF,6DAAK,CACN,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,KAAK,SAiDhB"}
|
|
@@ -9,7 +9,7 @@ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
|
|
|
9
9
|
screenSize?: ScreenSizeType | IScreenSize;
|
|
10
10
|
validate?: Yup.AnySchema;
|
|
11
11
|
error?: string;
|
|
12
|
-
onChange?: (event: ChangeEvent<HtmlElement>) => void;
|
|
12
|
+
onChange?: (event: ChangeEvent<HtmlElement> | Array<unknown>) => void;
|
|
13
13
|
onBlur?: (event: FocusEvent<HtmlElement>) => void;
|
|
14
14
|
constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
|
|
15
15
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IField } from "./_type";
|
|
3
|
-
export declare const Field: ({ formElements, field: { fieldType, screenSize,
|
|
3
|
+
export declare const Field: ({ formElements, field: { fieldType, screenSize, onBlur, onChange, ...fieldProps }, }: IField) => React.JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { useField } from "formik";
|
|
3
|
-
export const Field = ({ formElements, field: { fieldType, screenSize = 12,
|
|
4
|
-
const [formikField, meta] = useField({
|
|
3
|
+
export const Field = ({ formElements, field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps }, }) => {
|
|
4
|
+
const [formikField, meta, helpers] = useField({
|
|
5
5
|
id: fieldProps.id,
|
|
6
6
|
name: fieldProps.id,
|
|
7
7
|
});
|
|
@@ -19,8 +19,14 @@ export const Field = ({ formElements, field: { fieldType, screenSize = 12, defau
|
|
|
19
19
|
return className.join(" ");
|
|
20
20
|
};
|
|
21
21
|
const onChangeHandler = (event) => {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
if (Array.isArray(event)) {
|
|
23
|
+
helpers.setValue(event);
|
|
24
|
+
onChange && onChange(event);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
onChange && onChange(event);
|
|
28
|
+
formikField.onChange(event);
|
|
29
|
+
}
|
|
24
30
|
};
|
|
25
31
|
const onBlurHandler = (event) => {
|
|
26
32
|
onBlur && onBlur(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAC/D,EAAE,EAAE;IACX,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC5C,EAAE,EAAE,UAAU,CAAC,EAAE;QACjB,IAAI,EAAE,UAAU,CAAC,EAAE;KACpB,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,GAAW,EAAE;QACxC,MAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,IAAI,OAAO,UAAU,IAAI,QAAQ;YAAE,SAAS,CAAC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,CAAC;aACtE,CAAC;YACJ,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAmC,EAAE,EAAE;QAC9D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxB,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC5B,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC1C,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,YAAY,CAAC,SAAU,CAAC,EAAE,SAAS,CAAC;IAClD,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,6BAAK,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE;QACxD,oBAAC,KAAK,OACA,UAAU,KACV,WAAW,EACf,QAAQ,EAAE,eAAe,EACzB,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAC1D,CACE,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -9,7 +9,7 @@ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
|
|
|
9
9
|
screenSize?: ScreenSizeType | IScreenSize;
|
|
10
10
|
validate?: Yup.AnySchema;
|
|
11
11
|
error?: string;
|
|
12
|
-
onChange?: (event: ChangeEvent<HtmlElement>) => void;
|
|
12
|
+
onChange?: (event: ChangeEvent<HtmlElement> | Array<unknown>) => void;
|
|
13
13
|
onBlur?: (event: FocusEvent<HtmlElement>) => void;
|
|
14
14
|
constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
|
|
15
15
|
}
|
|
@@ -17,8 +17,10 @@ const ButtonComponent = ({ children }: { children: string }) => {
|
|
|
17
17
|
);
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const TextboxElement = (
|
|
21
|
-
return
|
|
20
|
+
const TextboxElement = ({ defaultValue, ...props }: TextboxField) => {
|
|
21
|
+
return (
|
|
22
|
+
<input style={{ width: "100%", boxSizing: "border-box" }} {...props} />
|
|
23
|
+
);
|
|
22
24
|
};
|
|
23
25
|
|
|
24
26
|
class TextboxField extends FieldBase<string> {
|
|
@@ -68,6 +70,7 @@ export const Default: { args: INvsDynamicForm } = {
|
|
|
68
70
|
},
|
|
69
71
|
screenSize: {
|
|
70
72
|
desktop: 6,
|
|
73
|
+
mobile: 6,
|
|
71
74
|
},
|
|
72
75
|
}),
|
|
73
76
|
new TextboxField({
|
|
@@ -77,6 +80,7 @@ export const Default: { args: INvsDynamicForm } = {
|
|
|
77
80
|
validate: Yup.string().required(),
|
|
78
81
|
screenSize: {
|
|
79
82
|
desktop: 6,
|
|
83
|
+
mobile: 6,
|
|
80
84
|
},
|
|
81
85
|
}),
|
|
82
86
|
new TextboxField({
|
|
@@ -5,16 +5,9 @@ import { useField } from "formik";
|
|
|
5
5
|
|
|
6
6
|
export const Field = ({
|
|
7
7
|
formElements,
|
|
8
|
-
field: {
|
|
9
|
-
fieldType,
|
|
10
|
-
screenSize = 12,
|
|
11
|
-
defaultValue,
|
|
12
|
-
onBlur,
|
|
13
|
-
onChange,
|
|
14
|
-
...fieldProps
|
|
15
|
-
},
|
|
8
|
+
field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps },
|
|
16
9
|
}: IField) => {
|
|
17
|
-
const [formikField, meta] = useField({
|
|
10
|
+
const [formikField, meta, helpers] = useField({
|
|
18
11
|
id: fieldProps.id,
|
|
19
12
|
name: fieldProps.id,
|
|
20
13
|
});
|
|
@@ -30,9 +23,14 @@ export const Field = ({
|
|
|
30
23
|
return className.join(" ");
|
|
31
24
|
};
|
|
32
25
|
|
|
33
|
-
const onChangeHandler = (event: ChangeEvent) => {
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
const onChangeHandler = (event: ChangeEvent | Array<unknown>) => {
|
|
27
|
+
if (Array.isArray(event)) {
|
|
28
|
+
helpers.setValue(event);
|
|
29
|
+
onChange && onChange(event);
|
|
30
|
+
} else {
|
|
31
|
+
onChange && onChange(event);
|
|
32
|
+
formikField.onChange(event);
|
|
33
|
+
}
|
|
36
34
|
};
|
|
37
35
|
|
|
38
36
|
const onBlurHandler = (event: FocusEvent) => {
|
|
@@ -11,7 +11,7 @@ export abstract class FieldBase<ValueType, HtmlElement = any> {
|
|
|
11
11
|
screenSize?: ScreenSizeType | IScreenSize;
|
|
12
12
|
validate?: Yup.AnySchema;
|
|
13
13
|
error?: string;
|
|
14
|
-
onChange?: (event: ChangeEvent<HtmlElement>) => void;
|
|
14
|
+
onChange?: (event: ChangeEvent<HtmlElement> | Array<unknown>) => void;
|
|
15
15
|
onBlur?: (event: FocusEvent<HtmlElement>) => void;
|
|
16
16
|
|
|
17
17
|
constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType) {
|