fix(ui): events story slider

lies-exposed · Oct 3, 2023 · 316f188 · 316f188
1 parent 3b3af04
commit 316f188
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 64 deletions.
diff --git a/packages/@liexp/ui/src/components/Modal/EventSliderModal.tsx b/packages/@liexp/ui/src/components/Modal/EventSliderModal.tsx
@@ -8,10 +8,13 @@ import {
   type SearchEventsQueryInputNoPagination,
 } from "../../state/queries/SearchEventsQuery";
 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 QueriesRenderer from "../QueriesRenderer";
+import {
+  EventSlider,
+  type EventSliderProps,
+} from "../sliders/EventsStorySlider";
 
 const EVENT_SLIDER_MODAL_PREFIX = "event-slider-modal";
 
@@ -64,7 +67,10 @@ const StyledModal = styled(Modal)(({ theme }) => ({
 }));
 
 export interface EventSliderModalProps
-  extends Omit<EventSliderProps, "events" | "open" | "totals" | "onClose"> {
+  extends Omit<
+    EventSliderProps,
+    "events" | "open" | "totals" | "onClose" | "slide" | "onSlideChange"
+  > {
   query: SearchEventsQueryInputNoPagination;
   open?: boolean;
   onQueryChange: (q: SearchEventsQueryInputNoPagination) => void;
@@ -197,13 +203,11 @@ const EventSliderModal: React.FC<EventSliderModalProps> = ({
                   <Box className={clsx(classes.eventsSlider)}>
                     <EventSlider
                       {...props}
+                      slide={current}
                       events={eventsChunk}
                       totals={totals}
-                      slider={{
-                        dots: false,
-                        beforeChange: (c, n) => {
-                          handleBeforeSlide(n, totals);
-                        },
+                      onSlideChange={(n) => {
+                        handleBeforeSlide(n, totals);
                       }}
                     />
                   </Box>

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,10 @@
 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 { Box, Grid, IconButton } from "../mui";
 import EventSliderItem, {
   type EventSliderItemBaseProps,
 } from "./EventSliderItem";
@@ -14,7 +14,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 +25,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,
     },
   },
 }));
@@ -60,33 +59,39 @@ export interface EventSliderProps
     "onActorClick" | "onGroupClick" | "onGroupMemberClick" | "onKeywordClick"
   > {
   className?: string;
+  slide: number;
   events: Events.SearchEvent.SearchEvent[];
   totals: EventTotals;
   onClick: (e: Events.SearchEvent.SearchEvent) => void;
-  slider?: Partial<SliderProps>;
+  onSlideChange: (nextSlide: number) => void;
 }
 
 export const EventSlider: React.FC<EventSliderProps> = ({
+  slide: currentSlide,
   onClick,
   events,
   totals,
-  slider,
   className,
+  onSlideChange,
   ...props
 }) => {
+
+
+
   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={() => {
+              onSlideChange(currentSlide - 1);
+            }}
+          >
+            <ArrowLeft fontSize="small" />
+          </IconButton>
+        </Grid>
+        <Grid item md={9} style={{ background: "green" }}>
+          {[events[currentSlide]].map((e, index) => {
             return (
               <EventSliderItem
                 key={e.id}
@@ -97,8 +102,17 @@ export const EventSlider: React.FC<EventSliderProps> = ({
               />
             );
           })}
-        </Slider>
-      </Box>
+        </Grid>
+        <Grid item className="next">
+          <IconButton
+            onClick={() => {
+              onSlideChange(currentSlide + 1);
+            }}
+          >
+            <ArrowRight fontSize="small" />
+          </IconButton>
+        </Grid>
+      </Grid>
     </StyledBox>
   );
 };