@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
164 lines • 7.09 kB
JavaScript
import * as React from 'react';
import { Dropdown } from "@fluentui/react/lib/Dropdown";
import { Async } from '@fluentui/react/lib/Utilities';
import { Label } from '@fluentui/react/lib/Label';
import { SPRoleDefinitionPickerService } from '../../services/SPRoleDefinitionPickerService';
import FieldErrorMessage from '../errorMessage/FieldErrorMessage';
import * as telemetry from '../../common/telemetry';
import { setPropertyValue } from '../../helpers/GeneralHelper';
/**
* Renders the controls for PropertyFieldRoleDefinitionPicker component
*/
export default class PropertyFieldRoleDefinitionPickerHost extends React.Component {
/**
* Constructor method
*/
constructor(props) {
super(props);
this.options = [];
this.selectedOptions = [];
this.resultsRoleDefinition = new Array();
telemetry.track('PropertyFieldRoleDefinitionPicker', {
disabled: props.disabled
});
this.state = {
results: this.options,
errorMessage: '',
loading: false
};
this.async = new Async(this);
this.onChanged = this.onChanged.bind(this);
}
componentDidMount() {
// Start retrieving the list role definitions
this.loadRoleDefinitions();
}
componentDidUpdate(prevProps, _prevState) {
if (this.props.webAbsoluteUrl !== prevProps.webAbsoluteUrl) {
this.loadRoleDefinitions();
}
}
/**
* Loads the role definitions from a SharePoint web
*/
loadRoleDefinitions() {
this.options = [];
this.selectedOptions = [];
const roleDefinitionService = new SPRoleDefinitionPickerService(this.props, this.props.context);
const roleDefinitionsToExclude = this.props.roleDefinitionsToExclude ? this.props.roleDefinitionsToExclude : [];
const selectedRoleDefinitions = this.props.selectedRoleDefinition ? this.props.selectedRoleDefinition : [];
if (this.props.roleDefinitions && this.props.roleDefinitions.length > 0) {
this.props.roleDefinitions.forEach(i => {
if (selectedRoleDefinitions.indexOf(i.Name) === -1) {
selectedRoleDefinitions.push(i.Name);
}
});
}
roleDefinitionService.getRoleDefinitions().then((response) => {
// Start mapping the roleDefinitions that are selected
response.value.forEach((roleDefinition) => {
if (roleDefinitionsToExclude.indexOf(roleDefinition.Name) === -1) {
this.options.push({
key: roleDefinition.Id,
text: roleDefinition.Name,
selected: selectedRoleDefinitions.indexOf(roleDefinition.Name) >= 0 ? true : false
});
this.resultsRoleDefinition.push(roleDefinition);
}
});
this.selectedOptions = this.options.filter(o => o.selected === true);
const selectedRoleDefinitionInformation = [];
this.resultsRoleDefinition.forEach(value => {
this.selectedOptions.forEach(i => {
if (value.Id === i.key) {
selectedRoleDefinitionInformation.push(value);
}
});
});
let newVlaue;
if (this.props.multiSelect === true) {
newVlaue = selectedRoleDefinitionInformation;
}
else {
newVlaue = selectedRoleDefinitionInformation[0];
}
setPropertyValue(this.props.properties, this.props.targetProperty, newVlaue);
// Update the current component state
this.setState({
results: this.options,
roleDefinitionInformationResult: this.resultsRoleDefinition
});
}).catch(error => {
this.setState({
errorMessage: JSON.stringify(error),
loading: false
});
});
}
/**
* Raises when a role definition has been selected
*/
onChanged(option, _index) {
let selectedRoleDefinitionInformation = [];
if (this.props.multiSelect) {
if (option && option.selected) {
this.selectedOptions.push({
key: option.key,
text: option.text,
selected: option.selected
});
}
else {
this.selectedOptions = this.selectedOptions.filter(o => o.key !== option.key);
}
this.state.roleDefinitionInformationResult.forEach(value => {
this.selectedOptions.forEach(i => {
if (value.Id === i.key) {
selectedRoleDefinitionInformation.push(value);
}
});
});
}
else {
this.selectedOptions.push({
key: option.key,
text: option.text
});
this.selectedOptions = this.selectedOptions.filter(o => o.key === option.key);
selectedRoleDefinitionInformation = this.state.roleDefinitionInformationResult.filter(i => i.Id === this.selectedOptions[0].key);
}
this.props.onPropertyChange(this.props.targetProperty, this.props.roleDefinitions, selectedRoleDefinitionInformation);
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, selectedRoleDefinitionInformation);
}
this.setState({
results: this.options,
});
}
/**
* Called when the component will unmount
*/
componentWillUnmount() {
if (typeof this.async !== 'undefined') {
this.async.dispose();
}
}
/**
* Renders the SPRoleDefinitionPicker controls with Office UI Fabric
*/
render() {
// Renders content
let multiSelectAllowed = true;
if (this.props.multiSelect !== undefined) {
multiSelectAllowed = this.props.multiSelect;
}
return (React.createElement("div", null,
this.props.label && React.createElement(Label, null, this.props.label),
multiSelectAllowed &&
React.createElement(Dropdown, { options: this.state.results, onChanged: this.onChanged, multiSelect: true, selectedKeys: this.selectedOptions.map(item => item.key) || [], key: this.props.key, disabled: this.props.disabled || false }),
!multiSelectAllowed &&
React.createElement(Dropdown, { options: this.state.results, onChanged: this.onChanged, multiSelect: false, selectedKey: this.selectedOptions.map(item => item.key) || [], key: this.props.key, disabled: this.props.disabled || false }),
React.createElement(FieldErrorMessage, { errorMessage: this.state.errorMessage })));
}
}
//# sourceMappingURL=PropertyFieldRoleDefinitionPickerHost.js.map