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

wix-style-react

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;

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

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './Tag.scss';
import CloseButton from '../CloseButton';
import WixComponent from '../BaseComponents/WixComponent';
import Text from '../Text';
import noop from 'lodash/noop';
import deprecationLog from '../utils/deprecationLog';
import { dataHooks } from './Tag.helpers';

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) {
        deprecationLog(useOldMarginsDeprecationMessage);
      }
    }
  }, {
    key: '_renderThumb',
    value: function _renderThumb() {
      var thumb = this.props.thumb;

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


      return React.createElement(
        Text,
        {
          ellipsis: wrap,
          size: tagToTextSize[size],
          weight: size === 'tiny' ? 'thin' : 'normal',
          dataHook: 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 React.createElement(CloseButton, {
          size: size === 'large' ? 'medium' : 'small',
          skin: 'dark',
          dataHook: dataHooks.removeButton,
          className: styles.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 classNames(styles.root, className, styles[theme + 'Theme'], styles[size + 'Size'], (_classNames = {}, _defineProperty(_classNames, styles.deprecatedMargins, useOldMargins), _defineProperty(_classNames, styles.withRemoveButton, removable && !disabled), _defineProperty(_classNames, styles.withThumb, thumb), _defineProperty(_classNames, styles.disabled, disabled), _defineProperty(_classNames, styles.clickable, onClick !== noop), _classNames));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          id = _props4.id,
          _onClick = _props4.onClick,
          maxWidth = _props4.maxWidth;


      return React.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;
}(WixComponent), _class.displayName = 'Tag', _temp2);


Tag.propTypes = {
  children: PropTypes.string.isRequired,

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

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

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

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

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

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

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

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

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

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

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

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

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

export default Tag;