@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
177 lines • 7.19 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 SPColumnPickerService_1 = require("../../services/SPColumnPickerService");
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
// Empty column value
const EMPTY_COLUMN_KEY = 'NO_COLUMN_SELECTED';
/**
* Renders the controls for PropertyFieldColumnPicker component
*/
class PropertyFieldColumnPickerHost extends React.Component {
/**
* Constructor method
*/
constructor(props) {
super(props);
this.options = [];
telemetry.track('PropertyFieldColumnPicker', {
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 columns
this.loadColumns();
}
componentDidUpdate(prevProps, _prevState) {
if (this.props.listId !== prevProps.listId || this.props.webAbsoluteUrl !== prevProps.webAbsoluteUrl) {
this.loadColumns();
}
}
/**
* Loads the columns from a SharePoint list
*/
loadColumns() {
const { context, columnReturnProperty, selectedColumn, displayHiddenColumns } = this.props;
const columnService = new SPColumnPickerService_1.SPColumnPickerService(this.props, context);
const columnsToExclude = this.props.columnsToExclude || [];
this.options = [];
columnService.getColumns(displayHiddenColumns).then((response) => {
// Start mapping the Columns that are selected
const value = response.value || [];
value.forEach((column) => {
const colPropsToCheck = columnReturnProperty ? column[columnReturnProperty] : column.Id;
if (selectedColumn === colPropsToCheck) {
this.selectedKey = columnReturnProperty ? column[columnReturnProperty] : column.Id;
}
// Make sure that the current column is NOT in the 'columnsToExclude' array
if (columnsToExclude.indexOf(column.Title) === -1 && columnsToExclude.indexOf(column.Id) === -1) {
this.options.push({
key: columnReturnProperty ? column[columnReturnProperty] : column.Id,
text: column.Title
});
}
});
// Option to unselect the column
this.options.unshift({
key: EMPTY_COLUMN_KEY,
text: ''
});
// Update the current component state
this.setState({
results: this.options,
selectedKey: this.selectedKey
});
}).catch(() => { });
}
/**
* Raises when a column 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.selectedColumn, 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.selectedColumn, value);
}
this.setState({
errorMessage: errResult
});
}
else {
errResult.then((errorMessage) => {
if (!errorMessage) {
this.notifyAfterValidate(this.props.selectedColumn, value);
}
this.setState({
errorMessage: errorMessage
});
}).catch(() => { });
}
}
else {
this.notifyAfterValidate(this.props.selectedColumn, value);
}
}
/**
* Notifies the parent Web Part of a property value change
*/
notifyAfterValidate(oldValue, newValue) {
// Check if the user wanted to unselect the column
const propValue = newValue === EMPTY_COLUMN_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 SPColumnPicker 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 = PropertyFieldColumnPickerHost;
//# sourceMappingURL=PropertyFieldColumnPickerHost.js.map