@age/quantum/Tag/Tag.js

Catho react components

"use strict";

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); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _theme = require("../shared/theme");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

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; }

var _colors = function _colors(_ref) {
  var inverted = _ref.inverted,
      skin = _ref.skin,
      stroked = _ref.stroked,
      _ref$theme$components = _ref.theme.components.tag.skins[skin],
      background = _ref$theme$components.background,
      text = _ref$theme$components.text;
  return {
    background: inverted && !stroked ? text : background,
    text: inverted && !stroked ? background : text
  };
};

var wrapperColors = function wrapperColors(props) {
  var _colors2 = _colors(props),
      background = _colors2.background,
      text = _colors2.text;

  var stroked = props.stroked,
      neutral = props.theme.colors.neutral;
  return (0, _styledComponents.css)(["background-color:", ";border:", ";color:", ";"], stroked ? neutral[0] : background, stroked ? "1px solid ".concat(text) : 'none', text);
};

var wrapperSize = function wrapperSize(_ref2) {
  var _ref2$theme = _ref2.theme,
      xxsmall = _ref2$theme.spacing.xxsmall,
      baseFontSize = _ref2$theme.baseFontSize,
      propSize = _ref2.size;
  return {
    small: "\n    font-size: ".concat(baseFontSize * 0.75, "px;\n    padding-top: ").concat(xxsmall, "px;\n    padding-bottom: ").concat(xxsmall, "px;\n  "),
    large: "\n    font-size: ".concat(baseFontSize * 1.125, "px;\n  ")
  }[propSize];
};

var Wrapper = _styledComponents.default.div.withConfig({
  displayName: "Tag__Wrapper",
  componentId: "xm8zcm-0"
})(["border-radius:8px;box-sizing:border-box;display:inline-block;margin-right:8px;padding:4px 12px;", " ", " ", ""], function (_ref3) {
  var bold = _ref3.bold;
  return bold && "font-weight: bold;";
}, wrapperColors, wrapperSize);

var Content = _styledComponents.default.div.withConfig({
  displayName: "Tag__Content",
  componentId: "xm8zcm-1"
})(["", ""], function (_ref4) {
  var onClose = _ref4.onClose;
  return onClose && "\n    display: flex;\n    align-items: center;\n  ";
});

var iconSize = function iconSize(_ref5) {
  var size = _ref5.size,
      baseFontSize = _ref5.theme.baseFontSize;
  return {
    small: "".concat(baseFontSize * 0.875, "px"),
    medium: "".concat(baseFontSize * 1.125, "px"),
    large: "".concat(baseFontSize * 1.25, "px")
  }[size];
};

var CloseIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "Tag__CloseIcon",
  componentId: "xm8zcm-2"
})([""]);

var CloseButton = _styledComponents.default.button.withConfig({
  displayName: "Tag__CloseButton",
  componentId: "xm8zcm-3"
})(["background:none;border:none;cursor:pointer;height:", ";padding:0;", " ", "{font-size:", ";color:", ";}"], iconSize, function (_ref6) {
  var xxsmall = _ref6.theme.spacing.xxsmall;
  return "margin-left: ".concat(xxsmall, "px;");
}, CloseIcon, iconSize, function (props) {
  return _colors(props).text;
});

CloseButton.displayName = 'CloseButton';

var Tag = function Tag(_ref7) {
  var children = _ref7.children,
      text = _ref7.text,
      onClose = _ref7.onClose,
      rest = _objectWithoutProperties(_ref7, ["children", "text", "onClose"]);

  return _react.default.createElement(Wrapper, rest, _react.default.createElement(Content, {
    onClose: onClose
  }, children || text, onClose && _react.default.createElement(CloseButton, _extends({}, rest, {
    onClick: onClose
  }), _react.default.createElement(CloseIcon, {
    name: "close"
  }))));
};

Tag.propTypes = {
  bold: _propTypes.default.bool,
  children: _propTypes.default.string,
  inverted: _propTypes.default.bool,

  /** A callback that is called when close button is clicked */
  onClose: _propTypes.default.func,
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
  skin: _propTypes.default.oneOf(['neutral', 'primary', 'success', 'warning', 'error']),
  stroked: _propTypes.default.bool,
  text: _propTypes.default.string,
  theme: _propTypes.default.shape({
    colors: _propTypes.default.object,
    components: _propTypes.default.shape({
      tag: _propTypes.default.object
    }),
    spacing: _propTypes.default.object
  })
};
Tag.defaultProps = {
  bold: false,
  inverted: false,
  stroked: false,
  text: 'Tag text',
  children: '',
  size: 'medium',
  skin: 'neutral',
  onClose: undefined,
  theme: {
    baseFontSize: _theme.baseFontSize,
    colors: _theme.colors,
    components: {
      tag: _theme.components.tag
    },
    spacing: _theme.spacing
  }
};
var _default = Tag;
exports.default = _default;