@isma91/react-scheduler 4.0.0 → 4.0.1

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

@@ -1,95 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import DateProvider from "../hoc/DateProvider";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import useStore from "../../hooks/useStore";
-
-interface EditorDatePickerProps {
-  type?: "date" | "datetime";
-  label?: string;
-  variant?: "standard" | "filled" | "outlined";
-  value: Date | string;
-  name: string;
-  onChange(name: string, date: Date): void;
-  error?: boolean;
-  errMsg?: string;
-  touched?: boolean;
-  required?: boolean;
-}
-
-const EditorDatePicker = ({
-  type = "datetime",
-  value,
-  label,
-  name,
-  onChange,
-  variant = "outlined",
-  error,
-  errMsg,
-  touched,
-  required,
-}: EditorDatePickerProps) => {
-  const { translations } = useStore();
-  const [state, setState] = useState({
-    touched: false,
-    valid: !!value,
-    errorMsg: errMsg
-      ? errMsg
-      : required
-        ? translations?.validation?.required || "Required"
-        : undefined,
-  });
-
-  const Picker = type === "date" ? DatePicker : DateTimePicker;
-
-  const hasError = state.touched && (error || !state.valid);
-
-  const handleChange = useCallback(
-    (value: string | Date) => {
-      const isValidDate = !isNaN(Date.parse(value as string));
-      const val = typeof value === "string" && isValidDate ? new Date(value) : value;
-      let isValid = true;
-      let errorMsg = errMsg;
-      if (required && !val) {
-        isValid = false;
-        errorMsg = errMsg || translations?.validation?.required || "Required";
-      }
-
-      setState((prev) => {
-        return { ...prev, touched: true, valid: isValid, errorMsg: errorMsg };
-      });
-
-      onChange(name, val as Date);
-    },
-    [errMsg, name, onChange, required, translations?.validation?.required]
-  );
-
-  useEffect(() => {
-    if (touched) {
-      handleChange(value);
-    }
-  }, [handleChange, touched, value]);
-
-  return (
-    <DateProvider>
-      <Picker
-        value={value instanceof Date ? value : new Date(value)}
-        label={label}
-        onChange={(e) => {
-          handleChange(e as Date);
-        }}
-        minutesStep={5}
-        slotProps={{
-          textField: {
-            variant,
-            helperText: hasError && state.errorMsg,
-            error: hasError,
-            fullWidth: true,
-          },
-        }}
-      />
-    </DateProvider>
-  );
-};
-
-export { EditorDatePicker };

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

@@ -1,113 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { TextField, Typography } from "@mui/material";
-import useStore from "../../hooks/useStore";
-
-interface EditorInputProps {
-  variant?: "standard" | "filled" | "outlined";
-  label?: string;
-  placeholder?: string;
-  required?: boolean;
-  min?: number;
-  max?: number;
-  email?: boolean;
-  decimal?: boolean;
-  disabled?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  value: string;
-  name: string;
-  onChange(name: string, value: string, isValid: boolean): void;
-  touched?: boolean;
-}
-
-const EditorInput = ({
-  variant = "outlined",
-  label,
-  placeholder,
-  value,
-  name,
-  required,
-  min,
-  max,
-  email,
-  decimal,
-  onChange,
-  disabled,
-  multiline,
-  rows,
-  touched,
-}: EditorInputProps) => {
-  const [state, setState] = useState({
-    touched: false,
-    valid: false,
-    errorMsg: "",
-  });
-  const { translations } = useStore();
-
-  const handleChange = useCallback(
-    (value: string) => {
-      const val = value;
-      let isValid = true;
-      let errorMsg = "";
-      if (email) {
-        const reg =
-          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        isValid = reg.test(val) && isValid;
-        errorMsg = translations?.validation?.invalidEmail || "Invalid Email";
-      }
-      if (decimal) {
-        const reg = /^[0-9]+(\.[0-9]*)?$/;
-        isValid = reg.test(val) && isValid;
-        errorMsg = translations?.validation?.onlyNumbers || "Only Numbers Allowed";
-      }
-      if (min && `${val}`.trim().length < min) {
-        isValid = false;
-        errorMsg =
-          typeof translations?.validation?.min === "function"
-            ? translations?.validation?.min(min)
-            : translations?.validation?.min || `Minimum ${min} letters`;
-      }
-      if (max && `${val}`.trim().length > max) {
-        isValid = false;
-        errorMsg =
-          typeof translations?.validation?.max === "function"
-            ? translations?.validation?.max(max)
-            : translations?.validation?.max || `Maximum ${max} letters`;
-      }
-      if (required && `${val}`.trim().length <= 0) {
-        isValid = false;
-        errorMsg = translations?.validation?.required || "Required";
-      }
-      setState({ touched: true, valid: isValid, errorMsg: errorMsg });
-      onChange(name, val, isValid);
-    },
-    [decimal, email, max, min, name, onChange, required, translations?.validation]
-  );
-
-  useEffect(() => {
-    if (touched) {
-      handleChange(value);
-    }
-  }, [handleChange, touched, value]);
-
-  return (
-    <TextField
-      variant={variant}
-      label={label && <Typography variant="body2">{`${label} ${required ? "*" : ""}`}</Typography>}
-      value={value}
-      name={name}
-      onChange={(e) => handleChange(e.target.value)}
-      disabled={disabled}
-      error={state.touched && !state.valid}
-      helperText={state.touched && !state.valid && state.errorMsg}
-      multiline={multiline}
-      rows={rows}
-      style={{ width: "100%" }}
-      InputProps={{
-        placeholder: placeholder || "",
-      }}
-    />
-  );
-};
-
-export { EditorInput };

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

@@ -1,164 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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 };