diff --git a/packages/components/src/components/popup/index.js b/packages/components/src/components/popup/index.ts similarity index 58% rename from packages/components/src/components/popup/index.js rename to packages/components/src/components/popup/index.ts index a2e16ad8d3b6..25b536c50249 100644 --- a/packages/components/src/components/popup/index.js +++ b/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; diff --git a/packages/components/src/components/popup/popup-body.jsx b/packages/components/src/components/popup/popup-body.tsx similarity index 84% rename from packages/components/src/components/popup/popup-body.jsx rename to packages/components/src/components/popup/popup-body.tsx index a436d985801f..8d692be812fe 100644 --- a/packages/components/src/components/popup/popup-body.jsx +++ b/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 ( -
+
{BodyComponent && ( )} diff --git a/packages/components/src/components/popup/popup-context.js b/packages/components/src/components/popup/popup-context.js deleted file mode 100644 index d8214467aad6..000000000000 --- a/packages/components/src/components/popup/popup-context.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; - -const PopupContext = React.createContext(); - -export default PopupContext; diff --git a/packages/components/src/components/popup/popup-context.tsx b/packages/components/src/components/popup/popup-context.tsx new file mode 100644 index 000000000000..d69e3057058a --- /dev/null +++ b/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>; + should_show_popup: boolean; + tab_icon_color: string; + tabs_detail: TDetail[]; + title: string; + togglePopupModal?: () => void; +}; + +const PopupContext = React.createContext({ + 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; diff --git a/packages/components/src/components/popup/popup-footer.jsx b/packages/components/src/components/popup/popup-footer.tsx similarity index 59% rename from packages/components/src/components/popup/popup-footer.jsx rename to packages/components/src/components/popup/popup-footer.tsx index 56437e858b9d..9aeb8affd2fd 100644 --- a/packages/components/src/components/popup/popup-footer.jsx +++ b/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) => (
(
); -PopupFooter.propTypes = { - children: PropTypes.node, - has_separator: PropTypes.bool, -}; - export default PopupFooter; diff --git a/packages/components/src/components/popup/popup-header.jsx b/packages/components/src/components/popup/popup-header.tsx similarity index 98% rename from packages/components/src/components/popup/popup-header.jsx rename to packages/components/src/components/popup/popup-header.tsx index 4230cd1a3278..beb6f1dd8612 100644 --- a/packages/components/src/components/popup/popup-header.jsx +++ b/packages/components/src/components/popup/popup-header.tsx @@ -55,7 +55,7 @@ const PopupHeader = () => { className='dc-popup__header-button' icon={} onClick={onHeaderButtonClick} - text={isDesktop() && header_button_text} + text={isDesktop() ? header_button_text : ''} /> )}
diff --git a/packages/components/src/components/popup/popup-overlay-container.jsx b/packages/components/src/components/popup/popup-overlay-container.tsx similarity index 81% rename from packages/components/src/components/popup/popup-overlay-container.jsx rename to packages/components/src/components/popup/popup-overlay-container.tsx index 5cb4ef318392..88f7ede6e881 100644 --- a/packages/components/src/components/popup/popup-overlay-container.jsx +++ b/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; diff --git a/packages/components/src/components/popup/popup-overlay.jsx b/packages/components/src/components/popup/popup-overlay.tsx similarity index 77% rename from packages/components/src/components/popup/popup-overlay.jsx rename to packages/components/src/components/popup/popup-overlay.tsx index e1a4ab2d7bfc..ed5468c7e81a 100644 --- a/packages/components/src/components/popup/popup-overlay.jsx +++ b/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(
{ - const [overlay_ref, setOverlayRef] = React.useState(null); +}: TPopupContext) => { + const [overlay_ref, setOverlayRef] = React.useState(); 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 = ({
, - document.getElementById('popup_root') + document.getElementById('popup_root')! ); } @@ -88,7 +87,6 @@ const Popup = ({ has_close_icon={false} header={} 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; diff --git a/packages/components/src/components/tabs/tab.tsx b/packages/components/src/components/tabs/tab.tsx index 57e4d9e5f124..eba22fac25bc 100644 --- a/packages/components/src/components/tabs/tab.tsx +++ b/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 | 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; setActiveLineStyle: () => void; diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx index bd2250e9631b..3fdf8ea39d0d 100644 --- a/packages/components/src/components/tabs/tabs.tsx +++ b/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; };