@zohodesk/dot/es/v1/alert/AlertLookup/AlertLookup.js

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

/**** Libraries ****/
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
import Button from '@zohodesk/components/es/v1/Button/Button';
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import Lookup from "../../lookup/Lookup/Lookup";
import AlertHeader from "../AlertHeader/AlertHeader";
import Section from "../../lookup/Section/Section";
import FormAction from "../../FormAction/FormAction";
/**** CSS ****/

import style from "../../../version2/lookup/AlertLookup/AlertLookupNew.module.css";
let buttonPaletteObject = {
  success: {
    buttonPalette: 'successFilled'
  },
  error: {
    buttonPalette: 'dangerFilled'
  },
  danger: {
    buttonPalette: 'dangerFilled'
  },
  warning: {
    buttonPalette: 'dangerFilled'
  },
  info: {
    buttonPalette: 'primaryFilled'
  },
  notification: {
    buttonPalette: 'primaryFilled'
  }
};
export default function AlertLookup(props) {
  const getAriaId = useUniqueId();
  let {
    isActive,
    size,
    type = 'danger',
    title,
    message,
    confirmationMessage,
    submitText,
    cancelText,
    onSubmitClick,
    onCancelClick,
    children,
    forwardRef,
    onClose,
    headerChildren,
    wrapHeader,
    dataId,
    onLookupClick,
    customClass = {},
    needIcon,
    a11y,
    customProps,
    align,
    childAnimationName,
    isHtmlContent,
    scroll,
    isDefaultFocus,
    onEsc,
    renderAlertIcon
  } = props;
  const {
    LookupProps = {},
    AlertHeaderProps = {},
    PrimaryButtonProps = {},
    SecondaryButtonProps = {}
  } = customProps;
  let {
    containerClass = '',
    sectionClass = ''
  } = customClass;
  let {
    buttonPalette = 'dangerFilled'
  } = buttonPaletteObject[type] || {};
  let ariaMessageId = getAriaId();
  let ariaConfirmMsgId = getAriaId();
  let ariaTitleId = getAriaId();
  let ariaLeaveButtonId = getAriaId();
  let ariaStayButtonId = getAriaId();
  a11y = {
    ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
    ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
  };
  return /*#__PURE__*/React.createElement(Lookup, {
    onClose: onEsc == 'close' ? onClose : onCancelClick,
    needFocusScope: true,
    isActive: isActive,
    size: size,
    dataId: dataId,
    forwardRef: forwardRef,
    onClick: onLookupClick,
    customClass: containerClass,
    a11y: a11y,
    childAnimationName: childAnimationName,
    ...LookupProps
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: align,
    wrap: "wrap"
  }, /*#__PURE__*/React.createElement(Section, {
    alignBox: "row",
    className: style.section
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "column"
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
    htmlId: ariaTitleId,
    title: title,
    type: type,
    needIcon: needIcon,
    onClose: onClose,
    breakChildren: wrapHeader,
    renderAlertIcon: renderAlertIcon,
    ...AlertHeaderProps
  }, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement("div", {
    className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
  }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
    id: ariaMessageId,
    dangerouslySetInnerHTML: {
      __html: message
    }
  }) : /*#__PURE__*/React.createElement("div", {
    id: ariaMessageId
  }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
    id: ariaConfirmMsgId,
    className: `${message ? style.confirmMsgText : ''}`
  }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
    className: style.footer
  }, /*#__PURE__*/React.createElement(FormAction, {
    size: "small",
    paddingLeftSize: "xmedium"
  }, /*#__PURE__*/React.createElement(Button, {
    text: submitText,
    dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
    onClick: onSubmitClick,
    palette: buttonPalette,
    customProps: {
      'data-a11y-autofocus': isDefaultFocus
    },
    ...PrimaryButtonProps,
    a11y: {
      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
    },
    id: ariaLeaveButtonId
  }), cancelText && /*#__PURE__*/React.createElement(Button, {
    dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
    text: cancelText,
    onClick: onCancelClick,
    palette: "secondary",
    ...SecondaryButtonProps,
    a11y: {
      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
    },
    id: ariaStayButtonId
  })))) : null))));
}
AlertLookup.propTypes = propTypes;
AlertLookup.defaultProps = defaultProps;