@e-group/hooks/useRwt.js

eGroup team react-hooks that share across projects.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useRwt;

var _react = require("react");

var _core = require("@material-ui/core");

function isOptions(value) {
  return typeof value === 'object';
}
/**
 * Responsive web text hook.
 */


function useRwt() {
  const theme = (0, _core.useTheme)();
  const isXl = (0, _core.useMediaQuery)(theme.breakpoints.up('xl'));
  const isLg = (0, _core.useMediaQuery)(theme.breakpoints.up('lg'));
  const isMd = (0, _core.useMediaQuery)(theme.breakpoints.up('md'));
  const isSm = (0, _core.useMediaQuery)(theme.breakpoints.up('sm'));
  const isXs = (0, _core.useMediaQuery)(theme.breakpoints.up('xs'));
  const rwt = (0, _react.useCallback)(value => {
    if (!value) return undefined;
    if (!isOptions(value)) return value;

    if (value.xl && isXl) {
      return value.xl;
    }

    if (value.lg && isLg) {
      return value.lg;
    }

    if (value.md && isMd) {
      return value.md;
    }

    if (value.sm && isSm) {
      return value.sm;
    }

    if (value.xs && isXs) {
      return value.xs;
    }

    return undefined;
  }, [isXl, isLg, isMd, isSm, isXs]);
  return rwt;
}