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

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

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import dayjs from 'dayjs';
import { useContext } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import ScheduleContext from '../ScheduleContext';

const Header = () => {
  const {
    selectedDate,
    days,
    headerSettings,
    cellDimensions
  } = useContext(ScheduleContext);
  const {
    cellRender,
    currentDayColor
  } = headerSettings;

  function renderDayWeek(dayNumber) {
    const day = dayjs(selectedDate).day(dayNumber);
    const isCurrentDay = day.format('DD-MM') === dayjs().format('DD-MM');
    return /*#__PURE__*/React.createElement(View, {
      key: dayNumber,
      style: [styles.card, cellDimensions]
    }, cellRender && cellRender(day), !cellRender && /*#__PURE__*/React.createElement(View, {
      style: styles.content
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: isCurrentDay ? currentDayColor : '#000'
      }
    }, day.format('dd')), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontSize: 16,
        fontWeight: 'bold',
        color: isCurrentDay ? currentDayColor : '#000'
      }
    }, day.format('DD'))));
  }

  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(FlatList, {
    data: days,
    extraData: selectedDate,
    horizontal: true,
    keyExtractor: day => day.toString(),
    renderItem: _ref => {
      let {
        item: day
      } = _ref;
      return renderDayWeek(day);
    }
  }));
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  card: {
    height: 50,
    width: 100
  },
  content: {
    flex: 1,
    borderWidth: 1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    borderColor: '#ebedf2',
    backgroundColor: '#f3f6f9'
  }
});
export default Header;
//# sourceMappingURL=Header.js.map