@wix/design-system/dist/cjs/Tag/Tag.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TagSt = require("./Tag.st.css.js");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _generateDataAttr = require("../utils/generateDataAttr");
var _Tag = require("./Tag.constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["id", "onClick", "onRemove", "maxWidth", "dataHook", "size", "theme", "removable", "disabled", "thumb", "ellipsisProps", "className", "children"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Tag/Tag.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var formatPx = maxWidth => typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
var Tag = _ref => {
  var {
      id,
      onClick,
      onRemove,
      maxWidth,
      dataHook,
      size = _Tag.SIZE.small,
      theme = _Tag.SKIN.standard,
      // TODO: add default value for skin once theme is removed
      removable = true,
      disabled,
      thumb,
      ellipsisProps,
      className,
      children
    } = _ref,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var skin = props.skin || theme;
  (0, _react.useEffect)(() => {
    if (theme) {
      (0, _deprecationLog.default)('<Tag/> - theme prop is deprecated and will be removed in next major version, please use skin instead');
    }
  }, [theme]);
  var handleRemove = event => {
    event.preventDefault();
    event.stopPropagation();
    onRemove == null || onRemove(id);
  };
  var handleOnClick = event => {
    onClick == null || onClick(id, event);
  };
  var handleRemoveKeyDown = event => {
    if (_Tag.validRemoveKeys.includes(event.key)) {
      handleRemove(event);
    }
  };
  var clickable = !!onClick;
  var hoverable = !disabled && !!onClick;
  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
    className: (0, _TagSt.st)(_TagSt.classes.root, {
      withRemoveButton: removable,
      withThumb: !!thumb,
      disabled,
      clickable,
      hoverable,
      size,
      skin
    }, className)
  }, (0, _generateDataAttr.generateDataAttr)({
    size,
    disabled,
    skin,
    hoverable,
    clickable
  }, ['size', 'disabled', 'skin', 'hoverable', 'clickable']), {
    "data-hook": dataHook,
    id: id,
    onClick: handleOnClick,
    style: {
      maxWidth: formatPx(maxWidth)
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 5
    }
  }), thumb && /*#__PURE__*/_react.default.createElement("span", {
    "data-hook": _Tag.dataHooks.thumb,
    className: _TagSt.classes.thumb,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 9
    }
  }, thumb), /*#__PURE__*/_react.default.createElement(_Text.default, {
    skin: disabled ? 'disabled' : 'standard',
    light: skin === 'dark',
    secondary: skin !== 'dark',
    ellipsis: true,
    tooltipProps: ellipsisProps,
    size: _Tag.tagToTextSize[size],
    weight: "thin",
    className: _TagSt.classes.text,
    dataHook: _Tag.dataHooks.text,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 106,
      columnNumber: 7
    }
  }, children), removable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
    size: size === 'large' ? 'medium' : 'small',
    skin: skin === 'dark' ? 'light' : 'dark',
    disabled: disabled,
    dataHook: _Tag.dataHooks.removeButton,
    className: _TagSt.classes.removeButton,
    onClick: handleRemove,
    onKeyDown: handleRemoveKeyDown,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 9
    }
  }));
};
Tag.propTypes = {
  dataHook: _propTypes.default.any,
  children: _propTypes.default.any,
  disabled: _propTypes.default.any,
  ellipsisProps: _propTypes.default.any,
  id: _propTypes.default.any,
  onClick: _propTypes.default.any,
  onRemove: _propTypes.default.any,
  removable: _propTypes.default.any,
  size: _propTypes.default.any,
  skin: _propTypes.default.any,
  theme: _propTypes.default.any,
  thumb: _propTypes.default.any,
  maxWidth: _propTypes.default.any,
  className: _propTypes.default.any
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Tag);
//# sourceMappingURL=Tag.js.map