Merge pull request #1807 from wix/infra/constants

Constants cleanup

Author: ethanshar

example/src/screens/menu.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Platform, StyleSheet, View, ScrollView, TouchableOpacity, Text, Image, I18nManager} from 'react-native';
+import {Platform, StyleSheet, View, ScrollView, TouchableOpacity, Text, Image, I18nManager, Switch} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import testIDs from '../testIDs';
 
@@ -11,6 +11,15 @@ interface Props {
 }
 
 export default class MenuScreen extends Component<Props> {
+  state = {
+    forceRTL: false
+  }
+
+  toggleRTL = (value) => {
+    I18nManager.forceRTL(value);
+    this.setState({forceRTL: value});
+  }
+
   renderEntry(testID: string, title: string, screen: string, options?: any) {
     return (
       <TouchableOpacity
@@ -35,6 +44,10 @@ export default class MenuScreen extends Component<Props> {
           {this.renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendar')}
           {this.renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendar')}
           {this.renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendar', {weekView: true})}
+          <View style={styles.switchContainer}>
+            <Text>Force RTL</Text>
+            <Switch value={this.state.forceRTL} onValueChange={this.toggleRTL}/>
+          </View>
         </View>
       </ScrollView>
     );
@@ -89,5 +102,8 @@ const styles = StyleSheet.create({
   menuText: {
     fontSize: 18,
     color: '#2d4150'
+  },
+  switchContainer: {
+    margin: 20
   }
 });

src/calendar-list/index.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
 import React, {Component} from 'react';
-import {FlatList, Platform, Dimensions, View, ViewStyle, LayoutChangeEvent, FlatListProps} from 'react-native';
+import {FlatList, View, ViewStyle, LayoutChangeEvent, FlatListProps} from 'react-native';
 
 import {extractComponentProps} from '../componentUpdater';
 import {xdateToData, parseDate} from '../interface';
@@ -13,10 +13,10 @@ import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
 import CalendarHeader from '../calendar/header/index';
+import constants from '../commons/constants';
 
 
-const {width} = Dimensions.get('window');
-const CALENDAR_WIDTH = width;
+const CALENDAR_WIDTH = constants.screenWidth;
 const CALENDAR_HEIGHT = 360;
 const PAST_SCROLL_RANGE = 50;
 const FUTURE_SCROLL_RANGE = 50;
@@ -108,7 +108,7 @@ class CalendarList extends Component<CalendarListProps, State> {
     horizontal: false,
     scrollsToTop: false,
     scrollEnabled: true,
-    removeClippedSubviews: Platform.OS === 'android',
+    removeClippedSubviews: constants.isAndroid,
     keyExtractor: (_: any, index: number) => String(index)
   };
 

src/calendar/day/basic/style.ts

@@ -1,6 +1,7 @@
-import {StyleSheet, Platform} from 'react-native';
+import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../../style';
 import {Theme} from '../../../types';
+import constants from '../../../commons/constants';
 
 export default function styleConstructor(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
@@ -15,7 +16,7 @@ export default function styleConstructor(theme: Theme = {}) {
       alignItems: 'center'
     },
     text: {
-      marginTop: Platform.OS === 'android' ? 4 : 6,
+      marginTop: constants.isAndroid ? 4 : 6,
       fontSize: appStyle.textDayFontSize,
       fontFamily: appStyle.textDayFontFamily,
       fontWeight: appStyle.textDayFontWeight,
@@ -24,7 +25,7 @@ export default function styleConstructor(theme: Theme = {}) {
       ...appStyle.textDayStyle
     },
     alignedText: {
-      marginTop: Platform.OS === 'android' ? 4 : 6
+      marginTop: constants.isAndroid ? 4 : 6
     },
     selected: {
       backgroundColor: appStyle.selectedDayBackgroundColor,

src/commons/constants.ts

@@ -1,8 +1,18 @@
-import {Dimensions} from 'react-native';
+import {Dimensions, I18nManager, Platform, PlatformIOSStatic} from 'react-native';
 
-const {width: screenWidth, height: screenHeight} = Dimensions.get('screen');
+
+const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
+const isRTL = I18nManager.isRTL;
+const isAndroid = Platform.OS === 'android';
+const isIOS = Platform.OS === 'ios';
+const screenAspectRatio = screenWidth < screenHeight ? screenHeight / screenWidth : screenWidth / screenHeight;
+const isTablet = (Platform as PlatformIOSStatic).isPad || (screenAspectRatio < 1.6 && Math.max(screenWidth, screenHeight) >= 900);
 
 export default {
   screenWidth,
-  screenHeight
+  screenHeight,
+  isRTL,
+  isAndroid,
+  isIOS,
+  isTablet
 };

src/expandableCalendar/WeekCalendar/index.tsx

@@ -15,11 +15,10 @@ import asCalendarConsumer from '../asCalendarConsumer';
 import CalendarList, {CalendarListProps} from '../../calendar-list';
 import Week from '../week';
 import Presenter from './presenter';
+import constants from '../../commons/constants';
 
-
-const commons = require('../commons');
 const NUMBER_OF_PAGES = 2; // must be a positive number
-const applyAndroidRtlFix = commons.isAndroid && commons.isRTL;
+const applyAndroidRtlFix = constants.isAndroid && constants.isRTL;
 
 export interface WeekCalendarProps extends CalendarListProps {
   /** whether to have shadow/elevation for the calendar */
@@ -75,7 +74,7 @@ class WeekCalendar extends Component<WeekCalendarProps, State> {
   }
 
   get containerWidth() {
-    return this.props.calendarWidth || commons.screenWidth;
+    return this.props.calendarWidth || constants.screenWidth;
   }
 
   getDatesArray() {

src/expandableCalendar/WeekCalendar/presenter.ts

@@ -6,7 +6,7 @@ import {FlatList} from 'react-native';
 import {toMarkingFormat} from '../../interface';
 import {DateData} from '../../types';
 import {WeekCalendarProps} from './index';
-
+import constants from '../../commons/constants';
 
 const commons = require('../commons');
 const updateSources = commons.UpdateSources;
@@ -15,7 +15,7 @@ const NUMBER_OF_PAGES = 2;
 
 class Presenter {
 
-  private _applyAndroidRtlFix = commons.isAndroid && commons.isRTL;
+  private _applyAndroidRtlFix = constants.isAndroid && constants.isRTL;
   // On Android+RTL there's an initial scroll that cause issues
   private _firstAndroidRTLScrollIgnored = !this._applyAndroidRtlFix;
   public list: React.RefObject<FlatList> = React.createRef();

src/expandableCalendar/agendaList.tsx

@@ -27,7 +27,7 @@ import {getDefaultLocale} from '../services';
 import {Theme} from '../types';
 import styleConstructor from './style';
 import asCalendarConsumer from './asCalendarConsumer';
-
+import constants from '../commons/constants';
 const commons = require('./commons');
 const updateSources = commons.UpdateSources;
 
@@ -180,7 +180,7 @@ class AgendaList extends Component<AgendaListProps> {
         sectionIndex: sectionIndex,
         itemIndex: 0,
         viewPosition: 0, // position at the top
-        viewOffset: (commons.isAndroid ? this.sectionHeight : 0) + viewOffset
+        viewOffset: (constants.isAndroid ? this.sectionHeight : 0) + viewOffset
       });
     }
   }
@@ -271,7 +271,7 @@ class AgendaList extends Component<AgendaListProps> {
   }
 
   // getItemLayout = (data, index) => {
-  //   return {length: commons.screenWidth, offset: commons.screenWidth  * index, index};
+  //   return {length: constants.screenWidth, offset: constants.screenWidth  * index, index};
   // }
 }
 

src/expandableCalendar/commons.ts

@@ -1,14 +1,3 @@
-import {Platform, Dimensions, I18nManager, PlatformIOSStatic} from 'react-native';
-
-const {height, width} = Dimensions.get('window');
-
-export const isRTL = I18nManager.isRTL;
-export const isAndroid = Platform.OS === 'android';
-export const isIos = Platform.OS === 'ios';
-export const screenWidth = width;
-export const screenHeight = height;
-export const screenAspectRatio = screenWidth < screenHeight ? screenHeight / screenWidth : screenWidth / screenHeight;
-export const isTablet = (Platform as PlatformIOSStatic).isPad || (screenAspectRatio < 1.6 && Math.max(screenWidth, screenHeight) >= 900);
 export const todayString = 'today';
 
 export enum UpdateSources {

src/expandableCalendar/index.tsx

@@ -33,6 +33,7 @@ import asCalendarConsumer from './asCalendarConsumer';
 import WeekCalendar from './WeekCalendar';
 import Week from './week';
 
+import constants from '../commons/constants';
 const commons = require('./commons');
 const updateSources = commons.UpdateSources;
 enum Positions {
@@ -258,9 +259,9 @@ class ExpandableCalendar extends Component<ExpandableCalendarProps, State> {
   /** Utils */
   getOpenHeight() {
     if (!this.props.horizontal) {
-      return Math.max(commons.screenHeight, commons.screenWidth);
+      return Math.max(constants.screenHeight, constants.screenWidth);
     }
-    return CLOSED_HEIGHT + (WEEK_HEIGHT * (this.numberOfWeeks - 1)) + (this.props.hideKnob ? 12 : KNOB_CONTAINER_HEIGHT) + (commons.isAndroid ? 3 : 0);
+    return CLOSED_HEIGHT + (WEEK_HEIGHT * (this.numberOfWeeks - 1)) + (this.props.hideKnob ? 12 : KNOB_CONTAINER_HEIGHT) + (constants.isAndroid ? 3 : 0);
   }
 
   getYear(date: XDate) {

src/expandableCalendar/style.ts

@@ -1,9 +1,9 @@
 import {StyleSheet, Platform} from 'react-native';
 import * as defaultStyle from '../style';
 import {Theme} from '../types';
+import constants from '../commons/constants';
 
 
-const commons = require('./commons');
 export const HEADER_HEIGHT = 68;
 export const KNOB_CONTAINER_HEIGHT = 24;
 
@@ -96,7 +96,7 @@ export default function styleConstructor(theme: Theme = {}) {
       position: 'absolute',
       left: 0,
       right: 0,
-      top: HEADER_HEIGHT + (commons.isAndroid ? 8 : 4), // align row on top of calendar's first row
+      top: HEADER_HEIGHT + (constants.isAndroid ? 8 : 4), // align row on top of calendar's first row
     },
     hidden: {
       opacity: 0
@@ -133,7 +133,7 @@ export default function styleConstructor(theme: Theme = {}) {
     },
     arrowImage: {
       tintColor: appStyle.arrowColor,
-      transform: commons.isRTL ? [{scaleX: -1}] : undefined
+      transform: constants.isRTL ? [{scaleX: -1}] : undefined
     },
     todayButtonContainer: {
       alignItems: appStyle.todayButtonPosition === 'right' ? 'flex-end' : 'flex-start',
@@ -143,9 +143,9 @@ export default function styleConstructor(theme: Theme = {}) {
       bottom : 0
     },
     todayButton: {
-      height: commons.isTablet ? 40 : 28, 
-      paddingHorizontal: commons.isTablet ? 20 : 12,
-      borderRadius: commons.isTablet ? 20 : 14,
+      height: constants.isTablet ? 40 : 28, 
+      paddingHorizontal: constants.isTablet ? 20 : 12,
+      borderRadius: constants.isTablet ? 20 : 14,
       flexDirection: appStyle.todayButtonPosition === 'right' ? 'row-reverse' : 'row',
       justifyContent: 'center',
       alignItems: 'center',
@@ -164,7 +164,7 @@ export default function styleConstructor(theme: Theme = {}) {
     },
     todayButtonText: {
       color: appStyle.todayButtonTextColor,
-      fontSize: commons.isTablet ? appStyle.todayButtonFontSize + 2 : appStyle.todayButtonFontSize, 
+      fontSize: constants.isTablet ? appStyle.todayButtonFontSize + 2 : appStyle.todayButtonFontSize, 
       fontWeight: appStyle.todayButtonFontWeight,
       fontFamily: appStyle.todayButtonFontFamily
     },