wix-style-react/dist/src/Toast/components/ToastItem/ToastItem.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ToastItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _constants = require("../../constants");
var _Text = _interopRequireDefault(require("../../../Text"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _TextButton = _interopRequireDefault(require("../../../TextButton"));
var _ToastItemSt = require("./ToastItem.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Toast/components/ToastItem/ToastItem.tsx";
var ToastItem = _ref => {
  var {
    children,
    toastId,
    onClose,
    showDismiss = true,
    status = _constants.STATUS.DEFAULT,
    action,
    dismissTitle = 'Dismiss',
    dataHook
  } = _ref;
  _react.default.useEffect(() => {
    if (status !== _constants.STATUS.SUCCESS) return;
    var timer = setTimeout(() => onClose(), _constants.SUCCESS_AUTO_CLOSE_TIME);
    return () => clearTimeout(timer);
    // TODO: fix ESLint error
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var icon = _react.default.useMemo(() => {
    switch (status) {
      case _constants.STATUS.SUCCESS:
        {
          return /*#__PURE__*/_react.default.createElement("div", {
            className: _ToastItemSt.classes.iconContainer,
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 37,
              columnNumber: 11
            }
          }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusCompleteFilled, {
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 38,
              columnNumber: 13
            }
          }));
        }
      case _constants.STATUS.ERROR:
        {
          return /*#__PURE__*/_react.default.createElement("div", {
            className: _ToastItemSt.classes.iconContainer,
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 44,
              columnNumber: 11
            }
          }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertFilled, {
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 45,
              columnNumber: 13
            }
          }));
        }
      case _constants.STATUS.WARNING:
        {
          return /*#__PURE__*/_react.default.createElement("div", {
            className: _ToastItemSt.classes.iconContainer,
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 51,
              columnNumber: 11
            }
          }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarningFilled, {
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 52,
              columnNumber: 13
            }
          }));
        }
      default:
        {
          return /*#__PURE__*/_react.default.createElement("div", {
            className: _ToastItemSt.classes.iconContainer,
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 58,
              columnNumber: 11
            }
          }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircleFilled, {
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 59,
              columnNumber: 13
            }
          }));
        }
    }
  }, [status]);
  var handleDismissClick = e => {
    e.preventDefault();
    e.stopPropagation();
    onClose(e);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    id: toastId,
    className: (0, _ToastItemSt.st)(_ToastItemSt.classes.toast, {
      showDismiss,
      success: status === _constants.STATUS.SUCCESS,
      error: status === _constants.STATUS.ERROR,
      warning: status === _constants.STATUS.WARNING
    }),
    "data-hook": dataHook ? "toast-item ".concat(dataHook) : "toast-item",
    "data-status": status
    // will be redefined after proper component spec
    ,
    role: "alert",
    "aria-live": "polite",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 5
    }
  }, icon, /*#__PURE__*/_react.default.createElement(_Text.default, {
    light: true,
    size: "medium",
    dataHook: "toast-text",
    className: _ToastItemSt.classes.toastText,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 7
    }
  }, children), action &&
  /*#__PURE__*/
  // @ts-ignore
  _react.default.createElement(_TextButton.default, {
    skin: "light",
    size: "medium",
    underline: "always",
    as: action.href ? 'a' : undefined,
    href: action.href,
    onClick: action.onClick,
    className: _ToastItemSt.classes.secondAction,
    dataHook: "action-button",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 9
    }
  }, action.title), showDismiss &&
  /*#__PURE__*/
  // @ts-ignore
  _react.default.createElement(_TextButton.default, {
    skin: "light",
    size: "medium",
    underline: "always",
    onClick: handleDismissClick,
    dataHook: "dismiss-button",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 113,
      columnNumber: 9
    }
  }, dismissTitle));
};
exports.ToastItem = ToastItem;
//# sourceMappingURL=ToastItem.js.map