@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
174 lines • 6.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Dropdown_1 = require("@fluentui/react/lib/Dropdown");
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const Label_1 = require("@fluentui/react/lib/Label");
const SPViewPickerService_1 = require("../../services/SPViewPickerService");
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
// Empty view value
const EMPTY_VIEW_KEY = 'NO_VIEW_SELECTED';
/**
* Renders the controls for PropertyFieldViewPicker component
*/
class PropertyFieldViewPickerHost extends React.Component {
/**
* Constructor method
*/
constructor(props) {
super(props);
this.options = [];
telemetry.track('PropertyFieldViewPicker', {
disabled: props.disabled
});
this.state = {
results: this.options,
errorMessage: ''
};
this.async = new Utilities_1.Async(this);
this.validate = this.validate.bind(this);
this.onChanged = this.onChanged.bind(this);
this.notifyAfterValidate = this.notifyAfterValidate.bind(this);
this.delayedValidate = this.async.debounce(this.validate, this.props.deferredValidationTime);
}
componentDidMount() {
// Start retrieving the list views
this.loadViews();
}
componentDidUpdate(prevProps, _prevState) {
if (this.props.listId !== prevProps.listId || this.props.webAbsoluteUrl !== prevProps.webAbsoluteUrl) {
this.loadViews();
}
}
/**
* Loads the views from a SharePoint list
*/
loadViews() {
const viewService = new SPViewPickerService_1.SPViewPickerService(this.props, this.props.context);
const viewsToExclude = this.props.viewsToExclude || [];
this.options = [];
viewService.getViews().then((response) => {
// Start mapping the views that are selected
response.value.forEach((view) => {
if (this.props.selectedView === view.Id) {
this.selectedKey = view.Id;
}
// Make sure that the current view is NOT in the 'viewsToExclude' array
if (viewsToExclude.indexOf(view.Title) === -1 && viewsToExclude.indexOf(view.Id) === -1) {
this.options.push({
key: view.Id,
text: view.Title
});
}
});
// Option to unselect the view
this.options.unshift({
key: EMPTY_VIEW_KEY,
text: ''
});
// Update the current component state
this.setState({
results: this.options,
selectedKey: this.selectedKey
});
}).catch(() => { });
}
/**
* Raises when a view has been selected
*/
onChanged(option, _index) {
const newValue = option.key;
this.delayedValidate(newValue);
}
/**
* Validates the new custom field value
*/
validate(value) {
if (this.props.onGetErrorMessage === null || this.props.onGetErrorMessage === undefined) {
this.notifyAfterValidate(this.props.selectedView, value);
return;
}
if (this.latestValidateValue === value) {
return;
}
this.latestValidateValue = value;
const errResult = this.props.onGetErrorMessage(value || '');
if (typeof errResult !== 'undefined') {
if (typeof errResult === 'string') {
if (errResult === '') {
this.notifyAfterValidate(this.props.selectedView, value);
}
this.setState({
errorMessage: errResult
});
}
else {
errResult.then((errorMessage) => {
if (!errorMessage) {
this.notifyAfterValidate(this.props.selectedView, value);
}
this.setState({
errorMessage: errorMessage
});
}).catch(() => { });
}
}
else {
this.notifyAfterValidate(this.props.selectedView, value);
}
}
/**
* Notifies the parent Web Part of a property value change
*/
notifyAfterValidate(oldValue, newValue) {
// Check if the user wanted to unselect the view
const propValue = newValue === EMPTY_VIEW_KEY ? '' : newValue;
// Deselect all options
this.options = this.state.results.map(option => {
if (option.selected) {
option.selected = false;
}
return option;
});
// Set the current selected key
this.selectedKey = newValue;
// Update the state
this.setState({
selectedKey: this.selectedKey,
results: this.options
});
if (this.props.onPropertyChange && propValue !== null) {
// Store the new property value
(0, GeneralHelper_1.setPropertyValue)(this.props.properties, this.props.targetProperty, propValue);
// Trigger the default onPropertyChange event
this.props.onPropertyChange(this.props.targetProperty, oldValue, propValue);
// Trigger the apply button
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, propValue);
}
}
}
/**
* Called when the component will unmount
*/
componentWillUnmount() {
if (typeof this.async !== 'undefined') {
this.async.dispose();
}
}
/**
* Renders the SPViewPicker controls with Office UI Fabric
*/
render() {
// Renders content
return (React.createElement("div", null,
this.props.label && React.createElement(Label_1.Label, null, this.props.label),
React.createElement(Dropdown_1.Dropdown, { disabled: this.props.disabled, label: '', onChanged: this.onChanged, options: this.state.results, selectedKey: this.state.selectedKey }),
React.createElement(FieldErrorMessage_1.default, { errorMessage: this.state.errorMessage })));
}
}
exports.default = PropertyFieldViewPickerHost;
//# sourceMappingURL=PropertyFieldViewPickerHost.js.map