SingleSelector.js 4.9 KB

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