@raona/components
Version:
React components used at Raona to work with SPFx
121 lines (120 loc) • 7.05 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var stylesConstants_1 = require("./stylesConstants");
var IconButton_1 = require("../IconButton");
var Dialog_1 = require("office-ui-fabric-react/lib/components/Dialog/Dialog");
var DialogContent_types_1 = require("office-ui-fabric-react/lib/components/Dialog/DialogContent.types");
var DialogFooter_1 = require("office-ui-fabric-react/lib/components/Dialog/DialogFooter");
var PrimaryButton_1 = require("office-ui-fabric-react/lib/components/Button/PrimaryButton/PrimaryButton");
var RequestCard = /** @class */ (function (_super) {
__extends(RequestCard, _super);
function RequestCard(props) {
var _this = _super.call(this, props) || this;
var item = _this.props.item;
_this.state = {
hideDialog: true,
hideInfoDialog: true
};
return _this;
}
/**
* Opens or closes a determined dialog
* @param type Type of Dlg to open or close
* @param event Should be React event, any because code clarity
*/
RequestCard.prototype.toogleDlg = function (type, event) {
if (event)
event.preventDefault();
event.stopPropagation();
var _a = this.props, item = _a.item, handleCardClick = _a.handleCardClick;
var _b = this.state, hideDialog = _b.hideDialog, hideInfoDialog = _b.hideInfoDialog;
switch (type) {
case 'App':
handleCardClick && handleCardClick(item);
if ((!item.metadata || (item.metadata && !item.metadata.popUp)) && item.redirectUrl) {
window.open(item.redirectUrl, '_blank');
}
else {
this.setState({ hideDialog: !hideDialog });
}
break;
case 'Info':
if (item.metadata && !item.metadata.popUp && item.metadata.informationUrlText) {
window.open(item.metadata.informationUrlText, '_blank');
}
else {
this.setState({ hideInfoDialog: !hideInfoDialog });
}
break;
}
};
RequestCard.prototype.render = function () {
var _this = this;
/* VARS */
var _a = this.props, requestBodyStyle = _a.requestBodyStyle, item = _a.item, showCategory = _a.showCategory, saveFavoriteToolTipText = _a.saveFavoriteToolTipText;
/* FUNCTIONS */
var _b = this.props, handleSaveAsFavorite = _b.handleSaveAsFavorite, handleCardClick = _b.handleCardClick;
/* STATE */
var _c = this.state, hideDialog = _c.hideDialog, hideInfoDialog = _c.hideInfoDialog;
var styles = requestBodyStyle ? __assign({}, requestBodyStyle) : __assign({}, stylesConstants_1.requestConstantStyles); // Default Style for this component
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.card, onClick: function (e) { e.preventDefault(); handleCardClick && handleCardClick(item); } },
React.createElement("div", { className: styles.wrapper },
React.createElement("a", { className: 'card__link', onClick: function (e) { return _this.toogleDlg('App', e); } }),
React.createElement("div", { className: styles.meta },
item.metadata && (item.metadata.informationUrlText || item.metadata.appPopUpDescription) &&
React.createElement(IconButton_1.IconButton, { className: styles.tooltipInfo.href, iconName: styles.tooltipInfo.icon, handleOnClick: function (e) { return _this.toogleDlg('Info', e); } }),
handleSaveAsFavorite &&
React.createElement(IconButton_1.IconButton, { className: styles.tooltipInfo.href, iconName: item.isFav ? styles.tooltipFav.iconFav : styles.tooltipFav.iconNotFav, handleOnClick: function (e) { return handleSaveAsFavorite && handleSaveAsFavorite(e); }, toolTipText: saveFavoriteToolTipText })),
React.createElement("div", { className: styles.body.body },
React.createElement("p", { className: styles.body.title }, item.title),
showCategory && React.createElement("p", { className: styles.body.category }, item.category)))),
React.createElement(Dialog_1.Dialog, { hidden: hideInfoDialog, onDismiss: function (e) { return _this.toogleDlg('Info', e); }, dialogContentProps: {
type: DialogContent_types_1.DialogType.normal,
title: name,
subText: item.metadata.appPopUpDescription
}, modalProps: {
isBlocking: false
} },
React.createElement(DialogFooter_1.DialogFooter, null,
React.createElement(PrimaryButton_1.PrimaryButton, { className: styles.primaryButtonDlg, onClick: function (e) { return _this.toogleDlg('Info', e); }, text: "Accept" }))),
React.createElement(Dialog_1.Dialog, { hidden: hideDialog, onDismiss: function (e) { return _this.toogleDlg('App', e); }, containerClassName: styles.containerDlg, dialogContentProps: {
type: DialogContent_types_1.DialogType.normal,
title: item.title,
subText: ''
}, modalProps: {
isBlocking: false
} },
React.createElement("iframe", { src: item.redirectUrl }),
React.createElement(DialogFooter_1.DialogFooter, null,
React.createElement(PrimaryButton_1.PrimaryButton, { className: styles.primaryButtonDlg, onClick: function (e) { return _this.toogleDlg('App', e); }, text: "Accept" })))));
};
return RequestCard;
}(react_1.Component));
exports.RequestCard = RequestCard;