Merge branch 'master' into release

wix · Mar 27, 2024 · f710846 · f710846
2 parents 5d79cb8 + 9fc096a
commit f710846
Show file tree

Hide file tree

Showing 36 changed files with 212 additions and 132 deletions.
diff --git a/demo/src/screens/componentScreens/GridListScreen.tsx b/demo/src/screens/componentScreens/GridListScreen.tsx
@@ -1,42 +1,76 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {View, Text, Constants, GridList, Card, Spacings, BorderRadiuses, GridListProps} from 'react-native-ui-lib';
+import {
+  View,
+  Text,
+  Constants,
+  GridList,
+  Card,
+  Spacings,
+  BorderRadiuses,
+  GridListProps,
+  GridListItem
+} from 'react-native-ui-lib';
 import products from '../../data/products';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 class GridListScreen extends Component {
   state = {
-    orientation: Constants.orientation
+    orientation: Constants.orientation,
+    useGridListItem: false
   };
 
-  renderItem: GridListProps<typeof products[0]>['renderItem'] = ({item}) => {
+  renderHeader = () => {
     return (
-      <Card flex>
-        <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
-        <View padding-s2>
-          <Text $textDefault>{item.name}</Text>
-          <Text $textDefault>{item.formattedPrice}</Text>
-          {item.inventory.status === 'Out of Stock' && (
-            <Text text90M $textDangerLight>
-              {item.inventory.status}
-            </Text>
-          )}
-        </View>
-      </Card>
+      <View>
+        <Text h1 marginB-s5>
+          GridList
+        </Text>
+        {renderBooleanOption.call(this, 'UseGridListItem', 'useGridListItem')}
+      </View>
     );
   };
 
+  renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({item}) => {
+    const {useGridListItem} = this.state;
+
+    if (useGridListItem) {
+      return (
+        <GridListItem
+          // containerStyle={{width: '100%', borderWidth: 1}}
+          itemSize={{width: '100%', height: 200}}
+          imageProps={{source: {uri: item.mediaUrl}}}
+          title="Title"
+          subtitle="Subitle"
+          overlayText
+        />
+      );
+    } else {
+      return (
+        <Card flex>
+          <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
+          <View padding-s2>
+            <Text $textDefault>{item.name}</Text>
+            <Text $textDefault>{item.formattedPrice}</Text>
+            {item.inventory.status === 'Out of Stock' && (
+              <Text text90M $textDangerLight>
+                {item.inventory.status}
+              </Text>
+            )}
+          </View>
+        </Card>
+      );
+    }
+  };
+
   render() {
     return (
-      <GridList<typeof products[0]>
-        ListHeaderComponent={
-          <Text h1 marginB-s5>
-            GridList
-          </Text>
-        }
+      <GridList<(typeof products)[0]>
+        ListHeaderComponent={() => this.renderHeader()}
         data={products}
         renderItem={this.renderItem}
-        // numColumns={2}
-        maxItemWidth={140}
+        numColumns={2}
+        // maxItemWidth={140}
         itemSpacing={Spacings.s3}
         listPadding={Spacings.s5}
         // keepItemSize

diff --git a/demo/src/screens/componentScreens/NumberInputScreen.tsx b/demo/src/screens/componentScreens/NumberInputScreen.tsx
@@ -152,6 +152,7 @@ const NumberInputScreen = () => {
       label,
       labelStyle: styles.label,
       style: textStyle,
+      maxLength: 6,
       validate,
       validationMessage,
       validationMessageStyle: Typography.text80M,

diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
-    "@types/react": "^18.2.15",
+    "@types/react": "18.2.72",
     "@types/react-native": "0.71.2",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",

diff --git a/src/components/WheelPicker/WheelPicker.driver.tsx b/src/components/WheelPicker/WheelPicker.driver.tsx
@@ -1,18 +1,17 @@
-import {FlatListProps} from 'react-native';
-import {WheelPickerProps, WheelPickerItemProps, ITEM_HEIGHT} from './index';
+import {ITEM_HEIGHT} from './index';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {useScrollableDriver} from '../../testkit/new/useScrollable.driver';
 import {TextDriver} from '../../components/text/Text.driver.new';
 
 export const WheelPickerDriver = (props: ComponentProps) => {
-  const driver = useComponentDriver<WheelPickerProps>(props);
+  const driver = useComponentDriver(props);
 
-  const listDriver = useScrollableDriver<FlatListProps<WheelPickerItemProps>>(useComponentDriver({
+  const listDriver = useScrollableDriver(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.list`
   }));
 
-  const itemsLength = listDriver.getProps().data?.length ?? 0;
+  const itemsLength = listDriver.getElement().props.data?.length ?? 0;
 
   const moveToItem = (index: number, itemHeight: number = ITEM_HEIGHT, numberOfRows: number = itemsLength) => {
     listDriver.triggerEvent('onMomentumScrollEnd', {
@@ -23,8 +22,7 @@ export const WheelPickerDriver = (props: ComponentProps) => {
   };
 
   const getListHeight = () => {
-    //@ts-expect-error
-    return listDriver.getProps().height;
+    return listDriver.getElement().props.height;
   };
 
   const labelDriver = TextDriver({

diff --git a/src/components/WheelPicker/index.tsx b/src/components/WheelPicker/index.tsx
@@ -335,6 +335,8 @@ const WheelPicker = ({
     );
   }, []);
 
+  const offsets = useMemo(() => items.map((_, i) => i * itemHeight), [items, itemHeight]);
+
   return (
     <View testID={testID} bg-$backgroundDefault style={style}>
       <View row centerH>
@@ -356,7 +358,7 @@ const WheelPicker = ({
             ref={scrollView}
             // @ts-expect-error
             contentContainerStyle={contentContainerStyle}
-            snapToInterval={itemHeight}
+            snapToOffsets={offsets}
             decelerationRate={Constants.isAndroid ? 0.98 : 'normal'}
             renderItem={renderItem}
             getItemLayout={getItemLayout}

diff --git a/src/components/button/Button.driver.new.ts b/src/components/button/Button.driver.new.ts
@@ -1,8 +1,7 @@
-import {ButtonProps} from './ButtonTypes';
 import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
 
 export const ButtonDriver = (props: ComponentProps) => {
-  const driver = usePressableDriver<ButtonProps>(useComponentDriver(props));
+  const driver = usePressableDriver(useComponentDriver(props));
 
   const labelDriver = TextDriver({
     renderTree: props.renderTree,

diff --git a/src/components/carousel/Carousel.driver.new.ts b/src/components/carousel/Carousel.driver.new.ts
@@ -1,9 +1,8 @@
-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 driver = useScrollableDriver(useComponentDriver(props));
 
   const scroll = (props: ScrollProps) => {
     return driver.scroll(props);

diff --git a/src/components/checkbox/Checkbox.driver.ts b/src/components/checkbox/Checkbox.driver.ts
@@ -1,10 +1,9 @@
-import {CheckboxProps} from './index';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {usePressableDriver} from '../../testkit/new/usePressable.driver';
 import {TextDriver} from '../text/Text.driver.new';
 
 export const CheckboxDriver = (props: ComponentProps) => {
-  const driver = usePressableDriver<CheckboxProps>(useComponentDriver(props));
+  const driver = usePressableDriver(useComponentDriver(props));
 
   const labelDriver = TextDriver({
     renderTree: props.renderTree,

diff --git a/src/components/floatingButton/__tests__/index.spec.tsx b/src/components/floatingButton/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ const TestCase = (props) => {
 };
 export const FloatingButtonDriver = (props: ComponentProps) => {
   const driver = useComponentDriver(props);
-  const getStyle = () => driver.getProps().style as ViewStyle;
+  const getStyle = () => driver.getElement().props.style as ViewStyle;
   return {...driver, getStyle};
 };
 
@@ -72,7 +72,7 @@ describe('FloatingButton', () => {
       const renderTree = render(<TestCase {...props}/>);
       const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
 
-      expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s8);
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s8);
     });
 
     it('should have default bottom margin for both buttons', () => {
@@ -81,16 +81,16 @@ describe('FloatingButton', () => {
       const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
       const buttonDriver2 = ButtonDriver({renderTree, testID: `${TEST_ID}.secondaryButton`});
 
-      expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s4);
-      expect(buttonDriver2.getProps()?.style?.marginBottom).toBe(Spacings.s7);
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
+      expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(Spacings.s7);
     });
 
     it('should have bottom margin that match bottomMargin prop', () => {
       const props = {visible: true, bottomMargin: 10};
       const renderTree = render(<TestCase {...props}/>);
       const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
 
-      expect(buttonDriver.getProps()?.style?.marginBottom).toBe(10);
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(10);
     });
 
     it('should have bottom margin for secondary button that match bottomMarginProp', () => {
@@ -99,8 +99,8 @@ describe('FloatingButton', () => {
       const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
       const buttonDriver2 = ButtonDriver({renderTree, testID: `${TEST_ID}.secondaryButton`});
 
-      expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s4);
-      expect(buttonDriver2.getProps()?.style?.marginBottom).toBe(10);
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
+      expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(10);
     });
   });
 

diff --git a/src/components/gridList/index.tsx b/src/components/gridList/index.tsx
@@ -13,17 +13,19 @@ function GridList<T = any>(props: GridListProps<T>) {
     listPadding = 0,
     keepItemSize,
     containerWidth,
+    style,
     contentContainerStyle,
     ...others
   } = props;
 
-  const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout({
+  const {itemContainerStyle, numberOfColumns, listStyle} = useGridLayout({
     numColumns,
     itemSpacing,
     maxItemWidth,
     listPadding,
     keepItemSize,
     containerWidth,
+    style,
     contentContainerStyle
   });
 
@@ -37,7 +39,10 @@ function GridList<T = any>(props: GridListProps<T>) {
     <FlatList
       key={numberOfColumns}
       {...others}
-      contentContainerStyle={listContentStyle}
+      /* NOTE: Using style instead of contentContainerStyle because of RN issue with a flatlist nested in another flatlist 
+      losing their contentContainerStyle */
+      style={listStyle}
+      // contentContainerStyle={listContentStyle}
       renderItem={_renderItem}
       numColumns={numberOfColumns}
     />

diff --git a/src/components/gridList/types.ts b/src/components/gridList/types.ts
@@ -1,6 +1,6 @@
 import {FlatListProps, ScrollViewProps} from 'react-native';
 
-export interface GridListBaseProps extends Pick<ScrollViewProps, 'contentContainerStyle'> {
+export interface GridListBaseProps extends Pick<ScrollViewProps, 'style' | 'contentContainerStyle'> {
   /**
    * Allow a responsive item width to the maximum item width
    */

diff --git a/src/components/gridList/useGridLayout.ts b/src/components/gridList/useGridLayout.ts
@@ -15,6 +15,7 @@ const useGridLayout = (props: GridListBaseProps) => {
     listPadding = 0,
     keepItemSize,
     containerWidth,
+    style,
     contentContainerStyle
   } = props;
 
@@ -47,8 +48,12 @@ const useGridLayout = (props: GridListBaseProps) => {
   const listContentStyle = useMemo(() => {
     return [{paddingHorizontal: listPadding}, contentContainerStyle];
   }, [listPadding, contentContainerStyle]);
+
+  const listStyle = useMemo(() => {
+    return [{paddingHorizontal: listPadding}, style];
+  }, [listPadding, style]);
 
-  return {itemContainerStyle, numberOfColumns, listContentStyle};
+  return {itemContainerStyle, numberOfColumns, listStyle, listContentStyle};
 };
 
 export default useGridLayout;
diff --git a/src/components/gridListItem/index.tsx b/src/components/gridListItem/index.tsx
@@ -277,6 +277,6 @@ const styles = StyleSheet.create({
 export default GridListItem;
 
 interface ImageSize {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
 }
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -259,6 +259,7 @@ class Image extends PureComponent<Props, State> {
             intensity={overlayIntensity}
             color={overlayColor}
             customContent={customOverlayContent}
+            borderRadius={others?.borderRadius}
           />
         )}
       </ImageView>

diff --git a/src/components/modal/Modal.driver.new.ts b/src/components/modal/Modal.driver.new.ts
@@ -1,14 +1,13 @@
-import {ModalProps} from './index';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {ButtonDriver} from '../button/Button.driver.new';
 
 export const ModalDriver = (props: ComponentProps) => {
   const {renderTree, testID} = props;
-  const driver = useComponentDriver<ModalProps>(props);
+  const driver = useComponentDriver(props);
   const overlayDriver = ButtonDriver({renderTree, testID: `${testID}.TouchableOverlay`});
 
   const isVisible = () => {
-    return !!driver.getProps().visible;
+    return !!driver.getElement().props.visible;
   };
 
   return {...driver, isVisible, pressOnBackground: overlayDriver.press};

diff --git a/src/components/numberInput/index.tsx b/src/components/numberInput/index.tsx
@@ -197,6 +197,7 @@ function NumberInput(props: NumberInputProps, ref: any) {
     <MaskedInput
       testID={testID}
       ref={ref}
+      maxLength={textFieldProps?.maxLength}
       renderMaskedText={renderNumberInput}
       keyboardType={'numeric'}
       initialValue={initialNumber ? `${initialNumber}` : undefined}

diff --git a/src/components/overlay/index.tsx b/src/components/overlay/index.tsx
@@ -1,6 +1,6 @@
 import {isUndefined} from 'lodash';
 import React, {PureComponent} from 'react';
-import {StyleSheet, Image, ImageSourcePropType} from 'react-native';
+import {StyleSheet, Image, ImageProps, ImageSourcePropType} from 'react-native';
 import {Colors} from '../../style';
 import View from '../view';
 
@@ -23,7 +23,7 @@ export enum OverlayIntensityType {
 
 export type OverlayTypeType = typeof OVERLY_TYPES[keyof typeof OVERLY_TYPES];
 
-export type OverlayTypes = {
+export type OverlayTypes = Pick<ImageProps, 'borderRadius'> & {
   /**
    * The type of overlay to set on top of the image
    */
@@ -88,7 +88,8 @@ class Overlay extends PureComponent<OverlayTypes> {
   };
 
   renderImage = (style: any, source: ImageSourcePropType) => {
-    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
+    const {borderRadius} = this.props;
+    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source} borderRadius={borderRadius}/>;
   };
 
   getImageSource = (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => {

diff --git a/src/components/sectionsWheelPicker/SectionsWheelPicker.driver.tsx b/src/components/sectionsWheelPicker/SectionsWheelPicker.driver.tsx
@@ -4,8 +4,8 @@ import {WheelPickerDriver} from '../WheelPicker/WheelPicker.driver';
 import {SectionsWheelPickerProps} from './index';
 
 export const SectionsWheelPickerDriver = (props: ComponentProps) => {
-  const driver = useComponentDriver<SectionsWheelPickerProps>(props);
-  const sections = driver.getProps().children as SectionsWheelPickerProps;
+  const driver = useComponentDriver(props);
+  const sections = driver.getElement().children as SectionsWheelPickerProps;
   const sectionsDrivers = _.map(sections, (_, index) => {
     const sectionTestID = `${props.testID}.${index}`;
     return WheelPickerDriver({