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

New PR to show changes to PR#155 #156

Closed saltovo closed 1 year 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, because 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 1 year ago

Two years later, I have implemented a variant of this in 801a0b95a45b9ff20f79e8c3fa6e5980f834df1d and have included you as a co-author in the commit. I have decided against making more significant changes to the underlying code, instead providing an example of how to do async search with a mock API request. One major reason for this was to prevent major backward compatibility breaks with simpleValue={true}.

Thank you for all of your effort.

saltovo commented 1 year ago

thank you for let me be a co-author,hope this project be better.