xy-select
Version:
基于React的下拉列表组件
32 lines • 1.32 kB
JavaScript
import React, { useCallback, useEffect, useRef } from "react";
export function SelectSearch(props) {
var _a = props.prefixCls, prefixCls = _a === void 0 ? "xy-select" : _a, visible = props.visible, _b = props.blurClear, blurClear = _b === void 0 ? true : _b, search = props.search, onSearchChange = props.onSearchChange;
var inputRef = useRef(null);
useEffect(function () {
var input = inputRef.current;
if (!input) {
return;
}
if (visible && input) {
input.focus();
}
else {
if (blurClear) {
setValue("");
}
}
}, [visible]);
function setValue(value) {
if (onSearchChange) {
onSearchChange(value);
}
}
var changeHandle = useCallback(function (event) {
setValue(event.target.value);
}, []);
return (React.createElement("div", { className: prefixCls + "-search--inline" },
React.createElement("div", { className: prefixCls + "-search__wrap" },
React.createElement("input", { type: "text", disabled: !visible, autoComplete: "off", className: prefixCls + "-search__field", ref: inputRef, value: search, onChange: changeHandle }))));
}
export default React.memo(SelectSearch);
//# sourceMappingURL=SelectSearch.js.map