@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
160 lines • 6.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListPicker = void 0;
var tslib_1 = require("tslib");
var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var React = tslib_1.__importStar(require("react"));
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var SPServiceFactory_1 = require("../../services/SPServiceFactory");
var ListPicker_module_scss_1 = tslib_1.__importDefault(require("./ListPicker.module.scss"));
/**
* Empty list value, to be checked for single list selection
*/
var EMPTY_LIST_KEY = 'NO_LIST_SELECTED';
/**
* Renders the controls for the ListPicker component
*/
var ListPicker = /** @class */ (function (_super) {
tslib_1.__extends(ListPicker, _super);
/**
* Constructor method
*/
function ListPicker(props) {
var _this = _super.call(this, props) || this;
_this._selectedList = null;
/**
* Raises when a list has been selected
* @param option the new selection
* @param index the index of the selection
*/
_this.onChanged = function (option, index) {
var _a = _this.props, multiSelect = _a.multiSelect, onSelectionChanged = _a.onSelectionChanged;
if (multiSelect === true) {
// Check if option was selected
var selectedLists = _this._selectedList ? (0, sp_lodash_subset_1.cloneDeep)(_this._selectedList) : [];
if (option.selected) {
selectedLists.push(option.key);
}
else {
// Filter out the unselected list
selectedLists = selectedLists.filter(function (list) { return list !== option.key; });
}
_this._selectedList = selectedLists;
}
else {
_this._selectedList = option.key;
}
if (onSelectionChanged) {
onSelectionChanged((0, sp_lodash_subset_1.cloneDeep)(_this._selectedList));
}
};
telemetry.track('ReactListPicker');
_this.state = {
options: [],
loading: false
};
return _this;
}
/**
* Lifecycle hook when component is mounted
*/
ListPicker.prototype.componentDidMount = function () {
this.loadLists();
};
/**
* componentDidUpdate lifecycle hook
* @param prevProps
* @param prevState
*/
ListPicker.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevProps.baseTemplate !== this.props.baseTemplate ||
prevProps.includeHidden !== this.props.includeHidden ||
prevProps.orderBy !== this.props.orderBy ||
prevProps.webAbsoluteUrl !== this.props.webAbsoluteUrl ||
prevProps.refreshToggle !== this.props.refreshToggle) {
this.loadLists();
}
if (prevProps.selectedList !== this.props.selectedList) {
this.setSelectedLists();
}
};
/**
* Loads the list from SharePoint current web site
*/
ListPicker.prototype.loadLists = function () {
var _this = this;
var _a = this.props, context = _a.context, baseTemplate = _a.baseTemplate, includeHidden = _a.includeHidden, orderBy = _a.orderBy, multiSelect = _a.multiSelect, filter = _a.filter, webAbsoluteUrl = _a.webAbsoluteUrl, contentTypeId = _a.contentTypeId;
// Show the loading indicator and disable the dropdown
this.setState({ loading: true });
var service = SPServiceFactory_1.SPServiceFactory.createService(context, true, 5000, webAbsoluteUrl);
service.getLibs({
baseTemplate: baseTemplate,
includeHidden: includeHidden,
orderBy: orderBy,
filter: filter,
contentTypeId: contentTypeId
}).then(function (results) {
var options = [];
// Start mapping the lists to the dropdown option
options = results.value.map(function (list) { return ({
key: list.Id,
text: list.Title
}); });
if (multiSelect !== true) {
// Add option to unselct list
options.unshift({
key: EMPTY_LIST_KEY,
text: ''
});
}
_this.setSelectedLists();
// Hide the loading indicator and set the dropdown options and enable the dropdown
_this.setState({
loading: false,
options: options
});
})
.catch(function () {
// no-op;
});
};
/**
* Set the currently selected list
*/
ListPicker.prototype.setSelectedLists = function () {
this._selectedList = (0, sp_lodash_subset_1.cloneDeep)(this.props.selectedList);
this.setState({
selectedList: this._selectedList
});
};
/**
* Renders the ListPicker controls with Office UI Fabric
*/
ListPicker.prototype.render = function () {
var _a = this.state, loading = _a.loading, options = _a.options, selectedList = _a.selectedList;
var _b = this.props, className = _b.className, disabled = _b.disabled, multiSelect = _b.multiSelect, label = _b.label, placeHolder = _b.placeHolder, placeholder = _b.placeholder;
var dropdownOptions = {
className: className,
options: options,
disabled: (loading || disabled),
label: label,
placeHolder: placeholder || placeHolder,
onChanged: this.onChanged
};
if (multiSelect === true) {
dropdownOptions.multiSelect = true;
dropdownOptions.selectedKeys = selectedList;
}
else {
dropdownOptions.selectedKey = selectedList;
}
return (React.createElement("div", { className: ListPicker_module_scss_1.default.listPicker },
loading && React.createElement(Spinner_1.Spinner, { className: ListPicker_module_scss_1.default.spinner, size: Spinner_1.SpinnerSize.xSmall }),
React.createElement(Dropdown_1.Dropdown, tslib_1.__assign({}, dropdownOptions))));
};
return ListPicker;
}(React.Component));
exports.ListPicker = ListPicker;
//# sourceMappingURL=ListPicker.js.map