@wix/design-system
Version:
@wix/design-system
171 lines (170 loc) • 6.35 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _Text = _interopRequireDefault(require("../Text"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _Button = _interopRequireDefault(require("../Button"));
var _CloseButton = _interopRequireDefault(require("../CloseButton/CloseButton"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _constants = require("./constants");
var _FloatingNotificationSt = require("./FloatingNotification.st.css.js");
var _excluded = ["label"],
_excluded2 = ["label"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FloatingNotification/FloatingNotification.tsx";
/**
* @deprecated FloatingNotification is deprecated and will be removed in the next major version. Please use SectionHelper instead.
*/
class FloatingNotification extends _react.default.PureComponent {
constructor(props) {
super(props);
(0, _deprecationLog.default)('<FloatingNotification/> is deprecated and will be removed in the next major version. Please use <SectionHelper/> instead.');
}
render() {
var _this$props = this.props,
type = _this$props.type,
className = _this$props.className,
dataHook = _this$props.dataHook,
width = _this$props.width,
fullWidth = _this$props.fullWidth;
var icon = this._getIcon();
var content = this._getContent();
var textButton = this._getTextButton();
var button = this._getButton();
var close = this._getClose();
var style = {
width
};
width && (style.maxWidth = width);
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _FloatingNotificationSt.st)(_FloatingNotificationSt.classes.root, {
fullWidth,
type
}, className),
style: style,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 7
}
}, icon, content, textButton, button, /*#__PURE__*/_react.default.createElement("div", {
className: _FloatingNotificationSt.classes.gap,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 9
}
}), close);
}
_getIcon() {
var _this$props2 = this.props,
prefixIcon = _this$props2.prefixIcon,
type = _this$props2.type;
return prefixIcon ? /*#__PURE__*/_react.default.createElement("div", {
className: (0, _FloatingNotificationSt.st)(_FloatingNotificationSt.classes.icon, {
type
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 7
}
}, prefixIcon) : null;
}
_getContent() {
var _this$props3 = this.props,
text = _this$props3.text,
type = _this$props3.type;
return /*#__PURE__*/_react.default.createElement(_Text.default, {
size: "small",
ellipsis: true,
light: type === _constants.TYPES.dark,
dataHook: _constants.dataHooks.notificationText,
className: _FloatingNotificationSt.classes.text,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 7
}
}, text);
}
_getTextButton() {
var _this$props4 = this.props,
textButtonProps = _this$props4.textButtonProps,
type = _this$props4.type;
var _ref = textButtonProps !== null && textButtonProps !== void 0 ? textButtonProps : {},
label = _ref.label,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return !(0, _isEmpty.default)(textButtonProps) ? /*#__PURE__*/_react.default.createElement(_TextButton.default, (0, _extends2.default)({}, rest, {
underline: "always",
skin: type !== _constants.TYPES.dark ? 'dark' : 'light',
size: "small",
className: _FloatingNotificationSt.classes.textButton,
dataHook: _constants.dataHooks.textButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 7
}
}), label) : null;
}
_getButton() {
var _this$props5 = this.props,
buttonProps = _this$props5.buttonProps,
type = _this$props5.type;
var _ref2 = buttonProps !== null && buttonProps !== void 0 ? buttonProps : {},
label = _ref2.label,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
return !(0, _isEmpty.default)(buttonProps) ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, rest, {
className: _FloatingNotificationSt.classes.button,
size: "tiny",
priority: type !== _constants.TYPES.dark ? 'secondary' : 'primary',
skin: type !== _constants.TYPES.dark ? 'dark' : 'standard',
dataHook: _constants.dataHooks.button,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 7
}
}), label) : null;
}
_getClose() {
var _this$props6 = this.props,
showCloseButton = _this$props6.showCloseButton,
onClose = _this$props6.onClose,
type = _this$props6.type;
return showCloseButton ? /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
size: "medium",
skin: type !== _constants.TYPES.dark ? 'dark' : 'light',
className: _FloatingNotificationSt.classes.close,
dataHook: _constants.dataHooks.closeButton,
onClick: onClose,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 7
}
}) : null;
}
}
FloatingNotification.displayName = 'FloatingNotification';
FloatingNotification.defaultProps = {
type: 'standard',
buttonProps: {},
textButtonProps: {},
showCloseButton: true
};
var _default = exports.default = FloatingNotification;
//# sourceMappingURL=FloatingNotification.js.map