react-github-fork-ribbon/component/index.js

Pure inline style github fork ribbon on React component

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ribbonStyle = require('./ribbonStyle');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var positionMapping = {
  left: [_ribbonStyle.RibbonStyle.leftStyle, _ribbonStyle.RibbonStyleWrapper.leftStyle],
  right: [_ribbonStyle.RibbonStyle.rightStyle, _ribbonStyle.RibbonStyleWrapper.rightStyle],
  'left-bottom': [_ribbonStyle.RibbonStyle.leftBottomStyle, _ribbonStyle.RibbonStyleWrapper.leftBottomStyle],
  'right-bottom': [_ribbonStyle.RibbonStyle.rightBottomStyle, _ribbonStyle.RibbonStyleWrapper.rightBottomStyle]
};

var colorMapping = {
  red: _ribbonStyle.RibbonStyle.redColor,
  orange: _ribbonStyle.RibbonStyle.orangeColor,
  black: _ribbonStyle.RibbonStyle.blackColor,
  green: _ribbonStyle.RibbonStyle.greenColor
};

var GitHubForkRibbon = function GitHubForkRibbon(_ref) {
  var _ref$position = _ref.position,
      position = _ref$position === undefined ? 'right' : _ref$position,
      href = _ref.href,
      target = _ref.target,
      _ref$color = _ref.color,
      color = _ref$color === undefined ? 'red' : _ref$color,
      _ref$className = _ref.className,
      className = _ref$className === undefined ? '' : _ref$className,
      children = _ref.children,
      other = _objectWithoutProperties(_ref, ['position', 'href', 'target', 'color', 'className', 'children']);

  var positionStyle = positionMapping[position] || [_ribbonStyle.RibbonStyle.rightStyle, _ribbonStyle.RibbonStyleWrapper.rightStyle];
  var colorStyle = colorMapping[color] || _ribbonStyle.RibbonStyle.redColor;

  if (positionStyle[0] === _ribbonStyle.RibbonStyle.rightStyle) {
    position = 'right';
  }

  var ribbonStyle = _extends({}, _ribbonStyle.RibbonStyle.baseStyle, positionStyle[0], colorStyle);

  var wrapperStyle = _extends({}, _ribbonStyle.RibbonStyleWrapper.baseStyle, positionStyle[1]);

  return _react2.default.createElement(
    'div',
    _extends({}, other, {
      className: 'github-fork-ribbon-wrapper ' + position + ' ' + className,
      style: wrapperStyle }),
    _react2.default.createElement(
      'div',
      { className: 'github-fork-ribbon',
        style: ribbonStyle },
      _react2.default.createElement(
        'a',
        { href: href,
          target: target,
          style: _ribbonStyle.RibbonStyle.urlStyle,
          rel: 'noopener' },
        children
      )
    )
  );
};

exports.default = global.RibbonStyle = GitHubForkRibbon;