cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
105 lines (103 loc) • 4.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatDocumentBubble = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _hooks = require("./hooks");
var _Shared = require("../../../Shared");
var _ = require("../../..");
var _style = require("./style");
var _collaborative = _interopRequireDefault(require("./resources/collaborative.svg"));
/**
*
* CometChatDocumentBubble is UI component for collaborative document message bubble.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
var CometChatDocumentBubble = function CometChatDocumentBubble(props) {
var _React$useState = _react["default"].useState(""),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
documentURL = _React$useState2[0],
setDocumentURL = _React$useState2[1];
var theme = new _Shared.CometChatTheme(props.theme) || new _Shared.CometChatTheme({});
var launchCollaborativeDocument = function launchCollaborativeDocument() {
try {
if (documentURL && documentURL.length) {
window.open(documentURL, "", "fullscreen=yes, scrollbars=auto");
}
} catch (error) {
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageError, error);
}
};
var getDocumentMessage = function getDocumentMessage() {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.messageKitDocumentBlockStyle)(props, theme),
className: "message__kit__blocks"
}, /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.messageDocumentBlockStyle)(props),
className: "message__message-blocks"
}, /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.messageDocumentTitleStyle)(props, theme),
className: "message__message-title"
}, props.title), /*#__PURE__*/_react["default"].createElement("i", {
style: (0, _style.messageDocumentIconStyle)(props, theme),
className: "message__message-icon"
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "message__message-subtitle",
style: (0, _style.messageSubtitleWrapperStyle)(props, theme)
}, /*#__PURE__*/_react["default"].createElement("p", {
className: "message__subtitle",
style: (0, _style.messageDocumentSubtitleStyle)(props, theme)
}, props.subTitle)), /*#__PURE__*/_react["default"].createElement("div", {
className: "message__separator",
style: (0, _style.seperatorStyle)(props, theme)
}, ""), /*#__PURE__*/_react["default"].createElement("ul", {
style: (0, _style.messageDocumentBtnStyle)(props),
className: "message__message-button"
}, /*#__PURE__*/_react["default"].createElement("li", {
style: (0, _style.messageDocumentBtnItemStyle)(props, theme),
onClick: launchCollaborativeDocument
}, /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.messageBtnItemTextStyle)(props)
}, props.buttonText))));
};
(0, _hooks.Hooks)(props, setDocumentURL);
return getDocumentMessage();
};
exports.CometChatDocumentBubble = CometChatDocumentBubble;
CometChatDocumentBubble.defaultProps = {
messageObject: null,
title: "",
subTitle: "",
buttonText: "Launch",
iconURL: _collaborative["default"],
style: {
width: "100%",
height: "auto",
border: "0 none",
titleFont: "400 14px Inter,sans-serif",
titleColor: "#fff",
borderRadius: "12px",
background: "rgb(51,153,255)",
subTitleFont: "",
subTitleColor: "",
buttonTextFont: "400 14px Inter,sans-serif",
buttonTextColor: "#39f",
buttonBackground: "#fff",
iconTint: "#fff"
}
};
CometChatDocumentBubble.propTypes = {
messageObject: _propTypes["default"].object,
title: _propTypes["default"].string,
subTitle: _propTypes["default"].string,
iconURL: _propTypes["default"].string,
style: _propTypes["default"].object
};