Expand props

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -18,7 +18,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
 
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) { // Esc
-      if (props.cancel && props.cancel.fn) props.cancel.fn()
+      if (props.cancelFn) props.cancelFn()
       handleHide()
     } else if (keyCode === 13) { // Enter
       enterHandler()
@@ -33,9 +33,9 @@ export const ModalDialog = (props: ModalDialogProps) => {
 
   const enterHandler = () => {
     if (state.toggleBtn) {
-      if (props.ok && props.ok.fn) props.ok.fn()
+      if (props.okFn) props.okFn()
     } else {
-      if (props.cancel && props.cancel.fn) props.cancel.fn()
+      if (props.cancelFn) props.cancelFn()
     }
     handleHide()
   }
@@ -79,29 +79,29 @@ export const ModalDialog = (props: ModalDialogProps) => {
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            { props.ok &&
+            { props.okLabel &&
               <span
                 data-id={`${props.id}-modal-footer-ok-react`}
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
-                  if (props.ok.fn) props.ok.fn()
+                  if (props.okFn) props.okFn()
                   handleHide()
                 }}
               >
-                { props.ok.label ? props.ok.label : 'OK' }
+                { props.okLabel ? props.okLabel : 'OK' }
               </span>
             }
-            { props.cancel &&
+            { props.cancelLabel &&
               <span
                 data-id={`${props.id}-modal-footer-cancel-react`}
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"
                 onClick={() => {
-                  if (props.cancel.fn) props.cancel.fn()
+                  if (props.cancelFn) props.cancelFn()
                   handleHide()
                 }}
               >
-                { props.cancel.label ? props.cancel.label : 'Cancel' }
+                { props.cancelLabel ? props.cancelLabel : 'Cancel' }
               </span>
             }
           </div>

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -2,8 +2,10 @@ export interface ModalDialogProps {
   id?: string
   title?: string,
   message?: string,
-  ok?: { label: string, fn: () => void },
-  cancel: { label: string, fn: () => void },
+  okLabel?: string,
+  okFn?: () => void,
+  cancelLabel?: string,
+  cancelFn?: () => void,
   modalClass?: string,
   showCancelIcon?: boolean,
   hide: boolean,

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -91,10 +91,8 @@ export const Toaster = (props: ToasterProps) => {
     <>
       <ModalDialog
         message={props.message}
-        cancel={{
-          label: 'Close',
-          fn: () => {}
-        }}
+        cancelLabel='Close'
+        cancelFn={() => {}}
         hide={!state.showModal}
         handleHide={hideFullMessage}
       />

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -145,14 +145,10 @@ export const Workspace = (props: WorkspaceProps) => {
       hide: true,
       title: '',
       message: null,
-      ok: {
-        label: '',
-        fn: () => {}
-      },
-      cancel: {
-        label: '',
-        fn: () => {}
-      },
+      okLabel: '',
+      okFn: () => {},
+      cancelLabel: '',
+      cancelFn: () => {},
       handleHide: null
     },
     loadingLocalhost: false,
@@ -168,41 +164,20 @@ export const Workspace = (props: WorkspaceProps) => {
   /* workspace creation, renaming and deletion */
 
   const renameCurrentWorkspace = () => {
-    modal('Rename Current Workspace', renameModalMessage(), {
-      label: 'OK',
-      fn: onFinishRenameWorkspace
-    }, {
-      label: '',
-      fn: () => {}
-    })
+    modal('Rename Current Workspace', renameModalMessage(), 'OK', onFinishRenameWorkspace, '', () => {})
   }
 
   const createWorkspace = () => {
-    modal('Create Workspace', createModalMessage(), {
-      label: 'OK',
-      fn: onFinishCreateWorkspace
-    }, {
-      label: '',
-      fn: () => {}
-    })
+    modal('Create Workspace', createModalMessage(), 'OK', onFinishCreateWorkspace, '', () => {})
   }
 
   const deleteCurrentWorkspace = () => {
-    modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', {
-      label: 'OK',
-      fn: onFinishDeleteWorkspace
-    }, {
-      label: '',
-      fn: () => {}
-    })
+    modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', 'OK', onFinishDeleteWorkspace, '', () => {})
   }
 
   const modalMessage = (title: string, body: string) => {
     setTimeout(() => { // wait for any previous modal a chance to close
-      modal(title, body, {
-        label: 'OK',
-        fn: () => {}
-      }, null)
+      modal(title, body, 'OK', () => {}, '', null)
     }, 200)
   }
 
@@ -297,7 +272,7 @@ export const Workspace = (props: WorkspaceProps) => {
     })
   }
 
-  const modal = async (title: string, message: string | JSX.Element, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => {
+  const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel: string, cancelFn: () => void) => {
     await setState(prevState => {
       return {
         ...prevState,
@@ -306,8 +281,10 @@ export const Workspace = (props: WorkspaceProps) => {
           hide: false,
           message,
           title,
-          ok,
-          cancel,
+          okLabel,
+          okFn,
+          cancelLabel,
+          cancelFn,
           handleHide: handleHideModal
         }
       }
@@ -339,8 +316,10 @@ export const Workspace = (props: WorkspaceProps) => {
         title={ state.modal.title }
         message={ state.modal.message }
         hide={ state.modal.hide }
-        ok={ state.modal.ok }
-        cancel={ state.modal.cancel }
+        okLabel={ state.modal.okLabel }
+        okFn={ state.modal.okFn }
+        cancelLabel={ state.modal.cancelLabel }
+        cancelFn={ state.modal.cancelFn }
         handleHide={ handleHideModal }>
         { (typeof state.modal.message !== 'string') && state.modal.message }
       </ModalDialog>