@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
97 lines • 6.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const FolderPicker_module_scss_1 = tslib_1.__importDefault(require("./FolderPicker.module.scss"));
const Button_1 = require("@fluentui/react/lib/Button");
const Label_1 = require("@fluentui/react/lib/Label");
const Link_1 = require("@fluentui/react/lib/Link");
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const Panel_1 = require("@fluentui/react/lib/Panel");
const FolderExplorer_1 = require("./controls/FolderExplorer");
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
class PropertyFieldFolderPickerHost extends React.Component {
constructor(props) {
super(props);
this._folderLinkId = (0, Utilities_1.getId)('folderLink');
this._showPanel = () => {
this.setState({ showPanel: true });
};
this._hidePanel = () => {
this.setState({ showPanel: false });
};
this._onRenderFooterContent = () => {
return (React.createElement("div", { className: FolderPicker_module_scss_1.default.actions },
React.createElement(Button_1.PrimaryButton, { iconProps: { iconName: 'Save' }, onClick: this._onFolderSave }, "Save"),
React.createElement(Button_1.DefaultButton, { iconProps: { iconName: 'Cancel' }, onClick: this._hidePanel }, "Cancel")));
};
this._onFolderSelect = (folder) => {
this._selectedFolder = folder;
};
this._onFolderSave = () => {
this.props.onSelect(this._selectedFolder);
(0, GeneralHelper_1.setPropertyValue)(this.props.properties, this.props.targetProperty, this._selectedFolder);
this.props.onPropertyChange(this.props.targetProperty, this.props.selectedFolder, this._selectedFolder);
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, this._selectedFolder);
}
this.setState({
selectedFolder: this._selectedFolder,
showPanel: false,
});
};
this._resetSelection = () => {
this._selectedFolder = null;
this.setState({
selectedFolder: this._selectedFolder,
});
this.props.onSelect(this._selectedFolder);
(0, GeneralHelper_1.setPropertyValue)(this.props.properties, this.props.targetProperty, this._selectedFolder);
this.props.onPropertyChange(this.props.targetProperty, this.props.selectedFolder, this._selectedFolder);
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, this._selectedFolder);
}
};
telemetry.track('PropertyFieldFolderPicker', {
disabled: props.disabled
});
this.state = {
showPanel: false,
selectedFolder: (0, GeneralHelper_1.getPropertyValue)(props.properties, props.targetProperty) || this.props.defaultFolder
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
var _a, _b, _c, _d, _e;
const nextValue = (0, GeneralHelper_1.getPropertyValue)(nextProps.properties, nextProps.targetProperty);
// Compare state's selectedFolder with incoming prop value
const stateUrl = (_c = (_b = (_a = this.state.selectedFolder) === null || _a === void 0 ? void 0 : _a.ServerRelativeUrl) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : null;
const nextUrl = (_e = (_d = nextValue === null || nextValue === void 0 ? void 0 : nextValue.ServerRelativeUrl) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== null && _e !== void 0 ? _e : null;
if (stateUrl !== nextUrl) {
this.setState({
selectedFolder: nextValue
});
}
}
render() {
return (React.createElement("div", null,
this.props.label &&
React.createElement(Label_1.Label, { className: this.props.required ? FolderPicker_module_scss_1.default.required : '', htmlFor: this._folderLinkId }, this.props.label),
React.createElement("div", { className: FolderPicker_module_scss_1.default.folderPicker },
React.createElement("div", { className: FolderPicker_module_scss_1.default.selection },
!this.state.selectedFolder &&
React.createElement("span", { className: FolderPicker_module_scss_1.default.selectFolderLabel }, "Select a folder"),
this.state.selectedFolder &&
React.createElement("div", { className: FolderPicker_module_scss_1.default.selectFolder },
React.createElement(Link_1.Link, { className: FolderPicker_module_scss_1.default.selectedLink, target: '_blank', "data-interception": "off", id: this._folderLinkId, href: this.state.selectedFolder.ServerRelativeUrl },
React.createElement("span", { title: this.state.selectedFolder.Name }, this.state.selectedFolder.Name)),
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel' }, title: "Delete selection", ariaLabel: "Delete selection", onClick: this._resetSelection, disabled: this.props.disabled }))),
React.createElement("div", { className: FolderPicker_module_scss_1.default.selectButton },
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'FolderList' }, title: "Select folder", ariaLabel: "Select folder", disabled: this.props.disabled, onClick: this._showPanel }))),
React.createElement(Panel_1.Panel, { isOpen: this.state.showPanel, type: Panel_1.PanelType.medium, onDismiss: this._hidePanel, headerText: "Select folder", closeButtonAriaLabel: "Close", onRenderFooterContent: this._onRenderFooterContent },
React.createElement("div", null,
React.createElement(FolderExplorer_1.FolderExplorer, { context: this.props.context, rootFolder: this.props.rootFolder, defaultFolder: this.state.selectedFolder, onSelect: this._onFolderSelect, canCreateFolders: this.props.canCreateFolders, siteAbsoluteUrl: this.props.siteAbsoluteUrl })))));
}
}
exports.default = PropertyFieldFolderPickerHost;
//# sourceMappingURL=PropertyFieldFolderPickerHost.js.map