@zohoim/chat-components 1.1.4-beta.1 → 1.1.4-beta.2

package/lib/MessageActionsWrapper/MessageActionsWrapper.js

@@ -0,0 +1,91 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageActionsWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MessageActionsMore = _interopRequireDefault(require("../MessageActionsMore/MessageActionsMore"));
+
+var _useMessageActionsWrapper = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/MessageActionsWrapper/useMessageActionsWrapper"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _MessageActionsWrapperModule = _interopRequireDefault(require("./css/MessageActionsWrapper.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function MessageActionsWrapper(props) {
+  var actions = props.actions,
+      renderMoreIcon = props.renderMoreIcon,
+      defaultShowCount = props.defaultShowCount,
+      customStyle = props.customStyle,
+      customProps = props.customProps,
+      setRetainMessageActions = props.setRetainMessageActions;
+  var _customProps$messageA = customProps.messageActionsMoreProps,
+      messageActionsMoreProps = _customProps$messageA === void 0 ? _emptyConstants.dummyObject : _customProps$messageA;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageActionsWrapperModule["default"], customStyle);
+
+  var _useMessageActionsWra = (0, _useMessageActionsWrapper["default"])(actions, defaultShowCount),
+      isShowMoreIcon = _useMessageActionsWra.isShowMore,
+      _useMessageActionsWra2 = _useMessageActionsWra.actions,
+      defaultActions = _useMessageActionsWra2 === void 0 ? _emptyConstants.dummyArray : _useMessageActionsWra2,
+      _useMessageActionsWra3 = _useMessageActionsWra.moreActions,
+      moreActions = _useMessageActionsWra3 === void 0 ? _emptyConstants.dummyArray : _useMessageActionsWra3;
+
+  var renderDefaultActions = (0, _react.useCallback)(function () {
+    return defaultActions.map(function (action) {
+      var id = action.id,
+          renderFunction = action.renderFunction;
+      return (0, _renderHandler["default"])(renderFunction)({
+        id: id,
+        isShowInMore: false,
+        setRetainMessageActions: setRetainMessageActions,
+        action: action
+      }); // id, isRenderInMorePopup
+    });
+  }, [defaultActions, setRetainMessageActions]);
+  var renderMoreActions = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_MessageActionsMore["default"], _extends({
+      actions: moreActions,
+      renderMoreIcon: renderMoreIcon,
+      setRetainMessageActions: setRetainMessageActions
+    }, messageActionsMoreProps));
+  }, [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
+  var renderRow = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "row",
+      className: newStyle.row,
+      isCover: false
+    }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null);
+  }, [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.messageActionsWrapper
+  }, renderRow(defaultActions, isShowMoreIcon));
+}
+
+MessageActionsWrapper.defaultProps = _defaultProps["default"];
+MessageActionsWrapper.propTypes = _propTypes["default"];
+MessageActionsWrapper.displayName = 'MessageActionsWrapper';

package/lib/MessageActionsWrapper/css/MessageActionsWrapper.module.css

@@ -0,0 +1,7 @@
+.messageActionsWrapper {
+  /* Use this class for message actions customization */
+}
+
+.row{
+  gap: var(--zd_size2) ;
+}

package/lib/MessageActionsWrapper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageActionsWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _MessageActionsWrapper["default"];
+  }
+});
+
+var _MessageActionsWrapper = _interopRequireDefault(require("./MessageActionsWrapper"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageActionsWrapper/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+/** ** Constants *** */
+var messageActionsWrapperDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  defaultShowCount: _messageActionConstants.actionsDefaultShowCount
+};
+var _default = messageActionsWrapperDefaultProps;
+exports["default"] = _default;

package/lib/MessageActionsWrapper/props/propTypes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var messageActionsWrapperPropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  customProps: _propTypes["default"].shape({
+    messageActionsMoreProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  defaultShowCount: _propTypes["default"].number,
+  renderMoreIcon: _propTypes["default"].func,
+  setRetainMessageActions: _propTypes["default"].func
+};
+var _default = messageActionsWrapperPropTypes;
+exports["default"] = _default;

package/lib/MessageAvatar/MessageAvatar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageAvatar;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
+
+var _MessageAvatarModule = _interopRequireDefault(require("./css/MessageAvatar.module.css"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** CSS *** */
+
+/** ** Hooks *** */
+
+/** ** Methods *** */
+
+/** ** Constants *** */
+function MessageAvatar(props) {
+  var src = props.src,
+      alternateSrc = props.alternateSrc,
+      title = props.title,
+      size = props.size,
+      name = props.name,
+      customStyle = props.customStyle,
+      iconTitle = props.iconTitle,
+      renderIcon = props.renderIcon;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageAvatarModule["default"], customStyle);
+  var icon = (0, _renderHandler["default"])(renderIcon)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.msgAvatar
+  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    alternateSrc: alternateSrc,
+    customClass: newStyle.avatar,
+    name: name,
+    size: size,
+    src: src,
+    title: title
+  }), icon ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.icon,
+    "data-title": iconTitle
+  }, icon) : null);
+}
+
+MessageAvatar.defaultProps = _defaultProps["default"];
+MessageAvatar.propTypes = _propTypes["default"];

package/lib/MessageAvatar/css/MessageAvatar.module.css

@@ -0,0 +1,23 @@
+.msgAvatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.icon {
+  position: absolute;
+  bottom: calc( var(--zd_size6) * -1 ) ;
+}
+
+[dir=ltr] .icon {
+  right: calc( var(--zd_size7) * -1 ) ;
+}
+
+[dir=rtl] .icon {
+  left: calc( var(--zd_size7) * -1 ) ;
+}
+
+.avatar {
+  /* Use this class name for external customization  */
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}

package/lib/MessageAvatar/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _MessageAvatar["default"];
+  }
+});
+
+var _MessageAvatar = _interopRequireDefault(require("./MessageAvatar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageAvatar/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageAvatarDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  size: 'medium'
+};
+var _default = messageAvatarDefaultProps;
+exports["default"] = _default;

package/lib/MessageAvatar/props/propTypes.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var messageAvatarPropTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alternateSrc: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object,
+  iconTitle: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  renderIcon: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  title: _propTypes["default"].string
+};
+var _default = messageAvatarPropTypes;
+exports["default"] = _default;

package/lib/MessageBox/MessageBox.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageBox;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MessageBoxModule = _interopRequireDefault(require("./css/MessageBox.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+function MessageBox(props) {
+  var renderMessageContent = props.renderMessage,
+      renderMessageFooter = props.renderMessageFooter,
+      renderMessageHeader = props.renderMessageHeader,
+      customStyle = props.customStyle,
+      renderMessageStatus = props.renderMessageStatus,
+      isFailed = props.isFailed,
+      isIncoming = props.isIncoming,
+      isOutgoing = props.isOutgoing;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageBoxModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed,
+    isIncoming: isIncoming,
+    isOutgoing: isOutgoing
+  }, newStyle),
+      messageBoxClass = _cssJSLogic.messageBoxClass;
+  /* Render Childrens */
+
+
+  var messageHeader = (0, _renderHandler["default"])(renderMessageHeader)();
+  var messageConent = (0, _renderHandler["default"])(renderMessageContent)();
+  var messageFooter = (0, _renderHandler["default"])(renderMessageFooter)();
+  var messageStatus = (0, _renderHandler["default"])(renderMessageStatus)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: messageBoxClass
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageHeaderWrapper
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageContentWrapper
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageFooterWrapper
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageStatusWrapper
+  }, messageStatus) : null);
+}
+
+MessageBox.propTypes = _propTypes["default"];
+MessageBox.defaultProps = _defaultProps["default"];
+MessageBox.displayName = 'MessageBox';

package/lib/MessageBox/css/MessageBox.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --messageBox-content_padding: 14px;
+  --messageBox-content_size: 14px;
+  --messageBox-border_radius: 9px;
+  --messageBox-message_status_gap: 12px;
+  --messageBox-message_header_gap: 1px;
+  --messageBox-message_footer_gap: 1px;
+}
+
+.messageBoxContainer {
+  composes: varClass;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: flex-end;
+  color: var(--imlib_chat_components_messageBox_text_color);
+  word-wrap: break-word;
+  font-size: var(--messageBox-content_size);
+  box-sizing: border-box;
+  background-color: var(--imlib_chat_components_messageBox_bg_color);
+  padding: var(--messageBox-content_padding);
+  border-radius: var(--messageBox-border_radius);
+}
+
+.messageContentWrapper {
+  /* Use this class for message content customization */
+  line-height: 150%;
+}
+
+.messageHeaderWrapper {
+  margin-bottom: var(--messageBox-message_header_gap);
+}
+
+.messageFooterWrapper {
+  margin-top: var(--messageBox-message_footer_gap);
+}
+
+[dir=ltr] .messageStatusWrapper {
+  margin-left: var(--messageBox-message_status_gap);
+}
+
+[dir=rtl] .messageStatusWrapper {
+  margin-right: var(--messageBox-message_status_gap);
+}
+
+.failedMessageBox {
+  color: var(--imlib_chat_components_messageBox_failed_text_color);
+  background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
+}
+
+.incomingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_incoming_bg_color);
+}
+
+.outgoingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_outgoing_bg_color);
+}

package/lib/MessageBox/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var _compileClassNames;
+
+  var isFailed = props.isFailed,
+      isIncoming = props.isIncoming,
+      isOutgoing = props.isOutgoing;
+  var messageBoxClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.messageBoxContainer, true), _defineProperty(_compileClassNames, style.failedMessageBox, isFailed), _defineProperty(_compileClassNames, style.incomingMessageBox, isIncoming && !isFailed), _defineProperty(_compileClassNames, style.outgoingMessageBox, isOutgoing && !isFailed), _compileClassNames));
+  return {
+    messageBoxClass: messageBoxClass
+  };
+}

package/lib/MessageBox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageBox", {
+  enumerable: true,
+  get: function get() {
+    return _MessageBox["default"];
+  }
+});
+
+var _MessageBox = _interopRequireDefault(require("./MessageBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageBox/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var _default = {
+  customStyle: _emptyConstants.dummyObject,
+  isOutgoing: true
+};
+exports["default"] = _default;

package/lib/MessageBox/props/propTypes.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var messageBoxPropTypes = {
+  isIncoming: _propTypes["default"].bool.isRequired,
+  isOutgoing: _propTypes["default"].bool.isRequired,
+  renderMessage: _propTypes["default"].func.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  renderMessageFooter: _propTypes["default"].func,
+  renderMessageHeader: _propTypes["default"].func,
+  renderMessageStatus: _propTypes["default"].func
+};
+var _default = messageBoxPropTypes;
+exports["default"] = _default;