@zohodesk/dot/es/deprecated/SelectDropdown/SelectDropdown.js

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

import React from 'react';
import PropTypes from 'prop-types';
import Popup from '@zohodesk/components/lib/Popup/Popup';
import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
import { Icon } from '@zohodesk/icons';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import style from "./SelectDropdown.module.css";

class SelectDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.handleTogglePopup = this.handleTogglePopup.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(id, value, index, e) {
    let {
      onClick,
      togglePopup
    } = this.props;
    onClick && onClick(id, value, index, e);
    togglePopup(e, 'bottomRight');
  }

  handleTogglePopup(e) {
    let {
      togglePopup
    } = this.props;
    togglePopup(e, 'bottomRight');
  }

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

  render() {
    let {
      title,
      selectedText,
      isPopupOpen,
      isPopupReady,
      getTargetRef,
      getContainerRef,
      removeClose,
      suggestions,
      selectedId,
      isSearchRequired = false
    } = this.props;
    let {
      idKey,
      valueKey,
      options = []
    } = suggestions;
    return /*#__PURE__*/React.createElement("span", {
      ref: getTargetRef,
      className: style.container,
      onClick: removeClose
    }, /*#__PURE__*/React.createElement("span", {
      className: style.departName,
      onClick: this.handleTogglePopup
    }, selectedText), /*#__PURE__*/React.createElement("span", {
      className: style.departIcon,
      onClick: this.handleTogglePopup
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-down1",
      size: "6"
    })), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
      query: this.responsiveFunc,
      responsiveId: "Helmet"
    }, _ref2 => {
      let {
        tabletMode
      } = _ref2;
      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
        size: "medium",
        boxPosition: "bottomRight",
        isArrow: true,
        isAnimate: true,
        right: "-25",
        isActive: isPopupOpen && isPopupReady,
        getRef: getContainerRef,
        isResponsivePadding: true,
        alignBox: "row"
      }, /*#__PURE__*/React.createElement(Box, {
        flexible: true
      }, /*#__PURE__*/React.createElement(Container, {
        alignBox: "column",
        className: `${tabletMode ? '' : style.rulesPopup}`
      }, /*#__PURE__*/React.createElement(Box, {
        className: style.rulesDepart
      }, /*#__PURE__*/React.createElement(DropDownHeading, {
        text: title
      })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
        className: style.searchDepart
      }, /*#__PURE__*/React.createElement(TextBox, {
        name: "Test",
        id: "Test",
        maxLength: "150",
        placeHolder: "Search Department"
      })) : null, /*#__PURE__*/React.createElement(Box, {
        scroll: "vertical",
        flexible: true,
        shrink: true
      }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
        key: index,
        autoHover: true,
        value: obj[valueKey],
        active: selectedId == obj[idKey],
        id: obj[idKey],
        onClick: this.handleClick
      }))))));
    }));
  }

}

SelectDropdown.propTypes = {
  getContainerRef: PropTypes.func,
  getTargetRef: PropTypes.func,
  isPopupOpen: PropTypes.bool,
  isPopupReady: PropTypes.bool,
  isSearchRequired: PropTypes.bool,
  onClick: PropTypes.func,
  removeClose: PropTypes.func,
  selectedId: PropTypes.string,
  selectedText: PropTypes.string,
  suggestions: PropTypes.shape({
    idKey: PropTypes.string,
    valueKey: PropTypes.string,
    options: PropTypes.array
  }),
  title: PropTypes.string,
  togglePopup: PropTypes.func
};
export default Popup(SelectDropdown);