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 _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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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)()],
    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;
}