vcc-ui/lib/style-renderer.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

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

var _fela = require("fela");

var _felaPresetWeb = _interopRequireDefault(require("fela-preset-web"));

var _felaPluginRtl = _interopRequireDefault(require("fela-plugin-rtl"));

var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));

var _felaSortClassnames = _interopRequireDefault(require("fela-sort-classnames"));

var _felaSortMediaQueryMobileFirst = _interopRequireDefault(require("fela-sort-media-query-mobile-first"));

var _deprecate = require("./deprecate");

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

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function styleRenderer() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      isRtl = _ref.isRtl,
      rest = _objectWithoutProperties(_ref, ["isRtl"]);

  (0, _deprecate.deprecate)('Using the "isRtl" prop is deprecated and will cause no effect in the next major update. Use the "theme.direction" key instead. See https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-rtl#theme-based-mode', isRtl !== undefined);
  var options = rest || {};
  return (0, _fela.createRenderer)(_objectSpread({}, options, {
    enhancers: [(0, _felaSortClassnames.default)(), (0, _felaSortMediaQueryMobileFirst.default)()].concat(_toConsumableArray(options.enhancers || [])),
    plugins: [].concat(_toConsumableArray(_felaPresetWeb.default), [themeFontsPlugin, hexToRgbaPlugin, (0, _felaPluginRtl.default)(isRtl ? 'rtl' : 'ltr')], _toConsumableArray(options.plugins || [])).filter(Boolean)
  }));
}

function themeFontsPlugin(style, type, renderer, props) {
  var fonts = props.theme && props.theme.fonts || [];
  var fontsPath = props.theme && props.theme.fontsPath || '';

  for (var property in style) {
    var value = style[property]; // TODO: maybe we wanna cache already rendered fonts
    // but no high prio as Fela does that as well

    if (typeof value === 'string' && property === 'fontFamily') {
      (function () {
        // check each alternative font value
        var fontValues = value.split(',');
        var usedFonts = fonts.filter(function (font) {
          return fontValues.indexOf(font.fontFamily) !== -1;
        });

        if (usedFonts.length > 0) {
          usedFonts.forEach(function (_ref2) {
            var fontFamily = _ref2.fontFamily,
                src = _ref2.src,
                fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);

            return renderer.renderFont(fontFamily, src.map( // allow absolute files with http prefix
            function (file) {
              return (file.indexOf('http') === -1 ? fontsPath : '') + file;
            }), fontProps);
          });
        }
      })();
    } else if (_typeof(value) === 'object' && !Array.isArray(value)) {
      themeFontsPlugin(value, type, renderer, props);
    }
  }

  return style;
} // TODO: move to fela repo as an official plugin


function hexToRgbaPlugin(style) {
  for (var property in style) {
    var value = style[property];

    if (typeof value === 'string' && value.indexOf('#') === 0 && value.length === 9) {
      style[property] = (0, _hexToRgba.default)(value);
    } else if (_typeof(value) === 'object' && !Array.isArray(value)) {
      hexToRgbaPlugin(value);
    }
  }

  return style;
}