knk
Version:
react components based on react
197 lines (194 loc) • 7.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _api = require("../../../common/api");
var _tool = require("../../../common/tool");
var _antd = require("antd");
require("../../../style/ajax_input_search.less");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* 异步搜索框, 支持搜索结果多选
*/
var Search = _antd.Input.Search;
var ListItem = _antd.List.Item;
// 封装组件
var AjaxInputSearch = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
var ajaxInputSearchRef = _react.default.useRef();
ajaxInputSearchRef = ref;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
loading = _useState2[0],
setloading = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
open = _useState4[0],
setOpen = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isHover = _useState6[0],
setHover = _useState6[1]; // 鼠标移入
var _useState7 = (0, _react.useState)([]),
_useState8 = (0, _slicedToArray2.default)(_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 = (0, _objectSpread2.default)({}, apiData);
sendData[searchKeyWord] = searchValue;
(0, _api.fetch)(apiPath, sendData, apiMethod).then(function (res) {
var data = res && res.data || [];
setListData(data);
}).catch(function (err) {
_tool.log.error(err);
_antd.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.default.createElement("div", {
ref: ajaxInputSearchRef,
className: "app-ajax-input-search"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Search, (0, _extends2.default)({}, defaultProps, {
allowClear: true,
placeholder: "\u8BF7\u8F93\u5165",
onChange: function onChange(e) {
return (0, _tool.debounce)(handleInputChange(e), 500);
},
onFocus: handleInputFocus,
onBlur: handleInputBlur,
value: value
}))), /*#__PURE__*/_react.default.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.default.createElement(_antd.List, {
loading: loading,
locale: {
emptyText: '暂无数据'
},
split: false,
size: "small",
className: "drop-down-list",
dataSource: listData,
renderItem: function renderItem(item, index) {
return /*#__PURE__*/_react.default.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.default.string,
apiData: _propTypes.default.object,
apiMethod: _propTypes.default.string,
value: _propTypes.default.string,
searchKeyWord: _propTypes.default.string,
showSearchBtn: _propTypes.default.bool,
showDropDown: _propTypes.default.bool,
selectItemName: _propTypes.default.string,
onChange: _propTypes.default.func,
onSelect: _propTypes.default.func,
checkInputValue: _propTypes.default.func
};
AjaxInputSearch.defaultProps = {
showSearchBtn: false,
showDropDown: true
};
var _default = exports.default = AjaxInputSearch;