cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
149 lines (146 loc) • 6.54 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatStickerKeyboard = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Shared = require("../../Shared");
var _hooks = require("./hooks");
var _style = require("./style");
var _this = void 0;
/**
*
* CometChatStickerKeyboard is a component that fetches stickers from Stickers extension
* and displays it.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
var CometChatStickerKeyboard = function CometChatStickerKeyboard(props) {
var _React$useState = _react["default"].useState([]),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
stickerList = _React$useState2[0],
setStickerList = _React$useState2[1];
var _React$useState3 = _react["default"].useState(null),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
stickerSet = _React$useState4[0],
setStickerSet = _React$useState4[1];
var _React$useState5 = _react["default"].useState([]),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
activeStickerList = _React$useState6[0],
setActiveStickerList = _React$useState6[1];
var _React$useState7 = _react["default"].useState(),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
activeStickerSetName = _React$useState8[0],
setActiveStickerSetName = _React$useState8[1];
var _React$useState9 = _react["default"].useState(props.loadingText || (0, _Shared.localize)("LOADING")),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
decoratorMessage = _React$useState10[0],
setDecoratorMessage = _React$useState10[1];
var theme = new _Shared.CometChatTheme(props.theme || {});
var sendStickerMessage = function sendStickerMessage(stickerItem) {
props.onClick(stickerItem);
};
var onStickerSetClicked = function onStickerSetClicked(sectionItem) {
setActiveStickerList(stickerSet[sectionItem]);
setActiveStickerSetName(sectionItem);
};
var getStickerList = function getStickerList() {
var activeStickers = [];
if (activeStickerList && activeStickerList !== null && activeStickerList !== void 0 && activeStickerList.length) {
var _stickerList = (0, _toConsumableArray2["default"])(activeStickerList);
activeStickers = _stickerList.map(function (stickerItem, key) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
style: (0, _style.stickerItemStyle)(props),
onClick: sendStickerMessage.bind(_this, stickerItem),
className: "stickers__listitem"
}, /*#__PURE__*/_react["default"].createElement("img", {
src: stickerItem.stickerUrl,
alt: stickerItem.stickerName,
style: (0, _style.stickerImageStyle)()
}));
});
}
return activeStickers;
};
var getStickerCategory = function getStickerCategory() {
var sectionItems = null;
if (stickerSet && Object.keys(stickerSet).length) {
sectionItems = Object.keys(stickerSet).map(function (sectionItem, key) {
var stickerSetThumbnail = stickerSet[sectionItem][0][_Shared.ExtensionConstants.stickerUrl];
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
className: "stickers__category__item",
style: (0, _style.sectionListItemStyle)(),
onClick: onStickerSetClicked.bind(_this, sectionItem)
}, /*#__PURE__*/_react["default"].createElement("img", {
src: stickerSetThumbnail,
alt: sectionItem,
title: stickerSet[sectionItem][0]["stickerSetName"],
style: (0, _style.stickerCategoryImageStyle)()
}));
});
}
return sectionItems;
};
var getDecoratorMessage = function getDecoratorMessage() {
var messageContainer = null;
if ((activeStickerList === null || activeStickerList === void 0 ? void 0 : activeStickerList.length) === 0) {
messageContainer = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.stickerMsgStyle)(),
className: "stickers__decorator-message"
}, /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.stickerMsgTxtStyle)(props, theme),
className: "decorator_message"
}, decoratorMessage));
}
return messageContainer;
};
(0, _hooks.Hooks)(props, stickerList, stickerSet, activeStickerSetName, setStickerList, setStickerSet, setActiveStickerList, setActiveStickerSetName, setDecoratorMessage);
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.stickerWrapperStyle)(props, theme),
className: "stickers__keyboard"
}, getDecoratorMessage(), /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.stickerListStyle)(props),
className: "stickers__list"
}, getStickerList()), /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.stickerSectionListStyle)(props, theme),
className: "stickers__category"
}, getStickerCategory()));
};
// Specifies the default values for props:
exports.CometChatStickerKeyboard = CometChatStickerKeyboard;
CometChatStickerKeyboard.defaultProps = {
emptyText: (0, _Shared.localize)("NO_STICKERS_FOUND"),
errorText: (0, _Shared.localize)("SOMETHING_WRONG"),
loadingText: (0, _Shared.localize)("LOADING"),
style: {
width: "100%",
height: "auto",
border: "none",
background: "RGB(245, 245, 245)",
borderRadius: "8px",
categoryBackground: "rgb(255,255,255)",
emptyTextFont: "500 15px Inter,sans-serif",
emptyTextColor: "rgba(20,20,20, 0.58)",
errorTextFont: "500 15px Inter,sans-serif",
errorTextColor: "rgba(20,20,20, 0.58)",
loadingTextFont: "500 15px Inter,sans-serif",
loadingTextColor: "rgba(20,20,20, 0.58)"
},
onClick: function onClick() {}
};
CometChatStickerKeyboard.propTypes = {
emptyText: _propTypes["default"].string,
errorText: _propTypes["default"].string,
loadingText: _propTypes["default"].string,
style: _propTypes["default"].object,
onClick: _propTypes["default"].func
};