react-full-screen/dist/index.js

Component and Hook for handling full screen components

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var fscreen = _interopDefault(require('fscreen'));

function useFullScreenHandle() {
  var _useState = React.useState(false),
      active = _useState[0],
      setActive = _useState[1];

  var node = React.useRef(null);
  React.useEffect(function () {
    var handleChange = function handleChange() {
      setActive(fscreen.fullscreenElement === node.current);
    };

    fscreen.addEventListener('fullscreenchange', handleChange);
    return function () {
      return fscreen.removeEventListener('fullscreenchange', handleChange);
    };
  }, []);
  var enter = React.useCallback(function () {
    if (fscreen.fullscreenElement) {
      return fscreen.exitFullscreen().then(function () {
        return fscreen.requestFullscreen(node.current);
      });
    } else if (node.current) {
      return fscreen.requestFullscreen(node.current);
    }
  }, []);
  var exit = React.useCallback(function () {
    if (fscreen.fullscreenElement === node.current) {
      return fscreen.exitFullscreen();
    }

    return Promise.resolve();
  }, []);
  return React.useMemo(function () {
    return {
      active: active,
      enter: enter,
      exit: exit,
      node: node
    };
  }, [active, enter, exit]);
}
var FullScreen = function FullScreen(_ref) {
  var handle = _ref.handle,
      onChange = _ref.onChange,
      children = _ref.children,
      className = _ref.className;
  var classNames = [];

  if (className) {
    classNames.push(className);
  }

  classNames.push('fullscreen');

  if (handle.active) {
    classNames.push('fullscreen-enabled');
  }

  React.useEffect(function () {
    if (onChange) {
      onChange(handle.active, handle);
    }
  }, [handle.active]);
  return React__default.createElement("div", {
    className: classNames.join(' '),
    ref: handle.node,
    style: handle.active ? {
      height: '100%',
      width: '100%'
    } : undefined
  }, children);
};

exports.FullScreen = FullScreen;
exports.useFullScreenHandle = useFullScreenHandle;
//# sourceMappingURL=index.js.map