@kids-reporter/draft-renderer 1.0.10 → 1.0.11

package/lib/block-renderers/slideshow-block.js

@@ -99,28 +99,12 @@ const SlidesSection = _styledComponents.default.div`
   flex-basis: 100%;
   overflow: hidden;
   position: relative;
+  width: 100%;
+  aspect-ratio: 3 / 2;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
     order: 2;
   }
-
-  ${_mediaQuery.mediaQuery.smallOnly} {
-    padding-bottom: calc(
-      ${mockup.mobile.slide.height} / ${mockup.mobile.container.width}*100%
-    );
-  }
-
-  ${_mediaQuery.mediaQuery.mediumOnly} {
-    padding-bottom: calc(
-      ${mockup.desktop.slide.height} / ${mockup.desktop.container.width}*100%
-    );
-  }
-
-  ${_mediaQuery.mediaQuery.largeOnly} {
-    padding-bottom: calc(
-      ${mockup.hd.slide.height} / ${mockup.hd.container.width}*100%
-    );
-  }
 `;
 const PrevNextSection = _styledComponents.default.div`
   margin-top: 20px;
@@ -328,42 +312,6 @@ const SlideFlexItem = _styledComponents.default.div`
     padding-right: ${mockup.hd.slide.paddingRight}px;
   }
 `;
-const SlideMask = _styledComponents.default.div`
-  position: absolute;
-  top: 0;
-  height: 100%;
-  opacity: 0.55;
-`;
-const LeftSlideMask = (0, _styledComponents.default)(SlideMask)`
-  left: 0;
-
-  ${_mediaQuery.mediaQuery.smallOnly} {
-    width: ${getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
-  }
-
-  ${_mediaQuery.mediaQuery.mediumOnly} {
-    width: ${getLeftMaskWidth(mockup.desktop)}px;
-  }
-
-  ${_mediaQuery.mediaQuery.largeOnly} {
-    width: ${getLeftMaskWidth(mockup.hd)}px;
-  }
-`;
-const RightSlideMask = (0, _styledComponents.default)(SlideMask)`
-  right: 0;
-
-  ${_mediaQuery.mediaQuery.smallOnly} {
-    width: ${getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
-  }
-
-  ${_mediaQuery.mediaQuery.mediumOnly} {
-    width: ${getRightMaskWidth(mockup.desktop)}px;
-  }
-
-  ${_mediaQuery.mediaQuery.largeOnly} {
-    width: ${getRightMaskWidth(mockup.hd)}px;
-  }
-`;
 const SlideshowFlexBox = _styledComponents.default.div`
   ${PrevButton} {
     border-color: #d8d8d8;
@@ -379,11 +327,6 @@ const SlideshowFlexBox = _styledComponents.default.div`
   ${ImageNumber} {
     color: #fff;
   }
-  ${SlideMask} {
-    background-color: ${({
-  theme
-}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
-  }
 
   width: 100%;
   margin: 0 auto;
@@ -429,22 +372,6 @@ function getContainerWidth(deviceMockup) {
 function getSlideWidth(deviceMockup) {
   return deviceMockup.slide.width + deviceMockup.slide.paddingRight;
 }
-
-/**
- * @param {DeviceMockup} deviceMockup
- * @return {number}
- */
-function getLeftMaskWidth(deviceMockup) {
-  return deviceMockup.offset.left - deviceMockup.slide.paddingRight; // px
-}
-
-/**
- * @param {DeviceMockup} deviceMockup
- * @return {number}
- */
-function getRightMaskWidth(deviceMockup) {
-  return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
-}
 function SlideshowBlock({
   className = '',
   data
@@ -494,15 +421,18 @@ function SlideshowBlock({
         // hence, we append `index` on the key
         _react.default.createElement(SlideFlexItem, {
           key: `slide_${img.id}_${index}`
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "w-full h-full relative overflow-hidden"
         }, /*#__PURE__*/_react.default.createElement("img", {
           srcSet: imgSrcSetArr.join(','),
           src: imgSrc,
           style: {
+            display: 'block',
             objectFit,
-            width: '100%'
+            height: '100%'
           },
           sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
-        }))
+        })))
       );
     });
   }, [images]);
@@ -543,7 +473,7 @@ function SlideshowBlock({
     translateXUint: translateXUnit,
     duration: duration,
     isSliding: isSliding
-  }, slides), /*#__PURE__*/_react.default.createElement(LeftSlideMask, null), /*#__PURE__*/_react.default.createElement(RightSlideMask, null)), /*#__PURE__*/_react.default.createElement(PrevNextSection, null, /*#__PURE__*/_react.default.createElement(PrevButton, {
+  }, slides)), /*#__PURE__*/_react.default.createElement(PrevNextSection, null, /*#__PURE__*/_react.default.createElement(PrevButton, {
     onClick: isSliding ? undefined : slideToPrev
   }, /*#__PURE__*/_react.default.createElement(PreArrowSvg, null)), /*#__PURE__*/_react.default.createElement(NextButton, {
     onClick: isSliding ? undefined : slideToNext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "",
   "main": "lib/index.js",
   "scripts": {