mui-spfx-controls
Version:
SPFx component library built with MUI
83 lines • 4.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var icons_material_1 = require("@mui/icons-material");
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 SearchService_1 = require("../../services/SearchService");
var Searchbar = (0, react_1.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 = (0, react_1.useState)([]), options = _b[0], setOptions = _b[1];
var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
var _d = (0, react_1.useState)(false), open = _d[0], setOpen = _d[1];
var _e = (0, react_1.useState)(''), query = _e[0], setQuery = _e[1];
var _f = (0, react_1.useState)(null), error = _f[0], setError = _f[1];
var searchService = new SearchService_1.SearchService(context);
var createQuery = (0, react_1.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]);
(0, react_1.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) {
logging_1.Logger.error(error);
setError(error);
setLoading(false);
});
}, [open, query]);
var handleInputChange = (0, debounce_1.default)(function (_event, value, reason) {
setOptions([]);
switch (reason) {
case 'input':
setQuery(value);
break;
case 'clear':
setQuery('');
break;
case 'reset':
setQuery('');
}
}, 300);
return (react_1.default.createElement(material_1.Autocomplete, { "data-testid": "mui-spfx-searchbar", 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_1.default.createElement(material_1.TextField, tslib_1.__assign({}, params, { label: label ? label : 'Search', color: color, variant: variant, error: error !== null, helperText: error !== null ? 'Error searching' : '', slotProps: {
input: tslib_1.__assign(tslib_1.__assign({}, params.InputProps), { role: 'search', endAdornment: (react_1.default.createElement(react_1.Fragment, null,
loading ? (react_1.default.createElement(material_1.CircularProgress, { color: "inherit", size: 20 })) : null,
params.InputProps.endAdornment)) }),
} }))); }, renderOption: function (props, option) { return (react_1.default.createElement(material_1.ListItem, tslib_1.__assign({}, props, { key: option.UniqueId }),
react_1.default.createElement(material_1.ListItemIcon, null,
option.IsDocument === 'true' && react_1.default.createElement(icons_material_1.Description, null),
option.IsContainer === 'true' && react_1.default.createElement(icons_material_1.Folder, null)),
react_1.default.createElement(material_1.ListItemText, { primary: option.Title, secondary: option.Author }))); }, slotProps: {
listbox: {
sx: { maxHeight: 500 },
},
} }));
});
exports.default = Searchbar;
//# sourceMappingURL=Searchbar.js.map