@zohodesk/dot/es/lookup/header/ViewDropDown/ViewDropDown.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 { SelectComponent } from '@zohodesk/components/lib/Select/Select';
import Popup from '@zohodesk/components/lib/Popup/Popup';
import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
/**** Icons ****/

import { Icon } from '@zohodesk/icons';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import Loader from '@zohodesk/svg/lib/Loader/Loader';
import style from "./ViewDropDown.module.css";
/* eslint-disable react/forbid-component-props */

/*eslint-disable  react/sort-prop-types*/

class DropDown extends SelectComponent {
  constructor(props) {
    super(props);
    this.onSearchKeyDown = this.onSearchKeyDown.bind(this);
  }

  onSearchKeyDown(e) {
    const {
      closePopupOnly
    } = this.props;

    if (e.keyCode === 27) {
      closePopupOnly && closePopupOnly(e);
    } else {
      this.handleKeyDown(e);
    }
  }

  responsiveFunc(_ref) {
    let {
      mediaQueryOR
    } = _ref;
    return {
      tabletMode: mediaQueryOR([{
        maxWidth: 700
      }])
    };
  }

  render() {
    var _this = this;

    const {
      needSearch,
      dropBoxSize,
      emptyMessage,
      searchEmptyMessage,
      position,
      defaultDropBoxPosition,
      getTargetRef,
      getContainerRef,
      isPopupOpen,
      removeClose,
      isPopupReady,
      animationStyle,
      searchBoxSize,
      searchBoxVariant,
      searchBoxPlaceHolder,
      maxLength,
      dataId,
      isAbsolutePositioningNeeded,
      isRestrictScroll,
      positionsOffset,
      targetOffset
    } = this.props;
    const {
      hoverIndex,
      selected,
      searchStr,
      isFetchingOptions,
      selectedId
    } = this.state;
    const suggestions = this.handleFilterSuggestions();
    return /*#__PURE__*/React.createElement("div", {
      className: style.container,
      "data-id": dataId,
      "data-test-id": dataId
    }, /*#__PURE__*/React.createElement("div", {
      onClick: this.togglePopup,
      ref: getTargetRef
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.labelCnt} ${isPopupOpen ? style.focused : ''}`
    }, /*#__PURE__*/React.createElement("span", {
      className: style.labelText,
      "data-title": selected,
      "data-id": `${dataId}_selectedValue`,
      "data-test-id": `${dataId}_selectedValue`
    }, selected), /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-down",
      size: "7",
      iconClass: style.arrowIcon,
      dataId: `${dataId}_icon`
    }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
      query: this.responsiveFunc,
      responsiveId: "Helmet"
    }, _ref2 => {
      let {
        tabletMode
      } = _ref2;
      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
        isAnimate: true,
        isArrow: false,
        isActive: isPopupReady,
        boxPosition: position || `${defaultDropBoxPosition}Center`,
        getRef: getContainerRef,
        onClick: removeClose,
        animationStyle: animationStyle,
        size: "large",
        alignBox: "row",
        isResponsivePadding: true,
        dataId: `${dataId}_dropbox`,
        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
        isRestrictScroll: isRestrictScroll,
        positionsOffset: positionsOffset,
        targetOffset: targetOffset
      }, /*#__PURE__*/React.createElement(Box, {
        flexible: true
      }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
        value: searchStr,
        onChange: this.handleSearch,
        onKeyDown: this.onSearchKeyDown,
        getRef: this.searchInputRef,
        size: searchBoxSize,
        variant: searchBoxVariant,
        placeHolder: searchBoxPlaceHolder,
        maxLength: maxLength,
        dataId: `${dataId}_search`
      })) : null, /*#__PURE__*/React.createElement(CardContent, {
        shrink: true,
        eleRef: this.suggestionContainerRef,
        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
      }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
        className: style.listItemContainer,
        "data-id": `${dataId}_Options`
      }, suggestions.map(function () {
        let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
        let index = arguments.length > 1 ? arguments[1] : undefined;
        const {
          id,
          value
        } = option;
        return /*#__PURE__*/React.createElement(ListItem, {
          active: id === selectedId,
          getRef: _this.suggestionItemRef,
          highlight: hoverIndex === index ? true : false,
          id: id,
          key: `${id}dropDown`,
          onClick: _this.handleChange,
          onMouseEnter: _this.handleMouseEnter,
          size: "medium",
          value: value,
          index: index,
          needTick: true,
          needBorder: false
        });
      })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
        align: "both",
        className: style.loader
      }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
        className: style.emptyState
      }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
        className: style.emptyState
      }, emptyMessage)))));
    }) : null);
  }

}

DropDown.propTypes = propTypes;
DropDown.defaultProps = defaultProps;
const ViewDropDown = Popup(DropDown);
ViewDropDown.defaultProps = DropDown.defaultProps;
ViewDropDown.propTypes = DropDown.propTypes; // if (__DOCS__) {
//   DropDown.docs = {
//     componentGroup: 'Lookup'
//   };
//   // eslint-disable-next-line react/forbid-foreign-prop-types
//   ViewDropDown.propTypes = DropDown.propTypes;
// }

export default ViewDropDown;