@zohodesk/dot/es/lookup/header/TicketHeader/TicketHeader.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 ViewDropDown from "../ViewDropDown/ViewDropDown";
import { Container, Box } from '@zohodesk/components/es/Layout';
import useDragger from "../../../Hooks/Dragger/useDragger";
/*** CSS ***/

import commonStyle from "../lookupHeaderCommon.module.css";
import commonResponsive from "../lookupHeaderCommonResponsive.module.css";
import style from "./TicketHeader.module.css";
/* eslint-disable react/forbid-component-props */

function TicketHeader(props) {
  let {
    needSearch,
    onLookupClose,
    searchStr,
    onSearchChange,
    searchPlaceHolder,
    title,
    selectedViewId,
    onSelectView,
    allViews,
    onSearch,
    needOnTypeSearch,
    getSearchBoxRef,
    needViewsList,
    i18nKeys,
    palette,
    dragBoundaryLimit
  } = props;
  let {
    menuEmptyMessage = 'No matches found'
  } = i18nKeys;
  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}`]} ${commonResponsive.container} ${style.container}`,
    isCover: false,
    wrap: "wrap",
    eleRef: dragRef,
    "data-drag-hook": "true"
  }, /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "column",
    className: `${style.innerContainer}`,
    isCover: false,
    wrap: "wrap",
    dataId: "lookupView"
  }, /*#__PURE__*/React.createElement(Box, {
    className: commonStyle.title
  }, /*#__PURE__*/React.createElement(Title, {
    text: title
  })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.dropdown}`,
    dataId: "filterIdselected"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.menuWrapper
  }, /*#__PURE__*/React.createElement(ViewDropDown, {
    dropBoxSize: "small",
    emptyMessage: menuEmptyMessage,
    needSearch: true,
    onChange: onSelectView,
    options: allViews,
    textField: "displayLabel",
    selectedValue: selectedViewId,
    needCloseOnSelect: true
  }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
  }, /*#__PURE__*/React.createElement(Search, {
    onSearch: onSearch,
    searchStr: searchStr,
    onChange: onSearchChange,
    placeHolder: searchPlaceHolder,
    dataId: "search",
    needOnTypeSearch: needOnTypeSearch,
    getRef: getSearchBoxRef
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: commonStyle.closeContainer
  }, /*#__PURE__*/React.createElement(Close, {
    onClose: onLookupClose,
    dataId: "close"
  })));
}

TicketHeader.propTypes = propTypes;
TicketHeader.defaultProps = defaultProps;
const MemoizedTicketHeader = /*#__PURE__*/memo(TicketHeader);
MemoizedTicketHeader.propTypes = propTypes;
MemoizedTicketHeader.defaultProps = defaultProps;
MemoizedTicketHeader.displayName = 'TicketHeader';
export default MemoizedTicketHeader; // if (__DOCS__) {
//   TicketHeader.docs = {
//     componentGroup: 'Lookup'
//   };
// }