jakezatecky / react-dual-listbox

A feature-rich dual listbox for React.
https://jakezatecky.github.io/react-dual-listbox/
MIT License
110 stars 58 forks source link

add PromiseSearchOptions for async search #155

Closed saltovo closed 3 years ago

saltovo commented 3 years ago

l add props.promiseSearchOptions(bool) to fetch new data with ajax by using props.onFilterChange.After fetching the new data, even if the options not contains the selected,the selected won't disappear.l also change the props.onChange .sorry for the style,beacuse I can't install "stylelint-config-takiyon": "^1.0.1".Here is the code l use props.promiseSearchOptions: const Transfer: React.FC<{ options: any[]; selectedOptions?: number[]; }> = ({ options, selectedOptions = []}) => { const [selected, setSelected] = useState([ { value: 90, label: "冲片牌号122(0076)" }, { value: 89, label: "多类型检验特性项测试(0075)" }, ]); const [promiseOptions, setPromiseOptions] = useState<any[]>([]); const [filter, setFilter] = useState({ available: "", selected: "", });

const onChange = (selected, selection) => {
    setSelected(selected);
};

useEffect(() => {
    setPromiseOptions(
        options.map((item: any) => {
            return { value: item.id, label: `${item.name}(${item.featureNumber})` };
        })
    );
}, [options]);

return (
    <DualListBox
        canFilter
        preserveSelectOrder
        PromiseSearchOptions
        filter={filter}
        onFilterChange={(newFilter) => {
            setFilter(newFilter);
            axios
                .post("/api/inspectionItem/page", {
                    pageNum: 1,
                    pageSize: 1000,
                    name: newFilter.available,
                })
                .then((res) => {
                    setPromiseOptions(
                        res.data.data.records.map((item: any) => {
                            return {
                                value: item.id,
                                label: `${item.name}(${item.featureNumber})`,
                            };
                        })
                    );
                });
        }}
        filterPlaceholder="筛选搜索"
        options={promiseOptions}
        selected={selected}
        onChange={onChange}
    />
);

};

jakezatecky commented 3 years ago

Hello and thanks for the PR!

I would be happy to look over the changes, but due to what looks like auto-formatting changes, your pull request introduces a lot of noise that makes it difficult to see the changes you have made (due to differences in indentation, quote character, and a few other things). If you can get this PR to only include the relevant change, I can look it over and make any formatting changes on my end.

saltovo commented 3 years ago

sorry for that,l will close this PR and take a new PR