Successfully add header controls, rough implementation

Author: Stephy

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

.flowconfig

@@ -0,0 +1,62 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Additional create-react-native-app ignores
+
+; Ignore duplicate module providers
+.*/node_modules/fbemitter/lib/*
+
+; Ignore misbehaving dev-dependencies
+.*/node_modules/xdl/build/*
+.*/node_modules/reqwest/tests/*
+
+; Ignore missing expo-sdk dependencies (temporarily)
+; https://github.com/exponent/exponent-sdk/issues/36
+.*/node_modules/expo/src/*
+
+; Ignore react-native-fbads dependency of the expo sdk
+.*/node_modules/react-native-fbads/*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+emoji=true
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.38.0

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.expo/
+npm-debug.*

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import CalendarPicker from './CalendarPicker';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <CalendarPicker />
+        <Text>Open up App.js to start working on your app!</Text>
+        <Text>Changes you make will automatically reload.</Text>
+        <Text>Shake your phone to open the developer menu.</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

CalendarPicker/Controls.js

@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import {
+  TouchableHighlight,
+  Text,
+} from 'react-native';
+
+export default function Controls({ styles, label, onPressControl }) {
+  return (
+    <TouchableHighlight onPress={() => onPressControl()}>
+      <Text style={styles}>
+        { label }
+      </Text>
+    </TouchableHighlight>
+  );
+}
+
+Controls.propTypes = {
+  styles: PropTypes.shape().isRequired,
+  label: PropTypes.string.isRequired,
+  onPressControl: PropTypes.func.isRequired,
+};

CalendarPicker/HeaderControls.js

@@ -0,0 +1,105 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  View,
+  Text,
+} from 'react-native';
+import { Utils } from './Utils';
+import Controls from './Controls';
+
+export default class HeaderControls extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentMonth: null,
+      currentYear: null,
+    }
+    this.handleOnPressPrevious = this.handleOnPressPrevious.bind(this);
+    this.handleOnPressNext = this.handleOnPressNext.bind(this);
+  }
+
+  componentWillMount() {
+    const { initialDate } = this.props;
+    const date = initialDate ? initialDate : new Date();
+
+    this.setState({
+      currentMonth: parseInt(date.getMonth()),
+      currentYear: parseInt(date.getFullYear()),
+    });
+  }
+
+  handleOnPressPrevious() {
+    const { currentMonth, currentYear } = this.state;
+    const previousMonth = currentMonth - 1;
+    // if previousMonth is negative it means the current month is January,
+    // so we have to go to previous year, and set the current month to December
+    if (previousMonth < 0) {
+      this.setState({
+        currentMonth: parseInt(11), // setting month to December
+        currentYear: parseInt(currentYear) - 1, // decrement year
+      });
+    } else {
+      this.setState({
+        currentMonth: parseInt(previousMonth),
+        currentYear: parseInt(currentYear),
+      });
+    }
+  }
+
+  handleOnPressNext() {
+    const { currentMonth, currentYear } = this.state;
+    const nextMonth = currentMonth + 1;
+    // if nextMonth is greater than 11 it means the current month is December,
+    // so we have to go to next year, and set the current month to January
+    if (nextMonth > 11) {
+      this.setState({
+        currentMonth: parseInt(0), // setting month to December
+        currentYear: parseInt(currentYear) + 1, // decrement year
+      });
+    } else {
+      this.setState({
+        currentMonth: parseInt(nextMonth),
+        currentYear: parseInt(currentYear),
+      });
+    }
+  }
+
+  render() {
+    const { styles, initialDate } = this.props;
+    const { currentMonth, currentYear } = this.state;
+    const MONTHS = Utils.MONTHS; // English Month Array
+    const date = initialDate ? initialDate : new Date();
+    // getMonth() call below will return the month number, we will use it as the
+    // index for month array in english
+    const month = MONTHS[currentMonth];
+    const year = currentYear;
+
+    return (
+      <View style={styles.headerWrapper}>
+        <View style={styles.monthSelector}>
+          <Controls
+            label="Previous"
+            onPressControl={this.handleOnPressPrevious}
+            styles={styles.prev}
+          />
+        </View>
+        <View>
+          <Text style={[styles.monthLabel]}>
+             { month } { year }
+          </Text>
+        </View>
+        <View style={styles.monthSelector}>
+          <Controls
+            label="Next"
+            onPressControl={this.handleOnPressNext}
+            styles={styles.next}
+          />
+        </View>
+
+      </View>
+    );
+  }
+}
+
+HeaderControls.propTypes = {
+  initialDate: PropTypes.instanceOf(Date),
+};

CalendarPicker/Styles.js

@@ -0,0 +1,70 @@
+/**
+ * Calendar Picker Component
+ *
+ * Copyright 2016 Yahoo Inc.
+ * Licensed under the terms of the MIT license. See LICENSE file in the project root for terms.
+ */
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  calendar: {
+    marginTop: 10
+  },
+  dayWrapper: {
+    backgroundColor: 'rgba(0,0,0,0.0)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  dayButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignSelf: 'center'
+  },
+  dayLabel: {
+    fontSize: 14,
+    color: '#000',
+    alignSelf: 'center'
+  },
+  dayLabelsWrapper: {
+    flexDirection: 'row',
+    marginBottom: 10,
+    borderBottomWidth: 1,
+    borderTopWidth: 1,
+    paddingTop: 10,
+    paddingBottom: 10,
+    alignSelf: 'center',
+    backgroundColor: 'rgba(0,0,0,0.0)',
+    borderColor: 'rgba(0,0,0,0.2)'
+  },
+  daysWrapper: {
+    alignSelf: 'center'
+  },
+  dayLabels: {
+    textAlign: 'center'
+  },
+  monthLabel: {
+    fontSize: 16,
+    color: '#000',
+    textAlign: 'center'
+  },
+  headerWrapper: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 10,
+    paddingTop: 5,
+    paddingBottom: 3,
+    backgroundColor: 'rgba(0,0,0,0.0)'
+  },
+  prev: {
+    textAlign: 'left'
+  },
+  next: {
+    textAlign: 'right'
+  },
+  weeks: {
+    flexDirection: 'column'
+  },
+  weekRow: {
+    flexDirection: 'row'
+  }
+});

CalendarPicker/Utils.js

@@ -0,0 +1,22 @@
+/**
+ * Calendar Picker Component
+ *
+ * Copyright 2016 Yahoo Inc.
+ * Licensed under the terms of the MIT license. See LICENSE file in the project root for terms.
+ */
+
+export const Utils = {
+  WEEKDAYS: [
+    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
+  ],
+  MONTHS: [
+    'January', 'February', 'March', 'April', 'May', 'June', 'July',
+    'August', 'September', 'October', 'November', 'December'
+  ],
+  MAX_ROWS: 7,
+  MAX_COLUMNS: 7,
+  getDaysInMonth: function(month, year) {
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    return lastDayOfMonth.getDate();
+  }
+};

CalendarPicker/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import { makeStyles } from './makeStyles';
+import HeaderControls from './HeaderControls';
+
+// The styles in makeStyles are intially scaled to this width
+const IPHONE6_WIDTH = 375;
+const initialScale = Dimensions.get('window').width / IPHONE6_WIDTH ;
+const styles = StyleSheet.create(makeStyles(initialScale));
+
+export default class CalendarPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      initialDate: new Date(),
+    }
+  }
+  render() {
+    const { initialDate } = this.state;
+    return (
+      <View>
+        <HeaderControls styles={styles} initialDate={initialDate}/>
+        <Text>Hello Calendar </Text>
+      </View>
+    );
+  }
+}