Merge branch 'master' into release

Author: ethanshar

demo/src/screens/MainScreen.js

@@ -117,7 +117,7 @@ class MainScreen extends Component {
     this?.sectionListRef?.current?.scrollToLocation({
       animated: true,
       sectionIndex: index,
-      itemIndex: 0,
+      itemIndex: 1,
       viewPosition: 0
     });
   };

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, View, Text, Button, Checkbox, CheckboxRef} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class CheckboxScreen extends Component {
   state = {
@@ -10,7 +10,28 @@ export default class CheckboxScreen extends Component {
     value4: true,
     value5: false,
     value6: false,
-    value7: true
+    value7: false,
+    validationText: '',
+    validationColor: Colors.$textDefault
+  };
+
+  checkbox = React.createRef<CheckboxRef>();
+
+  onPress = () => {
+    this.checkbox.current?.validate();
+  };
+
+  onValueChange = (value: boolean) => {
+    this.setState({value7: value}, () => {
+      console.log('onValueChange: ', value);
+    });
+  };
+
+  onChangeValidity = (value?: boolean) => {
+    this.setState({
+      validationText: String(value),
+      validationColor: value === true ? Colors.$textSuccess : Colors.$textDangerLight
+    });
   };
 
   render() {
@@ -77,6 +98,24 @@ export default class CheckboxScreen extends Component {
             iconColor={Colors.green10}
           />
         </View>
+
+        <View marginT-20>
+          <Text text60 $textDefault marginB-10>
+            Validation
+          </Text>
+          <Text marginB-4 color={this.state.validationColor}>{this.state.validationText}</Text>
+          <View row centerV spread marginB-10>
+            <Checkbox
+              required
+              onChangeValidity={this.onChangeValidity}
+              ref={this.checkbox}
+              value={this.state.value7}
+              onValueChange={this.onValueChange}
+              label={'This is a checkbox'}
+            />
+            <Button size={'small'} label={'Validate'} onPress={this.onPress}/>
+          </View>
+        </View>
       </View>
     );
   }

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>

lib/components/DynamicFonts/PermissionsAcquirer.web.ts

@@ -0,0 +1,2 @@
+import PermissionsAcquirer from './NoPermissionsAcquirer';
+export default PermissionsAcquirer;

lib/components/DynamicFonts/index.ts

@@ -1,10 +1,9 @@
-import {Platform} from 'react-native';
 import FontLoader, {FontExtension, LoadFontInput} from './FontLoader';
 import FontDownloader, {FontDownloaderProps} from './FontDownloader';
-import PermissionsAcquirerAndroid, {PermissionsAcquirerProps} from './PermissionsAcquirer.android';
-import PermissionsAcquirerIOS from './PermissionsAcquirer.ios';
+import type {PermissionsAcquirerProps} from './PermissionsAcquirer.android';
+// @ts-expect-error
+import PermissionsAcquirer from './PermissionsAcquirer';
 import NoPermissionsAcquirer from './NoPermissionsAcquirer';
-const PermissionsAcquirer = Platform.OS === 'android' ? PermissionsAcquirerAndroid : PermissionsAcquirerIOS;
 
 const DEFAULT_FONT_LOAD_ERROR_MESSAGE = 'Unable to load this font.';
 

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/carousel/Carousel.driver.new.ts

@@ -0,0 +1,13 @@
+import {CarouselProps} from './types';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {useScrollableDriver, ScrollProps} from '../../testkit/new/useScrollable.driver';
+
+export const CarouselDriver = (props: ComponentProps) => {
+  const driver = useScrollableDriver<CarouselProps>(useComponentDriver(props));
+
+  const scroll = (props: ScrollProps) => {
+    return driver.scroll(props);
+  };
+
+  return {...driver, scroll};
+};

src/components/carousel/__tests__/index.spec.tsx

@@ -2,22 +2,18 @@ import {map} from 'lodash';
 import React from 'react';
 import {Text, View} from 'react-native';
 import {fireOnMomentumScrollEnd} from '../../../uilib-test-renderer';
+import {render} from '@testing-library/react-native';
 import Carousel from '../index';
 import {Constants} from '../../../commons/new';
-import {CarouselDriver} from '../Carousel.driver';
+import {CarouselDriver} from '../Carousel.driver.new';
 
 const numberOfPagesShown = 5;
 const onChangePageMock = jest.fn();
 const onScrollMock = jest.fn();
 const testID = 'carousel';
 const TestCase = (props: any) => {
   return (
-    <Carousel
-      testID={testID}
-      onChangePage={onChangePageMock}
-      onScroll={onScrollMock}
-      {...props}
-    >
+    <Carousel testID={testID} onChangePage={onChangePageMock} onScroll={onScrollMock} {...props}>
       {map([...Array(numberOfPagesShown)], (_, index) => (
         <Page key={index}>
           <Text testID={`page-${index}`}>Page #{index}</Text>
@@ -27,7 +23,7 @@ const TestCase = (props: any) => {
   );
 };
 
-const Page = ({children, ...others}:{children: React.ReactNode, others?: any}) => {
+const Page = ({children, ...others}: {children: React.ReactNode; others?: any}) => {
   return (
     <View {...others} style={{flex: 1}}>
       {children}
@@ -36,41 +32,43 @@ const Page = ({children, ...others}:{children: React.ReactNode, others?: any}) =
 };
 
 describe('Carousel render tests', () => {
-  afterEach(() => CarouselDriver.clear());
-
   describe('initialPage', () => {
     it('should be set to default initialPage', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
 
       expect((await driver.getContentOffset()).x).toBe(0);
     });
 
     it('should be set to initialPage = 2', async () => {
-      const driver = new CarouselDriver({component: <TestCase initialPage={2}/>, testID});
+      const renderTree = render(<TestCase initialPage={2}/>);
+      const driver = CarouselDriver({renderTree, testID});
 
       expect((await driver.getContentOffset()).x).toBe(Constants.screenWidth * 2);
     });
   });
 
   describe('onScroll', () => {
     it('should trigger onScroll from the second scroll', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
 
-      await driver.scroll(Constants.screenWidth); //NOTE: first scroll doesn't fire onScroll
+      await driver.scroll({x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
       expect(onScrollMock).not.toHaveBeenCalled();
 
-      await driver.scroll(Constants.screenWidth);
+      await driver.scroll({x: Constants.screenWidth});
       expect(onScrollMock).toHaveBeenCalled();
     });
   });
 
   describe('onChangePage', () => {
     it('should trigger onChangePage with current page', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
       const scrollView = await driver.getElement();
 
-      await driver.scroll(Constants.screenWidth); //NOTE: first scroll doesn't fire onScroll
-      await driver.scroll(Constants.screenWidth);
+      await driver.scroll({x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
+      await driver.scroll({x: Constants.screenWidth});
       expect(onChangePageMock).not.toHaveBeenCalled();
 
       fireOnMomentumScrollEnd(scrollView, {x: Constants.screenWidth});