@workday/canvas-kit-react/dist/commonjs/combobox/lib/hooks/useComboboxLoader.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useComboboxLoader = void 0;
const react_1 = __importDefault(require("react"));
const collection_1 = require("@workday/canvas-kit-react/collection");
const useDebounce = () => {
    const debounceTimer = react_1.default.useRef(-1);
    react_1.default.useEffect(() => {
        return () => {
            // We want to clear any timeout on unload. We disable the ESLint rule because this is actually
            // what we want
            // eslint-disable-next-line react-hooks/exhaustive-deps
            clearTimeout(debounceTimer.current);
        };
    }, []);
    return (fn, wait) => {
        clearTimeout(debounceTimer.current);
        debounceTimer.current = setTimeout(fn, wait); // We don't actually care what the real return type of setTimeout is. It is a number in the browser and something else in Node
    };
};
/**
 * Creates a `Combobox` data loader and a model. The `Combobox` loader extends the
 * {@link useListLoader} and connects a {@link ComboboxInput Combobox.Input} to the filter of the
 * data loader. A simple loader using
 * [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) could look like the
 * following:
 *
 * ```ts
 * const {model, loader} = useComboboxLoader(
 *   {
 *     total: 0,
 *     pageSize: 20,
 *     async load({pageNumber, pageSize, filter}) {
 *       // `filter` will be a `string`
 *       return fetch(`/myUrl?filter=${filter}`)
 *         .then(response => response.json())
 *         .then(response => {
 *           return {total: response.total, items: response.items};
 *         });
 *     },
 *   },
 *   useComboboxModel
 * );
 * ```
 */
const useComboboxLoader = (config, modelHook) => {
    const debounce = useDebounce();
    const list = (0, collection_1.useListLoader)({
        shouldLoad(params, state) {
            return ((config.shouldLoad ? config.shouldLoad(params, state) : true) &&
                state.visibility !== 'hidden');
        },
        ...modelHook.mergeConfig(config, {
            onFilterChange(event) {
                const value = event.currentTarget.value;
                debounce(() => list.loader.updateFilter(value), 150);
            },
        }),
    }, modelHook);
    return list;
};
exports.useComboboxLoader = useComboboxLoader;