Merge pull request #626 from invoiceninja/save-button-hook

Dynamic control of save button
invoiceninja · Apr 20, 2023 · d0ca5a0 · d0ca5a0
2 parents b3d0586 + 03a00d4
commit d0ca5a0
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 35 deletions.
diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx
@@ -49,6 +49,7 @@ import { useCurrentCompanyUser } from '$app/common/hooks/useCurrentCompanyUser';
 import { useEnabled } from '$app/common/guards/guards/enabled';
 import { Dropdown } from '$app/components/dropdown/Dropdown';
 import { DropdownElement } from '$app/components/dropdown/DropdownElement';
+import { useSaveBtn } from '$app/components/layouts/common/hooks';
 
 export interface SaveOption {
   label: string;
@@ -355,6 +356,7 @@ export function Default(props: Props) {
   ];
 
   const { isOwner } = useAdmin();
+  const saveBtn = useSaveBtn();
 
   return (
     <>
@@ -423,47 +425,62 @@ export function Default(props: Props) {
                   </Button>
                 )}
 
-                {props.onSaveClick && (
+                {(props.onSaveClick || saveBtn) && (
                   <div>
-                    {props.onSaveClick && !props.additionalSaveOptions && (
-                      <Button
-                        onClick={props.onSaveClick}
-                        disabled={props.disableSaveButton}
-                        disableWithoutIcon
-                      >
-                        {props.saveButtonLabel ?? t('save')}
-                      </Button>
-                    )}
-
-                    {props.onSaveClick && props.additionalSaveOptions && (
-                      <div className="flex">
+                    {(props.onSaveClick || saveBtn?.onClick) &&
+                      !props.additionalSaveOptions && (
                         <Button
-                          className="rounded-br-none rounded-tr-none px-3"
-                          onClick={props.onSaveClick}
-                          disabled={props.disableSaveButton}
+                          onClick={saveBtn?.onClick || props.onSaveClick}
+                          disabled={
+                            saveBtn?.disableSaveButton ||
+                            props.disableSaveButton
+                          }
                           disableWithoutIcon
                         >
-                          {props.saveButtonLabel ?? t('save')}
+                          {(saveBtn?.label || props.saveButtonLabel) ??
+                            t('save')}
                         </Button>
+                      )}
 
-                        <Dropdown
-                          className="rounded-bl-none rounded-tl-none h-full px-1 border-gray-200 border-l-1 border-y-0 border-r-0"
-                          cardActions
-                          disabled={props.disableSaveButton}
-                        >
-                          {props.additionalSaveOptions.map((option, index) => (
-                            <DropdownElement
-                              key={index}
-                              icon={option.icon}
-                              disabled={props.disableSaveButton}
-                              onClick={option.onClick}
-                            >
-                              {option.label}
-                            </DropdownElement>
-                          ))}
-                        </Dropdown>
-                      </div>
-                    )}
+                    {(props.onSaveClick || saveBtn?.onClick) &&
+                      props.additionalSaveOptions && (
+                        <div className="flex">
+                          <Button
+                            className="rounded-br-none rounded-tr-none px-3"
+                            onClick={saveBtn?.onClick || props.onSaveClick}
+                            disabled={
+                              saveBtn?.disableSaveButton ||
+                              props.disableSaveButton
+                            }
+                            disableWithoutIcon
+                          >
+                            {(saveBtn?.label || props.saveButtonLabel) ??
+                              t('save')}
+                          </Button>
+
+                          <Dropdown
+                            className="rounded-bl-none rounded-tl-none h-full px-1 border-gray-200 border-l-1 border-y-0 border-r-0"
+                            cardActions
+                            disabled={
+                              saveBtn?.disableSaveButton ||
+                              props.disableSaveButton
+                            }
+                          >
+                            {props.additionalSaveOptions.map(
+                              (option, index) => (
+                                <DropdownElement
+                                  key={index}
+                                  icon={option.icon}
+                                  disabled={props.disableSaveButton}
+                                  onClick={option.onClick}
+                                >
+                                  {option.label}
+                                </DropdownElement>
+                              )
+                            )}
+                          </Dropdown>
+                        </div>
+                      )}
                   </div>
                 )}
 

diff --git a/src/components/layouts/common/hooks.ts b/src/components/layouts/common/hooks.ts
@@ -9,6 +9,8 @@
  */
 
 import { useAdmin } from '$app/common/hooks/permissions/useHasPermission';
+import { atom, useAtom } from 'jotai';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -164,3 +166,27 @@ export function useSettingsRoutes() {
 
   return { basic, advanced };
 }
+
+interface SaveButton {
+  onClick: () => unknown;
+  label?: string;
+  disableSaveButton?: boolean;
+}
+
+export const saveBtnAtom = atom<SaveButton | null>(null);
+
+export function useSaveBtn(options?: SaveButton, deps: unknown[] = []) {
+  const [saveBtn, setSaveBtn] = useAtom(saveBtnAtom);
+
+  useEffect(() => {
+    if (options) {
+      setSaveBtn(options);
+    }
+
+    return () => {
+      setSaveBtn(null);
+    };
+  }, deps);
+
+  return saveBtn;
+}