react-native-ui-lib 7.38.0-snapshot.6267 → 7.38.0-snapshot.6272

package/.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',

package/package.json

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

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} {...others} ref={forwardedRef} hitSlop={this.getAccessibleHitSlop()}>
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/components/card/index.js

@@ -15,6 +15,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import Assets from "../../assets";
 import CardContext from "./CardContext";
 import * as CardPresenter from "./CardPresenter";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {
@@ -47,7 +48,8 @@ class Card extends PureComponent {
     };
     this.styles = createStyles(this.props);
     if (props.enableBlur && !BlurView) {
-      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   componentDidUpdate(prevProps) {

package/src/components/connectionStatusBar/index.js

@@ -7,6 +7,7 @@ import { Colors, Typography } from "../../style";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
 import { Constants, asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
 import { ConnectionStatusBarProps, DEFAULT_PROPS } from "./types";
 export { ConnectionStatusBarProps };
 
@@ -36,7 +37,8 @@ class ConnectionStatusBar extends PureComponent {
     if (NetInfo) {
       this.getInitialConnectionState();
     } else {
-      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
     }
   }
   generateStyles() {

package/src/components/dateTimePicker/index.js

@@ -11,6 +11,7 @@ import Button from "../button";
 import ExpandableOverlay from "../../incubator/expandableOverlay";
 import useOldApi from "./useOldApi";
 import { isSameDate, isSameHourAndMinute } from "../../utils/dateUtils";
+import { LogService } from "../../services";
 /*eslint-disable*/
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
@@ -64,7 +65,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   useEffect(() => {
     if (!RNDateTimePicker) {
       // eslint-disable-next-line max-len
-      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+      LogService.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
     }
   }, []);
   useDidUpdate(() => {

package/src/components/dateTimePicker/useOldApi.js

@@ -1,6 +1,7 @@
 // TODO: delete whole file in v8
 import { useEffect } from 'react';
 import { MomentPackage as moment } from "../../optionalDependencies";
+import { LogService } from "../../services";
 
 // This file will be deleted in the next major version,
 // duplicating these here will make this less complicated
@@ -15,7 +16,8 @@ const useOldApi = props => {
   } = props;
   useEffect(() => {
     if (!moment && (dateFormat || timeFormat)) {
-      console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
     }
   }, [dateFormat, timeFormat]);
   const getStringValue = (value, mode) => {

package/src/components/hint/hooks/useHintLayout.js

@@ -1,13 +1,29 @@
 import _isEqual from "lodash/isEqual";
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { SafeAreaInsetsManager } from 'uilib-native';
+import { Constants } from "../../../commons/new";
 export default function useHintLayout({
   onBackgroundPress,
   targetFrame
 }) {
   const [targetLayoutState, setTargetLayout] = useState(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState(targetFrame);
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState();
   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/modal/index.js

@@ -6,6 +6,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import { Constants, asBaseComponent } from "../../commons/new";
 import TopBar, { ModalTopBarProps } from "./TopBar";
 import View from "../../components/view";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 export { ModalTopBarProps };
 /**
@@ -20,7 +21,8 @@ class Modal extends Component {
   constructor(props) {
     super(props);
     if (props.enableModalBlur && !BlurView) {
-      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   renderTouchableOverlay() {

package/src/components/pieChart/index.js

@@ -6,6 +6,7 @@ const {
   Svg,
   Path
 } = SvgPackage;
+import { LogService } from "../../services";
 const DEFAULT_DIAMETER = 144;
 const PieChart = props => {
   const {
@@ -14,7 +15,7 @@ const PieChart = props => {
     ...others
   } = props;
   if (!Svg || !Path) {
-    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    LogService.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
     return null;
   }
   const renderPieSegments = () => {

package/src/components/skeletonView/index.js

@@ -9,6 +9,7 @@ import { BorderRadiuses, Colors, Dividers, Spacings } from "../../style";
 import { createShimmerPlaceholder, LinearGradientPackage } from "../../optionalDependencies";
 import View from "../view";
 import { Constants } from "../../commons/new";
+import { LogService } from "../../services";
 const LinearGradient = LinearGradientPackage?.default;
 let ShimmerPlaceholder;
 const ANIMATION_DURATION = 400;
@@ -62,9 +63,9 @@ class SkeletonView extends Component {
       opacity: new Animated.Value(0)
     };
     if (_isUndefined(LinearGradientPackage?.default)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
     } else if (_isUndefined(createShimmerPlaceholder)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
       ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
     }

package/src/components/svgImage/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { isSvg, isSvgUri } from "../../utils/imageUtils";
 import { SvgPackage, SvgCssUri } from "../../optionalDependencies";
+import { LogService } from "../../services";
 const SvgXml = SvgPackage?.SvgXml;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
@@ -14,7 +15,7 @@ function SvgImage(props) {
   } = props;
   if (!SvgXml) {
     // eslint-disable-next-line max-len
-    console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+    LogService.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
     return null;
   }
   if (isSvgUri(data)) {

package/src/incubator/slider/SliderPresenter.js

@@ -1,4 +1,5 @@
 import { interpolate } from 'react-native-reanimated';
+import { LogService } from "../../services";
 export function getOffsetForValue(value, span, minimumValue = 0, maximumValue = 1) {
   const range = maximumValue - minimumValue;
   const relativeValue = minimumValue - value;
@@ -43,15 +44,21 @@ export function validateValues(props) {
     initialMaximumValue
   } = props;
   if (minimumValue > maximumValue || useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
-    console.error('Your passed values are invalid. Please check if minimum values are not higher than maximum values');
+    LogService.forwardError({
+      message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'
+    });
   }
   if (value !== undefined && minimumValue && maximumValue && !inRange(value, minimumValue, maximumValue)) {
-    console.error(`Your passed value (${value}) is invalid. 
-      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`);
+    LogService.forwardError({
+      message: `Your passed value (${value}) is invalid. 
+      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`
+    });
   }
   if (useRange && initialMinimumValue && initialMaximumValue) {
     if (!inRange(initialMinimumValue, minimumValue, maximumValue) || !inRange(initialMaximumValue, minimumValue, maximumValue)) {
-      console.error('Your passed values are invalid. Please check that they are in range of the minimum and maximum values');
+      LogService.forwardError({
+        message: 'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
+      });
     }
   }
 }

package/src/services/HapticService.js

@@ -1,4 +1,5 @@
 import { HapticFeedbackPackage } from "../optionalDependencies";
+import { LogService } from "./";
 const options = {
   enableVibrateFallback: false,
   ignoreAndroidSystemSettings: false
@@ -17,7 +18,7 @@ function triggerHaptic(hapticType, componentName) {
   if (HapticFeedbackPackage) {
     HapticFeedbackPackage.trigger(hapticType, options);
   } else {
-    console.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
+    LogService.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
   }
 }
 export default {

package/src/services/LogService.d.ts

@@ -1,12 +1,15 @@
 interface BILogger {
     log: (event: any) => void;
 }
-declare class LogService {
+declare class LogService<ErrorInfo extends {
+    message: string;
+}> {
     private biLogger;
     injectBILogger: (biLogger: BILogger) => void;
     logBI: (event: any) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
+    forwardError: (errorInfo: ErrorInfo) => void;
     deprecationWarn: ({ component, oldProp, newProp }: {
         component: string;
         oldProp: string;
@@ -26,5 +29,7 @@ declare class LogService {
         newComponent: string;
     }) => void;
 }
-declare const _default: LogService;
+declare const _default: LogService<{
+    message: string;
+}>;
 export default _default;

package/src/services/LogService.js

@@ -12,9 +12,14 @@ class LogService {
   };
   error = (message, ...optionalParams) => {
     if (__DEV__) {
+      // eslint-disable-next-line no-restricted-syntax
       console.error(message, ...optionalParams);
     }
   };
+  forwardError = errorInfo => {
+    // eslint-disable-next-line no-restricted-syntax
+    console.error(errorInfo.message);
+  };
   deprecationWarn = ({
     component,
     oldProp,