@zohoim/chat-components 1.1.2-beta.7 → 1.1.3-beta.1

package/lib/AttachmentHandler/AttachmentHandler.js

@@ -0,0 +1,101 @@
+"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"] = AttachmentHandler;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IconButton = _interopRequireDefault(require("@zohodesk/dot/es/IconButton/IconButton"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentHandler2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _AttachmentHandlerModule = _interopRequireDefault(require("./css/AttachmentHandler.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 AttachmentHandler(props) {
+  var customStyle = props.customStyle,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconTitle = props.iconTitle,
+      renderCustomIcon = props.renderCustomIcon,
+      propGetRef = props.getRef,
+      supportedFileTypes = props.supportedFileTypes,
+      isMultiAttachment = props.isMultiAttachment,
+      propOnAttach = props.onAttach,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps;
+  var _customProps$inputPro = customProps.inputProps,
+      inputProps = _customProps$inputPro === void 0 ? _emptyConstants.dummyObject : _customProps$inputPro;
+
+  var _useAttachmentHandler = (0, _useAttachmentHandler2["default"])({
+    onAttach: propOnAttach,
+    getRef: propGetRef
+  }),
+      onAttach = _useAttachmentHandler.onAttach,
+      onAttachmentClick = _useAttachmentHandler.onAttachmentClick,
+      getRef = _useAttachmentHandler.getRef;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentHandlerModule["default"], customStyle);
+  var inputEl = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("input", _extends({
+      ref: getRef,
+      accept: supportedFileTypes,
+      hidden: true,
+      multiple: isMultiAttachment,
+      onChange: onAttach,
+      size: "1",
+      type: "file"
+    }, inputProps));
+  }, [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
+  var customIcon = (0, _react.useMemo)(function () {
+    /* Render Custom Icon */
+    var icon = (0, _renderHandler["default"])(renderCustomIcon)({
+      onClick: onAttachmentClick
+    });
+
+    if (icon) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, icon, inputEl);
+    }
+
+    return null;
+  }, [renderCustomIcon, onAttachmentClick, inputEl]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "column"
+  }, customIcon || /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    className: newStyle.iconButton,
+    iconClass: newStyle.icon,
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onAttachmentClick,
+    title: iconTitle
+  }, inputEl));
+}
+
+AttachmentHandler.propTypes = _propTypes["default"];
+AttachmentHandler.defaultProps = _defaultProps["default"];
+AttachmentHandler.displayName = 'AttachmentHandler';

package/lib/AttachmentHandler/css/AttachmentHandler.module.css

@@ -0,0 +1,27 @@
+/** ** Styles *** */
+
+.attachmentHandler {
+  /** ** Use this class for css customisation *** */
+}
+
+[dir=ltr] .iconButton {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .iconButton {
+  margin-left: var(--zd_size5) ;
+}
+
+.icon {
+  color: initial;
+}
+
+
+.icon :global .path1:before {
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
+  opacity: 1;
+}
+
+.icon :global .path2:before {
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
+}

package/lib/AttachmentHandler/index.js

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

package/lib/AttachmentHandler/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");
+
+/** ** Constants *** */
+var attachmentHandlerDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+var _default = attachmentHandlerDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentHandler/props/propTypes.js

@@ -0,0 +1,28 @@
+"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 attachmentHandlerPropTypes = {
+  customStyle: _propTypes["default"].object,
+  iconName: _propTypes["default"].string.isRequired,
+  iconSize: _propTypes["default"].number,
+  iconTitle: _propTypes["default"].string,
+  renderCustomIcon: _propTypes["default"].func,
+  getRef: _propTypes["default"].func,
+  supportedFileTypes: _propTypes["default"].string,
+  isMultiAttachment: _propTypes["default"].bool,
+  onAttach: _propTypes["default"].func.isRequired,
+  customProps: _propTypes["default"].shape({
+    inputProps: _propTypes["default"].object
+  })
+};
+var _default = attachmentHandlerPropTypes;
+exports["default"] = _default;

package/lib/AttachmentIcon/AttachmentIcon.js

@@ -0,0 +1,84 @@
+"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"] = AttachmentIcon;
+
+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 _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _getAttachmentIconComponent = _interopRequireDefault(require("./utils/getAttachmentIconComponent"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _AttachmentIconModule = _interopRequireDefault(require("./css/AttachmentIcon.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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+function AttachmentIcon(props) {
+  var customStyle = props.customStyle,
+      fileFormat = props.fileFormat,
+      mediaType = props.mediaType,
+      isDisabled = props.isDisabled,
+      renderCustomIcon = props.renderCustomIcon,
+      isValidAttachment = props.isValidAttachment;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentIconModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isDisabled: isDisabled
+  }, newStyle),
+      iconStyleClass = _cssJSLogic.iconStyleClass;
+
+  var iconCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      base: iconStyleClass
+    };
+  }, [iconStyleClass]);
+  /* Custom Icon Renderer */
+
+  if (renderCustomIcon) {
+    var fileIcon = (0, _renderHandler["default"])(renderCustomIcon)();
+    return fileIcon;
+  }
+
+  var _getAttachmentIconCom = (0, _getAttachmentIconComponent["default"])({
+    fileFormat: fileFormat,
+    mediaType: mediaType,
+    isValidAttachment: isValidAttachment
+  }),
+      IconComponent = _getAttachmentIconCom.IconComponent;
+
+  return IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, {
+    customStyle: iconCustomStyle
+  }) : null;
+}
+
+AttachmentIcon.propTypes = _propTypes["default"];
+AttachmentIcon.defaultProps = _defaultProps["default"];
+AttachmentIcon.displayName = 'AttachmentIcon';

package/lib/AttachmentIcon/css/AttachmentIcon.module.css

@@ -0,0 +1,8 @@
+.icon {
+  width: var(--zd_size20)  !important;
+  height: var(--zd_size20)  !important;
+}
+
+.disabledIcon {
+  cursor: not-allowed !important;
+}

package/lib/AttachmentIcon/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 isDisabled = props.isDisabled;
+  var iconStyleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.icon, true), _defineProperty(_compileClassNames, style.disabledIcon, isDisabled), _compileClassNames));
+  return {
+    iconStyleClass: iconStyleClass
+  };
+}

package/lib/AttachmentIcon/index.js

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

package/lib/AttachmentIcon/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 attachmentIconDefaultProps = {
+  isDisabled: false,
+  isValidAttachment: true,
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = attachmentIconDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentIcon/props/propTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _attachmentFileTypes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/attachmentFileTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var AUDIO = _attachmentFileTypes["default"].AUDIO,
+    VIDEO = _attachmentFileTypes["default"].VIDEO,
+    IMAGE = _attachmentFileTypes["default"].IMAGE; // Docs - Playground Component Render Issue Fix
+
+var fileFormats = JSON.parse(JSON.stringify(Object.values(_attachmentFileTypes["default"])));
+var attachmentIconPropTypes = {
+  fileFormat: _propTypes["default"].oneOf(fileFormats).isRequired,
+  mediaType: _propTypes["default"].oneOf([AUDIO, VIDEO, IMAGE]).isRequired,
+  isDisabled: _propTypes["default"].bool,
+  customStyle: _propTypes["default"].object,
+  renderCustomIcon: _propTypes["default"].func,
+  isValidAttachment: _propTypes["default"].bool
+};
+var _default = attachmentIconPropTypes;
+exports["default"] = _default;

package/lib/AttachmentIcon/utils/getAttachmentIconComponent.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getAttachmentIconComponent;
+
+var _Audio = _interopRequireDefault(require("../../icons/iconSrc/attachments/Audio"));
+
+var _Code = _interopRequireDefault(require("../../icons/iconSrc/attachments/Code"));
+
+var _Image = _interopRequireDefault(require("../../icons/iconSrc/attachments/Image"));
+
+var _Pdf = _interopRequireDefault(require("../../icons/iconSrc/attachments/Pdf"));
+
+var _Text = _interopRequireDefault(require("../../icons/iconSrc/attachments/Text"));
+
+var _Unknown = _interopRequireDefault(require("../../icons/iconSrc/attachments/Unknown"));
+
+var _Video = _interopRequireDefault(require("../../icons/iconSrc/attachments/Video"));
+
+var _Zip = _interopRequireDefault(require("../../icons/iconSrc/attachments/Zip"));
+
+var _AlertTriangle = _interopRequireDefault(require("../../icons/iconSrc/common/AlertTriangle"));
+
+var _Xls = _interopRequireDefault(require("../../icons/iconSrc/attachments/Xls"));
+
+var _Ppt = _interopRequireDefault(require("../../icons/iconSrc/attachments/Ppt"));
+
+var _attachmentFileTypes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/attachmentFileTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var SVG = _attachmentFileTypes["default"].SVG,
+    IMAGE = _attachmentFileTypes["default"].IMAGE,
+    PDF = _attachmentFileTypes["default"].PDF,
+    AUDIO = _attachmentFileTypes["default"].AUDIO,
+    VIDEO = _attachmentFileTypes["default"].VIDEO,
+    MP3 = _attachmentFileTypes["default"].MP3,
+    MPEG = _attachmentFileTypes["default"].MPEG,
+    VORBIS = _attachmentFileTypes["default"].VORBIS,
+    OGG = _attachmentFileTypes["default"].OGG,
+    M4A = _attachmentFileTypes["default"].M4A,
+    MP4 = _attachmentFileTypes["default"].MP4,
+    HTML = _attachmentFileTypes["default"].HTML,
+    PSD = _attachmentFileTypes["default"].PSD,
+    CSS = _attachmentFileTypes["default"].CSS,
+    TEXT = _attachmentFileTypes["default"].TEXT,
+    PLAIN = _attachmentFileTypes["default"].PLAIN,
+    XLS = _attachmentFileTypes["default"].XLS,
+    PPT = _attachmentFileTypes["default"].PPT,
+    ZIP = _attachmentFileTypes["default"].ZIP,
+    UNDEFINED = _attachmentFileTypes["default"].UNDEFINED,
+    INVALID = _attachmentFileTypes["default"].INVALID;
+
+function getAttachmentIconComponent(_ref) {
+  var _iconMapping;
+
+  var fileFormat = _ref.fileFormat,
+      mediaType = _ref.mediaType,
+      isValidAttachment = _ref.isValidAttachment;
+  var iconMapping = (_iconMapping = {}, _defineProperty(_iconMapping, SVG, _Code["default"]), _defineProperty(_iconMapping, IMAGE, _Image["default"]), _defineProperty(_iconMapping, PDF, _Pdf["default"]), _defineProperty(_iconMapping, AUDIO, _Audio["default"]), _defineProperty(_iconMapping, VIDEO, _Video["default"]), _defineProperty(_iconMapping, MP3, _Audio["default"]), _defineProperty(_iconMapping, MPEG, _Audio["default"]), _defineProperty(_iconMapping, VORBIS, _Audio["default"]), _defineProperty(_iconMapping, OGG, _Audio["default"]), _defineProperty(_iconMapping, M4A, _Audio["default"]), _defineProperty(_iconMapping, MP4, _Video["default"]), _defineProperty(_iconMapping, HTML, _Code["default"]), _defineProperty(_iconMapping, PSD, _Unknown["default"]), _defineProperty(_iconMapping, CSS, _Code["default"]), _defineProperty(_iconMapping, TEXT, _Text["default"]), _defineProperty(_iconMapping, PLAIN, _Text["default"]), _defineProperty(_iconMapping, XLS, _Xls["default"]), _defineProperty(_iconMapping, PPT, _Ppt["default"]), _defineProperty(_iconMapping, ZIP, _Zip["default"]), _defineProperty(_iconMapping, UNDEFINED, _Unknown["default"]), _defineProperty(_iconMapping, INVALID, _AlertTriangle["default"]), _iconMapping);
+  var IconComponent;
+
+  if (!isValidAttachment) {
+    IconComponent = iconMapping[INVALID];
+  } else if (_attachmentFileTypes["default"][mediaType]) {
+    IconComponent = iconMapping[_attachmentFileTypes["default"][mediaType]];
+  } else {
+    IconComponent = iconMapping[fileFormat] || iconMapping[UNDEFINED];
+  }
+
+  return {
+    IconComponent: IconComponent
+  };
+}

package/lib/AttachmentPreview/AttachmentPreview.js

@@ -0,0 +1,144 @@
+"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"] = AttachmentPreview;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _AttachmentPreviewHeader = _interopRequireDefault(require("../AttachmentPreviewHeader/AttachmentPreviewHeader"));
+
+var _AttachmentPreviewBody = _interopRequireDefault(require("../AttachmentPreviewBody/AttachmentPreviewBody"));
+
+var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentPreview3 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview"));
+
+var _useAttachmentPreviewEditor = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageConstants = require("@zohoim/chat-components-utils/es/constants/messageConstants");
+
+var _AttachmentPreviewModule = _interopRequireDefault(require("./css/AttachmentPreview.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); }
+
+var IMAGE = _messageConstants.mediaTypes.IMAGE;
+
+function AttachmentPreview(props) {
+  var customStyle = props.customStyle,
+      isDescriptionNeeded = props.isDescriptionNeeded,
+      files = props.files,
+      customProps = props.customProps,
+      onSubmit = props.onSubmit,
+      onCancel = props.onCancel,
+      texts = props.texts,
+      descriptionDetails = props.descriptionDetails,
+      propOnDescriptionChange = props.onDescriptionChange,
+      needCloseOnEscape = props.needCloseOnEscape,
+      needUploadOnEnter = props.needUploadOnEnter,
+      needAutoZindex = props.needAutoZindex;
+
+  var _ref = customProps || _emptyConstants.dummyObject,
+      _ref$editorProps = _ref.editorProps,
+      editorProps = _ref$editorProps === void 0 ? _emptyConstants.dummyObject : _ref$editorProps,
+      _ref$attachmentPrevie = _ref.attachmentPreviewHeaderProps,
+      attachmentPreviewHeaderProps = _ref$attachmentPrevie === void 0 ? _emptyConstants.dummyObject : _ref$attachmentPrevie,
+      _ref$attachmentPrevie2 = _ref.attachmentPreviewBodyProps,
+      attachmentPreviewBodyProps = _ref$attachmentPrevie2 === void 0 ? _emptyConstants.dummyObject : _ref$attachmentPrevie2;
+
+  var _ref2 = texts || _emptyConstants.dummyObject,
+      _ref2$submitText = _ref2.submitText,
+      submitText = _ref2$submitText === void 0 ? 'Submit' : _ref2$submitText,
+      _ref2$cancelText = _ref2.cancelText,
+      cancelText = _ref2$cancelText === void 0 ? 'Cancel' : _ref2$cancelText,
+      _ref2$placeHolder = _ref2.placeHolder,
+      placeHolder = _ref2$placeHolder === void 0 ? 'Add a description for the image' : _ref2$placeHolder;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentPreviewModule["default"], customStyle);
+  var getNextIndex = (0, _ZindexProvider.useZIndex)();
+
+  var _useAttachmentPreview = (0, _useAttachmentPreview3["default"])({
+    files: files,
+    onDescriptionChange: propOnDescriptionChange,
+    descriptionDetails: descriptionDetails,
+    needCloseOnEscape: needCloseOnEscape,
+    onCancel: onCancel
+  }),
+      selectedFile = _useAttachmentPreview.selectedFile,
+      isShow = _useAttachmentPreview.isShow,
+      description = _useAttachmentPreview.description,
+      onDescriptionChange = _useAttachmentPreview.onDescriptionChange,
+      onEscape = _useAttachmentPreview.onEscape;
+
+  var _useAttachmentPreview2 = (0, _useAttachmentPreviewEditor["default"])({
+    editorProps: editorProps,
+    onPreviewPopupKeyDown: onEscape,
+    needUploadOnEnter: needUploadOnEnter,
+    onSubmit: onSubmit
+  }),
+      onEditorKeyDown = _useAttachmentPreview2.onEditorKeyDown;
+
+  var fileName = selectedFile.fileName,
+      fileSize = selectedFile.formattedFileSize,
+      attachmentURL = selectedFile.attachmentURL,
+      fileFormat = selectedFile.fileFormat,
+      mediaType = selectedFile.mediaType,
+      attachmentId = selectedFile.attachmentId;
+  var isImageFile = (0, _react.useMemo)(function () {
+    return mediaType === IMAGE;
+  }, [mediaType]);
+  return isShow ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    alignBox: "column",
+    className: newStyle.attachmentPreview,
+    style: needAutoZindex ? {
+      zIndex: "".concat(getNextIndex())
+    } : {}
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.uploadPrev
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_AttachmentPreviewHeader["default"], _extends({
+    cancelText: cancelText,
+    fileName: fileName,
+    fileSize: fileSize,
+    onCancel: onCancel,
+    onSubmit: onSubmit,
+    submitText: submitText
+  }, attachmentPreviewHeaderProps))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_AttachmentPreviewBody["default"], _extends({
+    attachmentId: attachmentId,
+    attachmentURL: attachmentURL,
+    description: description,
+    editorProps: editorProps,
+    fileFormat: fileFormat,
+    isDescriptionNeeded: isDescriptionNeeded,
+    isImageFile: isImageFile,
+    mediaType: mediaType,
+    onDescriptionChange: onDescriptionChange,
+    onEditorKeyDown: onEditorKeyDown,
+    placeHolder: placeHolder
+  }, attachmentPreviewBodyProps))))) : null;
+}
+
+AttachmentPreview.propTypes = _propTypes["default"];
+AttachmentPreview.defaultProps = _defaultProps["default"];
+AttachmentPreview.displayName = 'AttachmentPreview';

package/lib/AttachmentPreview/css/AttachmentPreview.module.css

@@ -0,0 +1,39 @@
+/** ** Styles *** */
+.attachmentPreview {
+  position: fixed;
+  top: 0 ;
+  bottom: 0 ;
+  z-index: 2;
+  overflow: hidden;
+  background-color: rgba(42, 45, 54, 0.94);
+}
+[dir=ltr] .attachmentPreview {
+  animation: scaleIn 0.3s ease;
+  right: 0 ;
+  left: 0 ;
+}
+[dir=rtl] .attachmentPreview {
+  animation: scaleIn 0.3s ease;
+  left: 0 ;
+  right: 0 ;
+}
+
+@keyframes scaleIn {
+  0% {
+      -webkit-transform: scale(0.9);
+      transform: scale(0.9);
+      opacity: .7
+  }
+
+  100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      opacity: 1
+  }
+}
+
+.uploadPrev {
+  width: 100% ;
+  max-width: 43.75rem;
+  border-radius: 5px;
+}

package/lib/AttachmentPreview/index.js

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