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

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.6285",
   "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/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,21 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { DialogProps } from '../../incubator/dialog';
+import { ButtonProps } from '../button';
+type ColorPickerHeaderButtonProps = {
+    /**
+     * Ok (v) button color
+     */
+    doneButtonColor?: string;
+    /**
+     * Done button props
+     */
+    doneButtonProps?: Pick<ButtonProps, 'iconSource' | 'iconStyle'>;
+    /**
+     * Dismiss button props
+     */
+    dismissButtonProps?: Pick<ButtonProps, 'iconSource' | 'iconStyle'>;
+};
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog
@@ -21,15 +36,21 @@ export interface ColorPickerDialogProps extends DialogProps {
     /**
      * Accessibility labels as an object of strings, ex. {addButton: 'add custom color using hex code', dismissButton: 'dismiss', doneButton: 'done', input: 'custom hex color code'}
      */
-    /**
-     * Ok (v) button color
-     */
-    doneButtonColor?: string;
     accessibilityLabels?: {
         dismissButton?: string;
         doneButton?: string;
         input?: string;
     };
+    /**
+     * @deprecated
+     * Ok (v) button color
+     * Pass doneButtonColor via colorPickerHeaderProps
+     */
+    doneButtonColor?: string;
+    /**
+     * Color Picker header button props, done and dismiss button customize props
+     */
+    colorPickerHeaderProps?: ColorPickerHeaderButtonProps;
     /**
      * Whether to use the new Slider implementation using Reanimated
      */

package/src/components/colorPicker/ColorPickerDialog.js

@@ -8,6 +8,9 @@ import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";
 import ColorPickerDialogSliders from "./ColorPickerDialogSliders";
+
+// TODO: deprecate doneButtonColor prop
+
 const KEYBOARD_HEIGHT = 216;
 const MODAL_PROPS = {
   supportedOrientations: ['portrait', 'landscape', 'landscape-left', 'landscape-right'] // iOS only
@@ -27,7 +30,8 @@ const ColorPickerDialog = props => {
     accessibilityLabels,
     doneButtonColor,
     previewInputStyle,
-    migrate
+    migrate,
+    colorPickerHeaderProps
   } = props;
   const [keyboardHeight, setKeyboardHeight] = useState(KEYBOARD_HEIGHT);
   const [color, setColor] = useState(Colors.getHSL(initialColor));
@@ -111,7 +115,7 @@ const ColorPickerDialog = props => {
   }, []);
   return <Dialog visible={visible} //TODO: pass all Dialog props instead
   width="100%" bottom centerH onDismiss={onDismiss} containerStyle={styles.dialog} testID={`${testID}.dialog`} modalProps={MODAL_PROPS} {...dialogProps}>
-      <ColorPickerDialogHeader accessibilityLabels={accessibilityLabels} valid={valid} onDonePressed={onDonePressed} testID={testID} doneButtonColor={doneButtonColor} onDismiss={onDismiss} />
+      <ColorPickerDialogHeader accessibilityLabels={accessibilityLabels} valid={valid} onDonePressed={onDonePressed} testID={testID} doneButtonColor={doneButtonColor} onDismiss={onDismiss} colorPickerHeaderProps={colorPickerHeaderProps} />
       <ColorPickerPreview color={color} text={text} valid={valid} accessibilityLabels={accessibilityLabels} previewInputStyle={previewInputStyle} testID={testID} onFocus={onFocus} onChangeText={onChangeText} />
       <ColorPickerDialogSliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate} />
     </Dialog>;

package/src/components/colorPicker/ColorPickerDialogHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ColorPickerDialogProps } from './ColorPickerDialog';
-type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID'> & {
+type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID' | 'colorPickerHeaderProps'> & {
     valid: boolean;
     onDismiss: () => void;
     onDonePressed: () => void;

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -13,13 +13,19 @@ const ColorPickerDialogHeader = props => {
     testID,
     doneButtonColor,
     valid,
-    onDonePressed
+    onDonePressed,
+    colorPickerHeaderProps
   } = props;
+  const {
+    doneButtonProps,
+    dismissButtonProps,
+    doneButtonColor: doneButtonHeaderColorProp
+  } = colorPickerHeaderProps || {};
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
       <Button link iconSource={Assets.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
-    }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+    }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} {...dismissButtonProps} />
+      <Button color={doneButtonColor || doneButtonHeaderColorProp} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} {...doneButtonProps} />
     </View>;
 };
 export default ColorPickerDialogHeader;

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/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,