Pass more styles prop and misc fixes (hoangnm#48)

* Add date to onGridClick callback * Avoid displaying empty Text with showTitle * Add hourTextStyle prop * Add headerTextStyle props * Add eventContainerStyle prop
blackmatrix2007 · Sep 27, 2020 · ab608b1 · ab608b1
1 parent 8bf9a53
commit ab608b1
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -12,9 +12,15 @@
 * **`locale`** _(String)_ - locale for the header, there's a `addLocale` function to add cusomized locale. Default is `en`.
 * **`showTitle`** _(Boolean)_ - show/hide the title (the selected month and year). Default is `true`. 
 * **`headerStyle`** _(Object)_ - custom styles for header container. Example: `{ backgroundColor: '#4286f4', color: '#fff', borderColor: '#fff' }`
+* **`headerTextStyle`** _(Object)_ - custom styles for text inside header. Includes day names and title (month)
+* **`hourTextStyle`** _(Object)_ - custom styles for text displaying hours in the left.
+* **`eventContainerStyle`** _(Object)_ - custom styles for the event container. Notice the background color and positioning (absolute) are already set.
 * **`hoursInDisplay`** _(Number)_ - Amount of hours to display in the screen. Default is 6.
 * **`startHour`** _(Number)_ - Hour to scroll to on start. Default is 8 (8 am).
-* **`onGridClick`** _(Function)_ - Callback when the grid view is clicked. `(event, startHour) => {}`
+* **`onGridClick`** _(Function)_ - Callback when the grid view is clicked, signature: `(pressEvent, startHour, date) => {}`.
+  * `pressEvent` _(Object)_ - object passed by the [TouchableWithoutFeedback.onPress() method](https://reactnative.dev/docs/touchablewithoutfeedback#onpress) (and not an event object as defined below)
+  * `startHour` _(Number)_ - hour clicked (as integer)
+  * `date` _(Date)_ - date object indicating day clicked (the hour is not relevant)
 * **`EventComponent`** _(React.Component)_ - Component rendered inside an event. By default, is a `Text` with the `event.description`. See below for details on the component.
 
 ## Event Object
@@ -36,7 +42,7 @@ The component will be rendered inside a `TouchableOpacity`, which has the backgr
 
 For example, to display an icon inside each event, such as a [react-native-elements Icon](https://react-native-elements.github.io/react-native-elements/docs/icon/):
 ```js
-class MyEventComponent = ({ event, position }) => (
+const MyEventComponent = ({ event, position }) => (
   <Icon
     name={event.iconName}
     type={event.iconType}

diff --git a/example/App.js b/example/App.js
@@ -57,8 +57,9 @@ class App extends React.Component {
     );
   };
 
-  onGridClick = (event, startHour) => {
-    Alert.alert(`start hour: ${startHour}`);
+  onGridClick = (event, startHour, date) => {
+    const dateStr = date.toISOString().split('T')[0];
+    Alert.alert(`Date: ${dateStr}\nStart hour: ${startHour}`);
   };
 
   render() {
@@ -73,7 +74,10 @@ class App extends React.Component {
             numberOfDays={3}
             onEventPress={this.onEventPress}
             onGridClick={this.onGridClick}
-            headerStyle={styles.headerStyle}
+            headerStyle={styles.header}
+            headerTextStyle={styles.headerText}
+            hourTextStyle={styles.hourText}
+            eventContainerStyle={styles.eventContainer}
             formatDateHeader="MMM D"
             hoursInDisplay={12}
             startHour={8}
@@ -90,11 +94,20 @@ const styles = StyleSheet.create({
     backgroundColor: '#FFF',
     paddingTop: 22,
   },
-  headerStyle: {
+  header: {
     backgroundColor: '#4286f4',
-    color: '#fff',
     borderColor: '#fff',
   },
+  headerText: {
+    color: 'white',
+  },
+  hourText: {
+    color: 'black',
+  },
+  eventContainer: {
+    borderWidth: 1,
+    borderColor: 'black',
+  },
 });
 
 export default App;
diff --git a/src/Event/Event.js b/src/Event/Event.js
@@ -3,40 +3,56 @@ import PropTypes from 'prop-types';
 import { Text, TouchableOpacity } from 'react-native';
 import styles from './Event.styles';
 
-const Event = ({ event, onPress, style, EventComponent }) => {
+const Event = ({
+  event,
+  onPress,
+  position,
+  EventComponent,
+  containerStyle,
+}) => {
   return (
     <TouchableOpacity
       onPress={() => onPress && onPress(event)}
       style={[
         styles.item,
-        style,
+        position,
         {
           backgroundColor: event.color,
         },
+        containerStyle,
       ]}
       disabled={!onPress}
     >
       {EventComponent ? (
-        <EventComponent event={event} position={style} />
+        <EventComponent event={event} position={position} />
       ) : (
         <Text style={styles.description}>{event.description}</Text>
       )}
     </TouchableOpacity>
   );
 };
 
-const eventPropTypes = PropTypes.shape({
+const eventPropType = PropTypes.shape({
   color: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   description: PropTypes.string,
   startDate: PropTypes.instanceOf(Date).isRequired,
   endDate: PropTypes.instanceOf(Date).isRequired,
 });
 
+const positionPropType = PropTypes.shape({
+  height: PropTypes.number,
+  width: PropTypes.number,
+  top: PropTypes.number,
+  left: PropTypes.number,
+});
+
 Event.propTypes = {
-  event: eventPropTypes.isRequired,
+  event: eventPropType.isRequired,
   onPress: PropTypes.func,
-  style: PropTypes.object,
+  position: positionPropType,
+  containerStyle: PropTypes.object,
+  EventComponent: PropTypes.elementType,
 };
 
 export default Event;
diff --git a/src/Events/Events.js b/src/Events/Events.js
@@ -136,13 +136,17 @@ class Events extends PureComponent {
     return totalEventsWithPosition;
   });
 
-  onGridClick = (event) => {
-    const { onGridClick } = this.props;
+  onGridClick = (event, dayIndex) => {
+    const { initialDate, onGridClick } = this.props;
     if (!onGridClick) {
       return;
     }
-    const hour = Math.floor(this.yToHour(event.nativeEvent.locationY - 16));
-    onGridClick(event, hour);
+    const { locationY } = event.nativeEvent;
+    const hour = Math.floor(this.yToHour(locationY - CONTENT_OFFSET));
+
+    const date = moment(initialDate).add(dayIndex, 'day').toDate();
+
+    onGridClick(event, hour, date);
   };
 
   render() {
@@ -152,6 +156,7 @@ class Events extends PureComponent {
       numberOfDays,
       times,
       onEventPress,
+      eventContainerStyle,
       EventComponent,
     } = this.props;
     const totalEvents = this.processEvents(
@@ -171,19 +176,20 @@ class Events extends PureComponent {
           </View>
         ))}
         <View style={styles.events}>
-          {totalEvents.map((eventsInSection, sectionIndex) => (
+          {totalEvents.map((eventsInSection, dayIndex) => (
             <TouchableWithoutFeedback
-              onPress={this.onGridClick}
-              key={sectionIndex}
+              onPress={(e) => this.onGridClick(e, dayIndex)}
+              key={dayIndex}
             >
               <View style={styles.event}>
                 {eventsInSection.map((item) => (
                   <Event
                     key={item.data.id}
                     event={item.data}
-                    style={item.style}
+                    position={item.style}
                     onPress={onEventPress}
                     EventComponent={EventComponent}
+                    containerStyle={eventContainerStyle}
                   />
                 ))}
               </View>
@@ -204,6 +210,7 @@ Events.propTypes = {
   times: PropTypes.arrayOf(PropTypes.string).isRequired,
   onEventPress: PropTypes.func,
   onGridClick: PropTypes.func,
+  eventContainerStyle: PropTypes.object,
   EventComponent: PropTypes.elementType,
 };
 

diff --git a/src/Events/Events.styles.js b/src/Events/Events.styles.js
@@ -7,7 +7,7 @@ export const CONTENT_OFFSET = 16;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 16,
+    paddingTop: CONTENT_OFFSET,
     width: CONTAINER_WIDTH,
   },
   timeRow: {

diff --git a/src/Header/Header.js b/src/Header/Header.js
@@ -16,23 +16,30 @@ const getDayTextStyles = (numberOfDays) => {
   };
 };
 
-const Column = ({ column, numberOfDays, format, style }) => {
+const Column = ({ column, numberOfDays, format, style, textStyle }) => {
   return (
     <View style={[styles.column, style]}>
-      <Text style={[{ color: style.color }, getDayTextStyles(numberOfDays)]}>
+      <Text
+        style={[
+          { color: style.color },
+          getDayTextStyles(numberOfDays),
+          textStyle,
+        ]}
+      >
         {getFormattedDate(column, format)}
       </Text>
     </View>
   );
 };
 
-const Columns = ({ columns, numberOfDays, format, style }) => {
+const Columns = ({ columns, numberOfDays, format, style, textStyle }) => {
   return (
     <View style={styles.columns}>
       {columns.map((column) => {
         return (
           <Column
             style={style}
+            textStyle={textStyle}
             key={column}
             column={column}
             numberOfDays={numberOfDays}
@@ -44,7 +51,13 @@ const Columns = ({ columns, numberOfDays, format, style }) => {
   );
 };
 
-const WeekViewHeader = ({ numberOfDays, initialDate, formatDate, style }) => {
+const WeekViewHeader = ({
+  numberOfDays,
+  initialDate,
+  formatDate,
+  style,
+  textStyle,
+}) => {
   const columns = calculateDaysArray(initialDate, numberOfDays);
   return (
     <View style={styles.container}>
@@ -54,6 +67,7 @@ const WeekViewHeader = ({ numberOfDays, initialDate, formatDate, style }) => {
           columns={columns}
           numberOfDays={numberOfDays}
           style={style}
+          textStyle={textStyle}
         />
       )}
     </View>
@@ -65,6 +79,7 @@ WeekViewHeader.propTypes = {
   initialDate: PropTypes.string.isRequired,
   formatDate: PropTypes.string,
   style: PropTypes.object,
+  textStyle: PropTypes.object,
 };
 
 WeekViewHeader.defaultProps = {

diff --git a/src/Times/Times.js b/src/Times/Times.js
@@ -4,12 +4,12 @@ import { View, Text } from 'react-native';
 import styles from './Times.styles';
 import { TIME_LABEL_HEIGHT } from '../utils';
 
-const Times = ({ times }) => {
+const Times = ({ times, textStyle }) => {
   return (
     <View style={styles.columnContainer}>
       {times.map((time) => (
         <View key={time} style={[styles.label, { height: TIME_LABEL_HEIGHT }]}>
-          <Text style={styles.text}>{time}</Text>
+          <Text style={[styles.text, textStyle]}>{time}</Text>
         </View>
       ))}
     </View>

diff --git a/src/Title/Title.js b/src/Title/Title.js
@@ -12,18 +12,23 @@ const getFontSizeHeader = (numberOfDays) => {
   return 16;
 };
 
-const Title = ({ style, showTitle, numberOfDays, selectedDate }) => {
+const Title = ({ style, showTitle, numberOfDays, selectedDate, textStyle }) => {
   return (
     <View style={[styles.title, style]}>
-      <Text
-        style={{
-          color: style.color,
-          fontSize: getFontSizeHeader(numberOfDays),
-          textAlign: 'center',
-        }}
-      >
-        {showTitle ? getCurrentMonth(selectedDate) : null}
-      </Text>
+      {showTitle ? (
+        <Text
+          style={[
+            {
+              color: style.color,
+              fontSize: getFontSizeHeader(numberOfDays),
+              textAlign: 'center',
+            },
+            textStyle,
+          ]}
+        >
+          {getCurrentMonth(selectedDate)}
+        </Text>
+      ) : null}
     </View>
   );
 };
@@ -33,6 +38,7 @@ Title.propTypes = {
   numberOfDays: PropTypes.oneOf(availableNumberOfDays).isRequired,
   selectedDate: PropTypes.instanceOf(Date).isRequired,
   style: PropTypes.object,
+  textStyle: PropTypes.object,
 };
 
 export default React.memo(Title);
diff --git a/src/WeekView/WeekView.js b/src/WeekView/WeekView.js
@@ -191,6 +191,9 @@ export default class WeekView extends Component {
       showTitle,
       numberOfDays,
       headerStyle,
+      headerTextStyle,
+      hourTextStyle,
+      eventContainerStyle,
       formatDateHeader,
       onEventPress,
       events,
@@ -208,6 +211,7 @@ export default class WeekView extends Component {
           <Title
             showTitle={showTitle}
             style={headerStyle}
+            textStyle={headerTextStyle}
             numberOfDays={numberOfDays}
             selectedDate={currentMoment}
           />
@@ -223,6 +227,7 @@ export default class WeekView extends Component {
               <View key={date} style={styles.header}>
                 <Header
                   style={headerStyle}
+                  textStyle={headerTextStyle}
                   formatDate={formatDateHeader}
                   initialDate={date}
                   numberOfDays={numberOfDays}
@@ -233,7 +238,7 @@ export default class WeekView extends Component {
         </View>
         <ScrollView ref={this.verticalAgendaRef}>
           <View style={styles.scrollViewContent}>
-            <Times times={times} />
+            <Times times={times} textStyle={hourTextStyle} />
             <ScrollView
               horizontal
               pagingEnabled
@@ -265,6 +270,7 @@ export default class WeekView extends Component {
                   onGridClick={onGridClick}
                   hoursInDisplay={hoursInDisplay}
                   EventComponent={EventComponent}
+                  eventContainerStyle={eventContainerStyle}
                 />
               ))}
             </ScrollView>
@@ -284,6 +290,9 @@ WeekView.propTypes = {
   onEventPress: PropTypes.func,
   onGridClick: PropTypes.func,
   headerStyle: PropTypes.object,
+  headerTextStyle: PropTypes.object,
+  hourTextStyle: PropTypes.object,
+  eventContainerStyle: PropTypes.object,
   selectedDate: PropTypes.instanceOf(Date).isRequired,
   locale: PropTypes.string,
   hoursInDisplay: PropTypes.number,