knk/es/components/basic/form_item/ajax_input_search.js

react components based on react

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
 *  异步搜索框, 支持搜索结果多选
 */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { fetch } from '../../../common/api';
import { log, debounce } from '../../../common/tool';
import { Input, List, message } from 'antd';
import '../../../style/ajax_input_search.less';
var Search = Input.Search;
var ListItem = List.Item;

// 封装组件
var AjaxInputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var ajaxInputSearchRef = React.useRef();
  ajaxInputSearchRef = ref;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    loading = _useState2[0],
    setloading = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    open = _useState4[0],
    setOpen = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isHover = _useState6[0],
    setHover = _useState6[1]; // 鼠标移入
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    listData = _useState8[0],
    setListData = _useState8[1];
  // 请求下拉菜单
  var handleGetList = function handleGetList(searchValue) {
    var apiPath = props.apiPath,
      apiData = props.apiData,
      apiMethod = props.apiMethod,
      searchKeyWord = props.searchKeyWord;
    setloading(true);
    var sendData = _objectSpread({}, apiData);
    sendData[searchKeyWord] = searchValue;
    fetch(apiPath, sendData, apiMethod).then(function (res) {
      var data = res && res.data || [];
      setListData(data);
    }).catch(function (err) {
      log.error(err);
      message.error("\u83B7\u53D6\u6570\u636E\u5931\u8D25:".concat(err.message));
    }).finally(function () {
      setloading(false);
    });
  };
  // input值变化
  var handleInputChange = function handleInputChange(e) {
    var showSearchBtn = props.showSearchBtn,
      onChange = props.onChange,
      checkInputValue = props.checkInputValue;
    var searchValue = e.target.value;
    searchValue = searchValue.trim();
    if (checkInputValue && !checkInputValue(searchValue)) return;
    onChange && onChange(searchValue);
    if (showSearchBtn) return;
    if (!searchValue) {
      setListData([]);
      setOpen(false);
    } else {
      handleGetList(searchValue);
      setOpen(true);
    }
  };
  // 搜索
  var handleInputSearch = function handleInputSearch(selectVal) {
    var onChange = props.onChange;
    if (selectVal) {
      onChange && onChange(selectVal);
      handleGetList(selectVal);
      setOpen(true);
    } else {
      setListData([]);
      setOpen(false);
    }
  };
  // 下拉菜单选中
  var handleOnSelect = function handleOnSelect(selectVal, index) {
    var onSelect = props.onSelect,
      onChange = props.onChange,
      selectItemName = props.selectItemName;
    var newList = JSON.parse(JSON.stringify(listData));
    newList.forEach(function (item) {
      item.active = item[selectItemName] === selectVal[selectItemName];
    });
    setListData(newList);
    onSelect && onSelect(selectVal, index);
    onChange && onChange(selectVal[selectItemName]);
    setOpen(false);
  };
  // 获取焦点
  var handleInputFocus = function handleInputFocus() {
    var showDropDown = props.showDropDown,
      value = props.value;
    if (showDropDown && value) {
      if (!listData || listData.length < 1) {
        handleGetList(value);
      }
      setOpen(true);
    }
  };
  // 失去焦点
  var handleInputBlur = function handleInputBlur() {
    if (!isHover) {
      setOpen(false);
    }
  };
  var defaultProps = {};
  var value = props.value,
    showSearchBtn = props.showSearchBtn,
    showDropDown = props.showDropDown,
    selectItemName = props.selectItemName;
  if (showSearchBtn) {
    defaultProps = {
      enterButton: '搜索',
      onSearch: handleInputSearch
    };
  }
  return /*#__PURE__*/React.createElement("div", {
    ref: ajaxInputSearchRef,
    className: "app-ajax-input-search"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Search, _extends({}, defaultProps, {
    allowClear: true,
    placeholder: "\u8BF7\u8F93\u5165",
    onChange: function onChange(e) {
      return debounce(handleInputChange(e), 500);
    },
    onFocus: handleInputFocus,
    onBlur: handleInputBlur,
    value: value
  }))), /*#__PURE__*/React.createElement("div", {
    className: "search-drop-down",
    style: {
      display: showDropDown && open ? 'block' : 'none'
    },
    onMouseOver: function onMouseOver() {
      return setHover(true);
    },
    onMouseOut: function onMouseOut() {
      return setHover(false);
    }
  }, /*#__PURE__*/React.createElement(List, {
    loading: loading,
    locale: {
      emptyText: '暂无数据'
    },
    split: false,
    size: "small",
    className: "drop-down-list",
    dataSource: listData,
    renderItem: function renderItem(item, index) {
      return /*#__PURE__*/React.createElement(ListItem, {
        className: item.active ? 'drop-down-item-active drop-down-item' : 'drop-down-item',
        onClick: function onClick() {
          return handleOnSelect(item, index);
        }
      }, selectItemName ? item[selectItemName] : item);
    }
  })));
});
AjaxInputSearch.propTypes = {
  apiPath: PropTypes.string,
  apiData: PropTypes.object,
  apiMethod: PropTypes.string,
  value: PropTypes.string,
  searchKeyWord: PropTypes.string,
  showSearchBtn: PropTypes.bool,
  showDropDown: PropTypes.bool,
  selectItemName: PropTypes.string,
  onChange: PropTypes.func,
  onSelect: PropTypes.func,
  checkInputValue: PropTypes.func
};
AjaxInputSearch.defaultProps = {
  showSearchBtn: false,
  showDropDown: true
};
export default AjaxInputSearch;