@compositor/kit/dist/XRay.js

Components for development environments, style guides, and demos

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _chromaJs = require('chroma-js');

var _chromaJs2 = _interopRequireDefault(_chromaJs);

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

var gradient = exports.gradient = function gradient() {
  var angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  var size = arguments[1];
  var color = arguments[2];
  return 'linear-gradient(' + angle + 'deg, transparent, transparent ' + (size - 1) + 'px, ' + color + ' ' + (size - 1) + 'px)';
};

var alpha = exports.alpha = function alpha(val, a) {
  try {
    return (0, _chromaJs2.default)(val).alpha(a).css();
  } catch (e) {
    return val;
  }
};

var XRay = (0, _nanoStyle2.default)('div')(function (_ref) {
  var padding = _ref.padding,
      color = _ref.color,
      backgroundColor = _ref.backgroundColor,
      outline = _ref.outline,
      grid = _ref.grid,
      center = _ref.center,
      disabled = _ref.disabled,
      style = _ref.style;
  return disabled ? (0, _extends3.default)({}, style, { padding: padding }) : (0, _extends3.default)({}, style, {
    padding: padding,
    color: color,
    backgroundColor: backgroundColor,
    backgroundPosition: center ? 'center center' : 'left top',
    '& *': {
      color: outline ? color + ' !important' : null,
      outline: outline ? '1px solid ' + alpha(color, 1 / 2) + ' !important' : null,
      backgroundColor: outline ? alpha(color, 1 / 8) + ' !important' : null
    }
  }, getGrid(grid, alpha(color, 1 / 4)));
});

var getGrid = function getGrid(grid, color) {
  if (!grid) return null;
  var size = grid && typeof grid === 'number' ? grid : 8;
  return {
    backgroundImage: gradient(0, size, color) + ', ' + gradient(90, size, color),
    backgroundSize: size + 'px ' + size + 'px'
  };
};

XRay.propTypes = {
  padding: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
  color: _propTypes.string,
  backgroundColor: _propTypes.string,
  outline: _propTypes.bool,
  grid: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.bool]),
  center: _propTypes.bool
};

XRay.defaultProps = {
  padding: 0,
  outline: true,
  grid: 8,
  color: '#6bf',
  backgroundColor: '#001424',
  center: false
};

exports.default = XRay;