Table sub windows - fix constants and compomponents

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -64,7 +64,7 @@ class ExpandableSectionScreen extends PureComponent {
     return (
       <View margin-10 spread row>
         <Text grey10 text60>
-          ExpandableSection's sectionHeader
+          ExpandableSection sectionHeader
         </Text>
         <Image style={styles.icon} source={this.getChevron()}/>
       </View>
@@ -73,7 +73,7 @@ class ExpandableSectionScreen extends PureComponent {
 
   getBodyElement() {
     return (
-      <Carousel pageWidth={350} itemSpacings={Spacings.s2}>
+      <Carousel>
         {_.map(this.elements, (element, key) => {
           return (
             <View key={key} margin-12>

ios/rnuilib/Info.plist

@@ -47,11 +47,12 @@
 	</array>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
-		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
+	<true/>
 </dict>
 </plist>

src/commons/Constants.ts

@@ -33,6 +33,7 @@ let windowWidth: number = Dimensions.get('window').width;
 let breakpoints: Breakpoint[];
 let defaultMargin = 0;
 
+const isSubWindow = windowWidth < screenWidth;
 //@ts-ignore
 isTablet = Platform.isPad || (getAspectRatio() < 1.6 && Math.max(screenWidth, screenHeight) >= 900);
 
@@ -114,12 +115,18 @@ const constants = {
   get windowHeight() {
     return windowHeight;
   },
+  get isSmallWindow() {
+    return windowWidth <= 340;
+  },
   get isSmallScreen() {
     return screenWidth <= 340;
   },
   get isShortScreen() {
     return screenHeight <= 600;
   },
+  get isWideScreen() {
+    return isTablet && !isSubWindow || this.isLandscape;
+  },
   get screenAspectRatio() {
     return getAspectRatio();
   },
@@ -141,16 +148,13 @@ const constants = {
     }
 
     for (let i = breakpoints.length - 1; i >= 0; --i) {
-      if (screenWidth > breakpoints[i].breakpoint) {
+      if (windowWidth > breakpoints[i].breakpoint) {
         return breakpoints[i].pageMargin;
       }
     }
 
     return defaultMargin;
   },
-  get isWideScreen() {
-    return isTablet || this.isLandscape;
-  },
   getSafeAreaInsets: () => {
     const orientation = getOrientation(screenHeight, screenWidth);
     return orientation === orientations.LANDSCAPE

src/components/colorPalette/index.tsx

@@ -169,7 +169,7 @@ class ColorPalette extends PureComponent<Props, State> {
 
   get containerWidth() {
     const {containerWidth} = this.props;
-    return containerWidth || Constants.screenWidth;
+    return containerWidth || Constants.windowWidth;
   }
 
   getUniqueColors = memoize(colors => {

src/components/connectionStatusBar/index.tsx

@@ -129,7 +129,7 @@ class ConnectionStatusBar extends PureComponent<ConnectionStatusBarProps, Connec
 }
 
 function createStyles() {
-  const typography = Constants.isSmallScreen ? Typography.text90 : Typography.text80;
+  const typography = Constants.isSmallWindow ? Typography.text90 : Typography.text80;
   return StyleSheet.create({
     topContainer: {
       backgroundColor: Colors.grey30

src/components/gridList/useGridLayout.ts

@@ -21,7 +21,7 @@ const useGridLayout = (props: GridListBaseProps) => {
   const {orientation} = useOrientation();
 
   const _containerWidth = useMemo(() => {
-    return (containerWidth ?? Constants.screenWidth - Constants.getPageMargins()) - listPadding * 2;
+    return (containerWidth ?? Constants.windowWidth - Constants.getPageMargins()) - listPadding * 2;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listPadding, orientation, containerWidth]);
 

src/components/gridView/index.tsx

@@ -119,7 +119,7 @@ class GridView extends UIComponent<GridViewProps, GridViewState> {
   };
 
   getDefaultViewWidth() {
-    return Constants.screenWidth - (Constants.getPageMargins() || Spacings.s5) * 2;
+    return Constants.windowWidth - (Constants.getPageMargins() || Spacings.s5) * 2;
   }
 
   getGridContainerWidth() {

src/components/hint/index.tsx

@@ -247,7 +247,7 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   get containerWidth() {
-    const {containerWidth = Constants.screenWidth} = this.props;
+    const {containerWidth = Constants.windowWidth} = this.props;
     return containerWidth;
   }
 
@@ -626,7 +626,7 @@ const styles = StyleSheet.create({
   },
   overlay: {
     position: 'absolute',
-    width: Constants.screenWidth,
+    width: Constants.windowWidth,
     height: Constants.screenHeight
   },
   animatedContainer: {
@@ -636,7 +636,7 @@ const styles = StyleSheet.create({
     position: 'absolute'
   },
   hint: {
-    maxWidth: Math.min(Constants.screenWidth - 2 * Spacings.s4, 400),
+    maxWidth: Math.min(Constants.windowWidth - 2 * Spacings.s4, 400),
     borderRadius: BorderRadiuses.br60,
     backgroundColor: DEFAULT_COLOR
   },

src/components/stackAggregator/index.tsx

@@ -249,7 +249,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
             alignSelf: 'center',
             zIndex: itemsCount - index,
             transform: [{scaleX: animatedScaleArray[index]}],
-            width: Constants.screenWidth - 40,
+            width: Constants.windowWidth - 40,
             height: isCollapsed ? firstItemHeight : undefined
           }
         ]}

src/components/wizard/index.tsx

@@ -55,12 +55,12 @@ class Wizard extends Component<WizardProps, State> {
   getMaxWidth() {
     if (Constants.isTablet) {
       if (Constants.isLandscape) {
-        return Constants.screenWidth * 0.2;
+        return Constants.windowWidth * 0.2;
       } else {
-        return Constants.screenWidth * 0.26;
+        return Constants.windowWidth * 0.26;
       }
     } else {
-      return Constants.screenWidth * 0.4;
+      return Constants.windowWidth * 0.4;
     }
   }
 

src/incubator/Calendar/CalendarItem.tsx

@@ -40,7 +40,7 @@ export default React.memo(CalendarItem);
 
 const styles = StyleSheet.create({
   container: {
-    width: Constants.screenWidth,
+    width: Constants.windowWidth,
     borderBottomWidth: 1
   }
 });