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

package/lib/AttachmentPreviewHeader/index.js

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

package/lib/AttachmentPreviewHeader/props/defaultProps.js

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

package/lib/AttachmentPreviewHeader/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 attachmentPreviewHeaderPropTypes = {
+  customStyle: _propTypes["default"].object,
+  fileName: _propTypes["default"].string.isRequired,
+  fileSize: _propTypes["default"].string.isRequired,
+  submitText: _propTypes["default"].string.isRequired,
+  cancelText: _propTypes["default"].string.isRequired,
+  onSubmit: _propTypes["default"].func,
+  onCancel: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    cancelButtonProps: _propTypes["default"].object,
+    submitButtonProps: _propTypes["default"].object
+  })
+};
+var _default = attachmentPreviewHeaderPropTypes;
+exports["default"] = _default;

package/lib/Audio/Audio.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Audio;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useMedia2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Media/useMedia"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _AudioModule = _interopRequireDefault(require("./css/Audio.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function Audio(props) {
+  var customStyle = props.customStyle,
+      fileType = props.fileType,
+      fileURL = props.fileURL;
+
+  var _useMedia = (0, _useMedia2["default"])({
+    src: fileURL
+  }),
+      mediaElementRef = _useMedia.mediaElementRef;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AudioModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("audio", {
+    ref: mediaElementRef,
+    className: newStyle.audio,
+    controls: true,
+    preload: "metadata"
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    "data-src": fileURL,
+    type: fileType
+  }));
+}
+
+Audio.propTypes = _propTypes["default"];
+Audio.defaultProps = _defaultProps["default"];
+Audio.displayName = 'Audio';

package/lib/Audio/css/Audio.module.css

@@ -0,0 +1,7 @@
+.audio {
+  width: 100% ;
+}
+
+.audio::-webkit-media-controls-panel {
+  background-color: var(--dot_white);
+}

package/lib/Audio/index.js

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

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

package/lib/Audio/props/propTypes.js

@@ -0,0 +1,19 @@
+"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 audioPropTypes = {
+  fileType: _propTypes["default"].string.isRequired,
+  fileURL: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object
+};
+var _default = audioPropTypes;
+exports["default"] = _default;

package/lib/AudioBubble/AudioBubble.js

@@ -0,0 +1,68 @@
+"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"] = AudioBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _AudioBubbleModule = _interopRequireDefault(require("./css/AudioBubble.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MediaBubbleWrapper = _interopRequireDefault(require("../MediaBubbleWrapper/MediaBubbleWrapper"));
+
+var _Audio = _interopRequireDefault(require("../Audio/Audio"));
+
+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 AudioBubble(props) {
+  var customStyle = props.customStyle,
+      audioDetails = props.audioDetails,
+      customProps = props.customProps,
+      isFailed = props.isFailed;
+  var _customProps$audioPro = customProps.audioProps,
+      audioProps = _customProps$audioPro === void 0 ? _emptyConstants.dummyObject : _customProps$audioPro,
+      _customProps$mediaBub = customProps.mediaBubbleWrapperProps,
+      mediaBubbleWrapperProps = _customProps$mediaBub === void 0 ? _emptyConstants.dummyObject : _customProps$mediaBub;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_AudioBubbleModule["default"], customStyle);
+  var renderMedia = (0, _react.useCallback)(function (_ref) {
+    var fileURL = _ref.fileURL,
+        fileType = _ref.fileType;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: newStyle.audioBubble
+    }, /*#__PURE__*/_react["default"].createElement(_Audio["default"], _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, audioProps)));
+  }, [audioProps, newStyle.audioBubble]);
+  return /*#__PURE__*/_react["default"].createElement(_MediaBubbleWrapper["default"], _extends({
+    mediaDetails: audioDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
+}
+
+AudioBubble.propTypes = _propTypes["default"];
+AudioBubble.defaultProps = _defaultProps["default"];
+AudioBubble.displayName = 'AudioBubble';

package/lib/AudioBubble/css/AudioBubble.module.css

@@ -0,0 +1,4 @@
+.audioBubble{
+    width: var(--zd_size360) ;
+    max-width: 100% ;
+}

package/lib/AudioBubble/index.js

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

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

package/lib/AudioBubble/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 audioBubblePropTypes = {
+  audioDetails: _propTypes["default"].shape({
+    name: _propTypes["default"].string.isRequired,
+    size: _propTypes["default"].string.isRequired,
+    type: _propTypes["default"].string.isRequired,
+    url: _propTypes["default"].string.isRequired
+  }).isRequired,
+  customProps: _propTypes["default"].shape({
+    audioProps: _propTypes["default"].object,
+    mediaBubbleWrapperProps: _propTypes["default"].object
+  }),
+  isFailed: _propTypes["default"].bool
+};
+var _default = audioBubblePropTypes;
+exports["default"] = _default;

package/lib/Emoji/Emoji.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Emoji;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useEmoji2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Emoji/useEmoji"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _EmojiModule = _interopRequireDefault(require("./css/Emoji.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+function Emoji(props) {
+  var customStyle = props.customStyle,
+      id = props.id,
+      emoji = props.emoji,
+      emojiName = props.emojiName,
+      isActive = props.isActive,
+      isHighlight = props.isHighlight,
+      propOnSelect = props.onSelect,
+      autoHover = props.autoHover,
+      propEleRef = props.eleRef,
+      needTitle = props.needTitle,
+      customTitle = props.customTitle;
+  /* External customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_EmojiModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isActive: isActive,
+    isHighlight: isHighlight,
+    autoHover: autoHover
+  }, newStyle),
+      emojiClass = _cssJSLogic.emojiClass;
+
+  var _useEmoji = (0, _useEmoji2["default"])({
+    onSelect: propOnSelect,
+    emoji: emoji,
+    emojiName: emojiName,
+    eleRef: propEleRef,
+    id: id,
+    needTitle: needTitle,
+    customTitle: customTitle
+  }),
+      onSelect = _useEmoji.onSelect,
+      unicode = _useEmoji.unicode,
+      title = _useEmoji.title,
+      eleRef = _useEmoji.eleRef;
+
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    ref: eleRef,
+    "aria-label": title,
+    className: emojiClass,
+    "data-a11y-focus": "true",
+    onClick: onSelect,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.emojiContent,
+    "data-smiley": emojiName,
+    "data-title": title,
+    "data-unicode": emoji
+  }, unicode));
+}
+
+Emoji.propTypes = _propTypes["default"];
+Emoji.defaultProps = _defaultProps["default"];
+Emoji.displayName = 'Emoji';

package/lib/Emoji/css/Emoji.module.css

@@ -0,0 +1,48 @@
+.varClass {
+  --emoji-height: 32px;
+  --emoji-width: 32px;
+  --emoji-font_size: 20px;
+  --emoji-margin: 5px;
+}
+
+.emoji {
+  composes: varClass;
+  width: var(--emoji-height);
+  height: var(--emoji-width);
+  overflow: hidden;
+  font-size: 0 ;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 var(--emoji-margin);
+  text-align: center;
+}
+
+.emojiContent {
+  font-size: var(--emoji-font_size);
+  display: block;
+}
+
+.emojiHighlight .emojiContent,
+.emojiHover:hover .emojiContent {
+  transition: transform 60ms ease-out 60ms;
+}
+
+.emojiHighlight .emojiContent, .emojiHover:hover .emojiContent {
+  transform: scale(1.2);
+}
+
+.emojiHighlight {
+  background-color: var(--imlib_chat_components_emoji_hover_bg_color);
+}
+
+/* .emojiHover:hover */
+
+.emojiActive {
+  transform: scale(1.2);
+  
+}
+
+
+/* background-color: var(--imlib_chat_components_emoji_active_bg_color); */

package/lib/Emoji/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 isActive = props.isActive,
+      isHighlight = props.isHighlight,
+      autoHover = props.autoHover;
+  var emojiClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.emoji, true), _defineProperty(_compileClassNames, style.emojiHover, autoHover), _defineProperty(_compileClassNames, style.emojiHighlight, isHighlight), _defineProperty(_compileClassNames, style.emojiActive, isActive), _compileClassNames));
+  return {
+    emojiClass: emojiClass
+  };
+}

package/lib/Emoji/index.js

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

package/lib/Emoji/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 emojiDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  autoHover: true,
+  needTitle: true
+};
+var _default = emojiDefaultProps;
+exports["default"] = _default;

package/lib/Emoji/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 emojiPropTypes = {
+  customStyle: _propTypes["default"].object,
+  emoji: _propTypes["default"].string.isRequired,
+  emojiName: _propTypes["default"].string.isRequired,
+  isActive: _propTypes["default"].bool,
+  isHighlight: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  autoHover: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  needTitle: _propTypes["default"].bool,
+  customTitle: _propTypes["default"].string
+};
+var _default = emojiPropTypes;
+exports["default"] = _default;