@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
59 lines • 2.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldCollectionDataHost = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const react_1 = require("@fluentui/react");
const collectionDataViewer_1 = require("./collectionDataViewer");
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
class PropertyFieldCollectionDataHost extends React.Component {
constructor(props) {
super(props);
/**
* Open the panel
*/
this.openPanel = () => {
this.setState({
panelOpen: true,
});
};
/**
* Closes the panel
*/
this.closePanel = () => {
this.setState({
panelOpen: false,
});
};
/**
* On save action
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.onSave = (items) => {
this.props.onChanged(items);
this.setState({
panelOpen: false,
});
};
this.state = {
panelOpen: false,
};
telemetry.track('PropertyFieldCollectionData', {});
}
render() {
var _a;
return (React.createElement("div", null,
React.createElement(react_1.Label, null, this.props.label),
React.createElement(react_1.DefaultButton, { text: this.props.manageBtnLabel, onClick: this.openPanel, disabled: this.props.fields.length === 0 || this.props.disabled }),
this.props.fields.length === 0 && (React.createElement(FieldErrorMessage_1.default, { errorMessage: strings.CollectionDataEmptyFields })),
React.createElement(react_1.Panel, Object.assign({ isOpen: this.state.panelOpen, onDismiss: this.closePanel, type: react_1.PanelType.large, headerText: this.props.panelHeader, onOuterClick: () => {
/* no-op; */
}, className: `PropertyFieldCollectionData__panel ${this.props.panelClassName || ''}` }, ((_a = this.props.panelProps) !== null && _a !== void 0 ? _a : {})),
this.props.panelDescription && (React.createElement("p", { className: 'PropertyFieldCollectionData__panel__description' }, this.props.panelDescription)),
React.createElement(collectionDataViewer_1.CollectionDataViewer, Object.assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel })))));
}
}
exports.PropertyFieldCollectionDataHost = PropertyFieldCollectionDataHost;
//# sourceMappingURL=PropertyFieldCollectionDataHost.js.map