mui-spfx-controls
Version:
SPFx component library built with MUI
91 lines • 4.66 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Description, Folder } from '@mui/icons-material';
import { Autocomplete, CircularProgress, ListItem, ListItemIcon, ListItemText, TextField, } from '@mui/material';
import { Logger } from '@pnp/logging';
import debounce from 'lodash/debounce';
import React, { forwardRef, Fragment, useCallback, useEffect, useState, } from 'react';
import { SearchService } from '../../services/SearchService';
var Searchbar = forwardRef(function (_a, ref) {
var label = _a.label, variant = _a.variant, color = _a.color, size = _a.size, fullWidth = _a.fullWidth, scope = _a.scope, excludedScope = _a.excludedScope, context = _a.context, onSearchResultSelect = _a.onSearchResultSelect;
var _b = useState([]), options = _b[0], setOptions = _b[1];
var _c = useState(false), loading = _c[0], setLoading = _c[1];
var _d = useState(false), open = _d[0], setOpen = _d[1];
var _e = useState(''), query = _e[0], setQuery = _e[1];
var _f = useState(null), error = _f[0], setError = _f[1];
var searchService = new SearchService(context);
var createQuery = useCallback(function () {
if (scope && excludedScope) {
return "FileName:".concat(query, " AND Path:").concat(scope, " AND -Path:").concat(excludedScope);
}
else if (scope) {
return "FileName:".concat(query, " AND Path:").concat(scope);
}
else if (excludedScope) {
return "FileName:".concat(query, " AND -Path:").concat(excludedScope);
}
else {
return "FileName:".concat(query);
}
}, [query, scope, excludedScope]);
useEffect(function () {
if (!open || query === '') {
return;
}
setLoading(true);
var builtQuery = createQuery();
searchService
.search(builtQuery, 5)
.then(function (response) {
setOptions(response.PrimarySearchResults);
setLoading(false);
setOpen(true);
})
.catch(function (error) {
Logger.error(error);
setError(error);
setLoading(false);
});
}, [open, query]);
var handleInputChange = debounce(function (_event, value, reason) {
setOptions([]);
switch (reason) {
case 'input':
setQuery(value);
break;
case 'clear':
setQuery('');
break;
case 'reset':
setQuery('');
}
}, 300);
return (React.createElement(Autocomplete, { ref: ref, open: open, role: "searchbox", fullWidth: fullWidth, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, onInputChange: handleInputChange, getOptionLabel: function (option) { return option.Title; }, size: size, options: options, loading: loading, onChange: function (_, selectedResult, reason) {
return onSearchResultSelect
? onSearchResultSelect(selectedResult, reason)
: null;
}, popupIcon: null, renderInput: function (params) { return (React.createElement(TextField, __assign({}, params, { label: label ? label : 'Search', color: color, variant: variant, error: error !== null, helperText: error !== null ? 'Error searching' : '', slotProps: {
input: __assign(__assign({}, params.InputProps), { role: 'search', endAdornment: (React.createElement(Fragment, null,
loading ? (React.createElement(CircularProgress, { color: "inherit", size: 20 })) : null,
params.InputProps.endAdornment)) }),
} }))); }, renderOption: function (props, option) { return (React.createElement(ListItem, __assign({}, props, { key: option.UniqueId }),
React.createElement(ListItemIcon, null,
option.IsDocument === 'true' && React.createElement(Description, null),
option.IsContainer === 'true' && React.createElement(Folder, null)),
React.createElement(ListItemText, { primary: option.Title, secondary: option.Author }))); }, slotProps: {
listbox: {
sx: { maxHeight: 500 },
},
} }));
});
export default Searchbar;
//# sourceMappingURL=Searchbar.js.map