From 64ee7a382e93657413446f85e9041acd5fa9e20a Mon Sep 17 00:00:00 2001 From: Prince Date: Tue, 11 Jan 2022 13:42:23 +0300 Subject: [PATCH 1/2] Chore: added new show component --- src/components/containers/index.js | 8 ++ src/components/containers/visibility.tsx | 147 +++++++++++++++++++++++ 2 files changed, 155 insertions(+) create mode 100644 src/components/containers/visibility.tsx diff --git a/src/components/containers/index.js b/src/components/containers/index.js index 08d71008236..1ce044d1180 100644 --- a/src/components/containers/index.js +++ b/src/components/containers/index.js @@ -8,6 +8,7 @@ import CssGrid, { CssGridColumn } from './css-grid' import SEO from './seo' import Show from './show' import Box from './box' +import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK } from './visibility' export { Container, @@ -21,4 +22,11 @@ export { Box, CssGrid, CssGridColumn, + Desktop, + Mobile, + EU, + UK, + ROW, + NonUK, + NonEU, } diff --git a/src/components/containers/visibility.tsx b/src/components/containers/visibility.tsx new file mode 100644 index 00000000000..c945bf6dece --- /dev/null +++ b/src/components/containers/visibility.tsx @@ -0,0 +1,147 @@ +import React, { ReactElement, useEffect, useState } from 'react' +import styled from 'styled-components' +import { size } from 'themes/device' +import { useBrowserResize } from 'components/hooks/use-browser-resize' +import { DerivStore } from 'store' + +type ResponsiveContainerProps = { + children: ReactElement + breakpoint?: number +} + +type LayerProps = { + breakpoint?: number +} + +type StoreDataType = { + is_eu_country?: boolean + is_uk_country?: boolean +} + +const DEFAULT_BREAKPOINT = size.tabletL + +const DesktopLayer = styled.div` + @media (max-width: ${({ breakpoint }) => breakpoint}px) { + display: none; + } +` +const MobileLayer = styled.div` + @media (min-width: ${({ breakpoint }) => breakpoint}px) { + display: none; + } +` + +const domainBasedCheck = () => { + const [is_eu_domain, setEuDomain] = useState(false) + const [is_uk_domain, setUkDomain] = useState(false) + + useEffect(() => { + if (window) { + const host_name = window.location.hostname + if (host_name.includes('eu')) { + setEuDomain(true) + } + if (host_name.includes('uk')) { + setUkDomain(true) + } + } + }, []) + + return { is_eu_domain, is_uk_domain } +} + +const getBreakPoint = (breakpoint?: number) => { + return breakpoint ?? DEFAULT_BREAKPOINT +} + +const deviceRenderer = (): boolean => { + const [is_loaded, setLoaded] = useState(false) + + useEffect(() => { + setLoaded(true) + }, [useBrowserResize]) + + return is_loaded +} + +export const Desktop = ({ + children, + breakpoint = DEFAULT_BREAKPOINT, +}: ResponsiveContainerProps) => { + const breakpoint_size = getBreakPoint(breakpoint) + const [is_mobile] = useBrowserResize(breakpoint_size) + const is_loaded = deviceRenderer() + + const desktop_view = is_mobile ? <> : <>{children} + + return is_loaded ? ( + desktop_view + ) : ( + {children} + ) +} + +export const Mobile = ({ children, breakpoint = DEFAULT_BREAKPOINT }: ResponsiveContainerProps) => { + const breakpoint_size = getBreakPoint(breakpoint) + 1 + const [is_mobile] = useBrowserResize(breakpoint_size - 1) + const is_loaded = deviceRenderer() + + const mobile_view = is_mobile ? <>{children} : <> + + return is_loaded ? ( + mobile_view + ) : ( + {children} + ) +} + +export const EU = ({ children }) => { + const { is_eu_domain } = domainBasedCheck() + const { is_eu_country } = React.useContext(DerivStore) + + const is_eu = is_eu_country || is_eu_domain + + if (is_eu) return <>{children} + else return null +} + +export const NonEU = ({ children }) => { + const { is_eu_domain } = domainBasedCheck() + const { is_eu_country } = React.useContext(DerivStore) + + const is_eu = is_eu_domain || is_eu_country + + if (!is_eu) return <>{children} + else return null +} + +export const UK = ({ children }) => { + const { is_uk_domain } = domainBasedCheck() + const { is_uk_country } = React.useContext(DerivStore) + + const is_uk = is_uk_country || is_uk_domain + + if (is_uk) return <>{children} + else return null +} + +export const NonUK = ({ children }) => { + const { is_uk_domain } = domainBasedCheck() + const { is_uk_country } = React.useContext(DerivStore) + + const is_uk = is_uk_domain || is_uk_country + + if (!is_uk) return <>{children} + else return null +} + +export const ROW = ({ children }) => { + const { is_uk_domain, is_eu_domain } = domainBasedCheck() + const { is_uk_country, is_eu_country } = React.useContext(DerivStore) + + const is_uk = is_uk_country || is_uk_domain + const is_eu = is_eu_domain || is_eu_country + + if (!is_eu && !is_uk) return <>{children} + else return null +} From 6c96ee261e2e0e1d50564282981c241163f5cd76 Mon Sep 17 00:00:00 2001 From: Prince Date: Tue, 11 Jan 2022 13:43:26 +0300 Subject: [PATCH 2/2] Chore: updated new component --- src/components/containers/visibility.tsx | 25 ++++++++++-------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/containers/visibility.tsx b/src/components/containers/visibility.tsx index c945bf6dece..618dac01a5f 100644 --- a/src/components/containers/visibility.tsx +++ b/src/components/containers/visibility.tsx @@ -95,53 +95,48 @@ export const Mobile = ({ children, breakpoint = DEFAULT_BREAKPOINT }: Responsive ) } -export const EU = ({ children }) => { +export const EU = ({ children }: ResponsiveContainerProps) => { const { is_eu_domain } = domainBasedCheck() const { is_eu_country } = React.useContext(DerivStore) const is_eu = is_eu_country || is_eu_domain - if (is_eu) return <>{children} - else return null + return is_eu ? <>{children} : null } -export const NonEU = ({ children }) => { +export const NonEU = ({ children }: ResponsiveContainerProps) => { const { is_eu_domain } = domainBasedCheck() const { is_eu_country } = React.useContext(DerivStore) const is_eu = is_eu_domain || is_eu_country - if (!is_eu) return <>{children} - else return null + return !is_eu ? <>{children} : null } -export const UK = ({ children }) => { +export const UK = ({ children }: ResponsiveContainerProps) => { const { is_uk_domain } = domainBasedCheck() const { is_uk_country } = React.useContext(DerivStore) const is_uk = is_uk_country || is_uk_domain - if (is_uk) return <>{children} - else return null + return is_uk ? <>{children} : null } -export const NonUK = ({ children }) => { +export const NonUK = ({ children }: ResponsiveContainerProps) => { const { is_uk_domain } = domainBasedCheck() const { is_uk_country } = React.useContext(DerivStore) const is_uk = is_uk_domain || is_uk_country - if (!is_uk) return <>{children} - else return null + return !is_uk ? <>{children} : null } -export const ROW = ({ children }) => { +export const ROW = ({ children }: ResponsiveContainerProps) => { const { is_uk_domain, is_eu_domain } = domainBasedCheck() const { is_uk_country, is_eu_country } = React.useContext(DerivStore) const is_uk = is_uk_country || is_uk_domain const is_eu = is_eu_domain || is_eu_country - if (!is_eu && !is_uk) return <>{children} - else return null + return !is_eu && !is_uk ? <>{children} : null }