wix-style-react
Version:
wix-style-react
149 lines (148 loc) • 6.53 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Focusable = require("../common/Focusable");
var _generateDataAttr = require("../utils/generateDataAttr");
var _constants = require("./constants");
var _BadgeSt = require("./Badge.st.css");
var _Caption = _interopRequireDefault(require("../Text/Caption"));
var _context = require("../WixStyleReactProvider/context");
var _excluded = ["focusableOnFocus", "focusableOnBlur"],
_excluded2 = ["children", "prefixIcon", "suffixIcon", "onClick", "dataHook", "className", "showTooltip"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Badge/Badge.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; }
class Badge extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.getProps = () => {
// that's what you pay for using HOCs...
var _this$props = this.props,
{
focusableOnFocus,
focusableOnBlur
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
return rest;
};
this._getFocusableProps = () => {
// add focusable hooks only when badge is clickable
var {
onClick,
focusableOnFocus,
focusableOnBlur
} = this.props;
return onClick ? {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0
} : {};
};
}
render() {
var _this$getProps = this.getProps(),
{
children,
prefixIcon,
suffixIcon,
onClick,
dataHook,
className,
showTooltip
} = _this$getProps,
rest = (0, _objectWithoutProperties2.default)(_this$getProps, _excluded2);
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
"data-hook": dataHook,
onClick: onClick
}, this._getFocusableProps(), {
className: (0, _BadgeSt.st)(_BadgeSt.classes.root, _objectSpread({
clickable: !!onClick,
newColorsBranding
}, rest), className)
}, (0, _generateDataAttr.generateDataAttr)(this.props, ['type', 'skin', 'size', 'uppercase']), {
"data-clickable": !!onClick
/* TODO: this prop used to come from stylable v1 spread and is used for testing. Update component testkit to use stylable testkit instead */,
"data-is-inverted": rest['data-is-inverted'],
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 11
}
}), prefixIcon && /*#__PURE__*/_react.default.cloneElement(prefixIcon, {
className: _BadgeSt.classes.prefix,
'data-prefix-icon': true
}), /*#__PURE__*/_react.default.createElement(_Caption.default, {
className: _BadgeSt.classes.text,
caption: this.getProps().size === 'tiny' ? 'c2' : 'c1',
ellipsis: true,
showTooltip: showTooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 13
}
}, children), suffixIcon && /*#__PURE__*/_react.default.cloneElement(suffixIcon, {
className: _BadgeSt.classes.suffix,
'data-suffix-icon': true
}));
});
}
}
Badge.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Applies a CSS class to the component’s root element */
className: _propTypes.default.string,
/** Controls the appearance of a notification */
type: _propTypes.default.oneOf(['solid', 'outlined', 'transparent']),
/** Controls the appearance of a notification */
skin: _propTypes.default.oneOf(['general', 'standard', 'danger', 'success', 'neutral', 'warning', 'urgent', 'neutralLight', 'neutralStandard', 'neutralSuccess', 'neutralDanger', 'premium', 'warningLight']),
/** Controls the size of the component */
size: _propTypes.default.oneOf(['medium', 'small', 'tiny']),
/** Pass an icon or a component to display in front of the content */
prefixIcon: _propTypes.default.node,
/** Pass an icon or a component to display at the end of the content */
suffixIcon: _propTypes.default.node,
/** Defines a click handler */
onClick: _propTypes.default.func,
/** Forces uppercase letters */
uppercase: _propTypes.default.bool,
/** Removes paddings from the component */
noPadding: _propTypes.default.bool,
/** Controls whether ellipsis tooltip is enabled. */
showTooltip: _propTypes.default.bool,
focusableOnFocus: _propTypes.default.func,
focusableOnBlur: _propTypes.default.func,
/** Accepts any component as a child item. Usually it is a text string. */
children: _propTypes.default.node
};
Badge.displayName = 'Badge';
Badge.defaultProps = {
type: _constants.TYPE.solid,
skin: _constants.SKIN.general,
size: _constants.SIZE.medium,
uppercase: true,
noPadding: false,
showTooltip: true
};
var _default = exports.default = (0, _Focusable.withFocusable)(Badge);
//# sourceMappingURL=Badge.js.map