Merge branch 'master' into release

wix · Sep 4, 2024 · 9b28382 · 9b28382
2 parents e455eb4 + c95d43f
commit 9b28382
Show file tree

Hide file tree

Showing 37 changed files with 391 additions and 175 deletions.
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
@@ -114,6 +114,7 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',

diff --git a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
@@ -3521,8 +3521,8 @@ exports[`TextField Screen renders screen 1`] = `
               "marginLeft": 20,
               "minWidth": 66,
               "opacity": 1,
-              "paddingHorizontal": 10,
-              "paddingVertical": 2,
+              "paddingHorizontal": 11,
+              "paddingVertical": 3,
             }
           }
         >

diff --git a/demo/src/screens/componentScreens/GridViewScreen.tsx b/demo/src/screens/componentScreens/GridViewScreen.tsx
@@ -12,6 +12,7 @@ class GridViewScreen extends Component {
         _.map(contacts, contact => ({
           imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
           title: _.split(contact.name, ' ')[0],
+          titleLines: 1,
           onPress: () => Alert.alert('My name is ' + contact.name)
         })))(conversations),
     products: _.flow(products => _.take(products, 8),
@@ -174,7 +175,7 @@ class GridViewScreen extends Component {
           <GridView items={pairs} numColumns={2}/>
           <Text marginV-s5 text60BO>
             Dynamic itemSize
-            <Text text90>  (Using maxItemWidth)</Text>
+            <Text text90> (Using maxItemWidth)</Text>
           </Text>
           <GridView items={dynamicLayout} maxItemWidth={120}/>
           <Text marginV-s5 text60BO>

diff --git a/demo/src/screens/componentScreens/NumberInputScreen.tsx b/demo/src/screens/componentScreens/NumberInputScreen.tsx
@@ -111,6 +111,7 @@ const NumberInputScreen = () => {
     if (currentData.current?.type === 'valid') {
       return currentData.current.number > MINIMUM_PRICE;
     }
+    return false;
   }, []);
 
   const isWithinDiscountPercentage = useCallback(() => {
@@ -119,6 +120,7 @@ const NumberInputScreen = () => {
         currentData.current.number >= DISCOUNT_PERCENTAGE.min && currentData.current.number <= DISCOUNT_PERCENTAGE.max
       );
     }
+    return false;
   }, []);
 
   const validate = useMemo((): Incubator.TextFieldProps['validate'] => {

diff --git a/demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx b/demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx
@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Card, Image, TabController} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=500&dpr=1';
+const items = [
+  {key: 'tab1', label: 'Tab 1'},
+  {key: 'tab2', label: 'Tab 2'}
+];
+
+export default class TabControllerWithStickyHeaderScreen extends Component {
+  renderHeader = () => {
+    return (
+      <View bg-red30 height={280} bottom>
+        <Image source={{uri: IMAGE_URL}} style={{flex: 1}}/>
+      </View>
+    );
+  };
+
+  renderTab1 = () => {
+    return (
+      <View bg-green80 paddingT-s5>
+        {_.times(7, i => {
+          return (
+            <Card key={i} height={100} marginB-s5 marginH-s5 center>
+              <Text text40>item {i}</Text>
+            </Card>
+          );
+        })}
+      </View>
+    );
+  };
+
+  renderTab2 = () => {
+    return (
+      <View bg-orange40 paddingT-s5>
+        {_.times(15, i => {
+          return (
+            <View key={i} height={100} marginB-s5 marginH-s5 center bg-orange60>
+              <Text text40> item {i}</Text>
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <TabController items={items} nestedInScrollView>
+        <ScrollView
+          // stickyHeaderHiddenOnScroll
+          stickyHeaderIndices={[1]}
+        >
+          {this.renderHeader()}
+          <TabController.TabBar/>
+
+          <View flex>
+            <TabController.TabPage index={0}>{this.renderTab1()}</TabController.TabPage>
+            <TabController.TabPage index={1}>{this.renderTab2()}</TabController.TabPage>
+          </View>
+        </ScrollView>
+      </TabController>
+    );
+  }
+}
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
@@ -15,7 +15,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
-  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
+  registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
   registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
   registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +28,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
-  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
+  registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +38,12 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
-  registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
+  registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
-  registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
+  registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -55,6 +55,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);

diff --git a/demo/src/screens/incubatorScreens/PanViewScreen.tsx b/demo/src/screens/incubatorScreens/PanViewScreen.tsx
@@ -146,9 +146,8 @@ class PanViewScreen extends Component {
 
   render() {
     const {showToast, showDialog} = this.state;
-    const Container = showDialog ? View : GestureHandlerRootView;
     return (
-      <Container style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -164,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </Container>
+      </GestureHandlerRootView>
     );
   }
 }

diff --git a/package.json b/package.json
@@ -106,12 +106,12 @@
     "react-dom": "^18.2.0",
     "react-native": "0.71.12",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.9.0",
+    "react-native-gesture-handler": "2.14.1",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.11.0",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "3.4.0",
+    "react-native-reanimated": "3.8.1",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "1.1.0",

diff --git a/src/components/WheelPicker/index.tsx b/src/components/WheelPicker/index.tsx
@@ -349,6 +349,7 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
 
   return (
     <View testID={testID} bg-$backgroundDefault style={style}>
+      {separators}
       <View row centerH>
         <View flexG>
           <AnimatedFlatList
@@ -383,7 +384,6 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
       {label && labelContainer}
       {fader(FaderPosition.BOTTOM)}
       {fader(FaderPosition.TOP)}
-      {separators}
     </View>
   );
 };

diff --git a/src/components/button/Button.driver.new.ts b/src/components/button/Button.driver.new.ts
@@ -1,3 +1,4 @@
+import {StyleSheet} from 'react-native';
 import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
 
 export const ButtonDriver = (props: ComponentProps) => {
@@ -17,9 +18,17 @@ export const ButtonDriver = (props: ComponentProps) => {
     return labelDriver;
   };
 
+  const getLabelStyle = () => {
+    return labelDriver?.getStyle();
+  };
+
   const getIcon = () => {
     return iconDriver;
   };
 
-  return {getLabel, getIcon, ...driver};
+  const getIconStyle = () => {
+    return StyleSheet.flatten(iconDriver?.getElement().props.style);
+  };
+
+  return {getLabel, getLabelStyle, getIconStyle, getIcon, ...driver};
 };
diff --git a/src/components/button/__tests__/__snapshots__/index.spec.js.snap b/src/components/button/__tests__/__snapshots__/index.spec.js.snap
@@ -482,8 +482,8 @@ exports[`Button backgroundColor should return undefined if this button is outlin
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1230,8 +1230,8 @@ exports[`Button container size should reduce padding by outlineWidth in case of
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 18,
-      "paddingVertical": 7.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1408,8 +1408,8 @@ exports[`Button container size should return style for large button 2`] = `
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1591,8 +1591,8 @@ exports[`Button container size should return style for medium button 2`] = `
       "justifyContent": "center",
       "minWidth": 77,
       "opacity": 1,
-      "paddingHorizontal": 15,
-      "paddingVertical": 5.5,
+      "paddingHorizontal": 16,
+      "paddingVertical": 6.5,
     }
   }
 >
@@ -1867,8 +1867,8 @@ exports[`Button container size should return style for small button 2`] = `
       "justifyContent": "center",
       "minWidth": 70,
       "opacity": 1,
-      "paddingHorizontal": 13,
-      "paddingVertical": 3.5,
+      "paddingHorizontal": 14,
+      "paddingVertical": 4.5,
     }
   }
 >
@@ -2055,8 +2055,8 @@ exports[`Button container size should return style for xSmall button 2`] = `
       "justifyContent": "center",
       "minWidth": 66,
       "opacity": 1,
-      "paddingHorizontal": 10,
-      "paddingVertical": 2,
+      "paddingHorizontal": 11,
+      "paddingVertical": 3,
     }
   }
 >
@@ -4191,8 +4191,8 @@ exports[`Button outline should render button with an outline 1`] = `
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4371,8 +4371,8 @@ exports[`Button outline should render button with outline and outlineColor 1`] =
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4461,8 +4461,8 @@ exports[`Button outline should return custom borderWidth according to outlineWid
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 17,
-      "paddingVertical": 6.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4551,8 +4551,8 @@ exports[`Button outline should return disabled color for outline if button is di
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -149,16 +149,8 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getContainerSizeStyle() {
-    const {
-      outline,
-      avoidMinWidth,
-      avoidInnerPadding,
-      round,
-      size: propsSize,
-      outlineWidth: propsOutlineWidth
-    } = this.props;
+    const {avoidMinWidth, avoidInnerPadding, round, size: propsSize} = this.props;
     const size = propsSize || DEFAULT_SIZE;
-    const outlineWidth = propsOutlineWidth || 1;
 
     const CONTAINER_STYLE_BY_SIZE: Dictionary<any> = {};
     CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round
@@ -190,17 +182,6 @@ class Button extends PureComponent<Props, ButtonState> {
         minWidth: MIN_WIDTH.LARGE
       };
 
-    if (outline) {
-      _.forEach(CONTAINER_STYLE_BY_SIZE, style => {
-        if (round) {
-          style.padding -= outlineWidth; // eslint-disable-line
-        } else {
-          style.paddingVertical -= outlineWidth; // eslint-disable-line
-          style.paddingHorizontal -= outlineWidth; // eslint-disable-line
-        }
-      });
-    }
-
     const containerSizeStyle = CONTAINER_STYLE_BY_SIZE[size];
 
     if (this.isLink || (this.isIconButton && !round)) {

diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx
@@ -17,7 +17,7 @@ export type ChipProps = ViewProps &
     /**
      * Chip's size. Number or a width and height object.
      */
-    size?: number | {width: number; height: number};
+    size?: number | Partial<{width: number; height: number}>;
     /**
      * On Chip press callback
      */