@zohoim/chat-components 1.1.4 → 1.1.5

package/lib/ActionIconWrapper/ActionIconWrapper.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ActionIconWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useActionIconWrapper2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/ActionIconWrapper/useActionIconWrapper"));
+
+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 _ActionIconWrapperModule = _interopRequireDefault(require("./css/ActionIconWrapper.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+function ActionIconWrapper(props) {
+  var renderIcon = props.renderIcon,
+      customStyle = props.customStyle,
+      propOnClick = props.onClick,
+      propOnMouseEnter = props.onMouseEnter,
+      id = props.id,
+      title = props.title,
+      isDisabled = props.isDisabled,
+      isActive = props.isActive;
+
+  var _useActionIconWrapper = (0, _useActionIconWrapper2["default"])({
+    onClick: propOnClick,
+    onMouseEnter: propOnMouseEnter,
+    id: id,
+    isDisabled: isDisabled,
+    isActive: isActive
+  }),
+      onClick = _useActionIconWrapper.onClick,
+      onMouseEnter = _useActionIconWrapper.onMouseEnter;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ActionIconWrapperModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isDisabled: isDisabled,
+    isActive: isActive
+  }, newStyle),
+      actionIconWrapperClass = _cssJSLogic.actionIconWrapperClass;
+  /* Render Icon */
+
+
+  var icon = (0, _renderHandler["default"])(renderIcon)({
+    id: id
+  });
+  return icon ? /*#__PURE__*/_react["default"].createElement("div", {
+    "aria-label": title,
+    className: actionIconWrapperClass,
+    "data-a11y-focus": "true",
+    "data-title": title,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    role: "menuitem",
+    tabIndex: 0
+  }, icon) : null;
+}
+
+ActionIconWrapper.propTypes = _propTypes["default"];
+ActionIconWrapper.defaultProps = _defaultProps["default"];
+ActionIconWrapper.displayName = 'ActionIconWrapper';

package/lib/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -0,0 +1,32 @@
+.varClass {
+  --actionIconWrapper-height: 26px;
+  --actionIconWrapper-width: 26px;
+  --actionIconWrapper-border: 1px;
+  --actionIconWrapper-border_radius: 4px;
+}
+
+.actionIconWrapper {
+  composes: varClass;
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  color: var(--imlib_chat_components_actionIconWrapper_color);
+  position: relative;
+  width: var(--actionIconWrapper-width);
+  height: var(--actionIconWrapper-height);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: var(--actionIconWrapper-border) solid transparent;
+  border-radius: var(--actionIconWrapper-border_radius);
+}
+
+.actionIconWrapper:hover, .actionIconWrapperActive{
+  background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
+  border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}

package/lib/ActionIconWrapper/css/cssJSLogic.js

@@ -0,0 +1,21 @@
+"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 isDisabled = props.isDisabled,
+      isActive = props.isActive;
+  var actionIconWrapperClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.actionIconWrapper, true), _defineProperty(_compileClassNames, style.disabled, isDisabled), _defineProperty(_compileClassNames, style.actionIconWrapperActive, isActive), _compileClassNames));
+  return {
+    actionIconWrapperClass: actionIconWrapperClass
+  };
+}

package/lib/ActionIconWrapper/index.js

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

package/lib/ActionIconWrapper/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 actionIconWrapperDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = actionIconWrapperDefaultProps;
+exports["default"] = _default;

package/lib/ActionIconWrapper/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 actionIconWrapperPropTypes = {
+  id: _propTypes["default"].string.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  onMouseEnter: _propTypes["default"].func,
+  renderIcon: _propTypes["default"].func.isRequired,
+  customStyle: _propTypes["default"].object,
+  isDisabled: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool
+};
+var _default = actionIconWrapperPropTypes;
+exports["default"] = _default;

package/lib/AttachmentBubble/AttachmentBubble.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AttachmentBubble;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _AttachmentBubbleModule = _interopRequireDefault(require("./css/AttachmentBubble.module.css"));
+
+var _AttachmentBubbleInfo = _interopRequireDefault(require("../AttachmentBubbleInfo/AttachmentBubbleInfo"));
+
+var _AttachmentIcon = _interopRequireDefault(require("../AttachmentIcon/AttachmentIcon"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 AttachmentBubble(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      attachmentDetails = props.attachmentDetails,
+      isFailed = props.isFailed,
+      isSending = props.isSending,
+      propOnClick = props.onClick,
+      attachmentBubbleTitle = props.attachmentBubbleTitle;
+  var attachmentBubbleInfoProps = customProps.attachmentBubbleInfoProps,
+      attachmentIconProps = customProps.attachmentIconProps;
+
+  var _useAttachmentBubble = (0, _useAttachmentBubble2["default"])({
+    attachmentDetails: attachmentDetails,
+    onClick: propOnClick
+  }),
+      fileSize = _useAttachmentBubble.formattedFileSize,
+      fileName = _useAttachmentBubble.fileName,
+      fileFormat = _useAttachmentBubble.fileFormat,
+      isDisabled = _useAttachmentBubble.isDisabled,
+      isValidAttachment = _useAttachmentBubble.isValidAttachment,
+      mediaType = _useAttachmentBubble.mediaType,
+      onClick = _useAttachmentBubble.onClick;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed,
+    isSending: isSending,
+    isDisabled: isDisabled
+  }, newStyle),
+      attachmentBubbleClass = _cssJSLogic.attachmentBubbleClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    className: attachmentBubbleClass,
+    "data-title": attachmentBubbleTitle,
+    isCover: false,
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.attachmentBubbleIcon
+  }, /*#__PURE__*/_react["default"].createElement(_AttachmentIcon["default"], _extends({
+    fileFormat: fileFormat,
+    isDisabled: isDisabled,
+    isValidAttachment: isValidAttachment,
+    mediaType: mediaType
+  }, attachmentIconProps))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.attachmentBubbleContent,
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_AttachmentBubbleInfo["default"], _extends({
+    fileName: fileName,
+    fileSize: fileSize
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  }))));
+}
+
+AttachmentBubble.propTypes = _propTypes["default"];
+AttachmentBubble.defaultProps = _defaultProps["default"];
+AttachmentBubble.displayName = 'AttachmentBubble';

package/lib/AttachmentBubble/css/AttachmentBubble.module.css

@@ -0,0 +1,56 @@
+.attachmentBubble {
+  width: 100% ;
+  background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+}
+
+.disabledAttachmentBubble {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.failedAttachmentBubble {
+  background-color: var(
+    --imlib_chat_components_attachmentBubble_bg_color_failed
+  );
+  border-color: var(
+    --imlib_chat_components_attachmentBubble_border_color_failed
+  );
+}
+
+.sendingdAttachmentBubble {
+  opacity: 0.1;
+  cursor: default;
+}
+
+.attachmentBubbleCursor {
+  cursor: pointer;
+}
+
+.attachmentBubbleIcon {
+  width: var(--zd_size60) ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[dir=ltr] .attachmentBubbleIcon {
+  border-right: 1px solid
+    var(--imlib_chat_components_attachmentBubble_border_color);
+}
+
+[dir=rtl] .attachmentBubbleIcon {
+  border-left: 1px solid
+    var(--imlib_chat_components_attachmentBubble_border_color);
+}
+
+.failedAttachmentBubble .attachmentBubbleIcon {
+  border-color: var(
+    --imlib_chat_components_attachmentBubble_border_color_failed
+  );
+}
+
+.attachmentBubbleIcon, .attachmentBubbleContent {
+  padding: var(--zd_size10) ;
+}

package/lib/AttachmentBubble/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,
+      isSending = props.isSending,
+      isDisabled = props.isDisabled;
+  var attachmentBubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.attachmentBubble, true), _defineProperty(_compileClassNames, style.disabledAttachmentBubble, isDisabled), _defineProperty(_compileClassNames, style.failedAttachmentBubble, isFailed), _defineProperty(_compileClassNames, style.attachmentBubbleCursor, !isSending && !isDisabled), _defineProperty(_compileClassNames, style.sendingdAttachmentBubble, isSending), _compileClassNames));
+  return {
+    attachmentBubbleClass: attachmentBubbleClass
+  };
+}

package/lib/AttachmentBubble/index.js

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

package/lib/AttachmentBubble/props/defaultProps.js

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

package/lib/AttachmentBubble/props/propTypes.js

@@ -0,0 +1,30 @@
+"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 attachmentBubblePropTypes = {
+  attachmentDetails: _propTypes["default"].shape({
+    name: _propTypes["default"].string.isRequired,
+    size: _propTypes["default"].string.isRequired,
+    type: _propTypes["default"].string.isRequired
+  }).isRequired,
+  customProps: _propTypes["default"].shape({
+    attachmentBubbleInfoProps: _propTypes["default"].object,
+    attachmentIconProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  isSending: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  attachmentBubbleTitle: _propTypes["default"].string
+};
+var _default = attachmentBubblePropTypes;
+exports["default"] = _default;

package/lib/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AttachmentBubbleInfo;
+
+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 _Layout = require("@zohodesk/components/es/Layout");
+
+var _AttachmentBubbleInfoModule = _interopRequireDefault(require("./css/AttachmentBubbleInfo.module.css"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+
+/** ** Methods *** */
+function AttachmentBubbleInfo(props) {
+  var customStyle = props.customStyle,
+      fileName = props.fileName,
+      fileSize = props.fileSize,
+      isFailed = props.isFailed;
+  /* External css customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentBubbleInfoModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      attachmentBubbleInfoClass = _cssJSLogic.attachmentBubbleInfoClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: attachmentBubbleInfoClass,
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.fileName,
+    "data-title": fileName
+  }, fileName), fileSize ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.fileSize
+  }, fileSize) : null);
+}
+
+AttachmentBubbleInfo.propTypes = _propTypes["default"];
+AttachmentBubbleInfo.defaultProps = _defaultProps["default"];
+AttachmentBubbleInfo.displayName = 'AttachmentBubbleInfo';

package/lib/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -0,0 +1,39 @@
+.varClass {
+  --attachmentBubbleInfo-fileName_font_size: 15px;
+  --attachmentBubbleInfo-fileName_font_family: var(--zd_semibold);
+  --attachmentBubbleInfo-fileSize_font_size: 13px;
+}
+
+.fileName {
+  composes: varClass;
+  font-size: var(--attachmentBubbleInfo-fileName_font_size);
+  font-family: var(--attachmentBubbleInfo-fileName_font_family);
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color);
+}
+
+.failedAttachmentBubbleInfo .fileName{
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed);
+}
+
+.fileSize {
+  composes: varClass;
+  font-size: var(--attachmentBubbleInfo-fileSize_font_size);
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
+  margin-top: var(--zd_size5) ;
+}
+
+.failedAttachmentBubbleInfo .fileSize{
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed);
+}
+
+.fileName,
+.fileSize {
+  composes: dotted from "../../css/common.module.css";
+}
+
+.attachmentBubbleInfo {
+  width: 100% ;
+  line-height: normal;
+  /* Use this class name for css customization */
+}
+

package/lib/AttachmentBubbleInfo/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+"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;
+  var attachmentBubbleInfoClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.attachmentBubbleInfo, true), _defineProperty(_compileClassNames, style.failedAttachmentBubbleInfo, isFailed), _compileClassNames));
+  return {
+    attachmentBubbleInfoClass: attachmentBubbleInfoClass
+  };
+}

package/lib/AttachmentBubbleInfo/index.js

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

package/lib/AttachmentBubbleInfo/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 attachmentBubbleInfoDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = attachmentBubbleInfoDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentBubbleInfo/props/propTypes.js

@@ -0,0 +1,20 @@
+"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 attachmentBubbleInfoPropTypes = {
+  fileName: _propTypes["default"].string.isRequired,
+  fileSize: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool
+};
+var _default = attachmentBubbleInfoPropTypes;
+exports["default"] = _default;