@zohodesk/dot 1.9.12 → 1.9.14

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,8 +1,8 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,20 +10,13 @@
 }
 
 .title {
+    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .title {
-    padding-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .title {
-    padding-left: var(--zd_size15) ;
-}
-
 .count {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -80,7 +73,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline:0 ;
+    margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -136,7 +129,7 @@
 }
 
 .listContainer {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -324,7 +317,7 @@
 }
 
 .authorName {
-    margin-block:0 ;
+    margin-block: 0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -364,4 +357,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

package/es/AttachmentViewer/__tests__/AttachmentViewer.spec.js

@@ -8,62 +8,63 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
 });
+const mockData = [{
+  id: '1',
+  name: 'slack0.jpg',
+  size: '100412',
+  href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+  viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+  downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
+}, {
+  id: '2',
+  name: 'slack1.jpg',
+  size: '100412',
+  href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+  viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+  downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
+}, {
+  id: '3',
+  name: 'slack2.jpg',
+  size: '100412',
+  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+}, {
+  id: '4',
+  name: 'slack3.jpg',
+  size: '100412',
+  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+}, {
+  id: '5',
+  name: 'slack4.jpg',
+  size: '100412',
+  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+}, {
+  id: '6',
+  name: 'slack5.jpg',
+  size: '100412',
+  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+}, {
+  id: '6',
+  name: 'slack5.mp3',
+  size: '100412',
+  href: 'https://www.w3schools.com/html/horse.mp3',
+  viewUrl: 'https://www.w3schools.com/html/horse.mp3',
+  downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
+}];
 describe('AttachmentViewer', () => {
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       previewObj: {
-        previewData: [{
-          id: '1',
-          name: 'slack0.jpg',
-          size: '100412',
-          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
-        }, {
-          id: '2',
-          name: 'slack1.jpg',
-          size: '100412',
-          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
-        }, {
-          id: '3',
-          name: 'slack2.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '4',
-          name: 'slack3.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '5',
-          name: 'slack4.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.mp3',
-          size: '100412',
-          href: 'https://www.w3schools.com/html/horse.mp3',
-          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
-          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
-        }],
+        previewData: mockData,
         selectedIndex: 0
       }
     }));
@@ -75,59 +76,62 @@ describe('AttachmentViewer', () => {
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       isActive: true,
       previewObj: {
-        previewData: [{
-          id: '1',
-          name: 'slack0.jpg',
-          size: '100412',
-          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
-        }, {
-          id: '2',
-          name: 'slack1.jpg',
-          size: '100412',
-          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
-        }, {
-          id: '3',
-          name: 'slack2.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '4',
-          name: 'slack3.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '5',
-          name: 'slack4.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.mp3',
-          size: '100412',
-          href: 'https://www.w3schools.com/html/horse.mp3',
-          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
-          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
-        }],
+        previewData: mockData,
         selectedIndex: 0
       }
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with renderCustomIcons', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      previewObj: {
+        previewData: mockData,
+        selectedIndex: 0
+      },
+      renderCustomIcons: props => {
+        const {
+          selectedAttachment,
+          selectedIndex,
+          totalLen
+        } = props;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-id": "customIcons"
+        }, /*#__PURE__*/React.createElement("span", {
+          "data-id": "customIcons_name"
+        }, selectedAttachment.name), /*#__PURE__*/React.createElement("span", {
+          "data-id": "customIcons_index"
+        }, selectedIndex + 1, "/", totalLen));
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with renderCustomImagePreviewElement', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      previewObj: {
+        previewData: mockData,
+        selectedIndex: 0
+      },
+      renderCustomImagePreviewElement: props => {
+        const {
+          defaultView,
+          data,
+          index: selectedIndex
+        } = props;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-id": "customImagePreview"
+        }, /*#__PURE__*/React.createElement("span", {
+          "data-id": "customImagePreview_name"
+        }, data.name), /*#__PURE__*/React.createElement("span", {
+          "data-id": "customImagePreview_index"
+        }, selectedIndex + 1, "/", data.length));
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });