@zohodesk/dot/es/v1/notification/DesktopNotification/DesktopNotification.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import defaultProps from "./props/defaultProps";
import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
import AutoClose from "../../../actions/AutoClose";
import Button from '@zohodesk/components/es/v1/Button/Button';
import FormAction from "../../../FormAction/FormAction";
import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import style from "../../../version2/notification/DesktopNotification/DesktopNotification.module.css";
let buttonPaletteObject = {
  success: {
    buttonPalette: 'successFilled'
  },
  error: {
    buttonPalette: 'dangerFilled'
  },
  danger: {
    buttonPalette: 'dangerFilled'
  },
  warning: {
    buttonPalette: 'dangerFilled'
  },
  info: {
    buttonPalette: 'primaryFilled'
  },
  notification: {
    buttonPalette: 'primaryFilled'
  }
};
export function DesktopNotificationUI(props) {
  let {
    type = '',
    submitText,
    cancelText,
    submitType,
    isMore,
    message,
    isAnimate,
    getBottomContainer,
    getSubmitContainer,
    onSubmit,
    onCancel,
    dataId,
    dataSelectorId,
    isClose,
    needAutoZindex,
    title,
    subTitle,
    needIcon,
    info,
    secondaryInfo,
    titleVariant,
    getSectionContainer,
    isShrinkView,
    size,
    onClose,
    needClose,
    renderAlertIcon,
    customClass = {},
    i18nKeys = {},
    customProps,
    responsiveId
  } = props;
  let {
    closeTitle = 'Close'
  } = i18nKeys;
  let {
    containerClass
  } = customClass;
  let {
    buttonPalette = 'dangerFilled'
  } = buttonPaletteObject[type] || {};
  let {
    ExtraProps = {}
  } = customProps;

  function onClickSubmit(e) {
    onSubmit && onSubmit();
  }

  function onClickCancel(e) {
    onCancel && onCancel();
  }

  let animateClass = isClose ? style.rightanimate : style.leftanimate;
  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
  let getNextIndex = useZIndex();
  let Zindex = isAnimate ? getNextIndex() : null;
  let uiVariantOne = title && (info || secondaryInfo);
  let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;

  function responsiveFunc(_ref) {
    let {
      mediaQueryOR
    } = _ref;
    return {
      uptoTablet: mediaQueryOR([{
        maxWidth: 760
      }])
    };
  }

  return /*#__PURE__*/React.createElement("div", {
    className: style.parentElement,
    style: needAutoZindex && isAnimate ? {
      zIndex: `${Zindex}`
    } : {},
    "data-selector-id": dataSelectorId
  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
    query: responsiveFunc,
    responsiveId: responsiveId
  }, _ref2 => {
    let {
      uptoTablet
    } = _ref2;
    return /*#__PURE__*/React.createElement(Container, {
      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
             ${isShrinkView ? style.globalNotify : ''} ${containerClass}
             ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
      isCover: false,
      dataId: dataId,
      isInline: uiVariantTwo,
      ...ExtraProps
    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
      type: type,
      title: title,
      variant: titleVariant,
      needIcon: needIcon,
      onClose: onClose,
      closeTitle: closeTitle,
      renderAlertIcon: renderAlertIcon,
      dataId: `${dataId}_close`,
      needClose: needClose
    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
      alignBox: "column"
    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.section} ${style.infoText}`
    }, subTitle && /*#__PURE__*/React.createElement("div", {
      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
      className: `${info ? style.secondaryInfo : ''}`
    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
      className: style.footer
    }, isMore ? /*#__PURE__*/React.createElement("div", {
      className: `${style.message}`
    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
      size: "small",
      paddingLeftSize: "xmedium"
    }, submitText ? /*#__PURE__*/React.createElement("div", {
      onClick: onClickSubmit,
      "data-id": `${dataId}_submitButton`,
      "data-test-id": `${dataId}_submitButton`
    }, /*#__PURE__*/React.createElement(Container, {
      align: "vertical",
      alignBox: "row"
    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(Button, {
      text: submitText,
      palette: submitType ? submitType : buttonPalette
    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      text: cancelText,
      palette: "secondary",
      dataId: `${dataId}_cancelButton`,
      onClick: onClickCancel
    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
  }));
}
DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
DesktopNotificationUI.propTypes = defaultProps;
export default function DesktopNotification(props) {
  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
    Element: DesktopNotificationUI
  });
}
DesktopNotification.propTypes = propTypes;
DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {
//   DesktopNotification.docs = {
//     componentGroup: 'DesktopNotification',
//     folderName: 'Alert'
//   };
// }