react-native-ui-lib 7.38.1-snapshot.6294 → 7.38.1-snapshot.6300

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6294",
+  "version": "7.38.1-snapshot.6300",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/animatedImage/index.web.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * @description: Image component that fades-in the image with animation once it's loaded
+ * @extends: Animated.Image
+ */
+declare const AnimatedImage: {
+    (props: any): React.JSX.Element;
+    displayName: string;
+};
+export default AnimatedImage;

package/src/components/animatedImage/index.web.js

@@ -0,0 +1,52 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { StyleSheet, Animated } from 'react-native';
+import View from "../../components/view";
+
+/**
+ * @description: Image component that fades-in the image with animation once it's loaded
+ * @extends: Animated.Image
+ */
+const AnimatedImage = props => {
+  const {
+    containerStyle,
+    source,
+    loader,
+    style,
+    onLoad: propsOnLoad,
+    animationDuration = 300,
+    testID,
+    ...others
+  } = props;
+  const [isLoading, setIsLoading] = useState(true);
+  const opacity = new Animated.Value(0);
+  useEffect(() => {
+    // Fade in the image once it's loaded
+    if (!isLoading) {
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: animationDuration,
+        useNativeDriver: true // Note: native driver may not work for opacity on the web
+      }).start();
+    }
+  }, [isLoading, opacity, animationDuration]);
+  const onLoad = useCallback(event => {
+    setIsLoading(false);
+    propsOnLoad?.(event);
+  }, [propsOnLoad]);
+  return <View style={containerStyle}>
+      <Animated.Image {...others} source={source} style={[style, {
+      opacity
+    }]} // Apply the animated opacity
+    onLoad={onLoad} // Handle the onLoad event
+    testID={testID} />
+      {isLoading && loader && <View style={styles.loader}>{loader}</View>}
+    </View>;
+};
+AnimatedImage.displayName = 'AnimatedImage';
+export default AnimatedImage;
+const styles = StyleSheet.create({
+  loader: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  }
+});

package/src/components/button/index.js

@@ -374,7 +374,6 @@ class Button extends PureComponent {
       animateLayout,
       modifiers,
       forwardedRef,
-      hitSlop: hitSlopProp,
       ...others
     } = this.props;
     const shadowStyle = this.getShadowStyle();
@@ -388,7 +387,7 @@ class Button extends PureComponent {
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
-    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={hitSlopProp ?? this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
+    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/components/hint/hooks/useHintLayout.js

@@ -1,13 +1,29 @@
 import _isEqual from "lodash/isEqual";
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { SafeAreaInsetsManager } from 'uilib-native';
+import { Constants } from "../../../commons/new";
 export default function useHintLayout({
   onBackgroundPress,
   targetFrame
 }) {
   const [targetLayoutState, setTargetLayout] = useState(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState(targetFrame);
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState();
   const [hintMessageWidth, setHintMessageWidth] = useState();
   const targetRef = useRef(null);
+  useEffect(() => {
+    if (targetFrame) {
+      if (!onBackgroundPress) {
+        setTargetLayoutInWindow(targetFrame);
+      } else {
+        SafeAreaInsetsManager.getSafeAreaInsets().then(insets => {
+          setTargetLayoutInWindow({
+            ...targetFrame,
+            y: targetFrame.y + (insets?.top ?? 0) + Constants.getSafeAreaInsets().top
+          });
+        });
+      }
+    }
+  }, []);
   const onTargetLayout = useCallback(({
     nativeEvent: {
       layout