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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.DEFAULT_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = exports.STICKY_NOTIFICATION = exports.GLOBAL_NOTIFICATION = exports.LOCAL_NOTIFICATION = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _wixAnimations = require("wix-animations");

var _CloseButton = _interopRequireDefault(require("../CloseButton"));

var _TextLabel = _interopRequireDefault(require("./TextLabel"));

var _ActionButton = _interopRequireDefault(require("./ActionButton"));

var _NotificationSt = require("./Notification.st.css");

var _StatusComplete = _interopRequireDefault(require("wix-ui-icons-common/StatusComplete"));

var _StatusWarning = _interopRequireDefault(require("wix-ui-icons-common/StatusWarning"));

var _StatusAlert = _interopRequireDefault(require("wix-ui-icons-common/StatusAlert"));

var _constants = require("./constants");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var LOCAL_NOTIFICATION = 'local';
exports.LOCAL_NOTIFICATION = LOCAL_NOTIFICATION;
var GLOBAL_NOTIFICATION = 'global';
exports.GLOBAL_NOTIFICATION = GLOBAL_NOTIFICATION;
var STICKY_NOTIFICATION = 'sticky';
exports.STICKY_NOTIFICATION = STICKY_NOTIFICATION;
var DEFAULT_AUTO_HIDE_TIMEOUT = 6000;
exports.DEFAULT_AUTO_HIDE_TIMEOUT = DEFAULT_AUTO_HIDE_TIMEOUT;
var DEFAULT_TIMEOUT = DEFAULT_AUTO_HIDE_TIMEOUT;
exports.DEFAULT_TIMEOUT = DEFAULT_TIMEOUT;
var animationsTimeouts = {
  enter: 300,
  exit: 300
};
var themeIcon = {
  error: /*#__PURE__*/_react["default"].createElement(_StatusAlert["default"], {
    className: _NotificationSt.classes.iconStyling
  }),
  success: /*#__PURE__*/_react["default"].createElement(_StatusComplete["default"], {
    className: _NotificationSt.classes.iconStyling
  }),
  warning: /*#__PURE__*/_react["default"].createElement(_StatusWarning["default"], {
    className: _NotificationSt.classes.iconStyling
  })
};

function mapChildren(children) {
  var childrenArray = _react.Children.toArray(children);

  return childrenArray.reduce(function (childrenAsMap, child) {
    switch (child.type.displayName) {
      case 'Notification.TextLabel':
        childrenAsMap.label = child;
        break;

      case 'Notification.ActionButton':
        childrenAsMap.ctaButton = child;
        break;

      case 'Notification.CloseButton':
        childrenAsMap.closeButton = /*#__PURE__*/_react["default"].cloneElement(child, {
          size: 'small'
        });
        break;
    }

    return childrenAsMap;
  }, {});
}

var heightCalculation = function heightCalculation(element) {
  var height = element.firstChild.offsetHeight;
  element.style.height = "".concat(height, "px");
  return height;
};

var Notification = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(Notification, _React$PureComponent);

  var _super = _createSuper(Notification);

  function Notification() {
    var _this;

    (0, _classCallCheck2["default"])(this, Notification);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeTimeout", void 0);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      hideByCloseClick: false,
      hideByTimer: false
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_hideNotificationOnCloseClick", function () {
      _this.setState({
        hideByCloseClick: true
      });

      setTimeout(function () {
        return _this.props.onClose && _this.props.onClose('hide-by-close-click');
      }, animationsTimeouts.exit + 100);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_hideNotificationOnTimeout", function () {
      _this.setState({
        hideByTimer: true
      });

      setTimeout(function () {
        return _this.props.onClose && _this.props.onClose('hide-by-timer');
      }, animationsTimeouts.exit + 100);
    });
    return _this;
  }

  (0, _createClass2["default"])(Notification, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (nextProps.show) {
        this._bypassCloseFlags();

        this._clearCloseTimeout();

        this._startCloseTimer(nextProps);
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this._startCloseTimer(this.props);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._clearCloseTimeout();
    }
  }, {
    key: "_startCloseTimer",
    value: function _startCloseTimer(_ref) {
      var _this2 = this;

      var autoHideTimeout = _ref.autoHideTimeout;

      if (autoHideTimeout) {
        this.closeTimeout = setTimeout(function () {
          return _this2._hideNotificationOnTimeout();
        }, autoHideTimeout || DEFAULT_AUTO_HIDE_TIMEOUT);
      }
    }
  }, {
    key: "_clearCloseTimeout",
    value: function _clearCloseTimeout() {
      if (this.closeTimeout) {
        clearTimeout(this.closeTimeout);
        this.closeTimeout = null;
      }
    }
  }, {
    key: "_bypassCloseFlags",
    value: function _bypassCloseFlags() {
      this.setState({
        hideByCloseClick: false,
        hideByTimer: false
      });
    }
  }, {
    key: "_shouldShowNotification",
    value: function _shouldShowNotification() {
      return this.props.show && !this.state.hideByCloseClick && !this.state.hideByTimer;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          theme = _this$props.theme,
          type = _this$props.type,
          zIndex = _this$props.zIndex,
          children = _this$props.children;
      var childrenComponents = mapChildren(children);

      var show = this._shouldShowNotification();

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _NotificationSt.st)(_NotificationSt.classes.root, {
          theme: theme,
          type: type
        }),
        style: {
          zIndex: zIndex
        },
        "data-hook": dataHook,
        "data-theme": theme,
        "data-type": type
      }, /*#__PURE__*/_react["default"].createElement(_wixAnimations.Animator, {
        show: show,
        className: _NotificationSt.classes.animator,
        childClassName: _NotificationSt.classes.animatorContent,
        timing: "medium",
        height: heightCalculation
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _NotificationSt.classes.wrapper
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.notificationContent,
        className: _NotificationSt.classes.notification,
        role: "alert",
        "aria-labelledby": "notification-label",
        "aria-live": "polite"
      }, themeIcon[theme] && /*#__PURE__*/_react["default"].createElement("div", null, themeIcon[theme]), /*#__PURE__*/_react["default"].createElement("div", {
        className: _NotificationSt.classes.labelWrapper
      }, childrenComponents.label, childrenComponents.ctaButton), childrenComponents.closeButton && /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.notificationCloseButton,
        className: _NotificationSt.classes.closeButton,
        onClick: this._hideNotificationOnCloseClick,
        children: childrenComponents.closeButton
      })))));
    }
  }]);
  return Notification;
}(_react["default"].PureComponent);

var Close = function Close(props) {
  return /*#__PURE__*/_react["default"].createElement(_CloseButton["default"], (0, _extends2["default"])({
    skin: "lightFilled"
  }, props));
};

Close.displayName = 'Notification.CloseButton';
Notification.displayName = 'Notification';
Notification.propTypes = {
  /** when set to `true`, notification is shown */
  show: _propTypes["default"].bool,

  /** Notification theme */
  theme: _propTypes["default"].oneOf(['standard', 'error', 'success', 'warning', 'premium']),

  /** Sets how <Notification/> should be displayed:
   * - `type="global"` will take up space and push the content down.
   * - `type="local"` will not take up space and will be displayed on top of content
   * - `type="sticky"` will not take up space and will be displayed at the top of whole page and on top of content (position: fixed;)
   * */
  type: _propTypes["default"].oneOf([GLOBAL_NOTIFICATION, LOCAL_NOTIFICATION, STICKY_NOTIFICATION]),

  /** When provided, then the Notification will be hidden after the specified timeout. */
  autoHideTimeout: _propTypes["default"].number,

  /** Notification z-index */
  zIndex: _propTypes["default"].number,
  onClose: _propTypes["default"].func,

  /** Can be either:
   * - `<Notification.TextLabel/>` (required)
   * - `<Notification.CloseButton/>`
   * - `<Notification.ActionButton/>` */
  children: _propTypes["default"].node
};
Notification.defaultProps = {
  theme: 'standard',
  type: GLOBAL_NOTIFICATION,
  onClose: null
};
Notification.CloseButton = Close;
Notification.TextLabel = _TextLabel["default"];
Notification.ActionButton = _ActionButton["default"];
var _default = Notification;
exports["default"] = _default;