reactors/dist/API/StyleSheet/transforms/boxShadow.js

View components and APIs that work web, mobile and desktop!

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _Core = require('../../Core');

var _Core2 = _interopRequireDefault(_Core);

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

// boxShadow: '0 4px 4px 1px rgba(0, 0, 0, .2)',
//
// /* offset-x | offset-y | color */
// box-shadow: 60px -16px teal;
//
// /* offset-x | offset-y | blur-radius | color */
// box-shadow: 10px 5px 5px black;
//
// /* offset-x | offset-y | blur-radius | spread-radius | color */
// box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
//
// /* inset | offset-x | offset-y | color */
// box-shadow: inset 5em 1em gold;
//
// /* Any number of shadows, separated by commas */
// box-shadow: 3px 3px red, -1em 0 0.4em olive;

var toMobile = function toMobile(str) {
  var bits1 = str.split(/\s+/);
  var bits = [];
  for (var i = 0; i < bits1.length; i++) {
    if (/^rgba\(/.test(bits1[i])) {
      bits.push(bits1[i] + ' ' + bits1[i + 1] + ' ' + bits1[i + 2] + ' ' + bits1[i + 3]);
      i += 3;
    } else {
      bits.push(bits1[i]);
    }
  }
  var shadowIndex = 0;
  var shadows = [];
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = bits[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var bit = _step.value;

      if (!shadows[shadowIndex]) {
        shadows[shadowIndex] = [];
      }
      if (/,$/.test(bit)) {
        shadows[shadowIndex].push(bit.replace(/,$/, ''));
        shadowIndex++;
      } else {
        shadows[shadowIndex].push(bit);
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  var all = shadows.map(function (shadow) {
    var inset = shadow[0] === 'inset';
    if (inset) {
      shadow.shift();
    }
    var color = shadow.pop();

    var _shadow = (0, _slicedToArray3.default)(shadow, 3),
        offsetX = _shadow[0],
        offsetY = _shadow[1],
        radius = _shadow[2];

    var opacity = 1;
    if (/rgba/.test(color)) {
      color.replace(/, ([^,]+)\)$/, function (matches, alpha) {
        opacity = alpha.replace(/^\./, '0.');
      });
    }
    return { offsetX: offsetX, offsetY: offsetY, radius: radius, color: color, opacity: opacity, inset: inset };
  });

  var _all = (0, _slicedToArray3.default)(all, 1),
      rule = _all[0];

  var native = {
    shadowColor: rule.color,
    shadowOpacity: Number(rule.opacity)
  };
  if (rule.radius) {
    native.shadowRadius = parseInt(rule.radius, 10);
  }
  if (rule.inset) {
    native.shadowOffset = {
      width: -parseInt(rule.offsetX, 10),
      height: -parseInt(rule.offsetY, 10)
    };
  } else {
    native.shadowOffset = {
      width: parseInt(rule.offsetX, 10),
      height: parseInt(rule.offsetY, 10)
    };
  }
  return native;
};

var boxShadow = function boxShadow(style) {
  if ('boxShadow' in style && _Core2.default.isMobile()) {
    return (0, _omit2.default)((0, _extends3.default)({}, style, toMobile(style.boxShadow)), ['boxShadow']);
  }
  return (0, _extends3.default)({}, style);
};

exports.default = boxShadow;