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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = AlertLookup;

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

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");

var _Button = _interopRequireDefault(require("@zohodesk/components/es/v1/Button/Button"));

var _Layout = require("@zohodesk/components/es/v1/Layout");

var _Lookup = _interopRequireDefault(require("../../lookup/Lookup/Lookup"));

var _AlertHeader = _interopRequireDefault(require("../AlertHeader/AlertHeader"));

var _Section = _interopRequireDefault(require("../../lookup/Section/Section"));

var _FormAction = _interopRequireDefault(require("../../FormAction/FormAction"));

var _AlertLookupNewModule = _interopRequireDefault(require("../../../version2/lookup/AlertLookup/AlertLookupNew.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var buttonPaletteObject = {
  success: {
    buttonPalette: 'successFilled'
  },
  error: {
    buttonPalette: 'dangerFilled'
  },
  danger: {
    buttonPalette: 'dangerFilled'
  },
  warning: {
    buttonPalette: 'dangerFilled'
  },
  info: {
    buttonPalette: 'primaryFilled'
  },
  notification: {
    buttonPalette: 'primaryFilled'
  }
};

function AlertLookup(props) {
  var getAriaId = (0, _IdProvider.useUniqueId)();
  var isActive = props.isActive,
      size = props.size,
      _props$type = props.type,
      type = _props$type === void 0 ? 'danger' : _props$type,
      title = props.title,
      message = props.message,
      confirmationMessage = props.confirmationMessage,
      submitText = props.submitText,
      cancelText = props.cancelText,
      onSubmitClick = props.onSubmitClick,
      onCancelClick = props.onCancelClick,
      children = props.children,
      forwardRef = props.forwardRef,
      onClose = props.onClose,
      headerChildren = props.headerChildren,
      wrapHeader = props.wrapHeader,
      dataId = props.dataId,
      onLookupClick = props.onLookupClick,
      _props$customClass = props.customClass,
      customClass = _props$customClass === void 0 ? {} : _props$customClass,
      needIcon = props.needIcon,
      a11y = props.a11y,
      customProps = props.customProps,
      align = props.align,
      childAnimationName = props.childAnimationName,
      isHtmlContent = props.isHtmlContent,
      scroll = props.scroll,
      isDefaultFocus = props.isDefaultFocus,
      onEsc = props.onEsc,
      renderAlertIcon = props.renderAlertIcon;
  var _customProps$LookupPr = customProps.LookupProps,
      LookupProps = _customProps$LookupPr === void 0 ? {} : _customProps$LookupPr,
      _customProps$AlertHea = customProps.AlertHeaderProps,
      AlertHeaderProps = _customProps$AlertHea === void 0 ? {} : _customProps$AlertHea,
      _customProps$PrimaryB = customProps.PrimaryButtonProps,
      PrimaryButtonProps = _customProps$PrimaryB === void 0 ? {} : _customProps$PrimaryB,
      _customProps$Secondar = customProps.SecondaryButtonProps,
      SecondaryButtonProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
  var _customClass$containe = customClass.containerClass,
      containerClass = _customClass$containe === void 0 ? '' : _customClass$containe,
      _customClass$sectionC = customClass.sectionClass,
      sectionClass = _customClass$sectionC === void 0 ? '' : _customClass$sectionC;

  var _ref = buttonPaletteObject[type] || {},
      _ref$buttonPalette = _ref.buttonPalette,
      buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;

  var ariaMessageId = getAriaId();
  var ariaConfirmMsgId = getAriaId();
  var ariaTitleId = getAriaId();
  var ariaLeaveButtonId = getAriaId();
  var ariaStayButtonId = getAriaId();
  a11y = {
    ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
    ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
  };
  return /*#__PURE__*/_react["default"].createElement(_Lookup["default"], _extends({
    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["default"].createElement(_Layout.Container, {
    alignBox: "row",
    align: align,
    wrap: "wrap"
  }, /*#__PURE__*/_react["default"].createElement(_Section["default"], {
    alignBox: "row",
    className: _AlertLookupNewModule["default"].section
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    alignBox: "column"
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], _extends({
    htmlId: ariaTitleId,
    title: title,
    type: type,
    needIcon: needIcon,
    onClose: onClose,
    breakChildren: wrapHeader,
    renderAlertIcon: renderAlertIcon
  }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    flexible: true
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(_AlertLookupNewModule["default"].innerSection, " ").concat(_AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] ? _AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] : '', " ").concat(sectionClass)
  }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isHtmlContent && message ? /*#__PURE__*/_react["default"].createElement("div", {
    id: ariaMessageId,
    dangerouslySetInnerHTML: {
      __html: message
    }
  }) : /*#__PURE__*/_react["default"].createElement("div", {
    id: ariaMessageId
  }, message), confirmationMessage && /*#__PURE__*/_react["default"].createElement("div", {
    id: ariaConfirmMsgId,
    className: "".concat(message ? _AlertLookupNewModule["default"].confirmMsgText : '')
  }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: _AlertLookupNewModule["default"].footer
  }, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
    size: "small",
    paddingLeftSize: "xmedium"
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
    text: submitText,
    dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : "".concat(dataId, "_confirmButton"),
    onClick: onSubmitClick,
    palette: buttonPalette,
    customProps: {
      'data-a11y-autofocus': isDefaultFocus
    }
  }, PrimaryButtonProps, {
    a11y: {
      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
    },
    id: ariaLeaveButtonId
  })), cancelText && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
    dataId: dataId === 'alertPopup' ? 'alertCancelButton' : "".concat(dataId, "_cancelButton"),
    text: cancelText,
    onClick: onCancelClick,
    palette: "secondary"
  }, SecondaryButtonProps, {
    a11y: {
      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
    },
    id: ariaStayButtonId
  }))))) : null))));
}

AlertLookup.propTypes = _propTypes.propTypes;
AlertLookup.defaultProps = _defaultProps.defaultProps;