ikoncomponents 1.4.8 → 1.4.9

package/templates/default/ikoncomponents/big-calendar/big-calender-toolbar/index.tsx

@@ -0,0 +1,81 @@
+import { Views } from "react-big-calendar";
+import { Fragment, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../../../ikonShade/toggle-group";
+import { BigCalenderToolbarProps } from "../type";
+
+// Custom toolbar component
+export default function BigCalenderToolbar({ onNavigate, onView, label, extraTools, view }: BigCalenderToolbarProps) {
+    const [calViewsValue, setValue] = useState(view === Views.DAY ? "DAY" : view === Views.WEEK ? "WEEK" : "MONTH");
+    return (
+        <>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-3">
+                <ToggleGroup type="single" variant='outline' onValueChange={(value: string) => {
+                    switch (value) {
+                        case "PREV":
+                            onNavigate("PREV");
+                            break;
+                        case "NEXT":
+                            onNavigate("NEXT");
+                            break;
+                        case "TODAY":
+                            onNavigate("TODAY");
+                            break;
+                        default:
+                            break;
+                    }
+                }}>
+                    <ToggleGroupItem className="rounded-e-none" value="PREV">
+                        <ChevronLeft size={16} />
+                    </ToggleGroupItem>
+                    <ToggleGroupItem className="rounded-none border-x" value="NEXT">
+                        <ChevronRight size={16} />
+                    </ToggleGroupItem>
+                    <ToggleGroupItem className="rounded-s-none" value="TODAY">
+                        Today
+                    </ToggleGroupItem>
+                </ToggleGroup>
+                <span className="rbc-toolbar-label">
+                    {label}
+                </span>
+                <div className="flex flex-row gap-2">
+
+                    <ToggleGroup type="single" variant='outline' value={calViewsValue} onValueChange={(value: string) => {
+                        setValue(value);
+                        switch (value) {
+                            case "DAY":
+                                onView(Views.DAY);
+                                break;
+                            case "WEEK":
+                                onView(Views.WEEK);
+                                break;
+                            case "MONTH":
+                                onView(Views.MONTH);
+                                break;
+                            default:
+                                break;
+                        }
+                    }}>
+                        <ToggleGroupItem className='rounded-e-none' value="MONTH">
+                            Month
+                        </ToggleGroupItem>
+                        <ToggleGroupItem className='rounded-none border-x-0' value="WEEK">
+                            Week
+                        </ToggleGroupItem>
+                        <ToggleGroupItem className="rounded-s-none" value="DAY">
+                            Day
+                        </ToggleGroupItem>
+                    </ToggleGroup>
+
+                    {
+                        extraTools?.map((tool, index: number) =>
+                            <Fragment key={index}>
+                                {tool}
+                            </Fragment>
+                        )
+                    }
+                </div>
+            </div>
+        </>
+    );
+}