@soul-refiner/design-system 1.7.10 → 1.7.11

package/dist/components/surfaces/post/post.js

@@ -7,11 +7,73 @@ import { TimeAgo } from '../../atoms/time_ago/time_ago';
 import { Button } from '../../actions/button';
 import { Avatar } from '../../iconography/avatar';
 import { Lock } from '../../../icons';
+import { Modal } from '../modal';
+import { ChevronLeft, ChevronRight } from '../../../icons/arrow';
 export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
     const componentId = React.useId();
+    const [curr, setCurr] = React.useState(-1);
+    const [modalContentSize, setModalContentSize] = React.useState({
+        x: '30vw',
+        y: '30vh',
+    });
+    React.useEffect(() => {
+        const handleKeyEvent = (event) => {
+            if (event.key === 'ArrowLeft') {
+                handleDecrement();
+            }
+            else if (event.key === 'ArrowRight') {
+                handleIncrement();
+            }
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener('keydown', handleKeyEvent);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyEvent);
+        };
+    }, []);
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
+    const handleImageLoad = (event) => {
+        const { naturalHeight, naturalWidth } = event.target;
+        setModalContentSize({
+            x: `${naturalWidth}px`,
+            y: `${naturalHeight}px`,
+        });
+    };
+    const handleIncrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== images.length - 1) {
+                return prev + 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const handleDecrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== 0) {
+                return prev - 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
     return (React.createElement(Wrapper, { id: id },
+        curr > -1 && !!images?.[curr] && (React.createElement(Modal, { controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+            React.createElement(Modal.Content, { sx: `
+            position: relative; 
+            height: ${modalContentSize.y}; 
+            width: ${modalContentSize.x};
+            margin: 0 auto;
+            ` },
+                React.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
+                    React.createElement(ChevronLeft, { color: "white", size: 48 })),
+                React.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'contain' } }),
+                React.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
+                    React.createElement(ChevronRight, { color: "white", size: 48 }))))),
         React.createElement(Header, null,
             React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
                     React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
@@ -20,7 +82,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
         !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
             images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
-                React.createElement(Image, { alt: "", fill: true, quality: 100, src: url })))),
+                React.createElement(Image, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
             images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
                 "+",
                 images.length - 4)))),
@@ -127,3 +189,22 @@ const CommentWrapper = styled.div `
   flex-flow: column nowrap;
   gap: 24px;
 `;
+const NavArrow = styled.button `
+  width: 48px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 100;
+  top: calc(50vh - 75px);
+  background-color: rgba(0, 0, 0, 0.5);
+  ${({ $side }) => $side}: 0;
+  border-radius: ${({ $side }) => $side === 'left' ? '0 12px 12px 0' : '12px 0 0 12px'};
+  ${({ $visible }) => $visible
+    ? 'visibility: visible; cursor: pointer;'
+    : 'visibility: hidden; pointer-events: none;'}
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {