wix-style-react/dist/src/FloatingNotification/FloatingNotification.js

wix-style-react

"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 _propTypes = _interopRequireDefault(require("prop-types"));
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 _constants = require("./constants");
var _FloatingNotificationSt = require("./FloatingNotification.st.css");
var _context = require("../WixStyleReactProvider/context");
var _excluded = ["label"],
  _excluded2 = ["label"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FloatingNotification/FloatingNotification.js";
var buttonPropTypes = _propTypes.default.shape({
  label: _propTypes.default.node,
  as: _propTypes.default.node,
  href: _propTypes.default.string,
  onClick: _propTypes.default.func
});

/**
 * Displays simple and temporary messages or destructive events
 */
class FloatingNotification extends _react.default.PureComponent {
  render() {
    var {
      type,
      className,
      dataHook,
      width,
      fullWidth
    } = this.props;
    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(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": dataHook,
        className: (0, _FloatingNotificationSt.st)(_FloatingNotificationSt.classes.root, {
          fullWidth,
          type,
          newColorsBranding
        }, className),
        style: style,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89,
          columnNumber: 11
        }
      }, icon, content, textButton, button, /*#__PURE__*/_react.default.createElement("div", {
        className: _FloatingNotificationSt.classes.gap,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 13
        }
      }), close);
    });
  }
  _getIcon() {
    var {
      prefixIcon,
      type
    } = this.props;
    return prefixIcon ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _FloatingNotificationSt.st)(_FloatingNotificationSt.classes.icon, {
        type
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 113,
        columnNumber: 7
      }
    }, prefixIcon) : null;
  }
  _getContent() {
    var {
      text,
      type
    } = this.props;
    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: 120,
        columnNumber: 7
      }
    }, text);
  }
  _getTextButton() {
    var {
      textButtonProps,
      type
    } = this.props;
    var {
        label
      } = textButtonProps,
      rest = (0, _objectWithoutProperties2.default)(textButtonProps, _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: 137,
        columnNumber: 7
      }
    }), label) : null;
  }
  _getButton() {
    var {
      buttonProps,
      type
    } = this.props;
    var {
        label
      } = buttonProps,
      rest = (0, _objectWithoutProperties2.default)(buttonProps, _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: 155,
        columnNumber: 7
      }
    }), label) : null;
  }
  _getClose() {
    var {
      showCloseButton,
      onClose,
      type
    } = this.props;
    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: 171,
        columnNumber: 7
      }
    }) : null;
  }
}
FloatingNotification.displayName = 'FloatingNotification';
FloatingNotification.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A css class to be applied to the component's root element */
  className: _propTypes.default.string,
  /** the type of notification */
  type: _propTypes.default.oneOf(['standard', 'success', 'destructive', 'warning', 'premium', 'preview', 'dark']),
  /** decides if to show the close button */
  showCloseButton: _propTypes.default.bool,
  /** close button on click handler */
  onClose: _propTypes.default.func,
  /** props to pass to textButton - renders the TextButton when not empty*/
  textButtonProps: buttonPropTypes,
  /** props to pass to button - renders the Button when not empty */
  buttonProps: buttonPropTypes,
  /** An icon element to appear before content */
  prefixIcon: _propTypes.default.element,
  /** The text content of the notification */
  text: _propTypes.default.node,
  /** The width of the content container of the notification */
  width: _propTypes.default.string,
  /** Is notification full width (removes left and right border, border radius, more height and bigger paddings) */
  fullWidth: _propTypes.default.bool
};
FloatingNotification.defaultProps = {
  type: 'standard',
  buttonProps: {},
  textButtonProps: {},
  showCloseButton: true
};
var _default = exports.default = FloatingNotification;
//# sourceMappingURL=FloatingNotification.js.map