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

SPFx component library built with MUI

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItemPicker = void 0;
var tslib_1 = require("tslib");
var material_1 = require("@mui/material");
var logging_1 = require("@pnp/logging");
var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
var react_1 = tslib_1.__importStar(require("react"));
var ListService_1 = require("../../services/ListService");
exports.ListItemPicker = (0, react_1.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 = (0, react_1.useState)([]), listItems = _b[0], setListItems = _b[1];
    var _c = (0, react_1.useState)(''), query = _c[0], setQuery = _c[1];
    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
    var _e = (0, react_1.useState)(false), loading = _e[0], setLoading = _e[1];
    var listService = new ListService_1.ListService(context, list);
    (0, react_1.useEffect)(function () {
        var fetchItems = (0, debounce_1.default)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
            var fieldResponse, itemResponse, error_1;
            return tslib_1.__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();
                        logging_1.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_1.default.createElement(material_1.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_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, tslib_1.__assign({}, params, { name: name, variant: variant, required: required, color: color, error: error !== null, helperText: error ? 'Something went wrong' : '', label: label, fullWidth: fullWidth || true }))); } }));
});
exports.default = exports.ListItemPicker;
//# sourceMappingURL=ListItemPicker.js.map