react-foundation-components/lib/visibility/index.js

Foundation Sites components built with the power of React and CSS Modules

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Visibility = exports.ShowOnFocus = exports.HideForScreenReader = exports.ShowForScreenReader = exports.HideForScreenOrientation = exports.ShowForScreenOrientation = exports.Invisible = exports.Hide = exports.HideOnlyForScreenSize = exports.HideForScreenSize = exports.ShowOnlyForScreenSize = exports.ShowForScreenSize = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _includes = require('lodash/includes');

var _includes2 = _interopRequireDefault(_includes);

var _constants = require('../util/constants');

var _createWrapperComponent = require('../util/create-wrapper-component');

var _createWrapperComponent2 = _interopRequireDefault(_createWrapperComponent);

var _styles = require('./_styles.scss');

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ShowForScreenSize = (0, _createWrapperComponent2.default)({
  displayName: 'ShowForScreenSize',
  styles: _styles2.default,
  propTypes: {
    screenSize: _propTypes2.default.oneOf(_constants.SCREEN_SIZES).isRequired
  },
  mapProps: function mapProps(_ref) {
    var screenSize = _ref.screenSize,
        props = (0, _objectWithoutProperties3.default)(_ref, ['screenSize']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({}, 'show-for-' + screenSize, (0, _includes2.default)(_constants.LARGER_SCREEN_SIZES, screenSize))
    };
  }
});

exports.ShowForScreenSize = ShowForScreenSize;
var ShowOnlyForScreenSize = (0, _createWrapperComponent2.default)({
  displayName: 'ShowOnlyForScreenSize',
  styles: _styles2.default,
  propTypes: {
    screenSize: _propTypes2.default.oneOf(_constants.SCREEN_SIZES).isRequired
  },
  mapProps: function mapProps(_ref2) {
    var screenSize = _ref2.screenSize,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['screenSize']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({}, 'show-for-' + screenSize + '-only', (0, _includes2.default)(_constants.SCREEN_SIZES, screenSize))
    };
  }
});

exports.ShowOnlyForScreenSize = ShowOnlyForScreenSize;
var HideForScreenSize = (0, _createWrapperComponent2.default)({
  displayName: 'HideForScreenSize',
  styles: _styles2.default,
  propTypes: {
    screenSize: _propTypes2.default.oneOf(_constants.SCREEN_SIZES).isRequired
  },
  mapProps: function mapProps(_ref3) {
    var screenSize = _ref3.screenSize,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['screenSize']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({
        hide: !(0, _includes2.default)(_constants.LARGER_SCREEN_SIZES, screenSize) && (0, _includes2.default)(_constants.SCREEN_SIZES, screenSize)
      }, 'hide-for-' + screenSize, (0, _includes2.default)(_constants.LARGER_SCREEN_SIZES, screenSize))
    };
  }
});

exports.HideForScreenSize = HideForScreenSize;
var HideOnlyForScreenSize = (0, _createWrapperComponent2.default)({
  displayName: 'HideOnlyForScreenSize',
  styles: _styles2.default,
  propTypes: {
    screenSize: _propTypes2.default.oneOf(_constants.SCREEN_SIZES).isRequired
  },
  mapProps: function mapProps(_ref4) {
    var screenSize = _ref4.screenSize,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['screenSize']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({}, 'hide-for-' + screenSize + '-only', (0, _includes2.default)(_constants.SCREEN_SIZES, screenSize))
    };
  }
});

exports.HideOnlyForScreenSize = HideOnlyForScreenSize;
var Hide = exports.Hide = (0, _createWrapperComponent2.default)({
  displayName: 'Hide',
  styles: _styles2.default,
  mapProps: function mapProps(props) {
    return {
      props: props,
      classNames: 'hide'
    };
  }
});

var Invisible = exports.Invisible = (0, _createWrapperComponent2.default)({
  displayName: 'Invisible',
  styles: _styles2.default,
  mapProps: function mapProps(props) {
    return {
      props: props,
      classNames: 'invisible'
    };
  }
});

var ShowForScreenOrientation = (0, _createWrapperComponent2.default)({
  displayName: 'ShowForScreenOrientation',
  styles: _styles2.default,
  propTypes: {
    screenOrientation: _propTypes2.default.oneOf(_constants.SCREEN_ORIENTATIONS).isRequired
  },
  mapProps: function mapProps(_ref5) {
    var screenOrientation = _ref5.screenOrientation,
        props = (0, _objectWithoutProperties3.default)(_ref5, ['screenOrientation']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({}, 'show-for-' + screenOrientation, (0, _includes2.default)(_constants.SCREEN_ORIENTATIONS, screenOrientation))
    };
  }
});

exports.ShowForScreenOrientation = ShowForScreenOrientation;
var HideForScreenOrientation = (0, _createWrapperComponent2.default)({
  displayName: 'HideForScreenOrientation',
  styles: _styles2.default,
  propTypes: {
    screenOrientation: _propTypes2.default.oneOf(_constants.SCREEN_ORIENTATIONS).isRequired
  },
  mapProps: function mapProps(_ref6) {
    var screenOrientation = _ref6.screenOrientation,
        props = (0, _objectWithoutProperties3.default)(_ref6, ['screenOrientation']);
    return {
      props: props,
      classNames: (0, _defineProperty3.default)({}, 'hide-for-' + screenOrientation, (0, _includes2.default)(_constants.SCREEN_ORIENTATIONS, screenOrientation))
    };
  }
});

exports.HideForScreenOrientation = HideForScreenOrientation;
var ShowForScreenReader = exports.ShowForScreenReader = (0, _createWrapperComponent2.default)({
  displayName: 'ShowForScreenReader',
  styles: _styles2.default,
  mapProps: function mapProps(props) {
    return {
      props: props,
      classNames: 'show-for-sr'
    };
  }
});

var HideForScreenReader = exports.HideForScreenReader = (0, _createWrapperComponent2.default)({
  displayName: 'HideForScreenReader',
  styles: _styles2.default,
  mapProps: function mapProps(props) {
    return {
      props: (0, _extends3.default)({}, props, { 'aria-hidden': true })
    };
  }
});

var ShowOnFocus = exports.ShowOnFocus = (0, _createWrapperComponent2.default)({
  displayName: 'ShowOnFocus',
  styles: _styles2.default,
  mapProps: function mapProps(props) {
    return {
      props: props,
      classNames: 'show-on-focus'
    };
  }
});

var Visibility = exports.Visibility = {
  ShowForScreenSize: ShowForScreenSize,
  ShowOnlyForScreenSize: ShowOnlyForScreenSize,
  HideForScreenSize: HideForScreenSize,
  HideOnlyForScreenSize: HideOnlyForScreenSize,
  Hide: Hide,
  Invisible: Invisible,
  ShowForScreenOrientation: ShowForScreenOrientation,
  HideForScreenOrientation: HideForScreenOrientation,
  ShowForScreenReader: ShowForScreenReader,
  HideForScreenReader: HideForScreenReader,
  ShowOnFocus: ShowOnFocus
};

exports.default = Visibility;