@zohodesk/dot/es/lookup/header/ModuleHeader/ModuleHeader.js

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

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

import Title from "../Title/Title";
import Close from "../Close/Close";
import Search from "../Search/Search";
import { Container, Box } from '@zohodesk/components/lib/Layout';
/*** CSS ***/

import commonStyle from "../lookupHeaderCommon.module.css";
import commonResponsive from "../lookupHeaderCommonResponsive.module.css"; //customHooks

import useDragger from "../../../Hooks/Dragger/useDragger";
/*eslint-disable react/forbid-component-props */

function ModuleHeader(props) {
  const {
    title = '',
    needSearch = false,
    onLookupClose,
    searchStr = '',
    onSearch,
    onSearchChange,
    searchPlaceHolder,
    needOnTypeSearch,
    getSearchBoxRef,
    miniDescription,
    dataId,
    closeTitle,
    onSearchKeyDown,
    palette,
    dragBoundaryLimit,
    children,
    childNearTitle
  } = props;
  const dragRef = useRef(null); //dragRef

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

  return /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row",
    className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
    isCover: false,
    wrap: "wrap",
    dataId: dataId,
    "data-drag-hook": "true",
    eleRef: dragRef
  }, childNearTitle ? childNearTitle : '', /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement("div", {
    className: commonStyle.title
  }, /*#__PURE__*/React.createElement(Title, {
    text: title
  })), miniDescription && /*#__PURE__*/React.createElement("div", {
    className: commonStyle.para
  }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
  }, /*#__PURE__*/React.createElement(Search, {
    onSearch: onSearch,
    searchStr: searchStr,
    onChange: onSearchChange,
    placeHolder: searchPlaceHolder,
    dataId: "search",
    needOnTypeSearch: needOnTypeSearch,
    getRef: getSearchBoxRef,
    onKeyDown: onSearchKeyDown
  })), children ? children : '', onLookupClose ? /*#__PURE__*/React.createElement("div", {
    className: commonStyle.closeContainer
  }, /*#__PURE__*/React.createElement(Close, {
    dataId: "close",
    onClose: onLookupClose,
    title: closeTitle
  })) : null);
}

ModuleHeader.propTypes = propTypes;
ModuleHeader.defaultProps = defaultProps;
const MemoizedModuleHeader = /*#__PURE__*/memo(ModuleHeader);
MemoizedModuleHeader.propTypes = propTypes;
MemoizedModuleHeader.defaultProps = defaultProps;
MemoizedModuleHeader.displayName = 'ModuleHeader';
export default MemoizedModuleHeader;