@nvs-dynamic-form/react-core 1.3.1 → 1.4.1

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.
Files changed (16) hide show
  1. package/dist/cjs/nvs-dynamic-form/elements/field/_template.d.ts +2 -2
  2. package/dist/cjs/nvs-dynamic-form/elements/field/_template.js +10 -2
  3. package/dist/cjs/nvs-dynamic-form/elements/field/_template.js.map +1 -1
  4. package/dist/cjs/types/form-field.type.d.ts +5 -2
  5. package/dist/cjs/types/form-field.type.js +2 -0
  6. package/dist/cjs/types/form-field.type.js.map +1 -1
  7. package/dist/esm/nvs-dynamic-form/elements/field/_template.d.ts +2 -2
  8. package/dist/esm/nvs-dynamic-form/elements/field/_template.js +10 -2
  9. package/dist/esm/nvs-dynamic-form/elements/field/_template.js.map +1 -1
  10. package/dist/esm/types/form-field.type.d.ts +5 -2
  11. package/dist/esm/types/form-field.type.js +2 -0
  12. package/dist/esm/types/form-field.type.js.map +1 -1
  13. package/lib/nvs-dynamic-form/_stories.tsx +10 -3
  14. package/lib/nvs-dynamic-form/elements/field/_template.tsx +15 -2
  15. package/lib/types/form-field.type.tsx +7 -2
  16. package/package.json +1 -1
package/dist/cjs/nvs-dynamic-form/elements/field/_template.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { IField } from "./_type";
2
1
  import React from "react";
3
- export declare const Field: ({ formElements, field: { fieldType, screenSize, defaultValue, ...fieldProps }, }: IField) => React.JSX.Element;
2
+ import { IField } from "./_type";
3
+ export declare const Field: ({ formElements, field: { fieldType, screenSize, onBlur, onChange, ...fieldProps }, }: IField) => React.JSX.Element;
package/dist/cjs/nvs-dynamic-form/elements/field/_template.js CHANGED
@@ -6,7 +6,7 @@ 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, defaultValue, ...fieldProps }, }) => {
9
+ const Field = ({ formElements, field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps }, }) => {
10
10
  const [formikField, meta] = (0, formik_1.useField)({
11
11
  id: fieldProps.id,
12
12
  name: fieldProps.id,
@@ -24,9 +24,17 @@ const Field = ({ formElements, field: { fieldType, screenSize = 12, defaultValue
24
24
  }
25
25
  return className.join(" ");
26
26
  };
27
+ const onChangeHandler = (event) => {
28
+ onChange && onChange(event);
29
+ formikField.onChange(event);
30
+ };
31
+ const onBlurHandler = (event) => {
32
+ onBlur && onBlur(event);
33
+ formikField.onBlur(event);
34
+ };
27
35
  const Field = formElements[fieldType]?.component;
28
36
  return Field ? (react_1.default.createElement("div", { key: fieldProps.id, className: createFieldItemClass() },
29
- react_1.default.createElement(Field, { ...fieldProps, ...formikField, error: meta.error && meta.touched ? meta.error : undefined }))) : (react_1.default.createElement(react_1.default.Fragment, null));
37
+ react_1.default.createElement(Field, { ...fieldProps, ...formikField, onChange: onChangeHandler, onBlur: onBlurHandler, error: meta.error && meta.touched ? meta.error : undefined }))) : (react_1.default.createElement(react_1.default.Fragment, null));
30
38
  };
31
39
  exports.Field = Field;
32
40
  //# sourceMappingURL=_template.js.map
package/dist/cjs/nvs-dynamic-form/elements/field/_template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,mCAAkC;AAE3B,MAAM,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAC3D,EAAE,EAAE;IACX,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,IAAA,iBAAQ,EAAC;QACnC,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,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,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;AAhCW,QAAA,KAAK,SAgChB"}
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,CAAC,GAAG,IAAA,iBAAQ,EAAC;QACnC,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,KAAkB,EAAE,EAAE;QAC7C,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5B,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,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;AA5CW,QAAA,KAAK,SA4ChB"}
package/dist/cjs/types/form-field.type.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  import * as Yup from "yup";
2
+ import { ChangeEvent, FocusEvent } from "react";
2
3
  import { IScreenSize, ScreenSizeType } from "./screen-size.type";
3
- export declare abstract class FieldBase<ValueType> {
4
+ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
4
5
  id: string;
5
- label: string;
6
+ label?: string;
6
7
  fieldType?: string;
7
8
  defaultValue?: ValueType;
8
9
  screenSize?: ScreenSizeType | IScreenSize;
9
10
  validate?: Yup.AnySchema;
10
11
  error?: string;
12
+ onChange?: (event: ChangeEvent<HtmlElement>) => void;
13
+ onBlur?: (event: FocusEvent<HtmlElement>) => void;
11
14
  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
12
15
  }
package/dist/cjs/types/form-field.type.js CHANGED
@@ -9,6 +9,8 @@ class FieldBase {
9
9
  this.fieldType = options.fieldType;
10
10
  this.screenSize = options.screenSize ?? 12;
11
11
  this.validate = options.validate;
12
+ this.onChange = options.onChange;
13
+ this.onBlur = options.onBlur;
12
14
  }
13
15
  }
14
16
  exports.FieldBase = FieldBase;
package/dist/cjs/types/form-field.type.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":";;;AAIA,MAAsB,SAAS;IAS7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IACnC,CAAC;CACF;AAjBD,8BAiBC"}
1
+ {"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":";;;AAKA,MAAsB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF;AArBD,8BAqBC"}
package/dist/esm/nvs-dynamic-form/elements/field/_template.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { IField } from "./_type";
2
1
  import React from "react";
3
- export declare const Field: ({ formElements, field: { fieldType, screenSize, defaultValue, ...fieldProps }, }: IField) => React.JSX.Element;
2
+ import { IField } from "./_type";
3
+ export declare const Field: ({ formElements, field: { fieldType, screenSize, onBlur, onChange, ...fieldProps }, }: IField) => React.JSX.Element;
package/dist/esm/nvs-dynamic-form/elements/field/_template.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { useField } from "formik";
3
- export const Field = ({ formElements, field: { fieldType, screenSize = 12, defaultValue, ...fieldProps }, }) => {
3
+ export const Field = ({ formElements, field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps }, }) => {
4
4
  const [formikField, meta] = useField({
5
5
  id: fieldProps.id,
6
6
  name: fieldProps.id,
@@ -18,8 +18,16 @@ export const Field = ({ formElements, field: { fieldType, screenSize = 12, defau
18
18
  }
19
19
  return className.join(" ");
20
20
  };
21
+ const onChangeHandler = (event) => {
22
+ onChange && onChange(event);
23
+ formikField.onChange(event);
24
+ };
25
+ const onBlurHandler = (event) => {
26
+ onBlur && onBlur(event);
27
+ formikField.onBlur(event);
28
+ };
21
29
  const Field = formElements[fieldType]?.component;
22
30
  return Field ? (React.createElement("div", { key: fieldProps.id, className: createFieldItemClass() },
23
- React.createElement(Field, { ...fieldProps, ...formikField, error: meta.error && meta.touched ? meta.error : undefined }))) : (React.createElement(React.Fragment, null));
31
+ React.createElement(Field, { ...fieldProps, ...formikField, onChange: onChangeHandler, onBlur: onBlurHandler, error: meta.error && meta.touched ? meta.error : undefined }))) : (React.createElement(React.Fragment, null));
24
32
  };
25
33
  //# sourceMappingURL=_template.js.map
package/dist/esm/nvs-dynamic-form/elements/field/_template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../../lib/nvs-dynamic-form/elements/field/_template.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,YAAY,EAAE,GAAG,UAAU,EAAE,GAC3D,EAAE,EAAE;IACX,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC;QACnC,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,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,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"}
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,CAAC,GAAG,QAAQ,CAAC;QACnC,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,KAAkB,EAAE,EAAE;QAC7C,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5B,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,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"}
package/dist/esm/types/form-field.type.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  import * as Yup from "yup";
2
+ import { ChangeEvent, FocusEvent } from "react";
2
3
  import { IScreenSize, ScreenSizeType } from "./screen-size.type";
3
- export declare abstract class FieldBase<ValueType> {
4
+ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
4
5
  id: string;
5
- label: string;
6
+ label?: string;
6
7
  fieldType?: string;
7
8
  defaultValue?: ValueType;
8
9
  screenSize?: ScreenSizeType | IScreenSize;
9
10
  validate?: Yup.AnySchema;
10
11
  error?: string;
12
+ onChange?: (event: ChangeEvent<HtmlElement>) => void;
13
+ onBlur?: (event: FocusEvent<HtmlElement>) => void;
11
14
  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
12
15
  }
package/dist/esm/types/form-field.type.js CHANGED
@@ -6,6 +6,8 @@ export class FieldBase {
6
6
  this.fieldType = options.fieldType;
7
7
  this.screenSize = options.screenSize ?? 12;
8
8
  this.validate = options.validate;
9
+ this.onChange = options.onChange;
10
+ this.onBlur = options.onBlur;
9
11
  }
10
12
  }
11
13
  //# sourceMappingURL=form-field.type.js.map
package/dist/esm/types/form-field.type.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":"AAIA,MAAM,OAAgB,SAAS;IAS7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IACnC,CAAC;CACF"}
1
+ {"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":"AAKA,MAAM,OAAgB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF"}
package/lib/nvs-dynamic-form/_stories.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { INvsDynamicForm, NvsDynamicForm } from ".";
2
2
  import * as Yup from "yup";
3
3
 
4
- import React from "react";
4
+ import React, { ChangeEvent } from "react";
5
5
  import { FieldBase } from "../types";
6
6
 
7
7
  export default {
@@ -17,8 +17,10 @@ const ButtonComponent = ({ children }: { children: string }) => {
17
17
  );
18
18
  };
19
19
 
20
- const TextboxElement = (opt: TextboxField) => {
21
- return <input style={{ width: "100%", boxSizing: "border-box" }} {...opt} />;
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> {
@@ -63,8 +65,12 @@ export const Default: { args: INvsDynamicForm } = {
63
65
  placeholder: "Enter your first name",
64
66
  defaultValue: "ismet",
65
67
  validate: Yup.string().required(),
68
+ onChange: (event: ChangeEvent<HTMLInputElement>) => {
69
+ console.log(event.target.value);
70
+ },
66
71
  screenSize: {
67
72
  desktop: 6,
73
+ mobile: 6,
68
74
  },
69
75
  }),
70
76
  new TextboxField({
@@ -74,6 +80,7 @@ export const Default: { args: INvsDynamicForm } = {
74
80
  validate: Yup.string().required(),
75
81
  screenSize: {
76
82
  desktop: 6,
83
+ mobile: 6,
77
84
  },
78
85
  }),
79
86
  new TextboxField({
package/lib/nvs-dynamic-form/elements/field/_template.tsx CHANGED
@@ -1,10 +1,11 @@
1
+ import React, { ChangeEvent, FocusEvent } from "react";
2
+
1
3
  import { IField } from "./_type";
2
- import React from "react";
3
4
  import { useField } from "formik";
4
5
 
5
6
  export const Field = ({
6
7
  formElements,
7
- field: { fieldType, screenSize = 12, defaultValue, ...fieldProps },
8
+ field: { fieldType, screenSize = 12, onBlur, onChange, ...fieldProps },
8
9
  }: IField) => {
9
10
  const [formikField, meta] = useField({
10
11
  id: fieldProps.id,
@@ -22,12 +23,24 @@ export const Field = ({
22
23
  return className.join(" ");
23
24
  };
24
25
 
26
+ const onChangeHandler = (event: ChangeEvent) => {
27
+ onChange && onChange(event);
28
+ formikField.onChange(event);
29
+ };
30
+
31
+ const onBlurHandler = (event: FocusEvent) => {
32
+ onBlur && onBlur(event);
33
+ formikField.onBlur(event);
34
+ };
35
+
25
36
  const Field = formElements[fieldType!]?.component;
26
37
  return Field ? (
27
38
  <div key={fieldProps.id} className={createFieldItemClass()}>
28
39
  <Field
29
40
  {...fieldProps}
30
41
  {...formikField}
42
+ onChange={onChangeHandler}
43
+ onBlur={onBlurHandler}
31
44
  error={meta.error && meta.touched ? meta.error : undefined}
32
45
  />
33
46
  </div>
package/lib/types/form-field.type.tsx CHANGED
@@ -1,15 +1,18 @@
1
1
  import * as Yup from "yup";
2
2
 
3
+ import { ChangeEvent, FocusEvent } from "react";
3
4
  import { IScreenSize, ScreenSizeType } from "./screen-size.type";
4
5
 
5
- export abstract class FieldBase<ValueType> {
6
+ export abstract class FieldBase<ValueType, HtmlElement = any> {
6
7
  id!: string;
7
- label!: string;
8
+ label?: string;
8
9
  fieldType?: string;
9
10
  defaultValue?: ValueType;
10
11
  screenSize?: ScreenSizeType | IScreenSize;
11
12
  validate?: Yup.AnySchema;
12
13
  error?: string;
14
+ onChange?: (event: ChangeEvent<HtmlElement>) => void;
15
+ onBlur?: (event: FocusEvent<HtmlElement>) => void;
13
16
 
14
17
  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType) {
15
18
  this.defaultValue = options.defaultValue ?? fieldDefaultValue;
@@ -18,5 +21,7 @@ export abstract class FieldBase<ValueType> {
18
21
  this.fieldType = options.fieldType;
19
22
  this.screenSize = options.screenSize ?? 12;
20
23
  this.validate = options.validate;
24
+ this.onChange = options.onChange;
25
+ this.onBlur = options.onBlur;
21
26
  }
22
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nvs-dynamic-form/react-core",
3
- "version": "1.3.1",
3
+ "version": "1.4.1",
4
4
  "types": "dist/cjs/index.d.ts",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",