@kids-reporter/draft-renderer 0.1.0 → 0.2.0

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

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SlideshowBlock = SlideshowBlock;
-exports.SlideshowBlockV2 = SlideshowBlockV2;
+exports.SlideshowInArticleBody = SlideshowInArticleBody;
 
-var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));
+var _multimedia = _interopRequireDefault(require("./multimedia"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _slideshowLightbox = _interopRequireDefault(require("../components/slideshow-lightbox"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -20,234 +20,609 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const defaultImage = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/722f90c535fa64c27555ec6ee5f22393.png";
-const arrowDown = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/dd45f0788d9c70cabe72430bf08e7413.png";
-const SlideShowDesktopSize = 960;
-const SpacingBetweenSlideImages = 12;
-const SlideShowBlockWrapper = _styledComponents.default.div`
-  width: calc(100% + 40px);
-  transform: translateX(-20px);
-  position: relative;
-  ${({
-  theme
-}) => theme.margin.default};
-
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    width: ${SlideShowDesktopSize}px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    transform: translateX(-180px);
-    gap: ${SpacingBetweenSlideImages}px;
-    max-height: ${props => props.expandSlideShow ? 'none' : '960px'};
-    overflow: ${props => props.expandSlideShow ? 'visible' : 'hidden'};
-    margin-bottom: ${props => props.expandSlideShow ? '32px' : '16px'};
-  }
+// @ts-ignore pkg does not contain ts header file
+const mockup = {
+  mobile: {
+    container: {
+      width: 375 // px
+
+    },
+    slide: {
+      width: 339,
+      // px
+      height: 189,
+      // px
+      paddingRight: 2 // px
+
+    },
+    offset: {
+      left: 18 // px
+
+    }
+  },
+  tablet: {
+    container: {
+      width: 768 // px
+
+    },
+    slide: {
+      width: 687,
+      // px
+      height: 387,
+      // px
+      paddingRight: 4 // px
+
+    },
+    offset: {
+      left: 41 // px
+
+    }
+  },
+  desktop: {
+    container: {
+      width: 752 // px
+
+    },
+    slide: {
+      width: 688,
+      // px
+      height: 387,
+      // px
+      paddingRight: 4 // px
+
+    },
+    offset: {
+      left: 32 // px
+
+    }
+  },
+  hd: {
+    container: {
+      width: 1034 // px
+
+    },
+    slide: {
+      width: 944,
+      // px
+      height: 531,
+      // px
+      paddingRight: 4 // px
 
-  .slideshow-image {
-    max-height: ${props => props.shouldLimitFigureHeight ? 'calc(960px - 324px)' : 'none'};
+    },
+    offset: {
+      left: 45 // px
+
+    }
   }
+}; // Assuming there are three images [ A, B, C ] for slideshow.
+// If image B is rendered in the center,
+// users can see part of image A(left side) and image C(right side) with masks.
+// When users click right button to see image C, which means, C is in the center,
+// users still can see part of image B(left side) and image A(right side) with masks.
+//
+// Hence, there are four images rendered arround B at the beginning.
+// The image array should be [ C, A, B, C, A ].
+//
+// `slidesOffset` indicates how many slides rendered before/after image B, which is, 2 (A and C).
+//
+
+const slidesOffset = 2; // duration of transition of transform(translateX(?px))
+
+const duration = 300; // current index to indicate which image should be rendered in the center
+
+const defaultCurIndex = 0;
+const SlidesSection = _styledComponents.default.div`
+  flex-shrink: 0;
+  flex-basis: 100%;
+  overflow: hidden;
+  position: relative;
+
+  ${_mediaQuery.default.tabletAndBelow`
+    order: 2;
+  `}
+
+  ${_mediaQuery.default.mobileOnly`
+    padding-bottom: calc(${mockup.mobile.slide.height}/${mockup.mobile.container.width}*100%);
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    padding-bottom: calc(${mockup.tablet.slide.height}/${mockup.tablet.container.width}*100%);
+  `}
+
+  ${_mediaQuery.default.desktopOnly`
+    padding-bottom: calc(${mockup.desktop.slide.height}/${mockup.desktop.container.width}*100%);
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    padding-bottom: calc(${mockup.hd.slide.height}/${mockup.hd.container.width}*100%);
+  `}
 `;
-const SlideShowImage = _styledComponents.default.figure`
-  width: 100%;
-  aspect-ratio: 1/1;
+const PrevNextSection = _styledComponents.default.div`
+  margin-top: 20px;
+
+  ${_mediaQuery.default.tabletAndBelow`
+    order: 3;
+  `}
+
+  ${_mediaQuery.default.mobileOnly`
+    margin-left: 25px;
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    margin-left: 47px;
+  `}
+`;
+const PrevButton = _styledComponents.default.div`
+  cursor: pointer;
+  width: 59px;
+  height: 59px;
+  display: inline-flex;
+  border: solid 1px;
 
-  & + .slideshow-image {
-    margin-top: ${SpacingBetweenSlideImages}px;
+  > svg {
+    margin: auto;
+    width: 21px;
   }
 
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    flex: 1 0 calc((100% - ${SpacingBetweenSlideImages * 2}px) / 3);
-    min-width: ${SlideShowDesktopSize / 3 - 8}px;
+  ${_mediaQuery.default.hdOnly`
+    width: 83px;
+    height: 83px;
 
-    &:hover {
-      cursor: pointer;
-      filter: brightness(15%);
-      transition: 0.3s;
+    > svg {
+      width: 31px;
     }
+  `}
 
-    & + .slideshow-image {
-      margin-top: unset;
+  &:hover {
+    > svg {
+      transform: translateX(-5px);
+      transition: transform 0.3s ease;
     }
   }
 `;
-const FigCaption = _styledComponents.default.figcaption`
-  font-weight: 400;
-  line-height: 23px;
-  color: #000928;
-  opacity: 0.5;
-  ${({
-  theme
-}) => theme.fontSize.xs};
-  padding: 8px 20px 20px 20px;
-
-  ${({
-  theme
-}) => theme.breakpoint.md} {
-    ${({
-  theme
-}) => theme.fontSize.sm};
-  }
+const NextButton = (0, _styledComponents.default)(PrevButton)`
+  border-left: none;
 
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    display: none;
+  &:hover {
+    > svg {
+      transform: translateX(5px);
+    }
   }
 `;
-const GradientMask = _styledComponents.default.div`
-  display: none;
+const ImageNumberCircle = _styledComponents.default.div`
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  vertical-align: top;
 
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    cursor: pointer;
-    display: block;
+  position: relative;
+
+  &::after {
+    content: '';
     position: absolute;
-    width: 100%;
-    height: ${SlideShowDesktopSize}px;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0) 648px,
-      rgba(255, 255, 255, 1) 960px
-    );
+    width: 62px;
+    border-top: solid 1px;
+    transform: rotate(-45deg);
+    transform-origin: bottom left;
+    top: 67px;
+    left: 7px;
   }
-`;
-const ExpandText = _styledComponents.default.div`
-  display: none;
-
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    display: block;
-    font-style: normal;
-    font-weight: 700;
-    ${({
-  theme
-}) => theme.fontSize.md};
-    line-height: 18px;
-    letter-spacing: 0.03em;
-    color: #000928;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    margin-bottom: 48px;
-    transition: all 0.2s ease;
-
-    &:hover::after,
-    &:active::after {
-      bottom: -30px;
-      transition: all 0.2s;
-    }
+
+  ${_mediaQuery.default.tabletAndBelow`
+    order: 1;
+
+    /* align right */
+    margin-left: auto;
+    /* 10px is the border-right width of body */
+    margin-right: 10px;
+  `}
+
+  ${_mediaQuery.default.desktopAndAbove`
+    margin-top: 6px;
+
+    /* align right */
+    margin-left: auto;
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    margin-right: -18px;
+    width: 110px;
+    height: 110px;
 
     &::after {
-      content: '';
-      position: absolute;
-      bottom: -26px;
-      left: 50%;
-      transform: translate(-50%, 0%);
-      width: 14px;
-      height: 13px;
-      background-image: url(${arrowDown});
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: 14px;
+      width: 89px;
+      top: 93px;
+      left: 10px;
     }
-  }
-`; // support old version of slideshow without delay propertiy
+  `}
+`;
+const ImageNumber = _styledComponents.default.span`
+  position: absolute;
+  top: 25px;
+  left: 9px;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 0.79;
 
-const Figure = _styledComponents.default.figure`
-  position: relative;
-  margin-block: unset;
-  margin-inline: unset;
-  margin: 0 10px;
+  ${_mediaQuery.default.hdOnly`
+    top: 35px;
+    left: 10px;
+  `}
+`;
+const ImageTotal = (0, _styledComponents.default)(ImageNumber)`
+  top: 46px;
+  left: 36px;
+
+  ${_mediaQuery.default.hdOnly`
+    top: 71px;
+    left: 50px;
+  `}
 `;
-const Image = _styledComponents.default.img`
+const Desc = (0, _styledComponents.default)(_multimedia.default.Caption)`
+  align-self: flex-start;
+  display: inline-block;
+
+  /* overwrite Multimedia.Caption styles */
+  margin-bottom: 0;
+
+  ${_mediaQuery.default.tabletAndBelow`
+    order: 4;
+    padding-top: 15px;
+  `}
+
+  ${_mediaQuery.default.mobileOnly`
+    width: calc(180/355*100%);
+  `}
+
+  ${_mediaQuery.default.desktopAndAbove`
+    padding-top: 30px;
+
+    /* overwrite Multimedia.Caption styles */
+    float: none;
+  `}
+`;
+const EmptyDesc = (0, _styledComponents.default)(Desc)`
+  &::after {
+    border-bottom: none;
+  }
+`;
+const SlidesFlexBox = _styledComponents.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-wrap: nowrap;
   width: 100%;
+  height: 100%;
+  ${props => {
+  if (props.isSliding) {
+    return `transition: transform ${props.duration}ms ease-in-out;`;
+  }
+}}
+
+  ${_mediaQuery.default.mobileOnly`
+    transform: translateX(${props => getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100}%);
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    transform: translateX(${props => getTranslateX(mockup.tablet, props.translateXUint) / getContainerWidth(mockup.tablet) * 100}%);
+  `}
+
+  ${_mediaQuery.default.desktopOnly`
+    transform: translateX(${props => getTranslateX(mockup.desktop, props.translateXUint)}px);
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    transform: translateX(${props => getTranslateX(mockup.hd, props.translateXUint)}px);
+  `}
+`;
+const SlideFlexItem = _styledComponents.default.div`
+  height: 100%;
+  flex-shrink: 0;
+
+  ${_mediaQuery.default.mobileOnly`
+    flex-basis: calc(${getSlideWidth(mockup.mobile)}/${getContainerWidth(mockup.mobile)}*100%);
+    padding-right: calc(${mockup.mobile.slide.paddingRight}/${getContainerWidth(mockup.mobile)}*100%);
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    flex-basis: calc(${getSlideWidth(mockup.tablet)}/${getContainerWidth(mockup.tablet)}*100%);
+    padding-right: calc(${mockup.tablet.slide.paddingRight}/${getContainerWidth(mockup.tablet)}*100%);
+  `}
+
+
+  ${_mediaQuery.default.desktopOnly`
+    flex-basis: ${getSlideWidth(mockup.desktop)}px;
+    padding-right: ${mockup.desktop.slide.paddingRight}px;
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    flex-basis: ${getSlideWidth(mockup.hd)}px;
+    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.default.mobileOnly`
+    width: ${getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    width: ${getLeftMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100}%;
+  `}
+
+  ${_mediaQuery.default.desktopOnly`
+    width: ${getLeftMaskWidth(mockup.desktop)}px;
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    width: ${getLeftMaskWidth(mockup.hd)}px;
+  `}
 `;
+const RightSlideMask = (0, _styledComponents.default)(SlideMask)`
+  right: 0;
 
-function SlideshowBlock(entity) {
-  var _images$, _images$$resized, _images$2;
+  ${_mediaQuery.default.mobileOnly`
+    width: ${getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
+  `}
 
-  const images = entity.getData();
-  return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
-    src: images === null || images === void 0 ? void 0 : (_images$ = images[0]) === null || _images$ === void 0 ? void 0 : (_images$$resized = _images$.resized) === null || _images$$resized === void 0 ? void 0 : _images$$resized.original,
-    alt: images === null || images === void 0 ? void 0 : (_images$2 = images[0]) === null || _images$2 === void 0 ? void 0 : _images$2.name,
-    onError: e => {
-      var _images$3, _images$3$imageFile;
+  ${_mediaQuery.default.tabletOnly`
+    width: ${getRightMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100}%;
+  `}
 
-      return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$3 = images[0]) === null || _images$3 === void 0 ? void 0 : (_images$3$imageFile = _images$3.imageFile) === null || _images$3$imageFile === void 0 ? void 0 : _images$3$imageFile.url;
+  ${_mediaQuery.default.desktopOnly`
+    width: ${getRightMaskWidth(mockup.desktop)}px;
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    width: ${getRightMaskWidth(mockup.hd)}px;
+  `}
+`;
+const SlideshowFlexBox = _styledComponents.default.div`
+  ${PrevButton} {
+    border-color: #d8d8d8;
+  }
+  ${ImageNumberCircle} {
+    background-color: #d0a67d;
+    &::after {
+      border-color: #fff;
     }
-  }));
-} // 202206 latest version of slideshow, support delay property
+  }
+  ${ImageNumber} {
+    color: #fff;
+  }
+  ${SlideMask} {
+    background-color: #d0a67d;
+  }
 
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  ${_mediaQuery.default.tabletAndBelow`
+    width: 100%;
+  `}
+
+  ${_mediaQuery.default.desktopOnly`
+    width: ${mockup.desktop.container.width}px;
+  `}
+
+  ${_mediaQuery.default.hdOnly`
+    width: ${mockup.hd.container.width}px;
+  `}
+`;
+
+function getTranslateX(deviceMockup, unit) {
+  const slideWidth = getSlideWidth(deviceMockup); // total slides width including padding
+
+  let translateX = unit * slideWidth; // add left mask width and padding
+
+  translateX = translateX + deviceMockup.offset.left;
+  return translateX; // px
+}
+/**
+ * @param {DeviceMockup} deviceMockup
+ * @return {number}
+ */
+
+
+function getContainerWidth(deviceMockup) {
+  return deviceMockup.container.width;
+}
+/**
+ * @param {DeviceMockup} deviceMockup
+ * @return {number}
+ */
+
+
+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 SlideshowBlockV2(entity) {
-  const {
-    images
-  } = entity.getData();
-  const [expandSlideShow, setExpandSlideShow] = (0, _react.useState)(false);
-  const [showLightBox, setShowLightBox] = (0, _react.useState)(false);
-  const [focusImageIndex, setFocusImageIndex] = (0, _react.useState)(0);
-  const imagesRefs = (0, _react.useRef)(Array(images.length).fill(null));
-  (0, _react.useEffect)(() => {
-    const focusedImageRef = imagesRefs === null || imagesRefs === void 0 ? void 0 : imagesRefs.current[focusImageIndex];
 
-    if (focusedImageRef) {
-      focusedImageRef === null || focusedImageRef === void 0 ? void 0 : focusedImageRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      });
+function getRightMaskWidth(deviceMockup) {
+  return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
+}
+
+function SlideshowBlock({
+  className = '',
+  data
+}) {
+  var _images$curSlideIndex;
+
+  const defaultTranslateXUnit = -slidesOffset; // value of curSlideIndex would be in [ 0 ~ props.data.content.length ] range,
+  // it indicates which image should be placed in the center
+
+  const [curSlideIndex, setCurSlideIndex] = (0, _react.useState)(defaultCurIndex);
+  const [slideTo, setSlideTo] = (0, _react.useState)(''); // '', 'previous' or 'next'. '' means no sliding.
+
+  const [translateXUnit, setTranslateXUnit] = (0, _react.useState)(defaultTranslateXUnit);
+  const images = ((data === null || data === void 0 ? void 0 : data.images) || []).filter(img => {
+    var _img$imageFile;
+
+    return img === null || img === void 0 ? void 0 : (_img$imageFile = img.imageFile) === null || _img$imageFile === void 0 ? void 0 : _img$imageFile.url;
+  });
+  const total = images === null || images === void 0 ? void 0 : images.length;
+  const desc = images === null || images === void 0 ? void 0 : (_images$curSlideIndex = images[curSlideIndex]) === null || _images$curSlideIndex === void 0 ? void 0 : _images$curSlideIndex.desc;
+  const appendedClassName = className + ' avoid-break';
+  const slides = (0, _react.useMemo)(() => {
+    // add last `slidesOffset` elements into top of images array.
+    // add first `slidesOffset` elements into bottom of images array.
+    // EX:
+    // slidesOffset: 2
+    // input images: [ a, b, c, d ]
+    // output images: [c, d, a, b, c, d, a, b]
+    const _images = [...images.slice(-slidesOffset), ...images, ...images.slice(defaultCurIndex, slidesOffset)];
+    return _images === null || _images === void 0 ? void 0 : _images.map((img, index) => {
+      var _img$resized, _img$resized2, _img$resized3, _img$resized4;
+
+      const width = img.imageFile.width ?? 0;
+      const height = img.imageFile.height ?? 0;
+      const imgSrc = ((_img$resized = img.resized) === null || _img$resized === void 0 ? void 0 : _img$resized.medium) ?? img.imageFile.url;
+      const imgSrcSetArr = [];
+
+      if ((_img$resized2 = img.resized) !== null && _img$resized2 !== void 0 && _img$resized2.small) {
+        imgSrcSetArr.push(`${img.resized.medium} 600w`);
+      }
+
+      if ((_img$resized3 = img.resized) !== null && _img$resized3 !== void 0 && _img$resized3.medium) {
+        imgSrcSetArr.push(`${img.resized.medium} 1200w`);
+      }
+
+      if ((_img$resized4 = img.resized) !== null && _img$resized4 !== void 0 && _img$resized4.large) {
+        imgSrcSetArr.push(`${img.resized.large} 2000w`);
+      }
+
+      const objectFit = width > height ? 'cover' : 'contain';
+      return (
+        /*#__PURE__*/
+        // since the items of _images would have the same id,
+        // hence, we append `index` on the key
+        _react.default.createElement(SlideFlexItem, {
+          key: `slide_${img.id}_${index}`
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          srcSet: imgSrcSetArr.join(','),
+          src: imgSrc,
+          style: {
+            objectFit,
+            width: '100%'
+          },
+          sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
+        }))
+      );
+    });
+  }, [images]);
+
+  const slideToPrev = () => {
+    setSlideTo('previous');
+    setTranslateXUnit(translateXUnit + 1);
+  };
+
+  const slideToNext = () => {
+    setSlideTo('next');
+    setTranslateXUnit(translateXUnit - 1);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (slideTo === '') {
+      return;
     }
-  }, [focusImageIndex]);
-  const shouldMaskSlideShow = Boolean(images.length > 9 && !expandSlideShow);
-  const shouldLimitFigureHeight = Boolean(images.length > 1);
-  const slideShowImages = images.map((image, index) => {
-    const {
-      id,
-      resized,
-      desc,
-      name
-    } = image;
-    return /*#__PURE__*/_react.default.createElement(SlideShowImage, {
-      className: "slideshow-image",
-      key: id,
-      onClick: () => {
-        setShowLightBox(!showLightBox);
-        setFocusImageIndex(index);
+
+    let _curSlideIndex;
+
+    if (slideTo === 'previous') {
+      _curSlideIndex = curSlideIndex - 1;
+
+      if (_curSlideIndex < defaultCurIndex) {
+        _curSlideIndex = total + _curSlideIndex;
       }
-    }, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
-      images: resized,
-      defaultImage: defaultImage,
-      alt: name,
-      rwd: {
-        mobile: '100vw',
-        tablet: '608px',
-        desktop: '960px',
-        default: '100%'
-      },
-      priority: true
-    }), desc && /*#__PURE__*/_react.default.createElement(FigCaption, null, desc));
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SlideShowBlockWrapper, {
-    onClick: () => setExpandSlideShow(!expandSlideShow),
-    expandSlideShow: expandSlideShow,
-    shouldLimitFigureHeight: shouldLimitFigureHeight
-  }, slideShowImages, shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(GradientMask, null)), shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(ExpandText, {
-    className: "slideshow-expand-text",
-    onClick: () => setExpandSlideShow(!expandSlideShow)
-  }, "\u5C55\u958B\u6240\u6709\u5716\u7247"), showLightBox && /*#__PURE__*/_react.default.createElement(_slideshowLightbox.default, {
-    focusImageIndex: focusImageIndex,
-    images: images,
-    setShowLightBox: setShowLightBox,
-    setFocusImageIndex: setFocusImageIndex,
-    imagesRefs: imagesRefs
+    } else if (slideTo === 'next') {
+      _curSlideIndex = curSlideIndex + 1;
+
+      if (_curSlideIndex >= total) {
+        _curSlideIndex = _curSlideIndex % total;
+      }
+    }
+
+    setTimeout(() => {
+      setSlideTo('');
+      setCurSlideIndex(_curSlideIndex);
+      setTranslateXUnit(defaultTranslateXUnit - _curSlideIndex);
+    }, duration * 2);
+  }, [slideTo, curSlideIndex, translateXUnit]);
+  const isSliding = slideTo !== '';
+  return /*#__PURE__*/_react.default.createElement(SlideshowFlexBox, {
+    className: appendedClassName
+  }, /*#__PURE__*/_react.default.createElement(SlidesSection, null, /*#__PURE__*/_react.default.createElement(SlidesFlexBox, {
+    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, {
+    onClick: isSliding ? undefined : slideToPrev
+  }, /*#__PURE__*/_react.default.createElement(PreArrowSvg, null)), /*#__PURE__*/_react.default.createElement(NextButton, {
+    onClick: isSliding ? undefined : slideToNext
+  }, /*#__PURE__*/_react.default.createElement(NextArrowSvg, null))), /*#__PURE__*/_react.default.createElement(ImageNumberCircle, null, /*#__PURE__*/_react.default.createElement(ImageNumber, null, curSlideIndex + 1), /*#__PURE__*/_react.default.createElement(ImageTotal, null, total)), desc ? /*#__PURE__*/_react.default.createElement(Desc, null, desc) : /*#__PURE__*/_react.default.createElement(EmptyDesc, null));
+}
+
+function NextArrowSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 31 17",
+    width: "31",
+    height: "17",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M29.33 7.854H0v1h29.256l-7.11 7.148.708.705 8-8.042-.001-.707-8-7.958-.706.709 7.183 7.145z",
+    fill: "gray",
+    fillRule: "nonzero"
+  }));
+}
+
+function PreArrowSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 31 17",
+    width: "31",
+    height: "17",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.17 8.5H31.5v1H2.244l7.11 7.147-.708.706-8-8.042.001-.707 8-7.958.706.708L2.17 8.5z",
+    fill: "gray"
+  }));
+}
+
+const ArticleBodyContainer = _styledComponents.default.div`
+  width: fit-content;
+  margin: 0 auto 27px auto;
+`;
+
+function SlideshowInArticleBody({
+  className = '',
+  data
+}) {
+  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(SlideshowBlock, {
+    data: data
   }));
 }