@geoinsight/react-components 0.6.9 → 0.6.11

package/dist/cjs/index.js

@@ -187,16 +187,17 @@ 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 }) {
-    const methods = reactHookForm.useForm();
+}, initialState, ...rest }) {
+    const methods = reactHookForm.useForm(initialState);
     const { formState: { isValid }, } = methods;
     const [result, setResult] = react.useState({
         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 = {
@@ -208,7 +209,7 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
                         icon.className), children: icon.element }))] })] }));
 }
 
-function FormInput({ name, isRequired, error, ...rest }) {
+function FormInput({ name, isRequired, error, defaultValue, ...rest }) {
     const { control } = reactHookForm.useFormContext();
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
             ...(isRequired
@@ -220,7 +221,7 @@ function FormInput({ name, isRequired, error, ...rest }) {
             return (jsxRuntime.jsx(Input, { isRequired: true, error: {
                     is: !!error,
                     message: error?.message,
-                }, ...field, ...rest }));
+                }, defaultValue: defaultValue, ...field, ...rest }));
         } }));
 }
 
@@ -264,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);
@@ -298,6 +299,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
             if (clearError) {
                 clearError(name);
             }
+            if (resetForm) {
+                resetForm();
+            }
         }
         else {
             setValue(value);
@@ -325,8 +329,8 @@ 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, resetField } = reactHookForm.useFormContext();
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
             ...(isRequired
                 ? {
@@ -337,7 +341,10 @@ 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) => {
+                    setValue(field, undefined);
+                    unregister(field);
+                }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
         } }));
 }
 

package/dist/esm/index.js

@@ -185,16 +185,17 @@ 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 }) {
-    const methods = useForm();
+}, initialState, ...rest }) {
+    const methods = useForm(initialState);
     const { formState: { isValid }, } = methods;
     const [result, setResult] = useState({
         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 = {
@@ -206,7 +207,7 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
                         icon.className), children: icon.element }))] })] }));
 }
 
-function FormInput({ name, isRequired, error, ...rest }) {
+function FormInput({ name, isRequired, error, defaultValue, ...rest }) {
     const { control } = useFormContext();
     return (jsx(Controller, { name: name, control: control, rules: {
             ...(isRequired
@@ -218,7 +219,7 @@ function FormInput({ name, isRequired, error, ...rest }) {
             return (jsx(Input, { isRequired: true, error: {
                     is: !!error,
                     message: error?.message,
-                }, ...field, ...rest }));
+                }, defaultValue: defaultValue, ...field, ...rest }));
         } }));
 }
 
@@ -262,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);
@@ -296,6 +297,9 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
             if (clearError) {
                 clearError(name);
             }
+            if (resetForm) {
+                resetForm();
+            }
         }
         else {
             setValue(value);
@@ -323,8 +327,8 @@ 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, resetField } = useFormContext();
     return (jsx(Controller, { name: name, control: control, rules: {
             ...(isRequired
                 ? {
@@ -335,7 +339,10 @@ 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) => {
+                    setValue(field, undefined);
+                    unregister(field);
+                }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
         } }));
 }
 

package/package.json

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