SingleSelector.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import * as React from 'react';
  3. import pickAttrs from "rc-util/es/pickAttrs";
  4. import Input from "./Input";
  5. import { getTitle } from "../utils/commonUtil";
  6. var SingleSelector = function SingleSelector(props) {
  7. var inputElement = props.inputElement,
  8. prefixCls = props.prefixCls,
  9. id = props.id,
  10. inputRef = props.inputRef,
  11. disabled = props.disabled,
  12. autoFocus = props.autoFocus,
  13. autoComplete = props.autoComplete,
  14. activeDescendantId = props.activeDescendantId,
  15. mode = props.mode,
  16. open = props.open,
  17. values = props.values,
  18. placeholder = props.placeholder,
  19. tabIndex = props.tabIndex,
  20. showSearch = props.showSearch,
  21. searchValue = props.searchValue,
  22. activeValue = props.activeValue,
  23. maxLength = props.maxLength,
  24. onInputKeyDown = props.onInputKeyDown,
  25. onInputMouseDown = props.onInputMouseDown,
  26. onInputChange = props.onInputChange,
  27. onInputPaste = props.onInputPaste,
  28. onInputCompositionStart = props.onInputCompositionStart,
  29. onInputCompositionEnd = props.onInputCompositionEnd,
  30. onInputBlur = props.onInputBlur,
  31. title = props.title;
  32. var _React$useState = React.useState(false),
  33. _React$useState2 = _slicedToArray(_React$useState, 2),
  34. inputChanged = _React$useState2[0],
  35. setInputChanged = _React$useState2[1];
  36. var combobox = mode === 'combobox';
  37. var inputEditable = combobox || showSearch;
  38. var item = values[0];
  39. var inputValue = searchValue || '';
  40. if (combobox && activeValue && !inputChanged) {
  41. inputValue = activeValue;
  42. }
  43. React.useEffect(function () {
  44. if (combobox) {
  45. setInputChanged(false);
  46. }
  47. }, [combobox, activeValue]);
  48. // Not show text when closed expect combobox mode
  49. var hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue;
  50. // Get title of selection item
  51. var selectionTitle = title === undefined ? getTitle(item) : title;
  52. var placeholderNode = React.useMemo(function () {
  53. if (item) {
  54. return null;
  55. }
  56. return /*#__PURE__*/React.createElement("span", {
  57. className: "".concat(prefixCls, "-selection-placeholder"),
  58. style: hasTextInput ? {
  59. visibility: 'hidden'
  60. } : undefined
  61. }, placeholder);
  62. }, [item, hasTextInput, placeholder, prefixCls]);
  63. return /*#__PURE__*/React.createElement("span", {
  64. className: "".concat(prefixCls, "-selection-wrap")
  65. }, /*#__PURE__*/React.createElement("span", {
  66. className: "".concat(prefixCls, "-selection-search")
  67. }, /*#__PURE__*/React.createElement(Input, {
  68. ref: inputRef,
  69. prefixCls: prefixCls,
  70. id: id,
  71. open: open,
  72. inputElement: inputElement,
  73. disabled: disabled,
  74. autoFocus: autoFocus,
  75. autoComplete: autoComplete,
  76. editable: inputEditable,
  77. activeDescendantId: activeDescendantId,
  78. value: inputValue,
  79. onKeyDown: onInputKeyDown,
  80. onMouseDown: onInputMouseDown,
  81. onChange: function onChange(e) {
  82. setInputChanged(true);
  83. onInputChange(e);
  84. },
  85. onPaste: onInputPaste,
  86. onCompositionStart: onInputCompositionStart,
  87. onCompositionEnd: onInputCompositionEnd,
  88. onBlur: onInputBlur,
  89. tabIndex: tabIndex,
  90. attrs: pickAttrs(props, true),
  91. maxLength: combobox ? maxLength : undefined
  92. })), !combobox && item ? /*#__PURE__*/React.createElement("span", {
  93. className: "".concat(prefixCls, "-selection-item"),
  94. title: selectionTitle
  95. // 当 Select 已经选中选项时,还需 selection 隐藏但留在原地占位
  96. // https://github.com/ant-design/ant-design/issues/27688
  97. // https://github.com/ant-design/ant-design/issues/41530
  98. ,
  99. style: hasTextInput ? {
  100. visibility: 'hidden'
  101. } : undefined
  102. }, item.label) : null, placeholderNode);
  103. };
  104. export default SingleSelector;