@isma91/react-scheduler 4.0.0

package/src/lib/components/inputs/SelectInput.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  FormControl,
+  FormHelperText,
+  MenuItem,
+  Checkbox,
+  useTheme,
+  Chip,
+  Typography,
+  CircularProgress,
+  InputLabel,
+  Select,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import useStore from "../../hooks/useStore";
+
+export type SelectOption = {
+  id: string | number;
+  text: string;
+  value: any;
+};
+interface EditorSelectProps {
+  options: Array<SelectOption>;
+  value: string;
+  name: string;
+  onChange(name: string, value: string, isValid: boolean): void;
+  variant?: "standard" | "filled" | "outlined";
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  touched?: boolean;
+  loading?: boolean;
+  multiple?: "default" | "chips";
+  errMsg?: string;
+}
+
+const EditorSelect = ({
+  options,
+  value,
+  name,
+  required,
+  onChange,
+  label,
+  disabled,
+  touched,
+  variant = "outlined",
+  loading,
+  multiple,
+  placeholder,
+  errMsg,
+}: EditorSelectProps) => {
+  const theme = useTheme();
+  const { translations } = useStore();
+  const [state, setState] = useState({
+    touched: false,
+    valid: !!value,
+    errorMsg: errMsg
+      ? errMsg
+      : required
+        ? translations?.validation?.required || "Required"
+        : undefined,
+  });
+  const handleTouched = useCallback(() => {
+    if (!state.touched) {
+      setState((prev) => {
+        return { ...prev, touched: true, errorMsg: errMsg || prev.errorMsg };
+      });
+    }
+  }, [errMsg, state.touched]);
+  const handleChange = useCallback(
+    (value: string | any) => {
+      const val = value;
+      let isValid = true;
+      let errorMsg = errMsg;
+      if (required && (multiple ? !val.length : !val)) {
+        isValid = false;
+        errorMsg = errMsg || translations?.validation?.required || "Required";
+      }
+      setState((prev) => {
+        return { ...prev, touched: true, valid: isValid, errorMsg: errorMsg };
+      });
+      onChange(name, val, isValid);
+    },
+    [errMsg, multiple, name, onChange, required, translations?.validation?.required]
+  );
+
+  useEffect(() => {
+    if (touched) {
+      handleChange(value);
+    }
+  }, [handleChange, touched, value]);
+  return (
+    <>
+      <FormControl
+        variant={variant || "outlined"}
+        fullWidth
+        error={required && state.touched && !state.valid}
+        // style={{ minWidth: 230 }}
+        disabled={disabled}
+      >
+        {label && (
+          <InputLabel id={`input_${name}`}>
+            <Typography variant="body2">{`${label} ${required ? "*" : ""}`}</Typography>
+          </InputLabel>
+        )}
+        <Select
+          label={label}
+          labelId={`input_${name}`}
+          value={value}
+          onBlur={handleTouched}
+          onChange={(e) => handleChange(e.target.value)}
+          IconComponent={loading ? () => <CircularProgress size={5} /> : ExpandMoreIcon}
+          multiple={!!multiple}
+          classes={{
+            select: multiple === "chips" ? "flex__wrap" : undefined,
+          }}
+          renderValue={(selected: string | Array<any> | any) => {
+            if (!selected || selected.length === 0) {
+              return <em>{label}</em>;
+            }
+            const text = [];
+            if (multiple) {
+              for (const opt of options) {
+                if (selected.includes(opt.value)) {
+                  text.push([opt.text]);
+                }
+              }
+              if (multiple === "chips") {
+                return text.map((t, i) => (
+                  <Chip key={`${t}_${i}`} label={t} style={{ margin: "0 2px" }} color="primary" />
+                ));
+              } else {
+                return text.join(",");
+              }
+            } else {
+              for (const opt of options) {
+                if (selected === opt.value) text.push([opt.text]);
+              }
+              return text.join(",");
+            }
+          }}
+        >
+          {placeholder && (
+            <MenuItem value="">
+              <em>{placeholder}</em>
+            </MenuItem>
+          )}
+          {options.map((op) => (
+            <MenuItem value={op.value} key={op.id || op.value}>
+              {multiple && <Checkbox checked={value.indexOf(op.value) > -1} color="primary" />}
+              {op.text}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormHelperText style={{ color: theme.palette.error.main }}>
+        {state.touched && !state.valid && state.errorMsg}
+      </FormHelperText>
+    </>
+  );
+};
+
+export { EditorSelect };

package/src/lib/components/month/MonthTable.tsx

@@ -0,0 +1,207 @@
+import { Avatar, Typography, useTheme } from "@mui/material";
+import {
+  addDays,
+  endOfDay,
+  format,
+  isSameDay,
+  isSameMonth,
+  isWithinInterval,
+  setHours,
+  startOfDay,
+  startOfMonth,
+} from "date-fns";
+import { Fragment, useCallback } from "react";
+import {
+  getHourFormat,
+  getRecurrencesForDate,
+  getResourcedEvents,
+  isTimeZonedToday,
+  sortEventsByTheEarliest,
+} from "../../helpers/generals";
+import useStore from "../../hooks/useStore";
+import useSyncScroll from "../../hooks/useSyncScroll";
+import { TableGrid } from "../../styles/styles";
+import { DefaultResource } from "../../types";
+import Cell from "../common/Cell";
+import MonthEvents from "../events/MonthEvents";
+
+type Props = {
+  daysList: Date[];
+  resource?: DefaultResource;
+  eachWeekStart: Date[];
+};
+
+const MonthTable = ({ daysList, resource, eachWeekStart }: Props) => {
+  const {
+    height,
+    month,
+    selectedDate,
+    events,
+    handleGotoDay,
+    resourceFields,
+    fields,
+    locale,
+    hourFormat,
+    stickyNavigation,
+    timeZone,
+    onClickMore,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+  } = useStore();
+  const { weekDays, startHour, endHour, cellRenderer, headRenderer, disableGoToDay } = month!;
+  const { headersRef, bodyRef } = useSyncScroll();
+
+  const theme = useTheme();
+  const monthStart = startOfMonth(selectedDate);
+  const hFormat = getHourFormat(hourFormat);
+  const CELL_HEIGHT = height / eachWeekStart.length;
+
+  const renderCells = useCallback(
+    (resource?: DefaultResource) => {
+      let resourcedEvents = sortEventsByTheEarliest(events);
+      if (resource) {
+        resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
+      }
+      const rows: React.ReactNode[] = [];
+
+      for (const startDay of eachWeekStart) {
+        const cells = weekDays.map((d) => {
+          const today = addDays(startDay, d);
+          const start = new Date(`${format(setHours(today, startHour), `yyyy/MM/dd ${hFormat}`)}`);
+          const end = new Date(`${format(setHours(today, endHour), `yyyy/MM/dd ${hFormat}`)}`);
+          const field = resourceFields.idField;
+          const eachFirstDayInCalcRow = isSameDay(startDay, today) ? today : null;
+          const todayEvents = resourcedEvents
+            .flatMap((e) => getRecurrencesForDate(e, today))
+            .filter((e) => {
+              if (isSameDay(e.start, today)) return true;
+              const dayInterval = { start: startOfDay(e.start), end: endOfDay(e.end) };
+              if (eachFirstDayInCalcRow && isWithinInterval(eachFirstDayInCalcRow, dayInterval))
+                return true;
+              return false;
+            });
+          const isToday = isTimeZonedToday({ dateLeft: today, timeZone });
+          return (
+            <span style={{ height: CELL_HEIGHT }} key={d.toString()} className="rs__cell">
+              <Cell
+                start={start}
+                end={end}
+                day={selectedDate}
+                height={CELL_HEIGHT}
+                resourceKey={field}
+                resourceVal={resource ? resource[field] : null}
+                cellRenderer={cellRenderer}
+              />
+              <Fragment>
+                {typeof headRenderer === "function" ? (
+                  <div style={{ position: "absolute", top: 0 }}>
+                    {headRenderer({ day: today, events: resourcedEvents, resource })}
+                  </div>
+                ) : (
+                  <Avatar
+                    style={{
+                      width: 27,
+                      height: 27,
+                      position: "absolute",
+                      top: 0,
+                      background: isToday ? theme.palette.secondary.main : "transparent",
+                      color: isToday ? theme.palette.secondary.contrastText : "",
+                      marginBottom: 2,
+                    }}
+                  >
+                    <Typography
+                      color={!isSameMonth(today, monthStart) ? "#ccc" : "textPrimary"}
+                      className={!disableGoToDay ? "rs__hover__op" : ""}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (!disableGoToDay) {
+                          handleGotoDay(today);
+                        }
+                      }}
+                    >
+                      {format(today, "dd")}
+                    </Typography>
+                  </Avatar>
+                )}
+
+                <MonthEvents
+                  events={todayEvents}
+                  resourceId={resource?.[field]}
+                  today={today}
+                  eachWeekStart={eachWeekStart}
+                  eachFirstDayInCalcRow={eachFirstDayInCalcRow}
+                  daysList={daysList}
+                  onViewMore={(e) => {
+                    if (onClickMore && typeof onClickMore === "function") {
+                      onClickMore(e, handleGotoDay);
+                    } else {
+                      handleGotoDay(e);
+                    }
+                  }}
+                  cellHeight={CELL_HEIGHT}
+                />
+              </Fragment>
+            </span>
+          );
+        });
+
+        rows.push(<Fragment key={startDay.toString()}>{cells}</Fragment>);
+      }
+      return rows;
+    },
+    [
+      CELL_HEIGHT,
+      cellRenderer,
+      daysList,
+      disableGoToDay,
+      eachWeekStart,
+      endHour,
+      events,
+      fields,
+      hFormat,
+      handleGotoDay,
+      headRenderer,
+      monthStart,
+      onClickMore,
+      resourceFields,
+      selectedDate,
+      startHour,
+      theme.palette.secondary.contrastText,
+      theme.palette.secondary.main,
+      timeZone,
+      weekDays,
+    ]
+  );
+
+  return (
+    <>
+      {/* Header Days */}
+      <TableGrid
+        days={daysList.length}
+        ref={headersRef}
+        indent="0"
+        sticky="1"
+        stickyNavigation={stickyNavigation}
+        stickyOffset={stickyNavigationOffset}
+        stickyHeight={stickyNavigationHeight}
+      >
+        {daysList.map((date, i) => (
+          <Typography
+            key={i}
+            className="rs__cell rs__header rs__header__center"
+            align="center"
+            variant="body2"
+          >
+            {format(date, "EE", { locale })}
+          </Typography>
+        ))}
+      </TableGrid>
+      {/* Time Cells */}
+      <TableGrid days={daysList.length} ref={bodyRef} indent="0">
+        {renderCells(resource)}
+      </TableGrid>
+    </>
+  );
+};
+
+export default MonthTable;

package/src/lib/components/nav/DayDateBtn.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import DateProvider from "../hoc/DateProvider";
+import { DateCalendar } from "@mui/x-date-pickers";
+import { Button, Popover } from "@mui/material";
+import { format, addDays } from "date-fns";
+import { LocaleArrow } from "../common/LocaleArrow";
+import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
+
+interface DayDateBtnProps {
+  selectedDate: Date;
+  onChange(value: Date): void;
+}
+
+const DayDateBtn = ({ selectedDate, onChange }: DayDateBtnProps) => {
+  const { locale, navigationPickerProps } = useStore();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { prevDisabled, nextDisabled } = useArrowDisable();
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleChange = (e: Date | null) => {
+    onChange(e || new Date());
+    handleClose();
+  };
+
+  const handlePrev = () => {
+    const prevDay = addDays(selectedDate, -1);
+    onChange(prevDay);
+  };
+
+  const handleNext = () => {
+    const nexDay = addDays(selectedDate, 1);
+    onChange(nexDay);
+  };
+
+  return (
+    <>
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous day"
+      />
+      <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected date">
+        {format(selectedDate, "dd MMMM yyyy", { locale })}
+      </Button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <DateProvider>
+          <DateCalendar
+            {...navigationPickerProps}
+            openTo="day"
+            views={["month", "day"]}
+            value={selectedDate}
+            onChange={handleChange}
+          />
+        </DateProvider>
+      </Popover>
+      <LocaleArrow type="next" onClick={handleNext} disabled={nextDisabled} aria-label="next day" />
+    </>
+  );
+};
+
+export { DayDateBtn };

package/src/lib/components/nav/MonthDateBtn.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import DateProvider from "../hoc/DateProvider";
+import { DateCalendar } from "@mui/x-date-pickers";
+import { Button, Popover } from "@mui/material";
+import { format, getMonth, setMonth } from "date-fns";
+import { LocaleArrow } from "../common/LocaleArrow";
+import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
+
+interface MonthDateBtnProps {
+  selectedDate: Date;
+  onChange(value: Date): void;
+}
+
+const MonthDateBtn = ({ selectedDate, onChange }: MonthDateBtnProps) => {
+  const { locale, navigationPickerProps } = useStore();
+  const currentMonth = getMonth(selectedDate);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { prevDisabled, nextDisabled } = useArrowDisable();
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleChange = (e: Date | null) => {
+    onChange(e || new Date());
+    handleClose();
+  };
+  const handlePrev = () => {
+    const prevMonth = currentMonth - 1;
+    onChange(setMonth(selectedDate, prevMonth));
+  };
+  const handleNext = () => {
+    const nextMonth = currentMonth + 1;
+    onChange(setMonth(selectedDate, nextMonth));
+  };
+  return (
+    <>
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous month"
+      />
+      <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected month">
+        {format(selectedDate, "MMMM yyyy", { locale })}
+      </Button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <DateProvider>
+          <DateCalendar
+            {...navigationPickerProps}
+            openTo="month"
+            views={["year", "month"]}
+            value={selectedDate}
+            onChange={handleChange}
+          />
+        </DateProvider>
+      </Popover>
+      <LocaleArrow
+        type="next"
+        onClick={handleNext}
+        disabled={nextDisabled}
+        aria-label="next month"
+      />
+    </>
+  );
+};
+
+export { MonthDateBtn };