@zohoim/chat-components 1.0.8 → 1.0.9-beta.1

package/README.md

@@ -10,9 +10,9 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
-# 1.0.8
+# 1.0.9
 
-- Color preprocessor and contrast added
+- chat bubble ui issues fixes
 - @zohodesk/components version update
 
 # 1.0.6

package/es/AttachmentHandler/AttachmentHandler.js

@@ -0,0 +1,84 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Component *** */
+
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentHandler from '@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentHandlerDefaultProps from "./props/defaultProps";
+import attachmentHandlerPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from "./css/AttachmentHandler.module.css";
+export default function AttachmentHandler(props) {
+  const {
+    customStyle,
+    iconName,
+    iconSize,
+    iconTitle,
+    renderCustomIcon,
+    getRef: propGetRef,
+    supportedFileTypes,
+    isMultiAttachment,
+    onAttach: propOnAttach,
+    customProps = dummyObject
+  } = props;
+  const {
+    inputProps = dummyObject
+  } = customProps;
+  const {
+    onAttach,
+    onAttachmentClick,
+    getRef
+  } = useAttachmentHandler({
+    onAttach: propOnAttach,
+    getRef: propGetRef
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
+    ref: getRef,
+    accept: supportedFileTypes,
+    hidden: true,
+    multiple: isMultiAttachment,
+    onChange: onAttach,
+    size: "1",
+    type: "file",
+    ...inputProps
+  }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
+  const customIcon = useMemo(() => {
+    /* Render Custom Icon */
+    const icon = renderHandler(renderCustomIcon)({
+      onClick: onAttachmentClick
+    });
+
+    if (icon) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, icon, inputEl);
+    }
+
+    return null;
+  }, [renderCustomIcon, onAttachmentClick, inputEl]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
+    className: newStyle.iconButton,
+    iconClass: newStyle.icon,
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onAttachmentClick,
+    title: iconTitle
+  }, inputEl));
+}
+AttachmentHandler.propTypes = attachmentHandlerPropTypes;
+AttachmentHandler.defaultProps = attachmentHandlerDefaultProps;
+AttachmentHandler.displayName = 'AttachmentHandler';

package/es/AttachmentHandler/css/AttachmentHandler.module.css

@@ -0,0 +1,17 @@
+/** ** 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;
+}

package/es/AttachmentHandler/index.js

@@ -0,0 +1 @@
+export { default as AttachmentHandler } from "./AttachmentHandler";

package/es/AttachmentHandler/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const attachmentHandlerDefaultProps = {
+  customStyle: dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+export default attachmentHandlerDefaultProps;

package/es/AttachmentHandler/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentHandlerPropTypes = {
+  customStyle: PropTypes.object,
+  iconName: PropTypes.string.isRequired,
+  iconSize: PropTypes.number,
+  iconTitle: PropTypes.string,
+  renderCustomIcon: PropTypes.func,
+  getRef: PropTypes.func,
+  supportedFileTypes: PropTypes.string,
+  isMultiAttachment: PropTypes.bool,
+  onAttach: PropTypes.func.isRequired,
+  customProps: PropTypes.shape({
+    inputProps: PropTypes.object
+  })
+};
+export default attachmentHandlerPropTypes;

package/es/AttachmentPreview/AttachmentPreview.js

@@ -0,0 +1,113 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPreviewHeader";
+import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
+import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
+/** ** Constants *** */
+
+import attachmentPreviewDefaultProps from "./props/defaultProps";
+import attachmentPreviewPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { mediaTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+/** ** Styles *** */
+
+import style from "./css/AttachmentPreview.module.css";
+const {
+  IMAGE
+} = mediaTypes;
+export default function AttachmentPreview(props) {
+  const {
+    customStyle,
+    isDescriptionNeeded,
+    files,
+    customProps,
+    onSubmit,
+    onCancel,
+    texts,
+    descriptionDetails,
+    onDescriptionChange: propOnDescriptionChange,
+    needCloseOnEscape
+  } = props;
+  const {
+    editorProps = dummyObject,
+    attachmentPreviewHeaderProps = dummyObject,
+    attachmentPreviewBodyProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    submitText = 'Submit',
+    cancelText = 'Cancel',
+    placeHolder = 'Add a description for the image'
+  } = texts || dummyObject;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const {
+    selectedFile,
+    isShow,
+    description,
+    onDescriptionChange,
+    onEscape
+  } = useAttachmentPreview({
+    files,
+    onDescriptionChange: propOnDescriptionChange,
+    descriptionDetails,
+    needCloseOnEscape,
+    onCancel
+  });
+  const {
+    onEditorKeyDown
+  } = useAttachmentPreviewEditor({
+    editorProps,
+    onPreviewPopupKeyDown: onEscape
+  });
+  const {
+    fileName,
+    formattedFileSize: fileSize,
+    attachmentURL,
+    fileFormat,
+    mediaType,
+    attachmentId
+  } = selectedFile;
+  const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
+  return isShow ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.attachmentPreview
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    alignBox: "column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${newStyle.uploadPrev} ${newStyle.container}`
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
+    cancelText: cancelText,
+    fileName: fileName,
+    fileSize: fileSize,
+    onCancel: onCancel,
+    onSubmit: onSubmit,
+    submitText: submitText,
+    ...attachmentPreviewHeaderProps
+  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, {
+    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 = attachmentPreviewPropTypes;
+AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;
+AttachmentPreview.displayName = 'AttachmentPreview';

package/es/AttachmentPreview/css/AttachmentPreview.module.css

@@ -0,0 +1,31 @@
+/** ** Styles *** */
+.attachmentPreview {
+  position: fixed;
+  top: 0 ;
+  bottom: 0 ;
+  /* z-index: 9999; */
+  z-index: 2147483643;
+  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 ;
+}
+
+.container {
+  position: relative;
+}
+
+.uploadPrev {
+  width: 100% ;
+  max-width: 43.75rem;
+  background-color: #fff;
+  border-radius: 5px;
+}

package/es/AttachmentPreview/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreview } from "./AttachmentPreview";

package/es/AttachmentPreview/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const attachmentPreviewDefaultProps = {
+  customStyle: dummyObject,
+  needCloseOnEscape: true
+};
+export default attachmentPreviewDefaultProps;

package/es/AttachmentPreview/props/propTypes.js

@@ -0,0 +1,31 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewPropTypes = {
+  customStyle: PropTypes.object,
+  isDescriptionNeeded: PropTypes.bool,
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string
+  })).isRequired,
+  customProps: PropTypes.shape({
+    attachmentIconProps: PropTypes.object,
+    cancelButtonProps: PropTypes.object,
+    editorProps: PropTypes.object,
+    submitButtonProps: PropTypes.object
+  }),
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  texts: PropTypes.shape({
+    cancelText: PropTypes.string,
+    editText: PropTypes.string,
+    placeHolder: PropTypes.string,
+    submitText: PropTypes.string
+  }).isRequired,
+  descriptionDetails: PropTypes.object,
+  onDescriptionChange: PropTypes.func,
+  needCloseOnEscape: PropTypes.bool
+};
+export default attachmentPreviewPropTypes;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -0,0 +1,76 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import Editor from "../rte/Editor/Editor";
+import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentPreviewBodyDefaultProps from "./props/defaultProps";
+import attachmentPreviewBodyPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/AttachmentPreviewBody.module.css";
+export default function AttachmentPreviewBody(props) {
+  const {
+    customStyle,
+    customProps,
+    isImageFile,
+    attachmentURL,
+    fileFormat,
+    mediaType,
+    isDescriptionNeeded,
+    description,
+    attachmentId,
+    onDescriptionChange,
+    onEditorKeyDown,
+    placeHolder,
+    editorProps
+  } = props;
+  const {
+    attachmentIconProps = dummyObject
+  } = customProps || {};
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconCustomStyle = useMemo(() => ({
+    icon: newStyle.attachmentIcon
+  }), [newStyle.attachmentIcon]);
+  const editorCustomStyle = useMemo(() => ({
+    editorWrapper: newStyle.editorWrapper,
+    editableDiv: newStyle.editableDiv
+  }), [newStyle.editorWrapper, newStyle.editableDiv]);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    alignBox: "column",
+    className: `${newStyle.zoomContent} ${newStyle.imgContent}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.fileContainer
+  }, isImageFile ? /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: newStyle.imgZoomOut,
+    src: attachmentURL
+  }) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AttachmentIcon, {
+    customStyle: iconCustomStyle,
+    fileFormat: fileFormat,
+    mediaType: mediaType,
+    ...attachmentIconProps
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(Editor, {
+    content: description,
+    customStyle: editorCustomStyle,
+    id: `${attachmentId}_Attach_Editor`,
+    needAutoFocus: true,
+    onChange: onDescriptionChange,
+    onKeyDown: onEditorKeyDown,
+    placeHolder: placeHolder,
+    ...editorProps
+  }) : null);
+}
+AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;
+AttachmentPreviewBody.defaultProps = attachmentPreviewBodyDefaultProps;
+AttachmentPreviewBody.displayName = 'AttachmentPreviewBody';

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -0,0 +1,63 @@
+/** ** Styles *** */
+.attachmentIcon {
+  width: var(--zd_size60)  !important;
+  height: var(--zd_size60)  !important;
+}
+
+.editorWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100% ;
+  width: 100% ;
+}
+
+.editableDiv {
+  min-height: var(--zd_size48)  !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  border-bottom: 1px solid rgb(211, 223, 215) !important;
+}
+
+.editableDiv:hover {
+  border-color: rgb(120, 129, 144) !important;
+}
+
+.editableDiv:focus {
+  border-color: rgb(38, 169, 66) !important;
+}
+
+.imgContent,
+.zoomContent {
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.imgContent, .zoomContent {
+  background: var(--zd_im_chat_attachment_preview_bg);
+  background-color: #f5f6f7;
+  padding: var(--zd_size40);
+}
+
+[dir=ltr] .imgContent, [dir=ltr] .zoomContent {
+  border-bottom-left-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=rtl] .imgContent, [dir=rtl] .zoomContent {
+  border-bottom-right-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+.fileContainer {
+  height: var(--zd_size225);
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.imgZoomOut {
+  width: auto ;
+  max-width: 100% ;
+  max-height: 100% ;
+}

package/es/AttachmentPreviewBody/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreviewBody } from "./AttachmentPreviewBody";

package/es/AttachmentPreviewBody/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const attachmentPreviewBodyDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default attachmentPreviewBodyDefaultProps;

package/es/AttachmentPreviewBody/props/propTypes.js

@@ -0,0 +1,20 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewBodyPropTypes = {
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    attachmentIconProps: PropTypes.object
+  }),
+  isImageFile: PropTypes.bool,
+  attachmentURL: PropTypes.string,
+  fileFormat: PropTypes.string,
+  mediaType: PropTypes.string,
+  isDescriptionNeeded: PropTypes.bool,
+  description: PropTypes.string,
+  attachmentId: PropTypes.string,
+  onDescriptionChange: PropTypes.func,
+  onEditorKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  editorProps: PropTypes.object
+};
+export default attachmentPreviewBodyPropTypes;

package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js

@@ -0,0 +1,84 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Button from '@zohodesk/components/es/Button/Button';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentPreviewHeaderDefaultProps from "./props/defaultProps";
+import attachmentPreviewHeaderPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/AttachmentPreviewHeader.module.css";
+export default function AttachmentPreviewHeader(props) {
+  const {
+    customStyle,
+    fileName,
+    fileSize,
+    submitText,
+    cancelText,
+    onSubmit,
+    onCancel,
+    customProps
+  } = props;
+  const {
+    submitButtonProps = dummyObject,
+    cancelButtonProps = dummyObject
+  } = customProps || {};
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.imgPreviewerheader,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.imgName,
+    title: fileName
+  }, fileName), /*#__PURE__*/React.createElement("div", {
+    className: newStyle.imgSize
+  }, fileSize)))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.navIcon,
+    isCover: false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: newStyle.attachBtn
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: false,
+    isBold: true,
+    onClick: onSubmit,
+    palette: "primaryFilled",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: submitText,
+    ...submitButtonProps
+  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    disabled: false,
+    isBold: true,
+    onClick: onCancel,
+    palette: "secondary",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: cancelText,
+    ...cancelButtonProps
+  })))));
+}
+AttachmentPreviewHeader.propTypes = attachmentPreviewHeaderPropTypes;
+AttachmentPreviewHeader.defaultProps = attachmentPreviewHeaderDefaultProps;
+AttachmentPreviewHeader.displayName = 'AttachmentPreviewHeader';

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -0,0 +1,45 @@
+/** ** Styles *** */
+.imgPreviewerheader {
+  position: relative;
+  background-color: var(--zd_im_common_bg);
+  padding: var(--zd_size15) var(--zd_size40);
+  border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
+}
+[dir=ltr] .imgPreviewerheader {
+  border-top-left-radius: var(--zd_size5);
+  border-top-right-radius: var(--zd_size5);
+}
+[dir=rtl] .imgPreviewerheader {
+  border-top-right-radius: var(--zd_size5);
+  border-top-left-radius: var(--zd_size5);
+}
+
+.imgName {
+  color: #000;
+  font-size: var(--zd_font_size17);
+  font-family: var(--zd_semibold);
+  composes: dotted from '../../css/common.module.css';
+  max-width: 100% ;
+  margin-bottom: var(--zd_size5);
+}
+
+.imgSize {
+  font-size: var(--zd_font_size13);
+  color: #5a616f;
+  composes: dotted from '../../css/common.module.css';
+  max-width: var(--zd_size150);
+}
+
+.navIcon {
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+}
+
+[dir=ltr] .attachBtn {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .attachBtn {
+  margin-left: var(--zd_size10);
+}

package/es/AttachmentPreviewHeader/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreviewHeader } from "./AttachmentPreviewHeader";

package/es/AttachmentPreviewHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const attachmentPreviewHeaderDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default attachmentPreviewHeaderDefaultProps;

package/es/AttachmentPreviewHeader/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewHeaderPropTypes = {
+  customStyle: PropTypes.object,
+  fileName: PropTypes.string.isRequired,
+  fileSize: PropTypes.string.isRequired,
+  submitText: PropTypes.string.isRequired,
+  cancelText: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  customProps: PropTypes.shape({
+    cancelButtonProps: PropTypes.object,
+    submitButtonProps: PropTypes.object
+  })
+};
+export default attachmentPreviewHeaderPropTypes;