49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { ReactElement, useCallback, useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { fetchMetronResource } from "../../../actions/metron.actions";
|
|
import Creatable from "react-select/creatable";
|
|
import { withAsyncPaginate } from "react-select-async-paginate";
|
|
const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
|
|
|
|
export const AsyncSelectPaginate = (props): ReactElement => {
|
|
const [value, setValue] = useState(null);
|
|
const [isAddingInProgress, setIsAddingInProgress] = useState(false);
|
|
|
|
const loadData = useCallback((query, loadedOptions, { page }) => {
|
|
return fetchMetronResource({
|
|
method: "GET",
|
|
resource: props.metronResource,
|
|
query: {
|
|
name: query,
|
|
page,
|
|
},
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<CreatableAsyncPaginate
|
|
SelectComponent={Creatable}
|
|
debounceTimeout={200}
|
|
isDisabled={isAddingInProgress}
|
|
value={props.value}
|
|
loadOptions={loadData}
|
|
placeholder={props.placeholder}
|
|
// onCreateOption={onCreateOption}
|
|
onChange={props.onChange}
|
|
// cacheUniqs={[cacheUniq]}
|
|
additional={{
|
|
page: 1,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
AsyncSelectPaginate.propTypes = {
|
|
metronResource: PropTypes.string.isRequired,
|
|
placeholder: PropTypes.string,
|
|
value: PropTypes.object,
|
|
onChange: PropTypes.func,
|
|
};
|
|
|
|
export default AsyncSelectPaginate;
|