next-helios-fe 1.8.24 → 1.8.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.24",
+  "version": "1.8.25",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/calendar/big-calendar/event.tsx

@@ -3,8 +3,13 @@ import React from "react";
 import { Form } from "../../../components";
 
 export interface EventProps {
-  title: string;
-  eventList: any[];
+  title?: string;
+  eventList: {
+    id: number | string;
+    title: string;
+    color?: string;
+    [key: string]: any;
+  }[];
   hiddenEvent: any[];
   setHiddenEvent: (event: any) => void;
 }
@@ -38,7 +43,7 @@ export const Event: React.FC<EventProps> = ({
   return (
     eventList.length !== 0 && (
       <div className="flex-1 flex flex-col gap-4 h-full px-6 py-6 overflow-hidden">
-        <span className="text-lg">{title || "Event Filter"}</span>
+        <span className="text-lg">{title || "Event List"}</span>
         <div className="flex flex-col gap-2 h-full overflow-auto">
           {eventArr}
         </div>

package/src/components/calendar/big-calendar/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import { Toolbar } from "./toolbar";
-import { Event, type EventProps } from "./event";
+import { Event } from "./event";
 import { Calendar as Bc, dayjsLocalizer } from "react-big-calendar";
 import dayjs from "dayjs";
 import "../../../styles";
@@ -9,23 +9,34 @@ import "../../../styles";
 const localizer = dayjsLocalizer(dayjs);
 
 interface BigCalendarProps {
-  eventList: any[];
-  setEventList: (event: any) => void;
-  hiddenEvent: any[];
+  title?: string;
+  options?: {
+    eventListFilter?: boolean;
+  };
+  eventList: {
+    id: number | string;
+    title: string;
+    start: Date;
+    end: Date;
+    desc?: string;
+    allDay?: boolean;
+    color?: string;
+    [key: string]: any;
+  }[];
+  sideBarComponent?: React.ReactNode;
   onSelectEvent?: (event: any) => void;
 }
 
-interface BigCalendarComponent extends React.FC<BigCalendarProps> {
-  Event: React.FC<EventProps>;
-}
-
-export const BigCalendar: BigCalendarComponent = ({
+export const BigCalendar: React.FC<BigCalendarProps> = ({
+  title,
+  options,
   eventList,
-  setEventList,
-  hiddenEvent,
+  sideBarComponent,
   onSelectEvent,
 }) => {
   const [active, setActive] = useState<string>("month");
+  const [modifiedEventList, setModifiedEventList] = useState<any[]>([]);
+  const [hiddenEvent, setHiddenEvent] = useState<any[]>([]);
 
   const colorList = [
     { id: 1, label: "Blue", value: "#2196f3" },
@@ -40,21 +51,19 @@ export const BigCalendar: BigCalendarComponent = ({
   ];
 
   useEffect(() => {
-    const tempEvent = eventList;
+    const tempEvent = eventList.map((item) => {
+      return {
+        ...item,
+        color: colorList[Math.floor(Math.random() * colorList.length)].value,
+      };
+    });
 
-    setEventList(
-      tempEvent?.map((item) => {
-        return {
-          ...item,
-          color: colorList[Math.floor(Math.random() * colorList.length)].value,
-        };
-      })
-    );
-  }, []);
+    setModifiedEventList(tempEvent);
+  }, [eventList]);
 
   const eventPropGetter = (item: any) => {
     var custStyle = {
-      backgroundColor: item.color,
+      backgroundColor: item.color || "var(--color-primary)",
       opacity: 0.8,
       color: "white",
     };
@@ -64,39 +73,54 @@ export const BigCalendar: BigCalendarComponent = ({
   };
 
   return (
-    <div className="flex-1 overflow-hidden">
-      <Bc
-        localizer={localizer}
-        events={eventList.filter((item) => {
-          return !hiddenEvent.includes(item.id);
-        })}
-        startAccessor="start"
-        endAccessor="end"
-        components={{
-          toolbar: (toolbar: any) => {
-            return (
-              <Toolbar
-                toolbar={toolbar}
-                active={active}
-                setActive={setActive}
-              />
-            );
-          },
-        }}
-        onView={(view) => {
-          setActive(view);
-        }}
-        // onRangeChange={(range) => console.log(range)}
-        popup
-        tooltipAccessor={(event) => event.desc}
-        eventPropGetter={eventPropGetter}
-        // selected={selected}
-        onSelectEvent={(event) => {
-          onSelectEvent && onSelectEvent(event);
-        }}
-      />
+    <div className="flex w-full h-full lg:divide-x">
+      {(sideBarComponent || options?.eventListFilter) && (
+        <div className="hidden lg:flex flex-col w-72 h-full divide-y">
+          {sideBarComponent}
+          {options?.eventListFilter && (
+            <Event
+              title={title}
+              eventList={modifiedEventList}
+              hiddenEvent={hiddenEvent}
+              setHiddenEvent={(item) => {
+                setHiddenEvent(item);
+              }}
+            />
+          )}
+        </div>
+      )}
+      <div className="flex-1 overflow-hidden">
+        <Bc
+          localizer={localizer}
+          events={modifiedEventList.filter((item) => {
+            return !hiddenEvent.includes(item.id);
+          })}
+          startAccessor="start"
+          endAccessor="end"
+          components={{
+            toolbar: (toolbar: any) => {
+              return (
+                <Toolbar
+                  toolbar={toolbar}
+                  active={active}
+                  setActive={setActive}
+                />
+              );
+            },
+          }}
+          onView={(view: any) => {
+            setActive(view);
+          }}
+          // onRangeChange={(range) => console.log(range)}
+          popup
+          tooltipAccessor={(event: any) => event.desc}
+          eventPropGetter={eventPropGetter}
+          // selected={selected}
+          onSelectEvent={(event: any) => {
+            onSelectEvent && onSelectEvent(event);
+          }}
+        />
+      </div>
     </div>
   );
 };
-
-BigCalendar.Event = Event;