score:3

import React, { Component } from "react";
import AsyncSelect from "react-select/async";
import { FixedSizeList as List } from "react-window";
import { createFilter } from "react-select";

import "./styles.css";

const TestSelect = (vendorOptions) => {


const options = [];
for (let i = 0; i < vendorOptions["vendorOptions"].length; i = i + 1) {
  options.push({ value: vendorOptions["vendorOptions"][i], label: `${vendorOptions["vendorOptions"][i]}` });
}

const loadOptions = (inputValue, callback) => {
    setTimeout(() => {
      callback(options);
    }, 1000);
  };


const height = 35;

class MenuList extends Component {
  render() {
    const { options, children, maxHeight, getValue } = this.props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;

    return (
      <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    );
  }
}

const TestSelectComponent = () => {
    
    return(
        <div className ="testDropdown">
          <AsyncSelect components={{ MenuList }} cacheOptions defaultOptions loadOptions={loadOptions} filterOption={createFilter({ ignoreAccents: false })}/>
        </div>
    )
}
    return (
    <TestSelectComponent />
    )
}
export default TestSelect

Related Query

More Query from same tag