Merge pull request #33 from suisin-deriv/suisin/76916/ts_migration_po…

…pup_component

Suisin/refactor: ts migration for Popup component

packages/components/src/components/popup/index.js → packages/components/src/components/popup/index.ts

@@ -1,4 +1,4 @@
-import Popup from './popup.jsx';
+import Popup from './popup';
 import './popup.scss';
 
 export default Popup;

packages/components/src/components/popup/popup-body.jsx → packages/components/src/components/popup/popup-body.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import PopupFooter from './popup-footer.jsx';
-import PopupContext from './popup-context';
+import PopupFooter from './popup-footer';
+import PopupContext, { TDetail } from './popup-context';
 import Tabs from '../tabs';
 
 const PopupBody = () => {
@@ -31,14 +31,14 @@ const PopupBody = () => {
             icon_size={30}
             top
         >
-            {tabs_detail.map(detail => {
-                const { id, icon, has_footer_separator, renderBody, renderFooter, title } = detail;
+            {tabs_detail.map((detail: TDetail) => {
+                const { id, has_footer_separator, renderBody, renderFooter } = detail;
 
                 const BodyComponent = typeof renderBody === 'function' ? renderBody : null;
                 const FooterComponent = typeof renderFooter === 'function' ? renderFooter : null;
 
                 return (
-                    <div key={id} label={title} icon={icon}>
+                    <div key={id}>
                         {BodyComponent && (
                             <BodyComponent overlay_ref={overlay_ref} setIsOverlayShown={setIsOverlayShown} />
                         )}

packages/components/src/components/popup/popup-context.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+export type TDetail = {
+    id?: string;
+    icon?: string;
+    has_footer_separator: boolean;
+    renderBody?: React.ElementType;
+    renderFooter?: React.ElementType;
+    title?: string;
+};
+
+export type TPopupContext = {
+    active_tab_icon_color: string;
+    balance: number | string;
+    Component: React.ElementType;
+    currency: string;
+    close_icon_color: string;
+    header_background_color: string;
+    header_big_text: string;
+    header_banner_text: string;
+    header_button_text: string;
+    header_contents_color?: string;
+    header_content_color?: string;
+    header_icon: string;
+    is_overlay_shown: boolean;
+    onHeaderButtonClick?: () => void;
+    overlay_ref?: HTMLDivElement | null;
+    setIsOverlayShown?: React.Dispatch<React.SetStateAction<boolean>>;
+    should_show_popup: boolean;
+    tab_icon_color: string;
+    tabs_detail: TDetail[];
+    title: string;
+    togglePopupModal?: () => void;
+};
+
+const PopupContext = React.createContext<TPopupContext>({
+    active_tab_icon_color: '',
+    balance: '',
+    currency: '',
+    close_icon_color: '',
+    header_background_color: '',
+    header_big_text: '',
+    header_banner_text: '',
+    header_button_text: '',
+    header_content_color: '',
+    header_icon: '',
+    is_overlay_shown: false,
+    should_show_popup: false,
+    title: '',
+    tab_icon_color: '',
+    tabs_detail: [{ has_footer_separator: false }],
+    Component: 'symbol',
+});
+
+export default PopupContext;

packages/components/src/components/popup/popup-footer.jsx → packages/components/src/components/popup/popup-footer.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const PopupFooter = ({ children, has_separator }) => (
+type TPopupFooter = {
+    has_separator: boolean;
+};
+
+const PopupFooter = ({ children, has_separator }: React.PropsWithChildren<TPopupFooter>) => (
     <div
         className={classNames('dc-popup-footer', {
             'dc-popup-footer__separator': has_separator,
@@ -12,9 +15,4 @@ const PopupFooter = ({ children, has_separator }) => (
     </div>
 );
 
-PopupFooter.propTypes = {
-    children: PropTypes.node,
-    has_separator: PropTypes.bool,
-};
-
 export default PopupFooter;

packages/components/src/components/popup/popup-header.jsx → packages/components/src/components/popup/popup-header.tsx

@@ -55,7 +55,7 @@ const PopupHeader = () => {
                                     className='dc-popup__header-button'
                                     icon={<Icon icon='IcPlay' size={10} color='active' />}
                                     onClick={onHeaderButtonClick}
-                                    text={isDesktop() && header_button_text}
+                                    text={isDesktop() ? header_button_text : ''}
                                 />
                             )}
                         </div>

packages/components/src/components/popup/popup-overlay-container.jsx → packages/components/src/components/popup/popup-overlay-container.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
 import PopupContext from './popup-context';
 
-const PopupOverlayContainer = ({ refSetter }) => {
+type TPopupOverlayContainer = {
+    refSetter: (instance: HTMLDivElement | null) => void;
+};
+
+const PopupOverlayContainer = ({ refSetter }: TPopupOverlayContainer) => {
     const { is_overlay_shown } = React.useContext(PopupContext);
 
     return (
@@ -23,8 +26,4 @@ const PopupOverlayContainer = ({ refSetter }) => {
     );
 };
 
-PopupOverlayContainer.propTypes = {
-    refSetter: PropTypes.func.isRequired,
-};
-
 export default PopupOverlayContainer;

packages/components/src/components/popup/popup-overlay.jsx → packages/components/src/components/popup/popup-overlay.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import Text from '../text/text';
 import Button from '../button/button';
 
-const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
+type TPopupOverlay = {
+    title: string;
+    descriptions: [
+        {
+            key: number | string;
+            component: React.ReactNode;
+        }
+    ];
+    overlay_ref: HTMLDivElement;
+    toggleOverlay: () => void;
+    done_text: string;
+};
+
+const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }: TPopupOverlay) =>
     createPortal(
         <div className='dc-popup__overlay-content'>
             <Text
@@ -38,12 +50,4 @@ const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_te
         overlay_ref
     );
 
-PopupOverlay.propTypes = {
-    descriptions: PropTypes.array.isRequired,
-    done_text: PropTypes.string.isRequired,
-    overlay_ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).isRequired,
-    title: PropTypes.string.isRequired,
-    toggleOverlay: PropTypes.func.isRequired,
-};
-
 export default PopupOverlay;

packages/components/src/components/popup/popup.jsx → packages/components/src/components/popup/popup.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import { isMobile } from '@deriv/shared';
-import PopupBody from './popup-body.jsx';
-import PopupContext from './popup-context';
-import PopupHeader from './popup-header.jsx';
-import PopupOverlay from './popup-overlay.jsx';
-import PopupOverlayContainer from './popup-overlay-container.jsx';
+import PopupBody from './popup-body';
+import PopupContext, { TPopupContext } from './popup-context';
+import PopupHeader from './popup-header';
+import PopupOverlay from './popup-overlay';
+import PopupOverlayContainer from './popup-overlay-container';
 import MobileFullPageModal from '../mobile-full-page-modal';
 import Modal from '../modal';
 
@@ -28,8 +27,8 @@ const Popup = ({
     tabs_detail,
     title,
     togglePopupModal,
-}) => {
-    const [overlay_ref, setOverlayRef] = React.useState(null);
+}: TPopupContext) => {
+    const [overlay_ref, setOverlayRef] = React.useState<HTMLDivElement | null>();
     const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
     const context_value = {
         Component,
@@ -51,6 +50,7 @@ const Popup = ({
         tabs_detail,
         title,
         togglePopupModal,
+        should_show_popup: false,
     };
 
     if (isMobile()) {
@@ -66,7 +66,6 @@ const Popup = ({
                         is_modal_open={should_show_popup}
                         onClickClose={togglePopupModal}
                         page_header_className='dc-popup__mobile-full-page-modal-header'
-                        page_overlay
                         renderPageHeader={PopupHeader}
                         should_header_stick_body
                     >
@@ -76,7 +75,7 @@ const Popup = ({
                     </MobileFullPageModal>
                 </div>
             </PopupContext.Provider>,
-            document.getElementById('popup_root')
+            document.getElementById('popup_root')!
         );
     }
 
@@ -88,7 +87,6 @@ const Popup = ({
                     has_close_icon={false}
                     header={<PopupHeader />}
                     header_background_color={header_background_color}
-                    header_icon={close_icon_color}
                     height='636px'
                     is_open={should_show_popup}
                     should_header_stick_body
@@ -107,33 +105,4 @@ const Popup = ({
 
 Popup.Overlay = PopupOverlay;
 
-Popup.propTypes = {
-    active_tab_icon_color: PropTypes.string,
-    balance: PropTypes.number,
-    close_icon_color: PropTypes.string,
-    header_background_color: PropTypes.string,
-    header_banner_text: PropTypes.string,
-    header_big_text: PropTypes.string,
-    header_button_text: PropTypes.string,
-    header_contents_color: PropTypes.string,
-    header_icon: PropTypes.string,
-    onHeaderButtonClick: PropTypes.func,
-    should_show_popup: PropTypes.bool,
-    tab_icon_color: PropTypes.string,
-    tabs_detail: PropTypes.arrayOf(
-        PropTypes.shape({
-            has_footer_separator: PropTypes.bool,
-            renderBody: PropTypes.func,
-            renderFooter: PropTypes.func,
-            icon: PropTypes.string,
-            id: PropTypes.number,
-            title: PropTypes.string,
-        })
-    ),
-    title: PropTypes.string,
-    togglePopupModal: PropTypes.func,
-    Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.node]),
-    currency: PropTypes.string,
-};
-
 export default Popup;

packages/components/src/components/tabs/tab.tsx

@@ -6,18 +6,18 @@ import Icon from '../icon';
 type TTabProps = {
     active_icon_color: string;
     active_tab_ref?: React.RefObject<HTMLLIElement> | null;
-    bottom: boolean;
+    bottom?: boolean;
     className?: string;
     count: number;
     header_content: React.ReactElement;
-    header_fit_content: boolean;
+    header_fit_content?: boolean;
     icon_color: string;
     icon_size: number;
     icon: string;
     id?: string;
     is_active: boolean;
-    is_label_hidden: boolean;
-    is_scrollable: boolean;
+    is_label_hidden?: boolean;
+    is_scrollable?: boolean;
     label: string;
     onClick: React.MouseEventHandler<HTMLLIElement>;
     setActiveLineStyle: () => void;

packages/components/src/components/tabs/tabs.tsx

@@ -9,24 +9,24 @@ type TTabsProps = RouteComponentProps & {
     active_icon_color: string;
     active_index?: number;
     background_color: string;
-    bottom: boolean;
+    bottom?: boolean;
     center: boolean;
-    children: React.ReactElement & React.ReactElement[];
+    children: React.ReactElement[];
     className?: string;
     fit_content: boolean;
     has_active_line?: boolean;
     has_bottom_line?: boolean;
-    header_fit_content: boolean;
+    header_fit_content?: boolean;
     history: History;
     icon_color: string;
     icon_size: number;
-    is_100vw: boolean;
-    is_full_width: boolean;
-    is_overflow_hidden: boolean;
-    is_scrollable: boolean;
-    onTabItemClick: (active_tab_index: number) => void;
-    should_update_hash: boolean;
-    single_tab_has_no_label: boolean;
+    is_100vw?: boolean;
+    is_full_width?: boolean;
+    is_overflow_hidden?: boolean;
+    is_scrollable?: boolean;
+    onTabItemClick?: (active_tab_index: number) => void;
+    should_update_hash?: boolean;
+    single_tab_has_no_label?: boolean;
     top: boolean;
 };