/** * TODO: 4.0 * * - Remove `dataSource` * - `size` not work with customizeInput * - CustomizeInput not feedback `ENTER` key since accessibility enhancement */ import * as React from 'react'; import toArray from 'rc-util/lib/Children/toArray'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import type { BaseSelectRef } from 'rc-select'; import Select, { BaseOptionType, DefaultOptionType, InternalSelectProps, RefSelectProps, } from '../select'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import devWarning from '../_util/devWarning'; import { isValidElement } from '../_util/reactNode'; import { InputStatus } from '../_util/statusUtils'; const { Option } = Select; export interface DataSourceItemObject { value: string; text: string; } export type DataSourceItemType = DataSourceItemObject | React.ReactNode; export interface AutoCompleteProps< ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType, > extends Omit< InternalSelectProps, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue' > { dataSource?: DataSourceItemType[]; status?: InputStatus; } function isSelectOptionOrSelectOptGroup(child: any): Boolean { return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup); } const AutoComplete: React.ForwardRefRenderFunction = ( props, ref, ) => { const { prefixCls: customizePrefixCls, className, children, dataSource } = props; const childNodes: React.ReactElement[] = toArray(children); // ============================= Input ============================= let customizeInput: React.ReactElement | undefined; if ( childNodes.length === 1 && isValidElement(childNodes[0]) && !isSelectOptionOrSelectOptGroup(childNodes[0]) ) { [customizeInput] = childNodes; } const getInputElement = customizeInput ? (): React.ReactElement => customizeInput! : undefined; // ============================ Options ============================ let optionChildren: React.ReactNode; // [Legacy] convert `children` or `dataSource` into option children if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) { optionChildren = children; } else { optionChildren = dataSource ? dataSource.map(item => { if (isValidElement(item)) { return item; } switch (typeof item) { case 'string': return ( ); case 'object': { const { value: optionValue } = item as DataSourceItemObject; return ( ); } default: throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.'); } }) : []; } // ============================ Warning ============================ React.useEffect(() => { devWarning( !('dataSource' in props), 'AutoComplete', '`dataSource` is deprecated, please use `options` instead.', ); devWarning( !customizeInput || !('size' in props), 'AutoComplete', 'You need to control style self instead of setting `size` when using customize input.', ); }, []); return ( {({ getPrefixCls }: ConfigConsumerProps) => { const prefixCls = getPrefixCls('select', customizePrefixCls); return ( ); }} ); }; const RefAutoComplete = React.forwardRef( AutoComplete, ) as unknown as (< ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType, >( props: React.PropsWithChildren> & { ref?: React.Ref; }, ) => React.ReactElement) & { Option: typeof Option; }; RefAutoComplete.Option = Option; export default RefAutoComplete;