react-native-ui-lib 7.43.0-snapshot.7041 → 7.43.0-snapshot.7054

package/package.json

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

package/src/components/chip/index.js

@@ -1,5 +1,4 @@
-import _get from "lodash/get";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -57,8 +56,8 @@ const Chip = ({
   }, [badgeProps]);
   const renderOnDismiss = useCallback(() => {
     return <TouchableOpacity style={[getMargins('dismiss'), dismissContainerStyle]} onPress={onDismiss} hitSlop={{
-      top: 10,
-      bottom: 10,
+      top: 16,
+      bottom: 16,
       left: 10,
       right: 10
     }} testID={`${testID}.dismiss`}>
@@ -138,23 +137,47 @@ const Chip = ({
       }
     }
   }, [avatarProps, badgeProps, iconSource, rightIconSource, onDismiss]);
-  const getContainerSize = useCallback(() => {
-    const width = useSizeAsMinimum ? 'minWidth' : 'width';
-    const height = useSizeAsMinimum ? 'minHeight' : 'height';
-    return typeof size === 'object' ? {
-      [width]: _get(size, 'width'),
-      [height]: _get(size, 'height')
-    } : {
-      [width]: size,
-      [height]: size
+  const chipSize = useMemo(() => {
+    const width = typeof size === 'object' ? size.width : size;
+    const height = typeof size === 'object' ? size.height : size;
+    return {
+      width,
+      height
     };
   }, [size]);
+  const containerSizeStyle = useMemo(() => {
+    const {
+      width,
+      height
+    } = chipSize;
+    return useSizeAsMinimum ? {
+      minWidth: width,
+      minHeight: height
+    } : {
+      width,
+      height
+    };
+  }, [chipSize]);
   const Container = onPress ? TouchableOpacity : View;
+  const hitSlop = useMemo(() => {
+    const {
+      width = 48,
+      height = 48
+    } = chipSize;
+    const verticalHitSlop = Math.max(0, (48 - height) / 2);
+    const horizontalHitSlop = Math.max(0, (48 - width) / 2);
+    return {
+      top: verticalHitSlop,
+      bottom: verticalHitSlop,
+      left: horizontalHitSlop,
+      right: horizontalHitSlop
+    };
+  }, [chipSize]);
   return <Container activeOpacity={1} onPress={onPress} style={[styles.container, {
     backgroundColor
   }, {
     borderRadius
-  }, containerStyle, getContainerSize()]} testID={testID} {...others}>
+  }, containerStyle, containerSizeStyle]} testID={testID} hitSlop={hitSlop} {...others}>
       {avatarProps && renderAvatar()}
       {iconSource && renderIcon('left')}
       {leftElement}