fix(ui): events story slider

lies-exposed · Oct 2, 2023 · b88d5be · b88d5be
1 parent b7e0be8
commit b88d5be
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 55 deletions.
diff --git a/packages/@liexp/ui/src/components/Modal/EventSliderModal.tsx b/packages/@liexp/ui/src/components/Modal/EventSliderModal.tsx
@@ -11,7 +11,7 @@ import { styled, useTheme } from "../../theme";
 import QueriesRenderer from "../QueriesRenderer";
 import EventsAppBar from "../events/filters/EventsAppBar";
 import { Box, CloseIcon, IconButton, Modal } from "../mui";
-import { EventSlider, type EventSliderProps } from "../sliders/EventSlider";
+import { EventSlider, type EventSliderProps } from "../sliders/EventsStorySlider";
 
 const EVENT_SLIDER_MODAL_PREFIX = "event-slider-modal";
 

diff --git a/packages/@liexp/ui/src/components/sliders/EventSliderItem.tsx b/packages/@liexp/ui/src/components/sliders/EventSliderItem.tsx
@@ -55,9 +55,10 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   [`&.${classes.root}`]: {
     display: "flex",
     flexDirection: "column",
-    paddingRight: theme.spacing(3),
-    paddingLeft: theme.spacing(3),
-    width: "100%",
+    background: "orange",
+    padding: theme.spacing(3),
+    width: 600,
+    margin: 'auto',
     height: "100%",
   },
   [`& .${classes.title}`]: {
@@ -101,15 +102,7 @@ export const EventSliderItemBase: React.FC<EventSliderItemBaseProps> = ({
   ...props
 }) => {
   return (
-    <StyledGrid
-      item
-      className={classes.root}
-      lg={10}
-      md={12}
-      sm={12}
-      xs={12}
-      style={{ maxWidth: "100%", width: "100%" }}
-    >
+    <StyledGrid item className={classes.root} lg={10} md={12} sm={12} xs={12}>
       <Grid item>
         <Box className={classes.title}>
           <EventIcon className={classes.eventIcon} type={type} size="2x" />
@@ -237,13 +230,16 @@ const EventSliderItem: React.FC<EventSliderItemProps> = ({
 }) => {
   switch (e.type) {
     case http.Events.EventTypes.QUOTE.value: {
-      const quote = e.payload.subject.type === 'Actor' ? {
-        actors: [e.payload.subject.id],
-        groups: []
-      }: {
-        groups: [e.payload.subject.id],
-        actors: []
-      }
+      const quote =
+        e.payload.subject.type === "Actor"
+          ? {
+              actors: [e.payload.subject.id],
+              groups: [],
+            }
+          : {
+              groups: [e.payload.subject.id],
+              actors: [],
+            };
       return (
         <EventSliderItemBase
           {...props}

diff --git a/...ui/src/components/sliders/EventSlider.tsx → .../components/sliders/EventsStorySlider.tsx b/...ui/src/components/sliders/EventSlider.tsx → .../components/sliders/EventsStorySlider.tsx
@@ -1,10 +1,11 @@
 import { type Events } from "@liexp/shared/lib/io/http";
 import { type EventTotals } from "@liexp/shared/lib/io/http/Events/SearchEventsQuery";
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import { clsx } from "clsx";
 import * as React from "react";
 import { styled } from "../../theme";
-import { Slider, type SliderProps } from "../Common/Slider/Slider";
-import { Box } from "../mui";
+import { type SliderProps } from "../Common/Slider/Slider";
+import { Box, Grid, IconButton } from "../mui";
 import EventSliderItem, {
   type EventSliderItemBaseProps,
 } from "./EventSliderItem";
@@ -14,7 +15,6 @@ const EVENT_SLIDER_PREFIX = "event-slider";
 const classes = {
   root: `${EVENT_SLIDER_PREFIX}-root`,
   sliderWrapper: `${EVENT_SLIDER_PREFIX}-slider-wrapper`,
-  slider: `${EVENT_SLIDER_PREFIX}-slider`,
   sliderItem: `${EVENT_SLIDER_PREFIX}-slider-item`,
 };
 
@@ -26,31 +26,31 @@ const StyledBox = styled(Box)(({ theme }) => ({
   },
   [`& .${classes.sliderWrapper}`]: {
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     height: "100%",
     marginRight: 20,
     marginLeft: 20,
-    [`& .${classes.slider}`]: {
-      marginBottom: 25,
-      "& .slick-list": {
-        height: "100%",
-      },
-      "& .slick-prev": {
-        left: -20,
-      },
-      ".slick-prev:before": {
+
+    marginBottom: 25,
+    "& .slick-list": {
+      height: "100%",
+    },
+    "& .prev": {
+      display: "flex",
+      alignItems: "center",
+    },
+    ".prev:before": {
+      color: theme.palette.common.black,
+    },
+    "& .next": {
+      display: "flex",
+      "&.next:before": {
         color: theme.palette.common.black,
       },
-      "& .slick-next": {
-        // right: 0,
-        "&.slick-next:before": {
-          color: theme.palette.common.black,
-        },
-      },
+    },
 
-      [`& .${classes.sliderItem}`]: {
-        maxHeight: 400,
-      },
+    [`& .${classes.sliderItem}`]: {
+      maxHeight: 400,
     },
   },
 }));
@@ -74,19 +74,32 @@ export const EventSlider: React.FC<EventSliderProps> = ({
   className,
   ...props
 }) => {
+  const [currentIndex, setCurrentEvent] = React.useState(0);
+  const handleCurrentIndex = (i: number): void => {
+    let newIndex = currentIndex + i;
+    if (newIndex < 0) {
+      newIndex = 0;
+    } else if (newIndex > events.length) {
+      newIndex = events.length;
+    }
+
+    setCurrentEvent(newIndex);
+  };
+
   return (
     <StyledBox className={clsx(classes.root, className)}>
-      <Box className={classes.sliderWrapper}>
-        <Slider
-          adaptiveHeight={false}
-          infinite={false}
-          arrows={true}
-          draggable={false}
-          dots={true}
-          {...slider}
-          className={clsx(classes.slider, slider?.className)}
-        >
-          {events.map((e, index) => {
+      <Grid className={classes.sliderWrapper}>
+        <Grid item className="prev">
+          <IconButton
+            onClick={() => {
+              handleCurrentIndex(-1);
+            }}
+          >
+            <ArrowLeft fontSize="small" />
+          </IconButton>
+        </Grid>
+        <Grid item md={9} style={{ background: "green" }}>
+          {[events[currentIndex]].map((e, index) => {
             return (
               <EventSliderItem
                 key={e.id}
@@ -97,8 +110,17 @@ export const EventSlider: React.FC<EventSliderProps> = ({
               />
             );
           })}
-        </Slider>
-      </Box>
+        </Grid>
+        <Grid item className="next">
+          <IconButton
+            onClick={() => {
+              handleCurrentIndex(1);
+            }}
+          >
+            <ArrowRight fontSize="small" />
+          </IconButton>
+        </Grid>
+      </Grid>
     </StyledBox>
   );
 };