mui-spfx-controls/lib/components/ListItemPicker/ListItemPicker.js

SPFx component library built with MUI

import { __assign, __awaiter, __generator } from "tslib";
import { Autocomplete, Skeleton, TextField } from '@mui/material';
import { Logger } from '@pnp/logging';
import debounce from 'lodash/debounce';
import React, { forwardRef, useEffect, useState, } from 'react';
import { ListService } from '../../services/ListService';
export var ListItemPicker = forwardRef(function (_a, ref) {
    var context = _a.context, label = _a.label, list = _a.list, fields = _a.fields, displayField = _a.displayField, required = _a.required, multiple = _a.multiple, defaultValue = _a.defaultValue, searchSuggestionLimit = _a.searchSuggestionLimit, disabled = _a.disabled, variant = _a.variant, color = _a.color, size = _a.size, LoadingComponent = _a.LoadingComponent, name = _a.name, fullWidth = _a.fullWidth, sx = _a.sx, onChange = _a.onChange;
    var _b = useState([]), listItems = _b[0], setListItems = _b[1];
    var _c = useState(''), query = _c[0], setQuery = _c[1];
    var _d = useState(null), error = _d[0], setError = _d[1];
    var _e = useState(false), loading = _e[0], setLoading = _e[1];
    var listService = new ListService(context, list);
    useEffect(function () {
        var fetchItems = debounce(function () { return __awaiter(void 0, void 0, void 0, function () {
            var fieldResponse, itemResponse, error_1;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        _a.trys.push([0, 3, 4, 5]);
                        setLoading(true);
                        return [4 /*yield*/, listService.getListFields(fields)];
                    case 1:
                        fieldResponse = _a.sent();
                        return [4 /*yield*/, listService.getListItems(fieldResponse, "substringof('".concat(query, "', ").concat(displayField, ")"), 'Created', Number(searchSuggestionLimit))];
                    case 2:
                        itemResponse = _a.sent();
                        setListItems(itemResponse);
                        return [3 /*break*/, 5];
                    case 3:
                        error_1 = _a.sent();
                        Logger.error(error_1);
                        setError(error_1);
                        return [3 /*break*/, 5];
                    case 4:
                        setLoading(false);
                        return [7 /*endfinally*/];
                    case 5: return [2 /*return*/];
                }
            });
        }); }, 300);
        fetchItems();
    }, [list, fields, displayField, searchSuggestionLimit, query]);
    return (React.createElement(Autocomplete, { "data-testid": "mui-spfx-list-item-picker", ref: ref, multiple: multiple, disableCloseOnSelect: multiple, options: listItems, getOptionLabel: function (option) { return option[displayField] || ''; }, defaultValue: defaultValue, filterOptions: function (x) { return x; }, loading: loading, size: size, disabled: disabled, popupIcon: null, loadingText: LoadingComponent || React.createElement(Skeleton, { width: "100%", height: 40 }), sx: sx, onChange: function (event, value) {
            if (onChange) {
                onChange(value);
            }
        }, onInputChange: function (event, newValue) { return setQuery(newValue); }, renderInput: function (params) { return (React.createElement(TextField, __assign({}, params, { name: name, variant: variant, required: required, color: color, error: error !== null, helperText: error ? 'Something went wrong' : '', label: label, fullWidth: fullWidth || true }))); } }));
});
export default ListItemPicker;
//# sourceMappingURL=ListItemPicker.js.map