react-native-styleman/es/NodeProcessors/MediaQuery.js

Responsive styling library for react native

"use strict";

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

var _reactNative = require("react-native");

var _Utils = require("../Utils");

var _Memo = require("../Memo");

var getCalcDims = function getCalcDims() {
  // CSS pixel equivalent resolution or DP resolution.
  var dims = _reactNative.Dimensions.get('window');

  return {
    width: dims.width,
    height: dims.height,
    screenWidth: dims.width * dims.scale,
    screenHeight: dims.height * dims.scale
  };
};

var getMediaQueryData = (0, _Memo.memo)(function () {
  var calcDims = getCalcDims();
  return {
    width: calcDims.width,
    height: calcDims.height,
    version: parseFloat(_reactNative.Platform.Version),
    orientation: calcDims.width > calcDims.height ? 'landscape' : 'portrait',
    platform: _reactNative.Platform.OS,
    direction: _reactNative.I18nManager.isRTL ? 'rtl' : 'ltr'
  };
}); // validators

var mediaValidators = {
  platform: function platform(mediaQueryData, checkDevice) {
    return mediaQueryData.device === checkDevice;
  },
  minVersion: function minVersion(mediaQueryData, _minVersion) {
    return mediaQueryData.version >= _minVersion;
  },
  maxVersion: function maxVersion(mediaQueryData, _maxVersion) {
    return mediaQueryData.version <= _maxVersion;
  },
  minWidth: function minWidth(mediaQueryData, _minWidth) {
    return mediaQueryData.width >= _minWidth;
  },
  maxWidth: function maxWidth(mediaQueryData, _maxWidth) {
    return mediaQueryData.width <= _maxWidth;
  },
  minHeight: function minHeight(mediaQueryData, _minHeight) {
    return mediaQueryData.height >= _minHeight;
  },
  maxHeight: function maxHeight(mediaQueryData, _maxHeight) {
    return mediaQueryData.height <= _maxHeight;
  },
  orientation: function orientation(mediaQueryData, checkOrientation) {
    return checkOrientation === mediaQueryData.orientation;
  },
  direction: function direction(mediaQueryData, layoutDirection) {
    return layoutDirection === mediaQueryData.direction;
  },
  styles: function styles() {
    return true;
  }
};
/**
 * Supported queries:
 * - platform: ios | android
 * - platformVersion: minVersion, maxVersion,
 * - height: minHeight, maxHeight (Normalized, dpi based measure)
 * - width: minWidth, maxWidth (Normalized, dpi based measure)
 * - orientation: landscape, portrait
 * - direction: rtl, ltr
 */

function mediaProcessor(cacheId, styles, key, value) {
  if (!Array.isArray(value)) {
    value = [value];
  }

  var mediaQueryData = getMediaQueryData(cacheId);

  for (var i = 0; i < value.length; i++) {
    var valid = true;

    for (var rule in value[i]) {
      if (value[i].hasOwnProperty(rule)) {
        var validator = mediaValidators[rule];

        if (!validator) {
          throw new Error('React Native Styleman: Unkown Media rule defined.');
        }

        if (!validator(mediaQueryData, value[i][rule])) {
          valid = false;
          break;
        }
      }
    }

    if (valid) {
      // rule matched apply styles and quit.
      var processedStyles = (0, _Utils.processStyles)(value[i].styles, cacheId);
      Object.assign(styles, processedStyles);
      break;
    }
  }

  return styles;
}