wix-style-react/dist/src/Tag/Tag.js

wix-style-react

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _class, _temp2;

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 _Tag = require('./Tag.scss');

var _Tag2 = _interopRequireDefault(_Tag);

var _CloseButton = require('../CloseButton');

var _CloseButton2 = _interopRequireDefault(_CloseButton);

var _WixComponent2 = require('../BaseComponents/WixComponent');

var _WixComponent3 = _interopRequireDefault(_WixComponent2);

var _Text = require('../Text');

var _Text2 = _interopRequireDefault(_Text);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _deprecationLog = require('../utils/deprecationLog');

var _deprecationLog2 = _interopRequireDefault(_deprecationLog);

var _Tag3 = require('./Tag.helpers');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var useOldMarginsDeprecationMessage = 'You\'re using the <Tag/> component with margins which are incorrect. Pass \'useOldMargins={false}\' prop in order to remove them. They will be removed in the next major version';

var tagToTextSize = {
  tiny: 'tiny',
  small: 'small',
  medium: 'small',
  large: 'medium'
};

/**
 * A Tag component
 */
var Tag = (_temp2 = _class = function (_WixComponent) {
  _inherits(Tag, _WixComponent);

  function Tag() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Tag);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tag.__proto__ || Object.getPrototypeOf(Tag)).call.apply(_ref, [this].concat(args))), _this), _this._handleRemoveClick = function (event) {
      var _this$props = _this.props,
          onRemove = _this$props.onRemove,
          id = _this$props.id;

      event.stopPropagation();
      onRemove(id);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Tag, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      _get(Tag.prototype.__proto__ || Object.getPrototypeOf(Tag.prototype), 'componentDidMount', this).call(this);
      if (this.props.useOldMargins) {
        (0, _deprecationLog2.default)(useOldMarginsDeprecationMessage);
      }
    }
  }, {
    key: '_renderThumb',
    value: function _renderThumb() {
      var thumb = this.props.thumb;

      return thumb ? _react2.default.createElement(
        'span',
        { className: _Tag2.default.thumb },
        thumb
      ) : null;
    }
  }, {
    key: '_renderText',
    value: function _renderText() {
      var _props = this.props,
          size = _props.size,
          wrap = _props.wrap,
          children = _props.children;


      return _react2.default.createElement(
        _Text2.default,
        {
          ellipsis: wrap,
          size: tagToTextSize[size],
          weight: size === 'tiny' ? 'thin' : 'normal',
          dataHook: _Tag3.dataHooks.text
        },
        children
      );
    }
  }, {
    key: '_renderRemoveButton',
    value: function _renderRemoveButton() {
      var _props2 = this.props,
          removable = _props2.removable,
          disabled = _props2.disabled,
          size = _props2.size;

      if (removable && !disabled) {
        return _react2.default.createElement(_CloseButton2.default, {
          size: size === 'large' ? 'medium' : 'small',
          skin: 'dark',
          dataHook: _Tag3.dataHooks.removeButton,
          className: _Tag2.default.removeButton,
          onClick: this._handleRemoveClick
        });
      } else {
        return null;
      }
    }
  }, {
    key: '_getClassName',
    value: function _getClassName() {
      var _classNames;

      var _props3 = this.props,
          thumb = _props3.thumb,
          removable = _props3.removable,
          size = _props3.size,
          disabled = _props3.disabled,
          theme = _props3.theme,
          useOldMargins = _props3.useOldMargins,
          className = _props3.className,
          onClick = _props3.onClick;

      return (0, _classnames2.default)(_Tag2.default.root, className, _Tag2.default[theme + 'Theme'], _Tag2.default[size + 'Size'], (_classNames = {}, _defineProperty(_classNames, _Tag2.default.deprecatedMargins, useOldMargins), _defineProperty(_classNames, _Tag2.default.withRemoveButton, removable && !disabled), _defineProperty(_classNames, _Tag2.default.withThumb, thumb), _defineProperty(_classNames, _Tag2.default.disabled, disabled), _defineProperty(_classNames, _Tag2.default.clickable, onClick !== _noop2.default), _classNames));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          id = _props4.id,
          _onClick = _props4.onClick,
          maxWidth = _props4.maxWidth;


      return _react2.default.createElement(
        'span',
        {
          className: this._getClassName(),
          id: id,
          onClick: function onClick() {
            return _onClick(id);
          },
          style: { maxWidth: maxWidth + 'px' }
        },
        this._renderThumb(),
        this._renderText(),
        this._renderRemoveButton()
      );
    }
  }]);

  return Tag;
}(_WixComponent3.default), _class.displayName = 'Tag', _temp2);


Tag.propTypes = {
  children: _propTypes2.default.string.isRequired,

  /** when set to true this component is disabled */
  disabled: _propTypes2.default.bool,

  /** This feature keeps the old margins set to the component. in next major version will be set to false by default  */
  useOldMargins: _propTypes2.default.bool,

  /** The id of the Tag  */
  id: _propTypes2.default.string.isRequired,

  /** Callback function that pass `id` property as parameter when clicking on Tag */
  onClick: _propTypes2.default.func,

  /** Callback function that pass `id` property as parameter when removing the Tag  */
  onRemove: _propTypes2.default.func,

  /** If the Tag is removable then it will contain a small clickable X */
  removable: _propTypes2.default.bool,

  /** The height of the Tag */
  size: _propTypes2.default.oneOf(['tiny', 'small', 'medium', 'large']),

  /** theme of the Tag */
  theme: _propTypes2.default.oneOf(['standard', 'error', 'warning']),

  /** An optional thumb to display as part of the Tag */
  thumb: _propTypes2.default.element,

  /** An optional maximum tag width in `px` for cropping. Should be used in pair with `wrap` property  */
  maxWidth: _propTypes2.default.number,

  /** Whether to display ellipsis (...) for long content */
  wrap: _propTypes2.default.bool,

  /* Standard className which has preference over any other intrinsic classes  */
  className: _propTypes2.default.string
};

Tag.defaultProps = {
  onClick: _noop2.default,
  onRemove: _noop2.default,
  size: 'small',
  removable: true,
  theme: 'standard',
  wrap: false,
  useOldMargins: true
};

exports.default = Tag;