123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import * as React from 'react';
- import pickAttrs from "rc-util/es/pickAttrs";
- import Input from "./Input";
- import { getTitle } from "../utils/commonUtil";
- var SingleSelector = function SingleSelector(props) {
- var inputElement = props.inputElement,
- prefixCls = props.prefixCls,
- id = props.id,
- inputRef = props.inputRef,
- disabled = props.disabled,
- autoFocus = props.autoFocus,
- autoComplete = props.autoComplete,
- activeDescendantId = props.activeDescendantId,
- mode = props.mode,
- open = props.open,
- values = props.values,
- placeholder = props.placeholder,
- tabIndex = props.tabIndex,
- showSearch = props.showSearch,
- searchValue = props.searchValue,
- activeValue = props.activeValue,
- maxLength = props.maxLength,
- onInputKeyDown = props.onInputKeyDown,
- onInputMouseDown = props.onInputMouseDown,
- onInputChange = props.onInputChange,
- onInputPaste = props.onInputPaste,
- onInputCompositionStart = props.onInputCompositionStart,
- onInputCompositionEnd = props.onInputCompositionEnd,
- onInputBlur = props.onInputBlur,
- title = props.title;
- var _React$useState = React.useState(false),
- _React$useState2 = _slicedToArray(_React$useState, 2),
- inputChanged = _React$useState2[0],
- setInputChanged = _React$useState2[1];
- var combobox = mode === 'combobox';
- var inputEditable = combobox || showSearch;
- var item = values[0];
- var inputValue = searchValue || '';
- if (combobox && activeValue && !inputChanged) {
- inputValue = activeValue;
- }
- React.useEffect(function () {
- if (combobox) {
- setInputChanged(false);
- }
- }, [combobox, activeValue]);
- // Not show text when closed expect combobox mode
- var hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue;
- // Get title of selection item
- var selectionTitle = title === undefined ? getTitle(item) : title;
- var placeholderNode = React.useMemo(function () {
- if (item) {
- return null;
- }
- return /*#__PURE__*/React.createElement("span", {
- className: "".concat(prefixCls, "-selection-placeholder"),
- style: hasTextInput ? {
- visibility: 'hidden'
- } : undefined
- }, placeholder);
- }, [item, hasTextInput, placeholder, prefixCls]);
- return /*#__PURE__*/React.createElement("span", {
- className: "".concat(prefixCls, "-selection-wrap")
- }, /*#__PURE__*/React.createElement("span", {
- className: "".concat(prefixCls, "-selection-search")
- }, /*#__PURE__*/React.createElement(Input, {
- ref: inputRef,
- prefixCls: prefixCls,
- id: id,
- open: open,
- inputElement: inputElement,
- disabled: disabled,
- autoFocus: autoFocus,
- autoComplete: autoComplete,
- editable: inputEditable,
- activeDescendantId: activeDescendantId,
- value: inputValue,
- onKeyDown: onInputKeyDown,
- onMouseDown: onInputMouseDown,
- onChange: function onChange(e) {
- setInputChanged(true);
- onInputChange(e);
- },
- onPaste: onInputPaste,
- onCompositionStart: onInputCompositionStart,
- onCompositionEnd: onInputCompositionEnd,
- onBlur: onInputBlur,
- tabIndex: tabIndex,
- attrs: pickAttrs(props, true),
- maxLength: combobox ? maxLength : undefined
- })), !combobox && item ? /*#__PURE__*/React.createElement("span", {
- className: "".concat(prefixCls, "-selection-item"),
- title: selectionTitle
- // 当 Select 已经选中选项时,还需 selection 隐藏但留在原地占位
- // https://github.com/ant-design/ant-design/issues/27688
- // https://github.com/ant-design/ant-design/issues/41530
- ,
- style: hasTextInput ? {
- visibility: 'hidden'
- } : undefined
- }, item.label) : null, placeholderNode);
- };
- export default SingleSelector;
|