@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
71 lines • 3.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldCollectionData = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var Button_1 = require("@fluentui/react/lib/Button");
var Panel_1 = require("@fluentui/react/lib/Panel");
var Label_1 = require("@fluentui/react/lib/Label");
var collectionDataViewer_1 = require("./collectionDataViewer");
var strings = tslib_1.__importStar(require("ControlStrings"));
var MessageBar_1 = require("@fluentui/react/lib/MessageBar");
var FieldCollectionData = /** @class */ (function (_super) {
tslib_1.__extends(FieldCollectionData, _super);
function FieldCollectionData(props) {
var _this = _super.call(this, props) || this;
/**
* Open the panel
*/
_this.openPanel = function () {
_this.setState({
panelOpen: true
});
};
/**
* Closes the panel
*/
_this.closePanel = function () {
_this.setState({
panelOpen: false
});
};
/**
* On save action
*/
_this.onSave = function (items) {
_this.props.onChanged(items);
_this.setState({
panelOpen: false
});
};
_this.state = {
panelOpen: false
};
telemetry.track('FieldCollectionData', {});
return _this;
}
FieldCollectionData.prototype.render = function () {
var _element = this.getElement();
return (_element);
};
FieldCollectionData.prototype.getElement = function () {
var _a;
var _element = typeof this.props.usePanel === "boolean" && this.props.usePanel === false
?
React.createElement(collectionDataViewer_1.CollectionDataViewer, tslib_1.__assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel }))
:
React.createElement("div", null,
React.createElement(Label_1.Label, null, this.props.label),
React.createElement(Button_1.DefaultButton, { text: this.props.manageBtnLabel, onClick: this.openPanel, disabled: this.props.fields.length === 0 || this.props.disabled }),
(!this.props.fields || this.props.fields.length === 0) && //<FieldErrorMessage errorMessage={strings.CollectionDataEmptyFields} />
React.createElement(MessageBar_1.MessageBar, { messageBarType: MessageBar_1.MessageBarType.error }, strings.CollectionDataItemMissingFields),
React.createElement(Panel_1.Panel, tslib_1.__assign({ isOpen: this.state.panelOpen, onDismiss: this.closePanel, type: Panel_1.PanelType.large, headerText: this.props.panelHeader, onOuterClick: function () { }, className: "FieldCollectionData__panel ".concat(this.props.panelClassName || "") }, (_a = this.props.panelProps) !== null && _a !== void 0 ? _a : {}),
this.props.panelDescription && (React.createElement("p", { className: "FieldCollectionData__panel__description" }, this.props.panelDescription)),
React.createElement(collectionDataViewer_1.CollectionDataViewer, tslib_1.__assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel }))));
return _element;
};
return FieldCollectionData;
}(React.Component));
exports.FieldCollectionData = FieldCollectionData;
//# sourceMappingURL=FieldCollectionData.js.map