Merge pull request #84 from perimetre/7.5.0

7.5.0

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.5.0] 2022-08-19
+
+### Added
+
+- Added `FormikSubmitOnChange` component
+
 ## [7.4.0] 2022-08-17
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/FormikSubmitOnChange/index.tsx

@@ -0,0 +1,26 @@
+import { useFormikContext } from 'formik';
+import { debounce } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+import fastDeepEqual from 'fast-deep-equal';
+
+/**
+ * Helper component that should be placed under the formik. That submits the form when the values change
+ */
+export const FormikSubmitOnChange: React.FC = () => {
+  const { values, initialValues, submitForm, dirty, errors } = useFormikContext();
+  const [previousValues, setPreviousValues] = useState<unknown>();
+
+  // Wrap it with a debounced method
+  const submit = useMemo(() => debounce(submitForm, 250, { maxWait: 500 }), [submitForm]);
+
+  useEffect(() => {
+    const hasErrors = errors && Object.entries(errors).length > 0;
+    const didChange = values !== initialValues && !fastDeepEqual(previousValues, values);
+    if (!hasErrors && (dirty || didChange)) {
+      submit();
+      setPreviousValues(values);
+    }
+  }, [submit, values, initialValues, dirty, errors, previousValues]);
+
+  return null;
+};

src/components/index.tsx

@@ -25,3 +25,4 @@ export * from './ExpertCard';
 export * from './ProgramCard';
 export * from './BaseCard';
 export * from './HorizontalResizeablePanel';
+export * from './FormikSubmitOnChange';