@braineet/ui/dist/esm/components/notification/notification.js

Braineet design system

var _excluded = ["icon"],
  _excluded2 = ["icon"];
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable react/prop-types */
import React from 'react';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import { toast as toastReactToastigy } from 'react-toastify';
import Pane from '../pane';
import { Wrapper, StyledIcon, Title, Wrap, ActionWrapper, ActionButton, Description, Cross } from './styles';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var iconByType = {
  success: 'tick',
  error: 'error'
};
var Msg = function Msg(_ref) {
  var closeToast = _ref.closeToast,
    icon = _ref.icon,
    _ref$appareance = _ref.appareance,
    appareance = _ref$appareance === void 0 ? 'default' : _ref$appareance,
    variant = _ref.variant,
    primaryActionText = _ref.primaryActionText,
    secondaryActionText = _ref.secondaryActionText,
    children = _ref.children,
    title = _ref.title,
    description = _ref.description,
    onPrimaryAction = _ref.onPrimaryAction,
    primaryActionProps = _ref.primaryActionProps,
    onSecondaryAction = _ref.onSecondaryAction,
    secondaryActionProps = _ref.secondaryActionProps,
    _ref$closable = _ref.closable,
    closable = _ref$closable === void 0 ? true : _ref$closable,
    isLoading = _ref.isLoading;
  var getVariant = function getVariant() {
    if (variant) return variant;
    if (primaryActionText || secondaryActionText) return 'actions';
    return 'default';
  };
  var currentVariant = getVariant();
  var getNbActions = function getNbActions() {
    if (primaryActionText && secondaryActionText) return 2;
    if (primaryActionText || secondaryActionText) return 1;
    return 0;
  };
  var nbActions = React.useMemo(function () {
    return getNbActions();
  }, [primaryActionText, secondaryActionText]);
  return /*#__PURE__*/_jsxs(Wrapper, {
    variant: currentVariant,
    appareance: appareance,
    children: [/*#__PURE__*/_jsxs(Pane, {
      display: "flex",
      alignY: "center",
      children: [(icon && typeof icon === 'string' || isLoading) && /*#__PURE__*/_jsx(StyledIcon, {
        variant: currentVariant,
        appareance: appareance,
        name: isLoading ? 'loader_ring' : icon,
        size: 16
      }), children || (title !== undefined || description !== undefined) && /*#__PURE__*/_jsx(Pane, {
        display: "flex",
        flexDirection: "row",
        children: /*#__PURE__*/_jsx(Wrap, {
          children: children || (title !== undefined || description !== undefined) && /*#__PURE__*/_jsxs(_Fragment, {
            children: [title !== undefined && /*#__PURE__*/_jsx(Title, {
              variant: currentVariant,
              children: title
            }), description !== undefined && /*#__PURE__*/_jsx(Description, {
              variant: currentVariant,
              children: description
            })]
          })
        })
      })]
    }), (primaryActionText || secondaryActionText) && /*#__PURE__*/_jsxs(ActionWrapper, {
      nbActions: nbActions,
      children: [/*#__PURE__*/_jsx(ActionButton, _extends({
        onClick: onPrimaryAction,
        styleType: "ghost",
        color: "brand",
        isAlone: nbActions === 1
      }, primaryActionProps, {
        children: primaryActionText
      })), /*#__PURE__*/_jsx(ActionButton, _extends({
        onClick: onSecondaryAction,
        styleType: "ghost",
        color: "black"
      }, secondaryActionProps, {
        children: secondaryActionText
      }))]
    }), closable && /*#__PURE__*/_jsx(Cross, {
      onClick: closeToast
    })]
  });
};
var createNotification = function createNotification(toastify, _ref2) {
  var icon = _ref2.icon,
    options = _objectWithoutPropertiesLoose(_ref2, _excluded);
  return toastify(/*#__PURE__*/_jsx(Msg, _extends({}, options, {
    icon: icon
  })), _extends({}, options, {
    containerId: 'notification'
  }));
};
var createAsyncNotification = function createAsyncNotification(promise, _ref3, options) {
  var pending = _ref3.pending,
    success = _ref3.success,
    error = _ref3.error;
  var id;
  if (pending) {
    id = createNotification(toastReactToastigy.loading, _extends({}, options, {
      title: pending,
      isLoading: true,
      closable: false
    }));
  }
  var resetParams = {
    isLoading: null,
    autoClose: null,
    closeOnClick: null,
    closeButton: null,
    draggable: null
  };
  var resolver = function resolver(type, input, result) {
    // Remove the toast if the input has not been provided. This prevents the toast from hanging
    // in the pending state if a success/error toast has not been provided.
    if (input == null) {
      toastReactToastigy.dismiss(id);
      return;
    }
    var baseParams = _extends({
      type: type,
      appareance: type,
      icon: iconByType[type]
    }, resetParams, options, {
      data: result,
      autoClose: true
    });
    var params = isString(input) ? {
      title: input,
      closable: true
    } : input;

    // if the id is set we know that it's an update
    if (id) {
      updateNotification(id, _extends({}, baseParams, params));
    }
    return result;
  };
  var p = isFunction(promise) ? promise() : promise;
  p.then(function (result) {
    return resolver('success', success, result);
  }).catch(function (err) {
    return resolver('error', error, err);
  });
  return p;
};
var updateNotification = function updateNotification(toastId, _ref4) {
  var icon = _ref4.icon,
    options = _objectWithoutPropertiesLoose(_ref4, _excluded2);
  return toastReactToastigy.update(toastId, _extends({}, options, {
    render: /*#__PURE__*/_jsx(Msg, _extends({
      icon: icon
    }, options)),
    containerId: 'notification'
  }));
};
var notification = function notification(options) {
  return createNotification(toastReactToastigy, options);
};
notification.success = function (options) {
  return createNotification(toastReactToastigy.success, _extends({
    appareance: 'success',
    icon: iconByType.success
  }, options));
};
notification.error = function (options) {
  return createNotification(toastReactToastigy.error, _extends({
    appareance: 'error',
    icon: iconByType.error,
    autoClose: false
  }, options));
};
notification.warning = function (options) {
  return createNotification(toastReactToastigy.warning, _extends({
    appareance: 'warning'
  }, options));
};
notification.info = function (options) {
  return createNotification(toastReactToastigy.info, _extends({
    appareance: 'action'
  }, options));
};
notification.loading = function (options) {
  return createNotification(toastReactToastigy.loading, options);
};
notification.update = function (toastId, options) {
  return updateNotification(toastId, _extends({}, options));
};
notification.promise = function (promise, _ref5, options) {
  var pending = _ref5.pending,
    success = _ref5.success,
    error = _ref5.error;
  return createAsyncNotification(promise, {
    pending: pending,
    success: success,
    error: error
  }, options);
};
notification.defaultProps = {
  appareance: 'black',
  onClick: function onClick() {}
};
export default notification;