wix-style-react
Version:
wix-style-react
202 lines (200 loc) • 7.13 kB
JavaScript
"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TagSt = require("./Tag.st.css");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _Tag2 = require("./Tag.helpers");
var _generateDataAttr = require("../utils/generateDataAttr");
var _EllipsisCommon = require("../common/PropTypes/EllipsisCommon");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Tag/Tag.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var tagToTextSize = {
tiny: 'tiny',
small: 'small',
medium: 'small',
large: 'medium'
};
/**
* A Tag component
*/
class Tag extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._handleRemoveClick = event => {
var {
onRemove,
id
} = this.props;
event.stopPropagation();
onRemove(id);
};
this._handleRemoveKeyDown = event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this._handleRemoveClick(event);
}
};
this._handleOnClick = event => {
var {
id,
onClick
} = this.props;
return onClick && onClick(id, event);
};
}
_renderThumb() {
var {
thumb
} = this.props;
return thumb ? /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _Tag2.dataHooks.thumb,
className: _TagSt.classes.thumb,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 7
}
}, thumb) : null;
}
_renderText() {
var {
size,
children,
disabled,
theme,
ellipsisProps
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Text.default, {
skin: disabled ? 'disabled' : 'standard',
light: theme === 'dark',
secondary: theme !== 'dark',
ellipsis: true,
tooltipProps: ellipsisProps,
size: tagToTextSize[size],
weight: "thin",
className: _TagSt.classes.text,
dataHook: _Tag2.dataHooks.text,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 7
}
}, children);
}
_renderRemoveButton() {
var {
removable,
disabled,
size,
theme
} = this.props;
if (removable) {
return /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
size: size === 'large' ? 'medium' : 'small',
skin: theme === 'dark' ? 'light' : 'dark',
disabled: disabled,
dataHook: _Tag2.dataHooks.removeButton,
className: _TagSt.classes.removeButton,
onClick: this._handleRemoveClick,
onKeyDown: this._handleRemoveKeyDown,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 9
}
});
} else {
return null;
}
}
render() {
var {
id,
onClick,
maxWidth,
dataHook,
size,
disabled,
theme,
thumb,
removable,
className
} = this.props;
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,
theme
}, className)
}, (0, _generateDataAttr.generateDataAttr)(_objectSpread(_objectSpread({}, this.props), {}, {
hoverable,
clickable
}), ['size', 'disabled', 'theme', 'hoverable', 'clickable']), {
"data-hook": dataHook,
id: id,
onClick: this._handleOnClick,
style: {
maxWidth: typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px")
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 7
}
}), this._renderThumb(), this._renderText(), this._renderRemoveButton());
}
}
Tag.displayName = 'Tag';
Tag.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Sets the text of the tag */
children: _propTypes.default.node.isRequired,
/** Specifies whether the tag should be disabled */
disabled: _propTypes.default.bool,
/** Ellipsis props */
ellipsisProps: _propTypes.default.shape(_EllipsisCommon.EllipsisCommonProps),
/** Assigns an unique identifier for the tag */
id: _propTypes.default.string.isRequired,
/** Defines a callback function which is called whenever a tag component is clicked.
* It passes the id property as the first parameter and a mouse event as second parameter. */
onClick: _propTypes.default.func,
/** Defines a callback function which is called when removing the tag. It passes the id property as a parameter. */
onRemove: _propTypes.default.func,
/** Specifies whether the tag is removable or not. If enabled, a small clickable X icon is displayed on the right side of a component. */
removable: _propTypes.default.bool,
/** Controls the size of the component */
size: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large']),
/** Sets the theme of the component */
theme: _propTypes.default.oneOf(['standard', 'error', 'warning', 'dark', 'neutral', 'success', 'light', 'lightOutlined']),
/** Displays a thumbnail at the front of a tag label. Usually contain icons or `<Avatar/>`. */
thumb: _propTypes.default.element,
/** Sets a maximum tag width */
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string
};
Tag.defaultProps = {
size: 'small',
removable: true,
theme: 'standard'
};
var _default = exports.default = Tag;
//# sourceMappingURL=Tag.js.map