react-native-ui-lib 7.43.0-snapshot.7172 → 7.43.0-snapshot.7189

package/package.json

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

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

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

package/src/components/checkbox/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Animated, Easing, StyleSheet } from 'react-native';
 import { Colors, Spacings } from "../../style";
+import { StyleUtils } from "../../utils";
 //@ts-ignore
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -146,9 +147,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,
@@ -161,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} 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} hitSlop={StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/pageControl/index.js

@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 import { StyleSheet, LayoutAnimation } from 'react-native';
 import { asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
+import { StyleUtils } from "../../utils";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
 const MAX_SHOWN_PAGES = 7;
@@ -135,9 +136,13 @@ class PageControl extends PureComponent {
       onPagePress,
       spacing = PageControl.DEFAULT_SPACING
     } = this.props;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(size);
     return <TouchableOpacity customValue={index} onPress={onPagePress && this.onPagePress} key={index} style={[styles.pageIndicator, {
       marginHorizontal: spacing / 2
-    }, getColorStyle(index === currentPage, color, inactiveColor), getSizeStyle(size, index, currentPage, enlargeActive)]} />;
+    }, getColorStyle(index === currentPage, color, inactiveColor), getSizeStyle(size, index, currentPage, enlargeActive)]} hitSlop={{
+      top: hitSlopValue,
+      bottom: hitSlopValue
+    }} />;
   }
   renderDifferentSizeIndicators() {
     const {

package/src/components/radioButton/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { StyleSheet, Animated, Easing } from 'react-native';
 import { Colors } from "../../style";
+import { StyleUtils } from "../../utils";
 import { asBaseComponent, forwardRef } from "../../commons/new";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
@@ -179,13 +180,6 @@ class RadioButton extends PureComponent {
       }]} />
       </View>;
   }
-  getAccessibleHitSlop(size) {
-    const verticalPadding = Math.max(0, (48 - size) / 2);
-    return {
-      top: verticalPadding,
-      bottom: verticalPadding
-    };
-  }
   render() {
     const {
       onPress,
@@ -195,9 +189,13 @@ class RadioButton extends PureComponent {
       ...others
     } = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE);
     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()} hitSlop={{
+        top: hitSlopValue,
+        bottom: hitSlopValue
+      }}>
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/utils/styleUtils.d.ts

@@ -3,4 +3,5 @@ interface UnpackStyleOptions {
     flatten?: boolean;
 }
 export declare function unpackStyle(style?: StyleProp<ViewStyle>, options?: UnpackStyleOptions): any;
+export declare function getAccessibleHitSlop(size: number): number;
 export {};

package/src/utils/styleUtils.js

@@ -3,4 +3,7 @@ export function unpackStyle(style, options = {}) {
   if (style) {
     return JSON.parse(JSON.stringify(options.flatten ? StyleSheet.flatten(style) : style));
   }
+}
+export function getAccessibleHitSlop(size) {
+  return Math.max(0, (48 - size) / 2);
 }