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

package/package.json

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

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

@@ -17,10 +17,4 @@ 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,10 +17,4 @@ 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,7 +11,9 @@ declare class Button extends PureComponent<Props, ButtonState> {
     static sizes: typeof ButtonSize;
     static animationDirection: typeof ButtonAnimationDirection;
     constructor(props: Props);
-    state: Record<'size', undefined | number>;
+    state: {
+        size: undefined;
+    };
     styles: {
         container: {
             backgroundColor: string;
@@ -368,14 +370,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     getLabelColor(): string | undefined;
     getIconColor(): string | undefined;
     getLabelSizeStyle(): TextStyle | undefined;
-    getContainerSizeStyle(): Partial<{
-        height: number;
-        width: number;
-        padding: number;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        minWidth: number;
-    }>;
+    getContainerSizeStyle(): any;
     getOutlineStyle(): {
         borderWidth: number;
         borderColor: string;
@@ -396,18 +391,10 @@ declare class Button extends PureComponent<Props, ButtonState> {
     })[] | undefined;
     getIconStyle(): [ImageStyle, StyleProp<ImageStyle>];
     getAnimationDirectionStyle(): {
-        readonly alignSelf: "flex-start";
-    } | {
-        readonly alignSelf: "flex-end";
+        alignSelf: string;
     } | 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, SIZE_TO_VERTICAL_HITSLOP } from "./ButtonConstants";
+import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE } from "./ButtonConstants";
 export { ButtonSize, ButtonAnimationDirection, ButtonProps };
 class Button extends PureComponent {
   static displayName = 'Button';
@@ -351,20 +351,6 @@ 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,
@@ -387,7 +373,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} {...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,7 +117,6 @@ 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,9 +144,6 @@ 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,
@@ -159,7 +156,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} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/radioButton/index.js

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