f-react-native-schedule/lib/module/Content/index.js

Flexible scheduling library with more built-in features and enhanced customization options

import React, { useContext, useEffect, useMemo, useState } from 'react';
import { ScrollView } from 'react-native';
import ScheduleContext from '../ScheduleContext';
import Header from './Header';
import Cell from './Cell';
import dayjs from 'dayjs';
import styles from './styles';
import isBetween from 'dayjs/plugin/isBetween';
import Scheduling from './Scheduling';
import { getScrollViewContainerWidth, isUndefined } from '../utils';
dayjs.extend(isBetween);

const Content = () => {
  const {
    selectedDate,
    rawSchedules,
    days,
    hours,
    currentView,
    cellDimensions,
    schedulingSettings
  } = useContext(ScheduleContext);
  const [schedules, setSchedules] = useState([]);
  const {
    fields
  } = schedulingSettings;
  const {
    startTime: {
      name: startTimeFieldName
    },
    endTime: {
      name: endTimeFieldName
    }
  } = fields;
  const dates = useMemo(() => {
    return hours.map(hour => {
      return days.map(day => {
        return dayjs(selectedDate).day(day).hour(hour).minute(0).second(0);
      });
    }).flat();
  }, [selectedDate, days, hours]);

  function getItemStyle(day, hour) {
    return { ...cellDimensions,
      left: currentView === 'day' ? 0 : day > 0 ? cellDimensions.width * day : 0,
      top: hour > 0 ? cellDimensions.height * (hour + 1) : cellDimensions.height,
      margin: 0
    };
  }

  function renderItem(date, index) {
    const scheduling = schedules[date.valueOf()];

    if (isUndefined(scheduling)) {
      return /*#__PURE__*/React.createElement(Cell, {
        key: index,
        date: date,
        style: getItemStyle(date.day(), date.hour())
      });
    }

    return /*#__PURE__*/React.createElement(Scheduling, {
      key: index,
      date: date,
      scheduling: scheduling,
      style: getItemStyle(date.day(), date.hour())
    });
  }

  useEffect(() => {
    const nextSchedules = [];
    rawSchedules === null || rawSchedules === void 0 ? void 0 : rawSchedules.forEach(scheduling => {
      const {
        [startTimeFieldName]: startTime,
        [endTimeFieldName]: endTime
      } = scheduling;
      const date = dates.find(d => d.isBetween(startTime, endTime));
      if (date === undefined) return;
      nextSchedules[date.valueOf()] = scheduling;
    });
    setSchedules(nextSchedules);
  }, [startTimeFieldName, endTimeFieldName, dates, rawSchedules]);
  return /*#__PURE__*/React.createElement(ScrollView, {
    showsHorizontalScrollIndicator: true,
    horizontal: true,
    style: [styles.container],
    contentContainerStyle: {
      width: getScrollViewContainerWidth(currentView, days, cellDimensions.width)
    },
    decelerationRate: "fast"
  }, /*#__PURE__*/React.createElement(Header, null), dates.map(renderItem));
};

export default Content;
//# sourceMappingURL=index.js.map