react-native-ui-lib 7.39.1 → 7.40.0-snapshot.6808

package/src/components/hint/hint.api.json

@@ -159,13 +159,37 @@
             ],
             "items": [
               {
-                "title": "Left"
+                "title": "Left",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Center"
+                "title": "Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Right"
+                "title": "Right",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_bottom.png"
+                  }
+                ]
               }
             ],
             "title": "Alignment",
@@ -179,10 +203,20 @@
             ],
             "items": [
               {
-                "title": "None"
+                "title": "None",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_none.png"
+                  }
+                ]
               },
               {
-                "title": "Icon"
+                "title": "Icon",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_icon.png"
+                  }
+                ]
               }
             ],
             "title": "Accessories"

package/src/components/hint/index.js

@@ -6,6 +6,7 @@ import View from "../view";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
+import Assets from "../../assets";
 import { HintPositions, HintProps, TargetAlignments } from "./types";
 import useHintVisibility from "./hooks/useHintVisibility";
 import useHintLayout from "./hooks/useHintLayout";
@@ -14,8 +15,6 @@ import useHintPosition from "./hooks/useHintPosition";
 import HintMockChildren from "./HintMockChildren";
 import HintAnchor from "./HintAnchor";
 import HintBubble from "./HintBubble";
-const sideTip = require("./assets/hintTipSide.png");
-const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -125,7 +124,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+    const source = useSideTip ? Assets.internal.images.hintTipSide : Assets.internal.images.hintTipMiddle;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

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

@@ -25,7 +25,10 @@ export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> & MarginModif
     /**
      * the icon size
      */
-    size?: number;
+    size?: number | {
+        width: number;
+        height: number;
+    };
     /**
      * whether the icon should flip horizontally on RTL
      */
@@ -52,7 +55,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "sour
     /**
      * the icon size
      */
-    size?: number | undefined;
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
     /**
      * whether the icon should flip horizontally on RTL
      */
@@ -78,7 +84,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "sour
     /**
      * the icon size
      */
-    size?: number | undefined;
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
     /**
      * whether the icon should flip horizontally on RTL
      */

package/src/components/icon/index.js

@@ -12,10 +12,9 @@ import SvgImage from "../svgImage";
  * @extendsLink: https://reactnative.dev/docs/image
  */
 
-const DEFAULT_WEB_ICON_SIZE = 16;
 const Icon = forwardRef((props, ref) => {
   const {
-    size = Constants.isWeb ? DEFAULT_WEB_ICON_SIZE : undefined,
+    size,
     tintColor,
     style,
     supportRTL,
@@ -30,10 +29,6 @@ const Icon = forwardRef((props, ref) => {
   const {
     margins
   } = modifiers;
-  const iconSize = size ? {
-    width: size,
-    height: size
-  } : undefined;
   const shouldFlipRTL = supportRTL && Constants.isRTL;
   const getBadgeStyling = () => {
     const containerStyle = badgeProps?.containerStyle;
@@ -46,15 +41,29 @@ const Icon = forwardRef((props, ref) => {
     badgePosition.top = position;
     return [badgePosition, containerStyle];
   };
+  const iconSize = useMemo(() => {
+    if (typeof size === 'number') {
+      return {
+        width: size,
+        height: size
+      };
+    }
+    if (typeof size === 'object') {
+      return size;
+    }
+    return undefined;
+  }, [size]);
   const iconSource = useMemo(() => {
     if (!isUndefined(assetName)) {
       return getAsset(assetName, assetGroup);
     }
     return source;
   }, [source, assetGroup, assetName]);
-  const renderImage = () => <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
-    tintColor
-  }, style]} />;
+  const renderImage = () => {
+    return <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
+      tintColor
+    }, style]} />;
+  };
   const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props} />;
   if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
     return renderImage();

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import { Image as RNImage, ImageProps as RNImageProps, ImageBackgroundProps, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
+import { ComponentStatics } from '../../typings/common';
 import { RecorderProps } from '../../typings/recorderTypes';
 import { OverlayTypeType, OverlayIntensityType } from '../overlay';
-import { ComponentStatics } from 'src/typings/common';
 export type ImageSourceType = string | RNImageProps['source'];
 export type ImageProps = Omit<RNImageProps, 'source'> & Pick<ImageBackgroundProps, 'imageStyle'> & MarginModifiers & RecorderProps & {
     /**

package/src/components/modal/TopBar.js

@@ -21,7 +21,7 @@ class TopBar extends Component {
   static displayName = 'Modal.TopBar';
   static defaultProps = {
     doneLabel: 'Save',
-    cancelIcon: Assets.icons.x,
+    cancelIcon: Assets.internal.icons.x,
     doneButtonProps: {},
     cancelButtonProps: {},
     includeStatusBar: Constants.isIOS

package/src/components/modal/api/modalTopBar.api.json

@@ -29,7 +29,7 @@
       "name": "cancelIcon",
       "type": "ImageSource",
       "description": "Cancel action icon",
-      "default": "Assets.icons.x"
+      "default": "Assets.internal.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
     {

package/src/components/modal/modal.api.json

@@ -0,0 +1,54 @@
+{
+  "name": "Modal",
+  "category": "overlays",
+  "description": "Component that present content on top of the invoking screen",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
+  "props": [
+    {
+      "name": "enableModalBlur",
+      "type": "boolean",
+      "description": "Blurs the modal background when transparent (iOS only)"
+    },
+    {
+      "name": "blurView",
+      "type": "JSX.Element",
+      "description": "A custom view to use as a BlueView instead of the default one"
+    },
+    {
+      "name": "onBackgroundPress",
+      "type": "function",
+      "description": "Allow dismissing a modal when clicking on its background"
+    },
+    {
+      "name": "overlayBackgroundColor",
+      "type": "string",
+      "description": "The background color of the overlay"
+    },
+    {
+      "name": "useGestureHandlerRootView",
+      "type": "boolean",
+      "description": "Should add a GestureHandlerRootView"
+    },
+    {
+      "name": "useKeyboardAvoidingView",
+      "type": "boolean",
+      "description": "Should add a KeyboardAvoidingView (iOS only)"
+    },
+    {
+      "name": "keyboardAvoidingViewProps",
+      "type": "object",
+      "description": "Send additional props to the KeyboardAvoidingView (iOS only)"
+    }
+  ],
+  "snippet": [
+    "<Modal",
+    "  visible={visible}",
+    "  onBackgroundPress={() => setVisible(false)}",
+    "  overlayBackgroundColor=\"rgba(0, 0, 0, 0.7)\"",
+    ">",
+    "  <View>",
+    "    <Text>Modal Content</Text>",
+    "  </View>",
+    "</Modal>"
+  ]
+}

package/src/components/overlay/index.js

@@ -3,9 +3,7 @@ import React, { PureComponent } from 'react';
 import { StyleSheet, Image } from 'react-native';
 import { Colors } from "../../style";
 import View from "../view";
-const gradientImageLow = require("./assets/GradientOverlayLow.png");
-const gradientImageMed = require("./assets/GradientOverlayMedium.png");
-const gradientImageHigh = require("./assets/GradientOverlayHigh.png");
+import Assets from "../../assets";
 const OVERLY_TYPES = {
   VERTICAL: 'vertical',
   TOP: 'top',
@@ -77,11 +75,11 @@ class Overlay extends PureComponent {
   getImageSource = (type, intensity) => {
     if (type !== OVERLY_TYPES.SOLID) {
       if (intensity === OverlayIntensityType.MEDIUM) {
-        return gradientImageMed;
+        return Assets.internal.images.gradientOverlayMedium;
       } else if (intensity === OverlayIntensityType.HIGH) {
-        return gradientImageHigh;
+        return Assets.internal.images.gradientOverlayHigh;
       } else {
-        return gradientImageLow;
+        return Assets.internal.images.gradientOverlayLow;
       }
     }
   };

package/src/components/panningViews/panDismissibleView.js

@@ -23,7 +23,7 @@ const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanDismissibleView/PanDismissibleView.gif?raw=true
  */
 class PanDismissibleView extends PureComponent {
-  static displayName = 'PanDismissibleView';
+  static displayName = 'IGNORE';
   static defaultProps = {
     directions: DEFAULT_DIRECTIONS,
     animationOptions: DEFAULT_ANIMATION_OPTIONS,

package/src/components/panningViews/panGestureView.js

@@ -13,7 +13,7 @@ const BOUNCINESS = 6;
  * @description: PanGestureView component for drag and swipe gestures (supports only vertical gestures at the moment)
  */
 class PanGestureView extends Component {
-  static displayName = 'PanGestureView';
+  static displayName = 'IGNORE';
   static defaultProps = {
     direction: GestureDirections.DOWN
   };

package/src/components/panningViews/panListenerView.js

@@ -14,7 +14,7 @@ const DEFAULT_SWIPE_VELOCITY = 1.8;
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanListenerView/PanListenerView.gif?raw=true
  */
 class PanListenerView extends PureComponent {
-  static displayName = 'PanListenerView';
+  static displayName = 'IGNORE';
   static defaultProps = {
     directions: DEFAULT_DIRECTIONS,
     panSensitivity: DEFAULT_PAN_SENSITIVITY,

package/src/components/panningViews/panResponderView.js

@@ -9,7 +9,7 @@ import asPanViewConsumer from "./asPanViewConsumer";
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanResponderView/PanResponderView.gif?raw=true
  */
 class PanResponderView extends PureComponent {
-  static displayName = 'PanResponderView';
+  static displayName = 'IGNORE';
   static defaultProps = {
     isAnimated: false
   };

package/src/components/panningViews/panningContext.js

@@ -1,3 +1,4 @@
 import React from 'react';
 const PanningContext = React.createContext({});
+PanningContext.displayName = 'IGNORE';
 export default PanningContext;

package/src/components/picker/PickerItem.js

@@ -23,7 +23,7 @@ const PickerItem = props => {
     label,
     labelStyle,
     disabled,
-    selectedIcon = Assets.icons.check,
+    selectedIcon = Assets.internal.icons.check,
     selectedIconColor = Colors.$iconPrimary,
     onPress,
     testID

package/src/components/picker/PickerItemsList.js

@@ -47,7 +47,7 @@ const PickerItemsList = props => {
         return renderCustomSearch(props);
       }
       return <View style={styles.searchInputContainer}>
-          <Icon style={styles.searchIcon} tintColor={Colors.$iconDefault} source={searchStyle.icon || Assets.icons.search} />
+          <Icon style={styles.searchIcon} tintColor={Colors.$iconDefault} source={searchStyle.icon || Assets.internal.icons.search} />
           <TextInput testID={testID}
         // ref={r => (this.search = r)}
         style={[styles.searchInput, {