@zapperwing/pinterest-view/lib/utils/style-helper.js

A Pinterest-style grid layout component for React.js with responsive design, dynamic content support, and bulletproof virtualization

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.transition = exports.buildStyles = void 0;
var _inlineStylePrefixer = require("inline-style-prefixer");
var _easyCssTransformBuilder = require("easy-css-transform-builder");
// Units type removed; expected structure: { length: string, angle: string }

var isTransformProp = function isTransformProp(v) {
  return _easyCssTransformBuilder.properties.indexOf(v) > -1;
};
var transition = exports.transition = function transition(props, duration, easing) {
  return props.map(function (prop) {
    return "".concat(prop, " ").concat(duration, "ms ").concat(easing);
  }).join(',');
};
var buildStyles = exports.buildStyles = function buildStyles(styles, units, vendorPrefix, userAgent) {
  var builder = (0, _easyCssTransformBuilder.createCSSTransformBuilder)(units);
  var finalStyles = {};
  var transformStyles = {};
  Object.keys(styles).forEach(function (key) {
    var value = styles[key];
    if (isTransformProp(key)) {
      transformStyles[key] = value;
      if (key === 'perspective') {
        finalStyles[key] = value;
      }
    } else {
      finalStyles[key] = value;
    }
  });
  var transform = builder(transformStyles, units);
  if (transform !== '') {
    finalStyles.transform = transform;
  }
  if (vendorPrefix) {
    var prefixer = (0, _inlineStylePrefixer.createPrefixer)({
      userAgent: userAgent
    });
    return prefixer(finalStyles);
  }
  return finalStyles;
};