@kiwicom/smart-faq/src/SmartFAQ/common/Responsive.js

Smart FAQ

// @flow

import * as React from 'react';
import MediaQuery from 'react-responsive';

import { SidebarVersion, FullPageVersion } from './PageVariant';
import PageVariantContext from '../context/PageVariant';

type Props = {|
  children: React.Node,
|};

const fallbackFallbackScreenWidth = 900;

const createBreakpointQuery = (
  criterion: 'min' | 'max',
  expectedValue: number,
) => {
  const visibleOnSSR = screenWidth =>
    criterion === 'max'
      ? screenWidth <= expectedValue
      : screenWidth >= expectedValue;

  const MediaQueryComponent = ({ children }: Props) => (
    <>
      <SidebarVersion>
        <MediaQuery
          query={`screen and (${criterion}-width: ${expectedValue}px)`}
        >
          {children}
        </MediaQuery>
      </SidebarVersion>
      <PageVariantContext.Consumer>
        {value => (
          <FullPageVersion>
            {visibleOnSSR(
              (value && value.screenWidth) || fallbackFallbackScreenWidth,
            )
              ? children
              : null}
          </FullPageVersion>
        )}
      </PageVariantContext.Consumer>
    </>
  );

  return MediaQueryComponent;
};

const createMediaQuery = (mediaquery: string) => {
  const MediaQueryComponent = ({ children }: Props) => (
    <>
      <SidebarVersion>
        <MediaQuery query={mediaquery}>{children}</MediaQuery>
      </SidebarVersion>
      <FullPageVersion>
        {mediaquery === 'screen and (orientation: landscape)' ? children : null}
      </FullPageVersion>
    </>
  );

  return MediaQueryComponent;
};

const breakPoint = 900;

export const Desktop = createBreakpointQuery('min', breakPoint + 1);
export const Mobile = createBreakpointQuery('max', breakPoint);
export const Portrait = createMediaQuery(`screen and (orientation: portrait)`);
export const Landscape = createMediaQuery(
  `screen and (orientation: landscape)`,
);