feat(calendar): component implementation (#153)

* feat(calendar): initial setup * feat(calendar): separated components * feat(calendar): boundingMonth prop * feat(calendar): update example * fix(calendar): months count to render in last year * fix(calendar): selection * refactor(calendar): separated week component * fix(calendar): selection optimizations * fix(calendar): selection optimizations - selection changes prop * fix(calendar): selection optimizations with shouldComponentUpdate * feat(calendar): day names component - base * feat(calendar): apply styles * feat(calendar): apply styles * feat(calendar): month header * feat(calendar): localized weekday & month names * fix(calendar): non-required selected date * feat(calendar): ranged calendar * fix(calendar): styles * feat(calendar): highlight today * feat(calendar): filter dates * feat(calendar): custom day render function * feat(calendar/range): custom day render function * feat(calendar): update example * refactor(calendar): move components to separate dirs * refactor(calendar): selection strategies * fix(calendar): cell selection after it was highlighted * fix(calendar): runtime warnings * fix(calendar): no-state-initialized warning * fix(calendar): day component key prop null-pointer * refactor(calendar): lint * feat(calendar): implementation examples * fix(calendar): month count rendering * feat(calendar): update examples * fix(calendar): render component after onLayout * refactor(calendar): month view as list item instead of year * feat(calendar): scrollTo* functions support * fix(calendar): month height calculation * feat(docs): update rkCalendar docs * feat(calendar): horizontal and vertical layout implementation * feat(calendar): add scrollTo next/prev month methods * feat(example): add horizontal calendar example * refactor(calendar): locale service with mocked data * fix(calendar): android - scroll to today on initial render * fix(calendar): bounding dates selection * docs(calendar): add layout prop description * feat(example): add calendar examples description * docs(calendar): add no-documented methods description and demo gif * refactor(calendar): style props to types refactor(calendar): move props to types refactor(calendar): rk-typed styles apply * refactor(calendar): render method as function * refactor(calendar): linebreaks * refactor(calendar): apply naming convenience * refactor(calendar): fix layout axis variables typo
akveo · Oct 23, 2018 · 5daf561 · 5daf561
1 parent 1492f41
commit 5daf561
Show file tree

Hide file tree

Showing 35 changed files with 2,258 additions and 0 deletions.
diff --git a/docs/assets/gif/calendar-range.gif b/docs/assets/gif/calendar-range.gif
diff --git a/docs/structure.ts b/docs/structure.ts
@@ -80,6 +80,38 @@ export const STRUCTURE = [
           }
         ]
       },
+      {
+        type: 'page',
+        name: 'RkCalendar',
+        demogif: 'calendar-range.gif',
+        children: [
+          {
+            type: 'block',
+            block: 'rk-description',
+            klass: 'RkCalendar',
+          },
+          {
+            type: 'block',
+            block: 'rk-examples',
+            klass: 'RkCalendar',
+          },
+          {
+            type: 'block',
+            block: 'rk-methods',
+            klass: 'RkCalendar',
+          },
+          {
+            type: 'block',
+            block: 'rk-props',
+            klass: 'RkCalendar',
+          },
+          {
+            type: 'block',
+            block: 'rk-styles',
+            klass: 'RkCalendar',
+          }
+        ]
+      },
       {
         type: 'page',
         name: 'RkCard',

diff --git a/example/App.js b/example/App.js
@@ -18,6 +18,12 @@ const ExplorerApp = StackNavigator({
   Home: { screen: Screens.ComponentsScreen },
   Picker: { screen: Screens.PickerScreen },
   Button: { screen: Screens.ButtonScreen },
+  Calendars: { screen: Screens.CalendarScreen },
+  BaseCalendar: { screen: Screens.BaseCalendarScreen },
+  RangeCalendar: { screen: Screens.RangeCalendarScreen },
+  BoundingCalendar: { screen: Screens.BoundingCalendarScreen },
+  CustomCalendar: { screen: Screens.CustomCalendarScreen },
+  HorizontalCalendar: { screen: Screens.HorizontalCalendarScreen },
   Switch: { screen: Screens.SwitchScreen },
   Choice: { screen: Screens.ChoiceScreen },
   Tab: { screen: Screens.TabScreen },

diff --git a/example/screens/ComponentsScreen.js b/example/screens/ComponentsScreen.js
@@ -27,6 +27,9 @@ export class ComponentsScreen extends React.Component {
     }, {
       title: 'Buttons',
       route: 'Button',
+    }, {
+      title: 'Calendars',
+      route: 'Calendars',
     }, {
       title: 'Switches',
       route: 'Switch',

diff --git a/example/screens/calendar/BaseCalendarScreen.js b/example/screens/calendar/BaseCalendarScreen.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RkCalendar,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+
+export class BaseCalendarScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Base Calendar',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RkCalendar
+          min={new Date(2018, 0, 1)}
+          max={new Date(2019, 0, 1)}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+    paddingHorizontal: 8,
+  },
+}));
diff --git a/example/screens/calendar/BoundingCalendarScreen.js b/example/screens/calendar/BoundingCalendarScreen.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RkCalendar,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+
+export class BoundingCalendarScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Bounding Month Calendar',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RkCalendar
+          min={new Date(2018, 0, 1)}
+          max={new Date(2019, 0, 1)}
+          boundingMonth={false}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+    paddingHorizontal: 8,
+  },
+}));
diff --git a/example/screens/calendar/CalendarScreen.js b/example/screens/calendar/CalendarScreen.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkText,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+
+export class CalendarScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Calendars',
+  };
+
+  static propTypes = {
+    navigation: PropTypes.shape({
+      navigate: PropTypes.func.isRequired,
+    }).isRequired,
+  };
+
+  static data = [
+    {
+      title: 'Base',
+      description: "'Minimum code' implementation",
+      route: 'BaseCalendar',
+    },
+    {
+      title: 'Range',
+      description: 'If you want to select date range',
+      route: 'RangeCalendar',
+    },
+    {
+      title: 'Bounding Month',
+      description: 'No next month days at the end of the current',
+      route: 'BoundingCalendar',
+    },
+    {
+      title: 'Custom Day Cell',
+      description: "Don't like default implementation?",
+      route: 'CustomCalendar',
+    },
+    {
+      title: 'Horizontal',
+      description: 'Like vertical but horizontal',
+      route: 'HorizontalCalendar',
+    },
+  ];
+
+  getItemKey = (item, index) => index.toString();
+
+  onItemClick = (item) => {
+    this.props.navigation.navigate(item.route);
+  };
+
+  renderItem = ({ item }) => (
+    <TouchableOpacity onPress={() => this.onItemClick(item)}>
+      <View style={styles.componentRow}>
+        <RkText rkType='header'>{item.title}</RkText>
+        <RkText rkType='subtitle'>{item.description}</RkText>
+      </View>
+    </TouchableOpacity>
+  );
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RkText>
+          {'RkCalendar is a component which allows user to select date or date range.' +
+          ' Check out some examples below prepared for you to see the power!'}
+        </RkText>
+        <View style={styles.descriptionSeparator} />
+        <FlatList
+          data={CalendarScreen.data}
+          keyExtractor={this.getItemKey}
+          renderItem={this.renderItem}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: theme.colors.screen.base,
+  },
+  descriptionSeparator: {
+    height: 2,
+    marginVertical: 8,
+    backgroundColor: theme.colors.border.base,
+  },
+  componentRow: {
+    paddingVertical: 8,
+    justifyContent: 'space-between',
+  },
+}));
diff --git a/example/screens/calendar/CustomCalendarScreen.js b/example/screens/calendar/CustomCalendarScreen.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  View,
+  Text,
+} from 'react-native';
+import {
+  RkCalendar,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+
+export class CustomCalendarScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Custom Calendar',
+  };
+
+  getContentStyle = (state) => ({
+    container: {
+      base: state.isToday ? [styles.dayContainer, styles.dayContainerToday] : styles.dayContainer,
+      selected: state.isSelected ? styles.dayContainerSelected : null,
+      highlighted: state.isHighlighted ? styles.dayContainerHighlighted : null,
+      disabled: state.isDisabled ? styles.dayContainerDisabled : null,
+    },
+    text: {
+      base: state.isToday ? [styles.dayText, styles.dayTextToday] : styles.dayText,
+      selected: state.isSelected ? styles.dayTextSelected : null,
+      highlighted: state.isHighlighted ? styles.dayTextHighlighted : null,
+      disabled: state.isDisabled ? styles.dayTextDisabled : null,
+    },
+    revenue: {
+      fontSize: 12,
+    },
+  });
+
+  renderDay = (date, state) => {
+    const { container, text, revenue } = this.getContentStyle(state);
+    const revenueText = state.isEmpty ? '' : `${(date.getDate() + 100) * date.getDate()}$`;
+    return (
+      <View style={[container.base, container.selected, container.highlighted, container.disabled]}>
+        <Text style={[text.base, text.selected, text.highlighted, text.disabled]}>
+          {state.isEmpty ? '' : date.getDate()}
+        </Text>
+        <Text style={[text.base, text.selected, text.highlighted, text.disabled, revenue]}>
+          {revenueText}
+        </Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RkCalendar
+          min={new Date(2018, 0, 1)}
+          max={new Date(2019, 0, 1)}
+          renderDay={this.renderDay}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+    paddingHorizontal: 8,
+  },
+  dayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    paddingVertical: 8,
+  },
+  dayContainerToday: {
+    backgroundColor: theme.colors.highlight,
+  },
+  dayContainerSelected: {
+    backgroundColor: theme.colors.button.primary,
+    borderRadius: 4,
+  },
+  dayContainerHighlighted: {
+    backgroundColor: theme.colors.button.primary,
+    opacity: 0.25,
+    borderRadius: 0,
+  },
+  dayContainerDisabled: {
+    opacity: 0.25,
+  },
+  dayText: {
+    fontSize: theme.fonts.sizes.large,
+    color: theme.colors.text.base,
+    fontWeight: '300',
+  },
+  dayTextToday: {
+    fontWeight: 'bold',
+  },
+  dayTextSelected: {
+    color: theme.colors.text.inverse,
+    fontWeight: 'bold',
+  },
+  dayTextHighlighted: {
+    fontWeight: '300',
+  },
+  dayTextDisabled: {
+  },
+}));