boldr-ui/Tag/Tag.js

UI components for Boldr

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _BoldrComponent2 = require('../utils/BoldrComponent');

var _BoldrComponent3 = _interopRequireDefault(_BoldrComponent2);

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

var Tag = function (_BoldrComponent) {
  (0, _inherits3.default)(Tag, _BoldrComponent);

  function Tag() {
    (0, _classCallCheck3.default)(this, Tag);
    return (0, _possibleConstructorReturn3.default)(this, (Tag.__proto__ || (0, _getPrototypeOf2.default)(Tag)).apply(this, arguments));
  }

  (0, _createClass3.default)(Tag, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          id = _props.id,
          children = _props.children,
          thumb = _props.thumb,
          removable = _props.removable,
          onRemove = _props.onRemove,
          size = _props.size,
          wrap = _props.wrap,
          disabled = _props.disabled;


      var className = (0, _classnames2.default)({
        'boldrui-tag': true,
        'boldrui-tag__lg': size === 'large',
        'boldrui-tag__wrap': wrap,
        'boldrui-tag__disabled': disabled
      });

      var innerClassName = (0, _classnames2.default)({
        'boldrui-tag__inner-wrap': wrap,
        'boldrui-typo-4': true
      });

      var title = wrap ? children : '';

      return _react2.default.createElement(
        'span',
        { className: className, disabled: disabled, id: id, title: title },
        thumb && _react2.default.createElement(
          'span',
          { className: 'boldrui-tag__thumb' },
          thumb
        ),
        _react2.default.createElement(
          'span',
          { className: innerClassName },
          children
        ),
        removable && !disabled && _react2.default.createElement('a', { className: 'boldrui-tag__remove--btn', onClick: function onClick() {
            return onRemove(id);
          } })
      );
    }
  }]);
  return Tag;
}(_BoldrComponent3.default);

Tag.propTypes = {
  children: _propTypes2.default.string.isRequired,
  id: _propTypes2.default.string.isRequired,
  thumb: _propTypes2.default.element,
  onRemove: _propTypes2.default.func,
  removable: _propTypes2.default.bool,
  size: _propTypes2.default.oneOf(['small', 'large']),
  wrap: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool
};
Tag.defaultProps = {
  onRemove: function onRemove() {},
  size: 'small',
  removable: true
};
exports.default = Tag;