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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.0",
+  "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/ButtonConstants.d.ts

@@ -17,4 +17,10 @@ export declare const MIN_WIDTH: {
     MEDIUM: number;
     LARGE: number;
 };
+export declare const SIZE_TO_VERTICAL_HITSLOP: {
+    readonly xSmall: 30;
+    readonly small: 25;
+    readonly medium: 20;
+    readonly large: 15;
+};
 export declare const DEFAULT_SIZE = ButtonSize.large;

package/src/components/button/ButtonConstants.js

@@ -17,4 +17,10 @@ export const MIN_WIDTH = {
   MEDIUM: 77,
   LARGE: 90
 };
+export const SIZE_TO_VERTICAL_HITSLOP = {
+  [ButtonSize.xSmall]: 30,
+  [ButtonSize.small]: 25,
+  [ButtonSize.medium]: 20,
+  [ButtonSize.large]: 15
+};
 export const DEFAULT_SIZE = ButtonSize.large;

package/src/components/button/index.d.ts

@@ -11,9 +11,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     static sizes: typeof ButtonSize;
     static animationDirection: typeof ButtonAnimationDirection;
     constructor(props: Props);
-    state: {
-        size: undefined;
-    };
+    state: Record<'size', undefined | number>;
     styles: {
         container: {
             backgroundColor: string;
@@ -370,7 +368,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
     getLabelColor(): string | undefined;
     getIconColor(): string | undefined;
     getLabelSizeStyle(): TextStyle | undefined;
-    getContainerSizeStyle(): any;
+    getContainerSizeStyle(): Partial<{
+        height: number;
+        width: number;
+        padding: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        minWidth: number;
+    }>;
     getOutlineStyle(): {
         borderWidth: number;
         borderColor: string;
@@ -391,10 +396,18 @@ declare class Button extends PureComponent<Props, ButtonState> {
     })[] | undefined;
     getIconStyle(): [ImageStyle, StyleProp<ImageStyle>];
     getAnimationDirectionStyle(): {
-        alignSelf: string;
+        readonly alignSelf: "flex-start";
+    } | {
+        readonly alignSelf: "flex-end";
     } | undefined;
     renderIcon(): React.JSX.Element | null;
     renderLabel(): React.JSX.Element | null;
+    getAccessibleHitSlop(): {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
     render(): React.JSX.Element;
 }
 export { Button };

package/src/components/button/index.js

@@ -7,7 +7,7 @@ import TouchableOpacity from "../touchableOpacity";
 import Text from "../text";
 import Icon from "../icon";
 import { ButtonSize, ButtonAnimationDirection, ButtonProps, DEFAULT_PROPS } from "./types";
-import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE } from "./ButtonConstants";
+import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE, SIZE_TO_VERTICAL_HITSLOP } from "./ButtonConstants";
 export { ButtonSize, ButtonAnimationDirection, ButtonProps };
 class Button extends PureComponent {
   static displayName = 'Button';
@@ -351,6 +351,20 @@ class Button extends PureComponent {
     }
     return null;
   }
+  getAccessibleHitSlop() {
+    const containerStyle = this.getContainerSizeStyle();
+    const isWidthSet = containerStyle.width !== undefined || containerStyle.minWidth !== undefined;
+    const width = containerStyle.width || containerStyle.minWidth || 0;
+    const widthWithPadding = width + (containerStyle.paddingHorizontal || containerStyle.padding || 0) * 2;
+    const horizontalHitslop = isWidthSet ? Math.max(0, (48 - widthWithPadding) / 2) : 10;
+    const verticalHitslop = (containerStyle.height ? Math.max(0, 48 - containerStyle.height) : SIZE_TO_VERTICAL_HITSLOP[this.props.size || DEFAULT_SIZE]) / 2;
+    return {
+      top: verticalHitslop,
+      bottom: verticalHitslop,
+      left: horizontalHitslop,
+      right: horizontalHitslop
+    };
+  }
   render() {
     const {
       onPress,
@@ -373,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} {...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/checkbox/index.d.ts

@@ -117,6 +117,7 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
+    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => void;

package/src/components/checkbox/index.js

@@ -144,6 +144,9 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
+  getAccessibleHitSlop(size) {
+    return Math.max(0, (48 - size) / 2);
+  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -156,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/radioButton/index.js

@@ -179,6 +179,13 @@ class RadioButton extends PureComponent {
       }]} />
       </View>;
   }
+  getAccessibleHitSlop(size) {
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding
+    };
+  }
   render() {
     const {
       onPress,
@@ -190,7 +197,7 @@ class RadioButton extends PureComponent {
     const Container = onPress || onValueChange ? TouchableOpacity : View;
     return (
       // @ts-ignore
-      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()}>
+      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}