Feat/calendar

demo/src/screens/MenuStructure.js

@@ -174,6 +174,7 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
+      {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {View, Incubator} from 'react-native-ui-lib';
+import {data} from './MockData';
+
+export default class CalendarScreen extends Component {
+  // constructor(props) {
+  //   super(props);
+
+  //   setTimeout(() => {
+  //     this.setState({date: 1676026748000});
+  //   }, 2000);
+  // }
+
+  state = {
+    date: undefined
+  };
+
+  render() {
+    return (
+      <View flex>
+        <Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
+          <Incubator.Calendar.Agenda/>
+        </Incubator.Calendar>
+      </View>
+    );
+  }
+}

demo/src/screens/incubatorScreens/index.js

@@ -1,6 +1,7 @@
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
+  registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
   registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));

package.json

@@ -32,6 +32,7 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/deployDocs.sh",
     "docs:build": "node scripts/buildDocs.js",
+    "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "demo": "./scripts/demo.sh",
     "release": "node ./scripts/release.js"
@@ -40,6 +41,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
     "color": "^3.1.0",
     "commons-validator-js": "^1.0.237",
+    "date-fns": "^2.29.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.17.21",

scripts/createCalendarMockData.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const HOUR_IN_MS = 60 * 60 * 1000;
+const ID_LENGTH = 10;
+
+function generateId() {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < ID_LENGTH; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+const data = [];
+
+for (let year = 2021; year <= 2023; ++year) {
+  for (let month = 0; month <= 11; ++month) {
+    for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
+      for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {
+        const startDate = new Date(year, month, day, hour, 0);
+        if (startDate.getDay() >= 2 && startDate.getDay() <= 5) {
+          const start = startDate.getTime();
+          const end = start + HOUR_IN_MS * (Math.random() > 0.5 ? 0.5 : 1);
+          const id = generateId();
+          data.push({id, start, end});
+        }
+      }
+    }
+  }
+}
+
+console.log(`${data.length} events were created`);
+
+fs.writeFileSync('demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts',
+  `// Note: to generate new data run calendar:createMocks and update createCalendarMockData script \n` +
+  `export const data = ${JSON.stringify(data)};`);

src/incubator/Calendar/Agenda.tsx

@@ -0,0 +1,158 @@
+import React, {useContext, useCallback, useRef} from 'react';
+import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
+import {FlashList, ViewToken} from '@shopify/flash-list';
+import {BorderRadiuses} from 'style';
+import View from '../../components/view';
+import Text from '../../components/text';
+import {isSameDay, isSameMonth} from './helpers/DateUtils';
+import {InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
+import CalendarContext from './CalendarContext';
+
+// TODO: Fix initial scrolling
+function Agenda() {
+  const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
+  const flashList = useRef<FlashList<InternalEvent>>(null);
+  const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
+  const scrolledByUser = useSharedValue<boolean>(false);
+
+  const keyExtractor = useCallback((item: InternalEvent) => {
+    return item.type === 'Event' ? item.id : item.header;
+  }, []);
+
+  const renderEvent = useCallback((item: Event) => {
+    return (
+      <View
+        marginV-1
+        marginH-10
+        paddingH-10
+        height={50}
+        style={{borderWidth: 1, borderRadius: BorderRadiuses.br20, justifyContent: 'center'}}
+      >
+        <Text style={{}}>
+          Item for{' '}
+          {new Date(item.start).toLocaleString('en-GB', {
+            month: 'short',
+            day: 'numeric',
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit'
+          })}
+          -{new Date(item.end).toLocaleString('en-GB', {hour12: false, hour: '2-digit', minute: '2-digit'})}
+        </Text>
+      </View>
+    );
+  }, []);
+
+  const renderHeader = useCallback((item: DateSectionHeader) => {
+    return (
+      <View
+        marginB-1
+        paddingB-4
+        marginH-10
+        paddingH-10
+        height={50}
+        bottom
+      >
+        <Text>{item.header}</Text>
+      </View>
+    );
+  }, []);
+
+  const renderItem = useCallback(({item}: {item: InternalEvent; index: number}) => {
+    switch (item.type) {
+      case 'Event':
+        return renderEvent(item);
+      case 'Header':
+        return renderHeader(item);
+    }
+  },
+  [renderEvent, renderHeader]);
+
+  const getItemType = useCallback(item => item.type, []);
+
+  const findClosestDateAfter = useCallback((selected: number) => {
+    'worklet';
+    for (let index = 0; index < data.length; ++index) {
+      const item = data[index];
+      if (item.type === 'Header') {
+        if (item.date >= selected) {
+          return {dateSectionHeader: item, index};
+        }
+      }
+    }
+
+    return null;
+  },
+  [data]);
+
+  const scrollToIndex = useCallback((index: number, animated: boolean) => {
+    flashList.current?.scrollToIndex({index, animated});
+  }, []);
+
+  useAnimatedReaction(() => {
+    return selectedDate.value;
+  },
+  (selected, previous) => {
+    if (updateSource?.value !== UpdateSource.AGENDA_SCROLL) {
+      if (
+        selected !== previous &&
+          (closestSectionHeader.value?.date === undefined || !isSameDay(selected, closestSectionHeader.value?.date))
+      ) {
+        const result = findClosestDateAfter(selected);
+        if (result !== null) {
+          const {dateSectionHeader, index} = result;
+          closestSectionHeader.value = dateSectionHeader;
+          scrolledByUser.value = false;
+          // TODO: Can the animation be improved (not in JS)?
+          if (previous) {
+            const _isSameMonth = isSameMonth(selected, previous);
+            runOnJS(scrollToIndex)(index, _isSameMonth);
+          }
+        }
+      }
+    }
+  },
+  [findClosestDateAfter]);
+
+  // TODO: look at https://docs.swmansion.com/react-native-reanimated/docs/api/hooks/useAnimatedScrollHandler
+  const onViewableItemsChanged = useCallback(({viewableItems}: {viewableItems: ViewToken[]}) => {
+    if (scrolledByUser.value) {
+      const result = viewableItems.find(item => item.item.type === 'Header');
+      if (result) {
+        const {item}: {item: DateSectionHeader} = result;
+        if (closestSectionHeader.value?.date !== item.date) {
+          closestSectionHeader.value = item;
+          setDate(item.date, UpdateSource.AGENDA_SCROLL);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onMomentumScrollBegin = useCallback(() => {
+    scrolledByUser.value = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onScrollBeginDrag = useCallback(() => {
+    scrolledByUser.value = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FlashList
+      ref={flashList}
+      estimatedItemSize={52}
+      data={data}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+      getItemType={getItemType}
+      onViewableItemsChanged={onViewableItemsChanged}
+      onMomentumScrollBegin={onMomentumScrollBegin}
+      onScrollBeginDrag={onScrollBeginDrag}
+      initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0}
+    />
+  );
+}
+
+export default Agenda;

src/incubator/Calendar/CalendarContext.ts

@@ -0,0 +1,9 @@
+import {createContext} from 'react';
+import {CalendarContextProps, FirstDayOfWeek} from './types';
+
+// @ts-ignore
+const CalendarContext = createContext<CalendarContextProps>({
+  firstDayOfWeek: FirstDayOfWeek.MONDAY
+});
+
+export default CalendarContext;

src/incubator/Calendar/CalendarItem.tsx

@@ -0,0 +1,44 @@
+import React, {useContext, useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import {Constants} from '../../commons/new';
+import View from '../../components/view';
+import {CalendarItemProps} from './types';
+import CalendarContext from './CalendarContext';
+import Month from './Month';
+import Header from './Header';
+
+const CALENDAR_HEIGHT = 250;
+
+function CalendarItem(props: CalendarItemProps) {
+  const {year, month} = props;
+  const {staticHeader, headerHeight} = useContext(CalendarContext);
+
+  const calendarStyle = useMemo(() => {
+    // TODO: dynamic height: calc calendar height with month's number of weeks
+    return [
+      styles.container,
+      {
+        height: CALENDAR_HEIGHT - (staticHeader ? headerHeight.value : 0)
+      }
+    ];
+  }, [staticHeader]);
+
+  if (month !== undefined) {
+    return (
+      <View style={calendarStyle}>
+        {!staticHeader && <Header month={month} year={year}/>}
+        <Month month={month} year={year}/>
+      </View>
+    );
+  }
+  return null;
+}
+
+export default CalendarItem;
+
+const styles = StyleSheet.create({
+  container: {
+    width: Constants.screenWidth,
+    borderBottomWidth: 1
+  }
+});

src/incubator/Calendar/Day.tsx

@@ -0,0 +1,83 @@
+import isNull from 'lodash/isNull';
+import React, {useContext, useCallback} from 'react';
+import {StyleSheet} from 'react-native';
+import Reanimated, {useSharedValue, useAnimatedStyle, useAnimatedReaction} from 'react-native-reanimated';
+import {Colors} from 'style';
+import View from '../../components/view';
+import TouchableOpacity from '../../components/touchableOpacity';
+import Text from '../../components/text';
+import {getDayOfDate, isSameDay, isToday} from './helpers/DateUtils';
+import {DayProps, UpdateSource} from './types';
+import CalendarContext from './CalendarContext';
+
+
+const AnimatedText = Reanimated.createAnimatedComponent(Text);
+
+const Day = (props: DayProps) => {
+  const {date, onPress} = props;
+  const {selectedDate, setDate} = useContext(CalendarContext);
+
+  const shouldMarkSelected = !isNull(date) ? isSameDay(selectedDate.value, date) : false;
+  const isSelected = useSharedValue(shouldMarkSelected);
+
+  const backgroundColor = isToday(date) ? Colors.$backgroundSuccessHeavy : Colors.transparent;
+  const textColor = isToday(date) ? Colors.$textDefaultLight : Colors.$backgroundPrimaryHeavy;
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor: isSelected.value ? Colors.$backgroundPrimaryHeavy : backgroundColor,
+      color: isSelected.value ? Colors.$textDefaultLight : textColor
+    };
+  });
+
+  const animatedTextStyles = useAnimatedStyle(() => {
+    return {
+      color: isSelected.value ? Colors.$textDefaultLight : textColor
+    };
+  });
+
+  useAnimatedReaction(() => {
+    return selectedDate.value;
+  }, (selected) => {
+    isSelected.value = isSameDay(selected, date!);
+  }, []);
+
+  const _onPress = useCallback(() => {
+    if (date !== null) {
+      isSelected.value = true;
+      setDate(date, UpdateSource.DAY_SELECT);
+      onPress?.(date);
+    }
+  }, [date, setDate, onPress]);
+
+  const renderDay = () => {
+    const day = !isNull(date) ? getDayOfDate(date) : '';
+    return (
+      <View center>
+        <View reanimated style={[styles.selection, animatedStyles]}/>
+        <AnimatedText style={animatedTextStyles}>{day}</AnimatedText>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity flex center style={styles.dayContainer} onPress={_onPress} activeOpacity={1}>
+      {renderDay()}
+    </TouchableOpacity>
+  );
+};
+
+export default Day;
+
+const styles = StyleSheet.create({
+  dayContainer: {
+    width: 32,
+    height: 32
+  },
+  selection: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderRadius: 12
+  }
+});