@compositor/kit/dist/Diff.js

Components for development environments, style guides, and demos

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _ui = require('./ui');

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

var DiffBox = (0, _nanoStyle2.default)(_ui.Box)(function (_ref) {
  var blendMode = _ref.blendMode;
  return {
    position: 'relative',
    mixBlendMode: blendMode || 'multiply'
  };
});

var ComponentBox = (0, _nanoStyle2.default)(_ui.Box)(function (_ref2) {
  var blendMode = _ref2.blendMode;
  return {
    position: 'absolute',
    mixBlendMode: blendMode || 'multiply'
  };
});

exports.default = function (_ref3) {
  var blendMode = _ref3.blendMode,
      children = _ref3.children;

  var diffs = _react2.default.Children.toArray(children);
  return _react2.default.createElement(
    DiffBox,
    null,
    diffs.map(function (el) {
      return _react2.default.createElement(
        ComponentBox,
        { key: el.key, blendMode: blendMode },
        el
      );
    })
  );
};