diginet-core-ui 1.3.24 → 1.3.29

package/components/form-control/attachment/index.js

@@ -1,20 +1,17 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
-import { success5, danger5, info5, color } from '../../../styles/colors';
-import { fontFamily, typography } from '../../../styles/typography';
-import { ModalSample, Popup, Popover, List, ListItem, ListItemIcon, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress } from '../../';
-import Icon, { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, Info, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
+import { color as colors } from '../../../styles/colors';
+import { typography } from '../../../styles/typography';
+import { ModalSample, Popup, Popover, List, ListItem, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress, ButtonIcon } from '../../';
+import { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, Info, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
 import { date as moment, getFileType } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { useTheme, makeStyles } from '../../../theme';
-import { Fragment } from 'react';
 const theme = useTheme();
 const useStyles = makeStyles({
   listItem: {
@@ -46,12 +43,6 @@ const useStyles = makeStyles({
 });
 const classes = useStyles();
 const icons = {
-  detail: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <path fillRule="evenodd" clipRule="evenodd" d="M6.5 4C5.12167 4 4 5.11457 4 6.48418C4 7.85379 5.12167 8.96835 6.5 8.96835C7.87833 8.96835 9 7.85379 9 6.48418C9 5.11457 7.87833 4 6.5 4ZM12.3333 4C10.955 4 9.83333 5.11457 9.83333 6.48418C9.83333 7.85379 10.955 8.96835 12.3333 8.96835C13.7117 8.96835 14.8333 7.85379 14.8333 6.48418C14.8333 5.11457 13.7117 4 12.3333 4ZM20.6667 6.48418C20.6667 7.85379 19.545 8.96835 18.1667 8.96835C16.7883 8.96835 15.6667 7.85379 15.6667 6.48418C15.6667 5.11457 16.7883 4 18.1667 4C19.545 4 20.6667 5.11457 20.6667 6.48418ZM6.5 9.79641C5.12167 9.79641 4 10.911 4 12.2806C4 13.6502 5.12167 14.7648 6.5 14.7648C7.87833 14.7648 9 13.6502 9 12.2806C9 10.911 7.87833 9.79641 6.5 9.79641ZM9.83333 12.2806C9.83333 10.911 10.955 9.79641 12.3333 9.79641C13.7117 9.79641 14.8333 10.911 14.8333 12.2806C14.8333 13.6502 13.7117 14.7648 12.3333 14.7648C10.955 14.7648 9.83333 13.6502 9.83333 12.2806ZM18.1667 9.79641C16.7883 9.79641 15.6667 10.911 15.6667 12.2806C15.6667 13.6502 16.7883 14.7648 18.1667 14.7648C19.545 14.7648 20.6667 13.6502 20.6667 12.2806C20.6667 10.911 19.545 9.79641 18.1667 9.79641ZM4 18.077C4 16.7074 5.12167 15.5928 6.5 15.5928C7.87833 15.5928 9 16.7074 9 18.077C9 19.4466 7.87833 20.5612 6.5 20.5612C5.12167 20.5612 4 19.4466 4 18.077ZM12.3333 15.5928C10.955 15.5928 9.83333 16.7074 9.83333 18.077C9.83333 19.4466 10.955 20.5612 12.3333 20.5612C13.7117 20.5612 14.8333 19.4466 14.8333 18.077C14.8333 16.7074 13.7117 15.5928 12.3333 15.5928ZM15.6667 18.077C15.6667 16.7074 16.7883 15.5928 18.1667 15.5928C19.545 15.5928 20.6667 16.7074 20.6667 18.077C20.6667 19.4466 19.545 20.5612 18.1667 20.5612C16.7883 20.5612 15.6667 19.4466 15.6667 18.077Z" fill="currentColor"/>
-    </svg>`,
-  icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <path fillRule="evenodd" clipRule="evenodd" d="M3 7C3 6.448 3.448 6 4 6C4.552 6 5 6.448 5 7C5 7.552 4.552 8 4 8C3.448 8 3 7.552 3 7ZM3 12C3 11.448 3.448 11 4 11C4.552 11 5 11.448 5 12C5 12.552 4.552 13 4 13C3.448 13 3 12.552 3 12ZM4 16C3.448 16 3 16.448 3 17C3 17.552 3.448 18 4 18C4.552 18 5 17.552 5 17C5 16.448 4.552 16 4 16ZM7.9355 11H20.0645C20.5795 11 21.0005 11.421 21.0005 11.936V12.064C21.0005 12.579 20.5795 13 20.0645 13H7.9355C7.4205 13 7.0005 12.579 7.0005 12.064V11.936C7.0005 11.421 7.4205 11 7.9355 11ZM20.0645 16H7.9355C7.4205 16 7.0005 16.421 7.0005 16.936V17.064C7.0005 17.579 7.4205 18 7.9355 18H20.0645C20.5795 18 21.0005 17.579 21.0005 17.064V16.936C21.0005 16.421 20.5795 16 20.0645 16ZM7.9355 6H20.0645C20.5795 6 21.0005 6.421 21.0005 6.936V7.064C21.0005 7.579 20.5795 8 20.0645 8H7.9355C7.4205 8 7.0005 7.579 7.0005 7.064V6.936C7.0005 6.421 7.4205 6 7.9355 6Z" fill="currentColor"/>
-    </svg>`,
   pdf: jsx(Pdf, {
     width: '100%',
     height: '100%'
@@ -91,6 +82,37 @@ let existClickOutOfItem = false;
 let maxSize = Infinity;
 let divideSize = null;
 const errorDefault = getGlobal('errorDefault');
+const {
+  heading5,
+  paragraph1,
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    active,
+    rest,
+    white,
+    dark
+  },
+  semantic: {
+    success,
+    danger,
+    info
+  },
+  fill: {
+    hover: fillHover,
+    pressed,
+    focus
+  },
+  line: {
+    normal,
+    hover: lineHover
+  },
+  text: {
+    sub
+  }
+} = colors;
 const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   label,
@@ -112,6 +134,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   unitSize,
   accept,
   uploadErrorInfo,
+  domain,
+  isStripDomain,
   style,
   inputStyle,
   inputProps,
@@ -126,9 +150,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [open, setOpen] = useState(false);
   const [popup, setPopup] = useState(false);
   const [popover, setPopover] = useState(false);
+  const [viewTypeState, setViewTypeState] = useState(viewType);
   const attachTextRef = useRef(null);
   const attachmentHandleIconRef = useRef(null);
-  const viewAttachTypeRef = useRef(null);
   const sortIconRef = useRef(null);
   const attachmentImageIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
@@ -140,22 +164,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ViewAttachType = css`
         cursor: pointer;
         height: 24px;
-        color: ${color.system.rest};
+        color: ${rest};
         &:hover {
-            color: ${color.system.active};
+            color: ${active};
         }
     `;
   const attachmentHandleIcon = css`
         display: none;
         height: 24px;
         margin-right: 10px;
-        border-right: 1px solid ${color.line.normal};
+        border-right: 1px solid ${normal};
         span {
             margin-right: 10px;
-            color: ${color.system.rest};
+            color: ${rest};
             cursor: pointer;
             &:hover {
-                color: ${color.system.active};
+                color: ${active};
             }
         }
     `;
@@ -179,16 +203,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         align-items: center;
         margin: 0;
         &+p.attachment-error {
-            color: ${danger5};
-            font-family: ${fontFamily};
-            font-weight: 600;
+            color: ${danger};
         }
         span {
             display: none;
-            color: ${danger5};
+            color: ${danger};
             margin: 10px;
             cursor: help;
             opacity: 0;
+            ${paragraph1};
             span {
                 display: block;
                 position: absolute;
@@ -200,7 +223,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 height: max-content;
                 max-height: 72px;
                 overflow: auto;
-                border: 1px solid ${danger5};
+                border: 1px solid ${danger};
                 border-radius: 4px;
                 padding: 5px 8px;
                 transition: transform 0.3s linear 0.3s;
@@ -213,7 +236,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 &::-webkit-scrollbar-thumb{
                         border-radius: 10px;
                         mix-blend-mode: normal;
-                        background-color: ${danger5} !important;
+                        background-color: ${danger} !important;
                         background-clip: content-box;
                 }
                 ul {
@@ -232,10 +255,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const AttachmentText = css`
-        font-family: ${fontFamily};
-        ${typography.heading5};
+        ${heading5};
         text-transform: uppercase;
-        color: ${color.text.sub};
+        color: ${sub};
         user-select: none;
     `;
   const AttachmentHeaderIcon = css`
@@ -276,20 +298,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         width: 24px;
         height: 24px;
         svg {
-            color: ${color.system.rest};
+            color: ${rest};
         }
         &:hover {
-            border-color: ${color.line.hover};
+            border-color: ${lineHover};
             svg {
-                color: ${color.system.active};
+                color: ${active};
             }
         }
     `;
   const AttachmentImageText = css`
         display: none;
-        font-family: ${fontFamily};
-        ${typography.paragraph3};
-        color: ${color.system.rest};
+        ${paragraph3};
+        color: ${rest};
         user-select: none;
     `;
   const AttachmentImage = css`
@@ -312,15 +333,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 width: 64px;
                 height: 64px;
                 margin: 0 auto 8px auto;
-                border: 1px dashed ${color.line.normal};
+                border: 1px dashed ${normal};
                 border-radius: 50%;
                 svg {
                     width: 40px;
                     height: 40px;
                 }
                 &:hover {
-                    border-color: ${color.line.hover};
-                    background-color: ${color.fill.hover};
+                    border-color: ${lineHover};
+                    background-color: ${fillHover};
                 }
             }
         }
@@ -352,13 +373,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             width: 4px;
             height: 4px;
             border-radius: 50%;
-            background: ${success5};
+            background: ${success};
         }
     `;
   const AttachedItemInfoName = css`
-        font-family: ${fontFamily};
-        ${typography.paragraph1};
-        color: ${color.system.dark};
+        ${paragraph1};
+        color: ${dark};
         margin-left: 12px;
         padding-top: 1px;
         cursor: pointer;
@@ -373,9 +393,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         /* max-width: 50%; */
         height: 100%;
         align-items: center;
-        font-family: ${fontFamily};
-        ${typography.paragraph2};
-        color: ${color.text.sub};
+        ${paragraph2};
+        color: ${sub};
         cursor: pointer;
         user-select: none;
         .detail-info {
@@ -499,7 +518,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                     }
                     .css-${AttachedItemInfoName.name} {
-                        ${typography.paragraph3};
+                        ${paragraph3};
                         margin: 0 8px;
                         display: -webkit-box;
                         word-break: break-word;
@@ -513,8 +532,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 .css-${AttachedItemOwner.name} {
                     position: inherit;
                     height: auto;
-                    font-size: 12px;
-                    line-height: 14px;
+                    ${paragraph3};
                     .detail-info {
                         display: none;
                     }
@@ -534,7 +552,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const AttachmentRoot = css`
-        border: 1px solid ${color.line.normal};
+        border: 1px solid ${normal};
         display: block;
         position: relative;
         flex-wrap: wrap;
@@ -542,7 +560,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         flex-direction: column;
         padding-bottom: 20px;
         justify-content: start;
-        background-color: ${color.system.white};
+        background-color: ${white};
         border-radius: 4px;
         &:hover:not(.disabled) {
             .css-${AttachmentImageIcon.name} {
@@ -553,22 +571,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &:not(.disabled) {
                 .css-${AttachedItem.name} {
                     &:hover {
-                        background-color: ${color.fill.hover};
+                        background-color: ${fillHover};
                         .css-${AttachedLinear.name} {
-                            background-color: ${color.fill.hover};
+                            background-color: ${fillHover};
                         }
                     }
                     &:active {
-                        background-color: ${color.fill.pressed};
+                        background-color: ${pressed};
                         .css-${AttachedLinear.name} {
-                            background-color: ${color.fill.pressed};
+                            background-color: ${pressed};
                         }
                     }
                     &.chosen {
-                        background-color: ${color.fill.focus};
+                        background-color: ${focus};
                         .css-${AttachedItemInfo.name},
                         .css-${AttachedItemOwner.name} {
-                            background-color: ${color.fill.focus};
+                            background-color: ${focus};
                         }
                     }
                 }
@@ -662,15 +680,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onChangeViewAttachType = (e, viewAttachType2) => {
-    const type = viewAttachType2 || viewAttachTypeRef.current.getAttribute('dataviewtype');
+    const type = viewAttachType2 || viewTypeState;
 
     if (type === 'detail') {
-      viewAttachTypeRef.current.setAttribute('dataviewtype', 'icon');
-      viewAttachTypeRef.current.innerHTML = icons['icon'];
+      setViewTypeState('icon');
       attachedRef.current.classList.add('icon-view');
     } else {
-      viewAttachTypeRef.current.setAttribute('dataviewtype', 'detail');
-      viewAttachTypeRef.current.innerHTML = icons['detail'];
+      setViewTypeState('detail');
       attachedRef.current.classList.remove('icon-view');
     }
   };
@@ -709,7 +725,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         errorInfoIcon.style.opacity = 1;
         errorInfoIcon.style.display = 'flex';
       } else if (errorInfoIcon.style.color === 'rgb(0, 149, 255)') {
-        errorInfoIcon.style.color = danger5;
+        errorInfoIcon.style.color = danger;
       }
 
       if (onUploadError) {
@@ -724,7 +740,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         attachTextRef.current.parentNode.querySelector('ul').insertAdjacentElement('afterBegin', el);
       });
     } else if (errorInfoIcon.style.opacity === '1') {
-      errorInfoIcon.style.color = info5;
+      errorInfoIcon.style.color = info;
     }
   };
 
@@ -784,6 +800,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       insertAttached(files);
+      stripDomain();
       if (onChange) onChange({
         element: e.target,
         attached,
@@ -1024,12 +1041,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onDownloadMultiple = () => {
     const index = chosenItems[0];
+    let file = null;
 
     if (index < oldAttached.length) {
-      onDownload(oldAttached[index].URL, oldAttached[index].FileName);
+      file = mountDomain(oldAttached[index]);
+      onDownload(file.URL, file.FileName);
     } else {
       const files = allNewAttached.getAll('files');
-      onDownload(files[index - oldAttached.length].URL, files[index - oldAttached.length].name);
+      file = mountDomain(files[index - oldAttached.length]);
+      onDownload(file.URL, file.name);
     }
   };
 
@@ -1055,6 +1075,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       afterChangeFile(attached.length);
     }
 
+    stripDomain();
     if (onChange) onChange({
       element: nodeList,
       attached,
@@ -1420,6 +1441,36 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     webkitRelativePath: fileInfo.webkitRelativePath
   });
 
+  const mountDomain = item => {
+    if (!item) return item;
+
+    if (!/\/$/.test(domain)) {
+      domain = domain + '/';
+    }
+
+    if (item !== null && item !== void 0 && item.URL) {
+      item.URL = item.URL.indexOf('http') < 0 ? domain + item.URL : item.URL;
+    }
+
+    return item;
+  };
+
+  const stripDomain = () => {
+    if (isStripDomain && domain) {
+      const re = new RegExp(domain + '/?');
+      attached.forEach(item => {
+        var _item$URL;
+
+        item.URL = (item === null || item === void 0 ? void 0 : (_item$URL = item.URL) === null || _item$URL === void 0 ? void 0 : _item$URL.replace(re, '')) || '';
+      });
+      oldAttached.forEach(item => {
+        var _item$URL2;
+
+        item.URL = (item === null || item === void 0 ? void 0 : (_item$URL2 = item.URL) === null || _item$URL2 === void 0 ? void 0 : _item$URL2.replace(re, '')) || '';
+      });
+    }
+  };
+
   useEffect(() => {
     if (refs) refs(ref);
 
@@ -1436,8 +1487,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let el = null;
 
     if (error) {
-      attachTextRef.current.style.color = danger5;
-      ref.current.style.borderColor = errorStyle && errorStyle.borderColor || danger5;
+      attachTextRef.current.style.color = danger;
+      ref.current.style.borderColor = errorStyle && errorStyle.borderColor || danger;
       el = document.createElement('p');
       el.classList.add('attachment-error');
       Object.assign(el.style, errorStyle);
@@ -1457,7 +1508,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [required, error]);
   useEffect(() => {
-    // viewAttachTypeRef.current.innerHTML = icons[viewType];
     onChangeViewAttachType(null, viewType === 'icon' ? 'detail' : 'icon');
   }, [viewType]);
   useEffect(() => {
@@ -1501,15 +1551,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const length = data.length;
 
       for (let i = 0; i < length; i++) {
-        const newAttach = getItemHTMLFromData(data[i], i);
+        const item = domain ? mountDomain(data[i]) : data[i];
+        const newAttach = getItemHTMLFromData(item, i);
 
-        if (Object.prototype.toString.call(data[i]) === '[object File]') {
-          allNewAttached.append('files', data[i]);
+        if (Object.prototype.toString.call(item) === '[object File]') {
+          allNewAttached.append('files', item);
         } else {
-          oldAttached.push(data[i]);
+          oldAttached.push(item);
         }
 
-        attached.push(data[i]);
+        attached.push(item);
         const newElement = document.createElement('div');
         newElement.className = 'attachment-row';
         ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
@@ -1654,32 +1705,30 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     color: 'currentColor'
   })), jsx("span", {
     css: AttachmentImageText
-  }, hintText || 'Kéo và thả tập tin vào đây')))), allowSort && jsx(Icon, {
+  }, hintText || getGlobal('dropFileHere'))))), allowSort && jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Sort',
     ref: sortIconRef,
-    viewBox: true,
     style: {
-      padding: 0,
       marginRight: 8,
       display: 'none'
     },
     onClick: onShowSortPopover
-  }), jsx("div", {
-    css: ViewAttachType,
-    ref: viewAttachTypeRef,
-    onClick: onChangeViewAttachType,
-    dataviewtype: viewType
-  }))), [allowSort, readOnly]);
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
+    name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
+    onClick: onChangeViewAttachType
+  }))), [allowSort, readOnly, viewTypeState]);
   const AttachmentInputView = useMemo(() => jsx("div", {
     css: AttachmentInput
-  }, jsx("input", _extends({}, inputProps, {
+  }, jsx("input", { ...inputProps,
     type: "file",
     ref: attachmentInputRef,
     title: "",
     style: inputStyle,
     onDrop: onDropInput,
     onDragLeave: onDropInput
-  }))), [inputStyle]);
+  })), [inputStyle]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
     style: {
       marginRight: 5,
@@ -1746,7 +1795,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setOpen(false);
     const index = chosenItems[0];
-    const data = attached[index]; // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
+    const data = mountDomain(attached[index]); // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
 
     return jsx(ModalSample, {
       open: open,
@@ -1758,19 +1807,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [open]); // End view
 
   useImperativeHandle(reference, () => {
+    stripDomain();
     ref.current.oldAttached = oldAttached;
     ref.current.allNewAttached = allNewAttached;
     ref.current.attached = attached;
     ref.current.clear = clearAllAttached;
     return ref.current;
   });
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     css: AttachmentRoot,
     className: ('DGN-UI-Attachment ' + className).trim(),
     style: style,
     ref: ref,
     onDragEnter: onDragFileStart
-  }), AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView);
+  }, AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView);
 }));
 Attachment.defaultProps = {
   deleteNotifyText: getGlobal('deleteNotifyText'),
@@ -1821,6 +1871,12 @@ Attachment.propTypes = {
   /** attach label to display in the upper left corner of attachment box */
   label: PropTypes.string,
 
+  /** domain of attachments*/
+  domain: PropTypes.string,
+
+  /** strip domain of attachments if it's true */
+  isStripDomain: PropTypes.bool,
+
   /** class of Attachment component */
   className: PropTypes.string,