react-native-ui-lib 7.39.0-snapshot.6728 → 7.39.1

package/src/components/timeline/timeline.api.json

@@ -29,18 +29,30 @@
     }
   ],
   "snippet": [
-    "<Timeline",
-    "  topLine={{type: Timeline.lineTypes.DASHED}}",
-    "  bottomLine={{state: Timeline.states.SUCCESS}}",
-    "  point={{state: Timeline.states.SUCCESS}}",
+    "<Timeline ",
+    "  topLine={{",
+    "    state: Timeline.states.ERROR",
+    "  }$1}",
+    "  bottomLine={{",
+    "    type: Timeline.lineTypes.DASHED,",
+    "    color: Colors.orange40",
+    "  }$2}",
+    "  point={{",
+    "    type: Timeline.pointTypes.OUTLINE,",
+    "    color: Colors.orange40,",
+    "    icon: Assets.icons.demo.camera,",
+    "    anchorRef: alignToTitle ? titleRef : undefined",
+    "  }$3}",
     ">",
-    "   <View padding-20 bg-grey60 br30>",
-    "     <Text text70BO>Title</Text>",
-    "     <View marginT-5 padding-8 bg-white br30>",
-    "       <Text>Description</Text>",
-    "     </View>",
-    "   </View>",
-    " </Timeline>"
+    "    <View flex centerH paddingH-20>",
+    "      <Text text70 dark10 ref={titleRef}>",
+    "        {title}",
+    "      </Text>",
+    "      <Text dark40>",
+    "        {description}",
+    "      </Text>",
+    "    </View>",
+    "</Timeline>"
   ],
   "docs": {
     "hero": {
@@ -126,7 +138,29 @@
                 "title": "Current",
                 "content": [
                   {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} bottomLine={{state: Timeline.states.CURRENT}} point={{state: Timeline.states.CURRENT}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "current",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  },
+                  {
+                    "props": {
+                      "point": {
+                        "type": {
+                          "type": "bullet",
+                          "color": "#116DFF"
+                        }
+                      }
+                    }
                   }
                 ],
                 "description": "state: current"
@@ -135,7 +169,19 @@
                 "title": "Next",
                 "content": [
                   {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT}} bottomLine={{state: Timeline.states.NEXT}} point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "next",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
                   }
                 ],
                 "description": "state: next"
@@ -144,7 +190,19 @@
                 "title": "Error",
                 "content": [
                   {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.ERROR}} bottomLine={{state: Timeline.states.ERROR}} point={{state: Timeline.states.ERROR}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "error",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
                   }
                 ],
                 "description": "state: error"
@@ -153,7 +211,19 @@
                 "title": "Success",
                 "content": [
                   {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.SUCCESS}} bottomLine={{state: Timeline.states.SUCCESS}} point={{state: Timeline.states.SUCCESS}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "success",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
                   }
                 ],
                 "description": "state: success"
@@ -168,30 +238,15 @@
             "items": [
               {
                 "title": "Bullet",
-                "description": "type: bullet",
-                "content": [
-                  {
-                    "snippet": "<Timeline point={{type: Timeline.pointTypes.BULLET}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ]
+                "description": "type: bullet"
               },
               {
                 "title": "Circle",
-                "description": "type: circle",
-                "content": [
-                  {
-                    "snippet": "<Timeline point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ]
+                "description": "type: circle"
               },
               {
                 "title": "Outline",
-                "description": "type: outline",
-                "content": [
-                  {
-                    "snippet": "<Timeline point={{type: Timeline.pointTypes.OUTLINE}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ]
+                "description": "type: outline"
               }
             ],
             "title": "Point",
@@ -205,7 +260,14 @@
                 "title": "Text",
                 "content": [
                   {
-                    "snippet": "<Timeline point={{label: '1'}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "current",
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
                   }
                 ],
                 "description": "text: “1”"
@@ -214,19 +276,21 @@
                 "title": "Icon",
                 "content": [
                   {
-                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
+                    "props": {
+                      "state": "current",
+                      "bottomLine": {
+                        "type": {
+                          "type": "dashed"
+                        }
+                      }
+                    }
                   }
                 ],
-                "description": "icon: Assets.internal.icons.general.checkmarkSmall"
+                "description": "icon: Assets.icons.general.checkmarkSmall"
               },
               {
                 "title": "Icon without background",
-                "content": [
-                  {
-                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ],
-                "description": "icon: Assets.internal.icons.general.favorite, removeIconBackground: true"
+                "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
               }
             ],
             "name": "Point Accessories"
@@ -237,20 +301,10 @@
             "items": [
               {
                 "title": "Solid",
-                "content": [
-                  {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ],
                 "description": "type: solid"
               },
               {
                 "title": "Dashed",
-                "content": [
-                  {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT, type: Timeline.lineTypes.DASHED}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ],
                 "description": "type: dashed"
               }
             ],
@@ -263,11 +317,6 @@
             "items": [
               {
                 "title": "Entry",
-                "content": [
-                  {
-                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT, entry: true}} bottomLine={{state: Timeline.states.NEXT, entry: true}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
-                  }
-                ],
                 "description": "entry: true"
               }
             ],

package/src/components/toast/index.js

@@ -239,7 +239,7 @@ export default class Toast extends PureBaseComponent {
         <Button
           link
           iconStyle={{tintColor: textColor}}
-          iconSource={Assets.internal.icons.x}
+          iconSource={Assets.icons.x}
           onPress={this.onDismiss}
           paddingR-20
           accessibilityLabel={'dismiss'}

package/src/components/wizard/WizardStates.js

@@ -1,5 +1,6 @@
 import Colors from "../../style/colors";
-import Assets from "../../assets";
+const checkMarkSmall = require("./assets/checkMarkSmall.png");
+const exclamationSmall = require("./assets/exclamationSmall.png");
 export const StatesConfig = {
   enabled: {
     color: Colors.$textNeutralHeavy,
@@ -13,7 +14,7 @@ export const StatesConfig = {
   error: {
     color: Colors.$iconDangerLight,
     circleColor: Colors.$outlineDanger,
-    icon: Assets.internal.icons.exclamationSmall,
+    icon: exclamationSmall,
     enabled: true,
     accessibilityInfo: 'Validation Error'
   },
@@ -26,7 +27,7 @@ export const StatesConfig = {
   completed: {
     color: Colors.$iconNeutral,
     circleColor: Colors.$outlineDisabled,
-    icon: Assets.internal.icons.checkMarkSmall,
+    icon: checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },

package/src/hooks/useScrollTo/index.js

@@ -1,5 +1,7 @@
 import _isFunction from "lodash/isFunction";
+import _isUndefined from "lodash/isUndefined";
 import { useCallback, useRef } from 'react';
+import { Constants } from "../../commons/new";
 const useScrollTo = props => {
   const {
     scrollViewRef: propsScrollViewRef,
@@ -24,17 +26,10 @@ const useScrollTo = props => {
     containerSize.current = horizontal ? width : height;
   }, [horizontal]);
   const scrollTo = useCallback((offset, animated = true) => {
-    // Fix that was for Android RTL. Scrolling is now aligned between IOS and Android and offset is ok.
-    /* if (
-      horizontal &&
-        Constants.isRTL &&
-        Constants.isAndroid &&
-        !_.isUndefined(contentSize.current) &&
-        !_.isUndefined(containerSize.current)
-    ) {
+    if (horizontal && Constants.isRTL && Constants.isAndroid && !_isUndefined(contentSize.current) && !_isUndefined(containerSize.current)) {
       const scrollingWidth = Math.max(0, contentSize.current - containerSize.current);
       offset = scrollingWidth - offset;
-    } */
+    }
 
     // @ts-ignore
     if (_isFunction(scrollViewRef.current?.scrollToOffset)) {

package/src/incubator/dialog/useDialogContent.js

@@ -23,7 +23,7 @@ const useDialogContent = props => {
     }
     return <View left centerV pointerEvents={'box-none'}>
         <TouchableOpacity paddingB-s2 row onPress={close}>
-          <Icon source={Assets.internal.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps} />
+          <Icon source={Assets.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps} />
           <Text recorderTag={'unmask'} text70BO white {...closeButtonProps?.labelProps}>
             {closeButtonProps?.label || 'Close'}
           </Text>

package/src/incubator/expandableOverlay/index.js

@@ -75,5 +75,4 @@ const ExpandableOverlay = (props, ref) => {
       {renderOverlay()}
     </TouchableOpacity>;
 };
-ExpandableOverlay.displayName = 'IGNORE';
 export default forwardRef(ExpandableOverlay);

package/src/incubator/panView/index.js

@@ -53,6 +53,6 @@ const PanView = props => {
       </GestureDetector>
     </View>;
 };
-PanView.displayName = 'IGNORE';
+PanView.displayName = 'PanView';
 PanView.directions = PanViewDirectionsEnum;
 export default asBaseComponent(gestureHandlerRootHOC(PanView));

package/src/incubator/slider/Thumb.js

@@ -7,20 +7,13 @@ import View from "../../components/view";
 import { Constants } from "../../commons/new";
 const SHADOW_RADIUS = 4;
 const THUMB_SIZE = 24;
-const THUMB_ACCESSIBLE_HITSLOP = Math.max(0, 48 - THUMB_SIZE) / 2;
-const DEFAULT_THUMB_HIT_SLOP = {
-  top: THUMB_ACCESSIBLE_HITSLOP,
-  bottom: THUMB_ACCESSIBLE_HITSLOP,
-  left: THUMB_ACCESSIBLE_HITSLOP,
-  right: THUMB_ACCESSIBLE_HITSLOP
-};
 const Thumb = props => {
   const {
     disabled,
     disableActiveStyling,
     activeStyle,
     defaultStyle,
-    hitSlop = DEFAULT_THUMB_HIT_SLOP,
+    hitSlop,
     onSeekStart,
     onSeekEnd,
     start,

package/src/incubator/toast/toast.api.json

@@ -104,47 +104,19 @@
                   {
                     "props": {
                       "visible": true,
-                      "message": "Mika Or was saved to contacts.",
-                      "preset": "general"
+                      "message": "\"Mika Or\" was saved to contacts."
                     }
                   }
                 ]
               },
               {
-                "title": "Success",
-                "content": [
-                  {
-                    "props": {
-                      "visible": true,
-                      "message": "Post published.",
-                      "preset": "success"
-                    }
-                  }
-                ]
+                "title": "Success"
               },
               {
-                "title": "Validation",
-                "content": [
-                  {
-                    "props": {
-                      "visible": true,
-                      "message": "Enter a card number.",
-                      "preset": "failure"
-                    }
-                  }
-                ]
+                "title": "Validation"
               },
               {
-                "title": "Offline Error",
-                "content": [
-                  {
-                    "props": {
-                      "visible": true,
-                      "message": "This action is not available offline.",
-                      "preset": "offline"
-                    }
-                  }
-                ]
+                "title": "Offline Error"
               }
             ],
             "title": "Types"
@@ -154,35 +126,13 @@
             "columns": ["Prop", "Preview"],
             "items": [
               {
-                "title": "None",
-                "content": [
-                  {
-                    "props": {
-                      "visible": true,
-                      "message": "Action completed."
-                    }
-                  }
-                ]
+                "title": "None"
               },
               {
-                "title": "With action",
-                "content": [
-                  {
-                    "snippet": "<Incubator.Toast visible message=\"Action completed.\" action={{label: 'Undo', onPress: () => {}}}/>"
-                  }
-                ]
+                "title": "With action"
               },
               {
-                "title": "With loader",
-                "content": [
-                  {
-                    "props": {
-                      "visible": true,
-                      "message": "Action completed.",
-                      "showLoader": true
-                    }
-                  }
-                ]
+                "title": "With loader"
               }
             ],
             "title": "Accessories"

package/src/assets/internal/icons/index.js

@@ -1,50 +0,0 @@
-export const icons = {
-  get check() {
-    return require('./check.png');
-  },
-  get checkMarkSmall() {
-    return require('./checkMarkSmall.png');
-  },
-  get checkSmall() {
-    return require('./checkSmall.png');
-  },
-  get chevronDown() {
-    return require('./chevronDown.png');
-  },
-  get exclamationSmall() {
-    return require('./exclamationSmall.png');
-  },
-  get minusOutline() {
-    return require('./minusOutline.png');
-  },
-  get minusOutlineSmall() {
-    return require('./minusOutlineSmall.png');
-  },
-  get minusSmall() {
-    return require('./minusSmall.png');
-  },
-  get plusOutline() {
-    return require('./plusOutline.png');
-  },
-  get plusOutlineSmall() {
-    return require('./plusOutlineSmall.png');
-  },
-  get plusSmall() {
-    return require('./plusSmall.png');
-  },
-  get search() {
-    return require('./search.png');
-  },
-  get x() {
-    return require('./x.png');
-  },
-  get xFlat() {
-    return require('./xFlat.png');
-  },
-  get xMedium() {
-    return require('./xMedium.png');
-  },
-  get xSmall() {
-    return require('./xSmall.png');
-  }
-};

package/src/assets/internal/icons/index.web.js

@@ -1,50 +0,0 @@
-export const icons = {
-  get check() {
-    return {uri: require('./check.png'), width: 21, height: 15};
-  },
-  get checkMarkSmall() {
-    return {uri: require('./checkMarkSmall.png'), width: 16, height: 16};
-  },
-  get checkSmall() {
-    return {uri: require('./checkSmall.png'), width: 24, height: 24};
-  },
-  get chevronDown() {
-    return {uri: require('./chevronDown.png'), width: 16, height: 16};
-  },
-  get exclamationSmall() {
-    return {uri: require('./exclamationSmall.png'), width: 16, height: 16};
-  },
-  get minusOutline() {
-    return {uri: require('./minusOutline.png'), width: 32, height: 32};
-  },
-  get minusOutlineSmall() {
-    return {uri: require('./minusOutlineSmall.png'), width: 24, height: 24};
-  },
-  get minusSmall() {
-    return {uri: require('./minusSmall.png'), width: 16, height: 16};
-  },
-  get plusOutline() {
-    return {uri: require('./plusOutline.png'), width: 32, height: 32};
-  },
-  get plusOutlineSmall() {
-    return {uri: require('./plusOutlineSmall.png'), width: 24, height: 24};
-  },
-  get plusSmall() {
-    return {uri: require('./plusSmall.png'), width: 16, height: 16};
-  },
-  get search() {
-    return {uri: require('./search.png'), width: 24, height: 24};
-  },
-  get x() {
-    return {uri: require('./x.png'), width: 17, height: 16};
-  },
-  get xFlat() {
-    return {uri: require('./xFlat.png'), width: 16, height: 16};
-  },
-  get xMedium() {
-    return {uri: require('./xMedium.png'), width: 24, height: 24};
-  },
-  get xSmall() {
-    return {uri: require('./xSmall.png'), width: 16, height: 16};
-  }
-};

package/src/assets/internal/images/index.js

@@ -1,26 +0,0 @@
-export const images = {
-  get gradient() {
-    return require('./gradient.png');
-  },
-  get gradientOverlay() {
-    return require('./gradientOverlay.png');
-  },
-  get gradientOverlayHigh() {
-    return require('./gradientOverlayHigh.png');
-  },
-  get gradientOverlayLow() {
-    return require('./gradientOverlayLow.png');
-  },
-  get gradientOverlayMedium() {
-    return require('./gradientOverlayMedium.png');
-  },
-  get hintTipMiddle() {
-    return require('./hintTipMiddle.png');
-  },
-  get hintTipSide() {
-    return require('./hintTipSide.png');
-  },
-  get transparentSwatch() {
-    return require('./transparentSwatch.png');
-  }
-};

package/src/assets/internal/images/index.web.js

@@ -1,26 +0,0 @@
-export const images = {
-  get gradient() {
-    return {uri: require('./gradient.png'), width: 56, height: 2};
-  },
-  get gradientOverlay() {
-    return {uri: require('./gradientOverlay.png'), width: 76, height: 48};
-  },
-  get gradientOverlayHigh() {
-    return {uri: require('./gradientOverlayHigh.png'), width: 1, height: 297};
-  },
-  get gradientOverlayLow() {
-    return {uri: require('./gradientOverlayLow.png'), width: 1, height: 297};
-  },
-  get gradientOverlayMedium() {
-    return {uri: require('./gradientOverlayMedium.png'), width: 1, height: 297};
-  },
-  get hintTipMiddle() {
-    return {uri: require('./hintTipMiddle.png'), width: 20, height: 7};
-  },
-  get hintTipSide() {
-    return {uri: require('./hintTipSide.png'), width: 20, height: 24};
-  },
-  get transparentSwatch() {
-    return {uri: require('./transparentSwatch.png'), width: 100, height: 100};
-  }
-};

package/src/assets/internal/index.d.ts

@@ -1,4 +0,0 @@
-export declare const internal: {
-    readonly icons: any;
-    readonly images: any;
-};

package/src/assets/internal/index.js

@@ -1,8 +0,0 @@
-export const internal = {
-  get icons() {
-    return require("./icons").icons;
-  },
-  get images() {
-    return require("./images").images;
-  }
-};

package/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.api.json

@@ -1,40 +0,0 @@
-{
-  "name": "KeyboardAwareScrollView",
-  "category": "form",
-  "description": "A wrapper component which handles the ScrollView insets properly when the keyboard is shown and hides the content, scrolling content above the keybaord.",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/KeyboardAwareScrollViewScreen.js",
-  "props": [
-    {
-      "name": "getTextInputRefs",
-      "type": "function",
-      "description": "Function that returns an array of TextInput refs"
-    },
-    {
-      "name": "onScroll",
-      "type": "function",
-      "description": "Callback for scroll events"
-    },
-    {
-      "name": "startScrolledToBottom",
-      "type": "boolean",
-      "description": "Whether to start scrolled to bottom"
-    },
-    {
-      "name": "scrollToBottomOnKBShow",
-      "type": "boolean",
-      "description": "Whether to scroll to bottom when keyboard shows"
-    },
-    {
-      "name": "scrollToInputAdditionalOffset",
-      "type": "number",
-      "description": "Additional offset when scrolling to input"
-    }
-  ],
-  "snippet": [
-    "<KeyboardAwareScrollView>",
-    "  <View>",
-    "    <TextField placeholder=\"Input with scrolling\" />",
-    "  </View>",
-    "</KeyboardAwareScrollView>"
-  ]
-}