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

package/.eslintrc.js

@@ -8,13 +8,6 @@ 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.6272",
+  "version": "7.38.0-snapshot.6282",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/card/index.js

@@ -15,7 +15,6 @@ 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 = {
@@ -48,8 +47,7 @@ class Card extends PureComponent {
     };
     this.styles = createStyles(this.props);
     if (props.enableBlur && !BlurView) {
-      // eslint-disable-next-line max-len
-      LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   componentDidUpdate(prevProps) {

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/connectionStatusBar/index.js

@@ -7,7 +7,6 @@ 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 };
 
@@ -37,8 +36,7 @@ class ConnectionStatusBar extends PureComponent {
     if (NetInfo) {
       this.getInitialConnectionState();
     } else {
-      // eslint-disable-next-line max-len
-      LogService.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
     }
   }
   generateStyles() {

package/src/components/dateTimePicker/index.js

@@ -11,7 +11,6 @@ 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.
@@ -65,7 +64,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   useEffect(() => {
     if (!RNDateTimePicker) {
       // eslint-disable-next-line max-len
-      LogService.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
     }
   }, []);
   useDidUpdate(() => {

package/src/components/dateTimePicker/useOldApi.js

@@ -1,7 +1,6 @@
 // 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
@@ -16,8 +15,7 @@ const useOldApi = props => {
   } = props;
   useEffect(() => {
     if (!moment && (dateFormat || timeFormat)) {
-      // eslint-disable-next-line max-len
-      LogService.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+      console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
     }
   }, [dateFormat, timeFormat]);
   const getStringValue = (value, mode) => {

package/src/components/modal/index.js

@@ -6,7 +6,6 @@ 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 };
 /**
@@ -21,8 +20,7 @@ class Modal extends Component {
   constructor(props) {
     super(props);
     if (props.enableModalBlur && !BlurView) {
-      // eslint-disable-next-line max-len
-      LogService.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   renderTouchableOverlay() {

package/src/components/pieChart/index.js

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

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()}

package/src/components/skeletonView/index.js

@@ -9,7 +9,6 @@ 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;
@@ -63,9 +62,9 @@ class SkeletonView extends Component {
       opacity: new Animated.Value(0)
     };
     if (_isUndefined(LinearGradientPackage?.default)) {
-      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+      console.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
     } else if (_isUndefined(createShimmerPlaceholder)) {
-      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
+      console.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,7 +1,6 @@
 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
 
@@ -15,7 +14,7 @@ function SvgImage(props) {
   } = props;
   if (!SvgXml) {
     // eslint-disable-next-line max-len
-    LogService.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+    console.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,5 +1,4 @@
 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;
@@ -44,21 +43,15 @@ export function validateValues(props) {
     initialMaximumValue
   } = props;
   if (minimumValue > maximumValue || useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
-    LogService.forwardError({
-      message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'
-    });
+    console.error('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)) {
-    LogService.forwardError({
-      message: `Your passed value (${value}) is invalid. 
-      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`
-    });
+    console.error(`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)) {
-      LogService.forwardError({
-        message: 'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
-      });
+      console.error('Your passed values are invalid. Please check that they are in range of the minimum and maximum values');
     }
   }
 }

package/src/services/HapticService.js

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

package/src/services/LogService.d.ts

@@ -1,15 +1,12 @@
 interface BILogger {
     log: (event: any) => void;
 }
-declare class LogService<ErrorInfo extends {
-    message: string;
-}> {
+declare class LogService {
     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;
@@ -29,7 +26,5 @@ declare class LogService<ErrorInfo extends {
         newComponent: string;
     }) => void;
 }
-declare const _default: LogService<{
-    message: string;
-}>;
+declare const _default: LogService;
 export default _default;

package/src/services/LogService.js

@@ -12,14 +12,9 @@ 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,