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

package/package.json

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

package/src/assets/icons/index.web.js

@@ -0,0 +1,27 @@
+console.log(`inside index.web.js`);
+export const icons = {
+  get check() {
+    return {uri: require('./check.png'), dimensions: {width: 24, height: 24}};
+  },
+  get checkSmall() {
+    return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}};
+  },
+  get minusSmall() {
+    return {uri: require('./minusSmall.png'), dimensions: {width: 24, height: 24}};
+  },
+  get plusSmall() {
+    return {uri: require('./plusSmall.png'), dimensions: {width: 24, height: 24}};
+  },
+  get search() {
+    return {uri: require('./search.png'), dimensions: {width: 24, height: 24}};
+  },
+  get x() {
+    return {uri: require('./x.png'), dimensions: {width: 24, height: 24}};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), dimensions: {width: 24, height: 24}};
+  }
+};

package/src/assets/images/index.web.js

@@ -0,0 +1,5 @@
+export const images = {
+  get gradient() {
+    return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}};
+  }
+};

package/src/components/button/index.js

@@ -374,6 +374,7 @@ class Button extends PureComponent {
       animateLayout,
       modifiers,
       forwardedRef,
+      hitSlop: hitSlopProp,
       ...others
     } = this.props;
     const shadowStyle = this.getShadowStyle();
@@ -387,7 +388,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={this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
+    }, 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}>
         {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,29 +1,13 @@
 import _isEqual from "lodash/isEqual";
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { SafeAreaInsetsManager } from 'uilib-native';
-import { Constants } from "../../../commons/new";
+import { useState, useCallback, useRef } from 'react';
 export default function useHintLayout({
   onBackgroundPress,
   targetFrame
 }) {
   const [targetLayoutState, setTargetLayout] = useState(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState();
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState(targetFrame);
   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

package/src/components/image/index.js

@@ -156,7 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[tintColor && {
+      <ImageView style={[Constants.isWeb && source?.dimensions, tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

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

@@ -1,10 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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'
-  }
-});