@zohodesk/dot/es/version2/lookup/AlertHeader/AlertHeader.js

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

import React, { useRef } from 'react'; //AlertDependencies

import { Container, Box } from '@zohodesk/components/lib/Layout';
import AlertClose from "../../AlertClose/AlertClose";
import AlertIcons from "../../alertIcons/AlertIcons"; //CSS

import style from "./css/AlertHeaderNew.module.css";
import cssJSLogic from "./css/cssJSLogic";
import { mergeStyle } from '@zohodesk/utils'; //customHooks

import useDragger from "../../../Hooks/Dragger/useDragger"; //Props

import defaultProps from "./props/defaultProps";
import propTypes from "./props/propTypes";
export default function AlertHeader(props) {
  const {
    title,
    needIcon,
    onClose,
    closeTitle,
    children,
    breakChildren,
    dataId,
    type,
    htmlId,
    customStyle,
    dragBoundaryLimit
  } = props;
  const finalStyle = mergeStyle(style, customStyle);
  const {
    alertHeaderContainerClass
  } = cssJSLogic({
    props,
    style: finalStyle
  });
  const dragRef = useRef(null); //dragRef

  useDragger({
    isActive: true,
    ChildRef: dragRef,
    boundaryLimit: dragBoundaryLimit
  }); //custom Hook

  return /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row",
    className: `${alertHeaderContainerClass}`,
    isCover: false,
    wrap: "wrap",
    "data-drag-hook": "true",
    eleRef: dragRef
  }, needIcon && /*#__PURE__*/React.createElement("div", {
    className: finalStyle.iconContainer
  }, /*#__PURE__*/React.createElement(AlertIcons, {
    type: type
  })), (title || children) && /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    wrap: breakChildren ? 'wrap' : null
  }, title && /*#__PURE__*/React.createElement(Box, {
    className: finalStyle.title,
    shrink: true,
    id: htmlId
  }, title), children && /*#__PURE__*/React.createElement(Box, {
    adjust: true,
    flexible: true
  }, children))), onClose && /*#__PURE__*/React.createElement(Box, {
    className: style.close
  }, /*#__PURE__*/React.createElement(AlertClose, {
    onClose: onClose,
    dataTitle: closeTitle,
    dataId: `${dataId}_close`,
    type: "light"
  })));
} //Props

AlertHeader.propTypes = propTypes;
AlertHeader.defaultProps = defaultProps;