Merge pull request #13 from likhith-deriv/likhith/76897/mobiledialog-…

…migration-to-tsx Likhith/76897/mobiledialog migration to tsx
shayan-deriv · Nov 20, 2022 · 70cb3c1 · 70cb3c1
2 parents 8ccab44 + 59768c2
commit 70cb3c1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 30 deletions.
diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx
@@ -17,8 +17,8 @@ import Div100vh from 'react-div-100vh';
 type TDiv100vhContainerProps = {
     id?: string;
     height_offset?: string;
-    is_bypassed: boolean;
-    is_disabled: boolean;
+    is_bypassed?: boolean;
+    is_disabled?: boolean;
     max_height_offset?: string;
     className?: string;
     max_autoheight_offset?: string;
@@ -27,8 +27,8 @@ type TDiv100vhContainerProps = {
 const Div100vhContainer = ({
     children,
     className,
-    is_bypassed,
-    is_disabled,
+    is_bypassed = false,
+    is_disabled = false,
     id,
     height_offset,
     max_autoheight_offset,
@@ -38,7 +38,7 @@ const Div100vhContainer = ({
         height: max_autoheight_offset ? '' : height_rule,
         maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : '',
     };
-    if (is_bypassed) return children;
+    if (is_bypassed) return children as JSX.Element;
     return (
         <Div100vh id={id} className={className} style={is_disabled ? {} : height_style}>
             {children}

diff --git a/...nts/src/components/mobile-dialog/index.js → ...nts/src/components/mobile-dialog/index.ts b/...nts/src/components/mobile-dialog/index.js → ...nts/src/components/mobile-dialog/index.ts
@@ -1,4 +1,4 @@
-import MobileDialog from './mobile-dialog.jsx';
+import MobileDialog from './mobile-dialog';
 import './mobile-dialog.scss';
 
 export default MobileDialog;
diff --git a/...omponents/mobile-dialog/mobile-dialog.jsx → ...omponents/mobile-dialog/mobile-dialog.tsx b/...omponents/mobile-dialog/mobile-dialog.jsx → ...omponents/mobile-dialog/mobile-dialog.tsx
@@ -7,7 +7,21 @@ import Text from '../text/text';
 import Icon from '../icon/icon';
 import Div100vhContainer from '../div100vh-container';
 
-const MobileDialog = props => {
+type TMobileDialog = {
+    content_height_offset?: string;
+    onClose: React.MouseEventHandler;
+    has_content_scroll?: boolean;
+    portal_element_id: string;
+    renderTitle?: () => string;
+    title?: string;
+    visible?: boolean;
+    wrapper_classname?: string;
+    header_classname?: string;
+    has_full_height?: boolean;
+    footer?: React.ReactNode;
+};
+
+const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
     const {
         title,
         visible,
@@ -20,25 +34,27 @@ const MobileDialog = props => {
         header_classname,
     } = props;
 
-    const footer_ref = React.useRef(false);
+    const footer_ref = React.useRef<HTMLDivElement>(null);
     const [footer_height, setHeight] = React.useState(0);
     React.useLayoutEffect(() => {
         if (footer_ref.current && !footer_height) {
             setHeight(footer_ref.current.offsetHeight);
         }
     }, [footer, footer_height]);
 
+    const portal_element = document.getElementById(portal_element_id);
+
     const checkVisibility = () => {
         if (props.visible) {
             document.body.style.overflow = 'hidden';
-            document.getElementById(portal_element_id).style.overflow = 'hidden';
+            if (portal_element) portal_element.style.overflow = 'hidden';
         } else {
-            document.body.style.overflow = null;
-            document.getElementById(portal_element_id).style.overflow = null;
+            document.body.style.overflow = 'unset';
+            if (portal_element) portal_element.style.overflow = 'unset';
         }
     };
 
-    const scrollToElement = (parent, el) => {
+    const scrollToElement = (parent: HTMLInputElement, el: HTMLInputElement) => {
         const viewport_offset = el.getBoundingClientRect();
         const hidden = viewport_offset.top + el.clientHeight + 20 > window.innerHeight;
         if (hidden) {
@@ -48,10 +64,11 @@ const MobileDialog = props => {
     };
 
     // sometimes input is covered by virtual keyboard on mobile chrome, uc browser
-    const handleClick = e => {
+    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
         e.stopPropagation();
-        if (e.target.tagName === 'INPUT' && e.target.type === 'number') {
-            const scrollToTarget = scrollToElement(e.currentTarget, e.target);
+        const target = e.target as HTMLInputElement;
+        if (target.tagName === 'INPUT' && target.type === 'number') {
+            const scrollToTarget = () => scrollToElement(e.currentTarget, target);
             window.addEventListener('resize', scrollToTarget, false);
 
             // remove listener, resize is not fired on iOS safari
@@ -62,7 +79,7 @@ const MobileDialog = props => {
     };
 
     checkVisibility();
-    if (!document.getElementById(portal_element_id)) return null;
+    if (!portal_element) return null;
     return ReactDOM.createPortal(
         <CSSTransition
             appear
@@ -119,21 +136,8 @@ const MobileDialog = props => {
                 </Div100vhContainer>
             </div>
         </CSSTransition>,
-        document.getElementById(portal_element_id)
+        portal_element
     );
 };
 
-MobileDialog.propTypes = {
-    content_height_offset: PropTypes.string,
-    children: PropTypes.any,
-    onClose: PropTypes.func,
-    has_content_scroll: PropTypes.bool,
-    portal_element_id: PropTypes.string.isRequired,
-    renderTitle: PropTypes.func,
-    title: PropTypes.string,
-    visible: PropTypes.bool,
-    wrapper_classname: PropTypes.string,
-    header_classname: PropTypes.string,
-};
-
 export default MobileDialog;