@geoinsight/react-components 0.6.8 → 0.6.10

package/dist/cjs/index.js

@@ -187,6 +187,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsxRuntime.jsx("div", { className: "accordion-content", children: children })));
 };
 
+// how do I solve reseting the form outside the form
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
@@ -196,14 +197,13 @@ function Form({ children, onSubmit, submitButton = {
         message: "",
         isSuccess: false,
     });
-    return (jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: jsxRuntime.jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, setResult)), ...rest, children: [children, result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
+    return (jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: jsxRuntime.jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, methods, setResult)), ...rest, children: [children, result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
 }
 
 function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
 }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    console.log(error);
     return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsxs("div", { className: "input__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "input__header--error", children: error.message }))] }), jsxRuntime.jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right", 
                         // `input__icon--${icon.position || "right"}`,
                         icon.className), children: icon.element }))] })] }));
@@ -265,7 +265,7 @@ function FormTextArea({ name, isRequired, error, ...rest }) {
 
 function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, 
 // inputProps,
-setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
+setFormSelected, clearError, resetForm, onFormBlur, handleSelect, ...rest }) {
     const [isOpen, setIsOpen] = react.useState(false);
     const [value, setValue] = react.useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = react.useState(options);
@@ -299,6 +299,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
             if (clearError) {
                 clearError(name);
             }
+            if (resetForm) {
+                resetForm();
+            }
         }
         else {
             setValue(value);
@@ -326,8 +329,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
                 }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
 }
 
-function FormSelect({ name, isRequired, error, ...rest }) {
-    const { control, setValue, clearErrors } = reactHookForm.useFormContext();
+function FormSelect({ name, isRequired, error, fieldsToReset, ...rest }) {
+    const { control, setValue, clearErrors, unregister } = reactHookForm.useFormContext();
+    console.log(fieldsToReset);
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
             ...(isRequired
                 ? {
@@ -338,7 +342,7 @@ function FormSelect({ name, isRequired, error, ...rest }) {
             return (jsxRuntime.jsx(Select, { isRequired: true, error: {
                     is: !!error,
                     message: error?.message,
-                }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
+                }, setFormSelected: setValue, resetForm: () => fieldsToReset && fieldsToReset.map((field) => unregister(field)), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
         } }));
 }
 

package/dist/esm/index.js

@@ -185,6 +185,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
         toggle[label].isToggle && (jsx("div", { className: "accordion-content", children: children })));
 };
 
+// how do I solve reseting the form outside the form
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
@@ -194,14 +195,13 @@ function Form({ children, onSubmit, submitButton = {
         message: "",
         isSuccess: false,
     });
-    return (jsx(FormProvider, { ...methods, children: jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, setResult)), ...rest, children: [children, result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
+    return (jsx(FormProvider, { ...methods, children: jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, methods, setResult)), ...rest, children: [children, result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
 }
 
 function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
 }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    console.log(error);
     return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxs("div", { className: "input__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right", 
                         // `input__icon--${icon.position || "right"}`,
                         icon.className), children: icon.element }))] })] }));
@@ -263,7 +263,7 @@ function FormTextArea({ name, isRequired, error, ...rest }) {
 
 function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, 
 // inputProps,
-setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
+setFormSelected, clearError, resetForm, onFormBlur, handleSelect, ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = useState(options);
@@ -297,6 +297,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
             if (clearError) {
                 clearError(name);
             }
+            if (resetForm) {
+                resetForm();
+            }
         }
         else {
             setValue(value);
@@ -324,8 +327,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
                 }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
 }
 
-function FormSelect({ name, isRequired, error, ...rest }) {
-    const { control, setValue, clearErrors } = useFormContext();
+function FormSelect({ name, isRequired, error, fieldsToReset, ...rest }) {
+    const { control, setValue, clearErrors, unregister } = useFormContext();
+    console.log(fieldsToReset);
     return (jsx(Controller, { name: name, control: control, rules: {
             ...(isRequired
                 ? {
@@ -336,7 +340,7 @@ function FormSelect({ name, isRequired, error, ...rest }) {
             return (jsx(Select, { isRequired: true, error: {
                     is: !!error,
                     message: error?.message,
-                }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
+                }, setFormSelected: setValue, resetForm: () => fieldsToReset && fieldsToReset.map((field) => unregister(field)), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
         } }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",