AutoComplete.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. "use client";
  2. import * as React from 'react';
  3. import cls from 'classnames';
  4. import toArray from "rc-util/es/Children/toArray";
  5. import omit from "rc-util/es/omit";
  6. import { useZIndex } from '../_util/hooks/useZIndex';
  7. import { devUseWarning } from '../_util/warning';
  8. import { ConfigContext } from '../config-provider';
  9. import Select from '../select';
  10. const {
  11. Option
  12. } = Select;
  13. function isSelectOptionOrSelectOptGroup(child) {
  14. return (child === null || child === void 0 ? void 0 : child.type) && (child.type.isSelectOption || child.type.isSelectOptGroup);
  15. }
  16. const AutoComplete = (props, ref) => {
  17. var _a, _b;
  18. const {
  19. prefixCls: customizePrefixCls,
  20. className,
  21. popupClassName,
  22. dropdownClassName,
  23. children,
  24. dataSource,
  25. dropdownStyle,
  26. dropdownRender,
  27. popupRender,
  28. onDropdownVisibleChange,
  29. onOpenChange,
  30. styles,
  31. classNames
  32. } = props;
  33. const childNodes = toArray(children);
  34. const mergedPopupStyle = ((_a = styles === null || styles === void 0 ? void 0 : styles.popup) === null || _a === void 0 ? void 0 : _a.root) || dropdownStyle;
  35. const mergedPopupClassName = ((_b = classNames === null || classNames === void 0 ? void 0 : classNames.popup) === null || _b === void 0 ? void 0 : _b.root) || popupClassName || dropdownClassName;
  36. const mergedPopupRender = popupRender || dropdownRender;
  37. const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
  38. // ============================= Input =============================
  39. let customizeInput;
  40. if (childNodes.length === 1 && /*#__PURE__*/React.isValidElement(childNodes[0]) && !isSelectOptionOrSelectOptGroup(childNodes[0])) {
  41. [customizeInput] = childNodes;
  42. }
  43. const getInputElement = customizeInput ? () => customizeInput : undefined;
  44. // ============================ Options ============================
  45. let optionChildren;
  46. // [Legacy] convert `children` or `dataSource` into option children
  47. if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
  48. optionChildren = children;
  49. } else {
  50. optionChildren = dataSource ? dataSource.map(item => {
  51. if (/*#__PURE__*/React.isValidElement(item)) {
  52. return item;
  53. }
  54. switch (typeof item) {
  55. case 'string':
  56. return /*#__PURE__*/React.createElement(Option, {
  57. key: item,
  58. value: item
  59. }, item);
  60. case 'object':
  61. {
  62. const {
  63. value: optionValue
  64. } = item;
  65. return /*#__PURE__*/React.createElement(Option, {
  66. key: optionValue,
  67. value: optionValue
  68. }, item.text);
  69. }
  70. default:
  71. return undefined;
  72. }
  73. }) : [];
  74. }
  75. if (process.env.NODE_ENV !== 'production') {
  76. const warning = devUseWarning('AutoComplete');
  77. process.env.NODE_ENV !== "production" ? warning(!customizeInput || !('size' in props), 'usage', 'You need to control style self instead of setting `size` when using customize input.') : void 0;
  78. const deprecatedProps = {
  79. dropdownMatchSelectWidth: 'popupMatchSelectWidth',
  80. dropdownStyle: 'styles.popup.root',
  81. dropdownClassName: 'classNames.popup.root',
  82. popupClassName: 'classNames.popup.root',
  83. dropdownRender: 'popupRender',
  84. onDropdownVisibleChange: 'onOpenChange',
  85. dataSource: 'options'
  86. };
  87. Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
  88. warning.deprecated(!(oldProp in props), oldProp, newProp);
  89. });
  90. }
  91. const {
  92. getPrefixCls
  93. } = React.useContext(ConfigContext);
  94. const prefixCls = getPrefixCls('select', customizePrefixCls);
  95. // ============================ zIndex ============================
  96. const [zIndex] = useZIndex('SelectLike', mergedPopupStyle === null || mergedPopupStyle === void 0 ? void 0 : mergedPopupStyle.zIndex);
  97. return /*#__PURE__*/React.createElement(Select, Object.assign({
  98. ref: ref,
  99. suffixIcon: null
  100. }, omit(props, ['dataSource', 'dropdownClassName', 'popupClassName']), {
  101. prefixCls: prefixCls,
  102. classNames: {
  103. popup: {
  104. root: mergedPopupClassName
  105. },
  106. root: classNames === null || classNames === void 0 ? void 0 : classNames.root
  107. },
  108. styles: {
  109. popup: {
  110. root: Object.assign(Object.assign({}, mergedPopupStyle), {
  111. zIndex
  112. })
  113. },
  114. root: styles === null || styles === void 0 ? void 0 : styles.root
  115. },
  116. className: cls(`${prefixCls}-auto-complete`, className),
  117. mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
  118. popupRender: mergedPopupRender,
  119. onOpenChange: mergedOnOpenChange,
  120. // Internal api
  121. getInputElement
  122. }), optionChildren);
  123. };
  124. const RefAutoComplete = /*#__PURE__*/React.forwardRef(AutoComplete);
  125. if (process.env.NODE_ENV !== 'production') {
  126. RefAutoComplete.displayName = 'AutoComplete';
  127. }
  128. export default RefAutoComplete;