@zohodesk/dot/es/list/DepartmentDropDown/DepartmentDropDown.js

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import ToggleDropDown from "../../dropdown/ToggleDropDown/ToggleDropDown";
import { DepartmentText } from "../SecondaryText";
import style from "./DepartmentDropDown.module.css";

class DepartmentDropDown extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onMoveDepartment = this.onMoveDepartment.bind(this);
  }

  onClick(e) {
    let {
      getDepartment,
      onSearch
    } = this.props;

    if (getDepartment) {
      getDepartment(e);
    }

    onSearch('');
  }

  onMoveDepartment(deptId) {
    let {
      onSearch,
      onMoveDepartment
    } = this.props;
    onSearch('');
    onMoveDepartment(deptId);
  }

  render() {
    let {
      departmentName,
      departmentList = [],
      onSelectLabel,
      isEditable,
      dataId,
      isFetching,
      isPopupActive,
      getNextOptions,
      isNextOptions,
      onSearch,
      needSearchFetching,
      searchStr,
      i18nKeys,
      customProps
    } = this.props;
    const {
      ToggleDropDownProps = {},
      DepartmentTextProps = {}
    } = customProps;
    let {
      title = 'Move Department',
      searchEmptyText = 'No results found',
      searchErrorText = 'No results',
      placeholder = 'Search Department'
    } = i18nKeys;
    return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({
      keyName: "name",
      idName: "id",
      isArrow: false,
      boxSize: "small",
      isPadding: false,
      isNeedEffect: false,
      isSearch: departmentList.length > 5 || searchStr.length !== 0
    }, ToggleDropDownProps, {
      title: title,
      options: departmentList,
      value: /*#__PURE__*/React.createElement(DepartmentText, _extends({}, DepartmentTextProps, {
        text: departmentName,
        dataTitle: departmentName
      })),
      onClick: this.onMoveDepartment,
      isEditable: isEditable,
      onSelectLabel: onSelectLabel,
      isPopupActive: isPopupActive,
      needExternalPopupState: true,
      dataId: dataId,
      isDataLoaded: !isFetching,
      searchErrorText: searchErrorText,
      searchEmptyHint: searchEmptyText,
      className: style.departmentBox,
      placeHolderText: placeholder,
      getNextOptions: getNextOptions,
      isNextOptions: isNextOptions,
      onSearch: onSearch,
      needSearchFetching: needSearchFetching
    }));
  }

}

DepartmentDropDown.defaultProps = defaultProps;
DepartmentDropDown.propTypes = propTypes;
export default DepartmentDropDown; // if (__DOCS__) {
//   DepartmentDropDown.docs = {
//     folderName: 'List',
//     componentGroup: 'DepartmentDropDown'
//   };
// }