Writing Bindings for antd autocomplete component

,
1

Im trying to write a binding to an autocomplete component in antd-design. I feel like I am being thrown because the component exports a React.ref

Here are the typescript types:

export interface BaseOptionType {
    disabled?: boolean;
    name: string;
}
export interface DefaultOptionType extends BaseOptionType {
    label: React.ReactNode;
    value?: string | number | null;
    children?: Omit<DefaultOptionType, 'children'>[];
}
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<ValueType, OptionType>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'> {
    dataSource?: DataSourceItemType[];
}

declare const RefAutoComplete: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: AutoCompleteProps<ValueType, OptionType> & {
    children?: React.ReactNode;
} & {
    ref?: React.Ref<BaseSelectRef> | undefined;
}) => React.ReactElement) & {
    Option: import("rc-select/lib/Option").OptionFC;
};

export default RefAutoComplete;

Mostly I would like to understand how to bind to this part:

declare const RefAutoComplete: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: AutoCompleteProps<ValueType, OptionType> & {
    children?: React.ReactNode;
} & {
    ref?: React.Ref<BaseSelectRef> | undefined;
}) => React.ReactElement) & {
    Option: import("rc-select/lib/Option").OptionFC;
};

The OptionFC type is

import type { DefaultOptionType } from './Select';
export interface OptionProps extends Omit<DefaultOptionType, 'label'> {
    children: React.ReactNode;
    /** Save for customize data */
    [prop: string]: any;
}
export interface OptionFC extends React.FC<OptionProps> {
    /** Legacy for check if is a Option Group */
    isSelectOption: boolean;
}
/** This is a placeholder, not real render in dom */
declare const Option: OptionFC;
export default Option;

My problem is that it seems like I am not getting the ref action. Here is an example with the antd autocomplete basic usage example in js and rescript. https://github.com/idkjs/basic-usage-antd4189

also in codesandbox.

The top is js from the example. After res is the binding. You can see the behaviour is not the same.

I would also like to know how to handle typescripts Omit.

Any feedback would be greatly appreciated.

Thanks to @jorge for the codesandbox template.

UPDATE: The example is fixed by adding px to ```
<AutoComplete
options
style={ReactDOM.Style.make(~width=“200px”, ())}
onSelect
onSearch
placeholder=“input here”
/>


However, I would still like to see the answers to the questions above. Thanks.
1 Like