destructure props in Modal

Expensify · Nov 13, 2023 · 20e80d1 · 20e80d1
1 parent a5e8a58
commit 20e80d1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/components/Modal/index.ios.tsx b/src/components/Modal/index.ios.tsx
@@ -3,13 +3,13 @@ import withWindowDimensions from '@components/withWindowDimensions';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
 
-function Modal(props: BaseModalProps) {
+function Modal({children, ...rest}: BaseModalProps) {
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...rest}
         >
-            {props.children}
+            {children}
         </BaseModal>
     );
 }

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -7,11 +7,11 @@ import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
 
-function Modal(props: BaseModalProps) {
+function Modal({fullscreen, onModalHide, type, onModalShow, children, ...rest}: BaseModalProps) {
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
 
     const setStatusBarColor = (color = themeColors.appBG) => {
-        if (!props.fullscreen) {
+        if (!fullscreen) {
             return;
         }
 
@@ -20,33 +20,34 @@ function Modal(props: BaseModalProps) {
 
     const hideModal = () => {
         setStatusBarColor(previousStatusBarColor);
-        props.onModalHide();
+        onModalHide();
     };
 
     const showModal = () => {
         const statusBarColor = StatusBar.getBackgroundColor();
 
-        const isFullScreenModal =
-            props.type === CONST.MODAL.MODAL_TYPE.CENTERED || props.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || props.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
+        const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
 
         if (statusBarColor) {
             setPreviousStatusBarColor(statusBarColor);
             // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
             setStatusBarColor(isFullScreenModal ? themeColors.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
         }
 
-        props.onModalShow?.();
+        onModalShow?.();
     };
 
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...rest}
             onModalHide={hideModal}
             onModalShow={showModal}
             avoidKeyboard={false}
+            fullscreen={fullscreen}
+            type={type}
         >
-            {props.children}
+            {children}
         </BaseModal>
     );
 }