react-native-ui-lib 7.40.1 → 7.41.0

package/src/components/switch/switch.api.json

@@ -81,17 +81,13 @@
   "snippet": [
     "function Example(props) {",
     "  const [value, setValue] = useState(false$1);",
-    "  return (",
-    "    <div>",
-    "      <Switch value={value$2} onValueChange={setValue$3}/>",
-    "    </div>",
-    "  );",
+    "  return <Switch margin-20 value={value$2} onValueChange={setValue$3}/>;",
     "}"
   ],
   "docs": {
     "hero": {
       "title": "Switch",
-      "description": "Use switches to toggle a single option on or off, activate or deactivate, and switch between two different states.  \n\nConsider using switch instead of checkbox, when appropriate. \nConsider using switch instead of radio buttons if there’s only two  options to choose from. ",
+      "description": "Use switches to toggle a single option on or off, activate or deactivate, and switch between two different states. \n\nConsider using switch instead of checkbox, when appropriate. \nConsider using switch instead of radio buttons if there’s only two  options to choose from. ",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -125,7 +121,8 @@
                 "description": "",
                 "content": [
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_style_light.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLight.png"
                   }
                 ]
               }
@@ -149,7 +146,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_on.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_on.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLight.png"
                   }
                 ]
               },
@@ -161,7 +159,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_off.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_off.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightOff.png"
                   }
                 ]
               },
@@ -173,7 +172,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_disabledOn.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_disabledOn.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightDisabled.png"
                   }
                 ]
               },
@@ -185,7 +185,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_disabledOff.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_disabledOff.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightDisabledOff.png"
                   }
                 ]
               }
@@ -197,17 +198,21 @@
             "type": "list",
             "items": [
               {
-                "title": "",
-                "description": "markdown: \n### Size  \nOne size ",
+                "title": "Size",
+                "description": "Currently, only one size available for the ToggleSwitch.",
                 "content": [
                   {
-                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=52-7459&embed-host=share"
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/switch_overview_spec_size.png"
                   }
                 ]
               },
               {
-                "title": "",
-                "description": "markdown: \n### Haptic  \nHaptic is played on tap.\nHaptic preset: [impactMedium]",
+                "title": "Colors",
+                "description": "markdown:<b>ON</b><br>Background color: $backgroundPrimaryHeavy<br>Knob color: $iconDefaultLight<br><b>OFF</b><br>Background color: $backgroundNeutralHeavy<br>Knob color: $iconDefaultLight<br><b>Disabled</b><br>Background color: $backgroundDisabled<br>Knob color: $iconDefaultLight"
+              },
+              {
+                "title": "Haptic ",
+                "description": "Haptic is played on tap. Haptic preset: [impactMedium]",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_spec_haptic.png"

package/src/components/test.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Tests",
-  "category": "basic",
+  "category": "dev",
   "description": "This is just a tests page for the new docs component page",
   "extends": [
     "Text",

package/src/components/timeline/Point.js

@@ -49,14 +49,17 @@ const Point = props => {
   }, [type, color, label, removeIconBackground, icon]);
   const renderPointContent = () => {
     const {
-      removeIconBackground
+      removeIconBackground,
+      labelColor
     } = props;
     const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
     const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
       return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
     } else if (label) {
-      return <Text recorderTag={'unmask'} $textDefaultLight subtextBold>{label}</Text>;
+      return <Text recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
+          {label}
+        </Text>;
     }
   };
   return <View center style={pointStyle} onLayout={onLayout}>

package/src/components/timeline/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors, Spacings } from "../../style";
+import { useThemeProps } from "../../hooks";
 import View from "../view";
 import Point from "./Point";
 import Line from "./Line";
@@ -9,12 +10,13 @@ export { TimelineProps, PointProps as TimelinePointProps, LineProps as TimelineL
 const CONTENT_CONTAINER_PADDINGS = Spacings.s2;
 const ENTRY_POINT_HEIGHT = 2;
 const Timeline = props => {
+  const themeProps = useThemeProps(props, 'Timeline');
   const {
     topLine,
     bottomLine,
     point,
     children
-  } = props;
+  } = themeProps;
   const [anchorMeasurements, setAnchorMeasurements] = useState();
   const [contentContainerMeasurements, setContentContainerMeasurements] = useState();
   const [pointMeasurements, setPointMeasurements] = useState();

package/src/components/timeline/types.d.ts

@@ -32,6 +32,7 @@ export type PointProps = {
     iconProps?: IconProps;
     removeIconBackground?: boolean;
     label?: number;
+    labelColor?: string;
     /** to align point to this view's center */
     anchorRef?: React.MutableRefObject<undefined>;
 };

package/src/incubator/calendar/Agenda.js

@@ -1,21 +1,19 @@
-import React, { useContext, useCallback, useRef } from 'react';
+import React, { useContext, useCallback, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { FlashListPackage } from "../../optionalDependencies";
 import { BorderRadiuses, Colors } from "../../style";
+import { useDidUpdate } from "../../hooks";
 import View from "../../components/view";
 import Text from "../../components/text";
 import { isSameDay, isSameMonth } from "./helpers/DateUtils";
 import { UpdateSource } from "./types";
 import CalendarContext from "./CalendarContext";
 const FlashList = FlashListPackage?.FlashList;
-
-// TODO: Fix initial scrolling
 function Agenda(props) {
   const {
     renderEvent,
     renderHeader,
-    itemHeight = 50,
     onEndReached,
     showLoader
   } = props;
@@ -28,18 +26,27 @@ function Agenda(props) {
   const flashList = useRef(null);
   const closestSectionHeader = useSharedValue(null);
   const scrolledByUser = useSharedValue(false);
+  const [stickyHeaderIndices, setStickyHeaderIndices] = useState([]);
+  const lastDateBeforeLoadingNewEvents = useSharedValue(selectedDate.value);
 
   /* const keyExtractor = useCallback((item: InternalEvent) => {
     return item.type === 'Event' ? item.id : item.header;
   }, []); */
 
+  useDidUpdate(() => {
+    const result = findClosestDateAfter(lastDateBeforeLoadingNewEvents.value);
+    if (result?.index) {
+      setTimeout(() => scrollToIndex(result?.index, false), 200);
+    }
+    const headerIndices = data.map((e, index) => e.type === 'Header' ? index : undefined).filter(i => i !== undefined);
+    // @ts-expect-error
+    setStickyHeaderIndices(headerIndices);
+  }, [data]);
   const _renderEvent = useCallback(eventItem => {
     if (renderEvent) {
-      return <View height={itemHeight} style={styles.eventContainer}>
-          {renderEvent(eventItem)}
-        </View>;
+      return <View style={styles.eventContainer}>{renderEvent(eventItem)}</View>;
     }
-    return <View marginV-1 marginH-10 paddingH-10 height={itemHeight} centerV style={styles.event}>
+    return <View marginV-1 marginH-10 paddingH-10 centerV style={styles.event}>
         <Text>
           Item for
           {new Date(eventItem.start).toLocaleString('en-GB', {
@@ -56,15 +63,15 @@ function Agenda(props) {
         })}
         </Text>
       </View>;
-  }, [renderEvent, itemHeight]);
+  }, [renderEvent]);
   const _renderHeader = useCallback(headerItem => {
     if (renderHeader) {
-      return <View height={itemHeight}>{renderHeader(headerItem)}</View>;
+      return <View>{renderHeader(headerItem)}</View>;
     }
-    return <View bottom marginB-5 marginH-20 height={itemHeight}>
+    return <View bg-$backgroundDefault bottom marginB-5 marginH-20>
         <Text>{headerItem.header}</Text>
       </View>;
-  }, [renderHeader, itemHeight]);
+  }, [renderHeader]);
   const renderItem = useCallback(({
     item
   }) => {
@@ -116,6 +123,10 @@ function Agenda(props) {
             const _isSameMonth = isSameMonth(selected, previous);
             runOnJS(scrollToIndex)(index, _isSameMonth);
           }
+        } else {
+          // Note: We got here because we are missing future agenda events to scroll to.
+          // therefor we should expect and new events data load
+          lastDateBeforeLoadingNewEvents.value = selectedDate.value;
         }
       }
     }
@@ -148,6 +159,7 @@ function Agenda(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const _onEndReached = useCallback(() => {
+    lastDateBeforeLoadingNewEvents.value = selectedDate.value;
     onEndReached?.(selectedDate.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onEndReached]);
@@ -155,7 +167,7 @@ function Agenda(props) {
       <FlashList ref={flashList} estimatedItemSize={52} data={data}
     // TODO: Not sure we need key extractor in flash list
     // keyExtractor={keyExtractor}
-    renderItem={renderItem} getItemType={getItemType} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
+    renderItem={renderItem} getItemType={getItemType} stickyHeaderIndices={stickyHeaderIndices} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
       {showLoader && <View absF center style={{
       backgroundColor: Colors.rgba(Colors.grey10, 0.2)
     }}>

package/src/incubator/calendar/Header.js

@@ -9,6 +9,16 @@ import { getDateObject, getMonthForIndex, addMonths } from "./helpers/DateUtils"
 import { DayNamesFormat, UpdateSource } from "./types";
 import CalendarContext from "./CalendarContext";
 import WeekDaysNames from "./WeekDaysNames";
+
+// Note: this fixes the updates on the header month title
+Reanimated.addWhitelistedNativeProps({
+  text: true
+});
+const ARROWS_THROTTLE_TIME = 300;
+const ARROWS_THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: false
+};
 const WEEK_NUMBER_WIDTH = 32;
 const ARROW_NEXT = require("./assets/arrowNext.png");
 const ARROW_BACK = require("./assets/arrowBack.png");
@@ -31,10 +41,10 @@ const Header = props => {
   }, []);
   const onLeftArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
   const onRightArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
   const getTitle = useCallback(date => {
     'worklet';
 

package/src/incubator/calendar/index.js

@@ -15,12 +15,11 @@ import { useDidUpdate } from "../../hooks";
 const FlashList = FlashListPackage?.FlashList;
 const VIEWABILITY_CONFIG = {
   itemVisiblePercentThreshold: 95,
-  minimumViewTime: 200
+  minimumViewTime: 1000
 };
-const YEARS_RANGE = 1;
+const YEARS_RANGE = 5;
 const PAGE_RELOAD_THRESHOLD = 3;
-const NOW = Date.now(); // so the 'initialDate' effect won't get called since the now different on every rerender
-
+const NOW = new Date().setHours(0, 0, 0, 0);
 function Calendar(props) {
   const {
     data,
@@ -31,20 +30,20 @@ function Calendar(props) {
     staticHeader = false,
     showExtraDays = true
   } = props;
-  const [items] = useState(() => generateMonthItems(initialDate, YEARS_RANGE, YEARS_RANGE));
+  const [monthItems] = useState(() => generateMonthItems(initialDate, YEARS_RANGE, YEARS_RANGE));
   const getItemIndex = useCallback(date => {
     'worklet';
 
     const dateObject = getDateObject(date);
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].month === dateObject.month && items[i].year === dateObject.year) {
+    for (let i = 0; i < monthItems.length; i++) {
+      if (monthItems[i].month === dateObject.month && monthItems[i].year === dateObject.year) {
         return i;
       }
     }
     return -1;
-  }, [items]);
+  }, [monthItems]);
   const flashListRef = useRef();
-  const current = useSharedValue(initialDate);
+  const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0));
   const initialMonthIndex = useRef(getItemIndex(current.value));
   const lastUpdateSource = useSharedValue(UpdateSource.INIT);
   const processedData = useMemo(() => addHeaders(data), [data]);
@@ -74,7 +73,7 @@ function Calendar(props) {
     console.log('Update items');
     const index = getItemIndex(current.value);
     scrollToIndex(index);
-  }, [items, getItemIndex]);
+  }, [monthItems, getItemIndex]);
   const setHeaderHeight = useCallback(height => {
     headerHeight.value = height;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -116,21 +115,21 @@ function Calendar(props) {
     // const newDate = addYears(current.value, prepend ? -1 : 1);
     // const newItems = generateMonthItems(newDate, pastRange, futureRange);
     // const newArray = mergeArrays(prepend, items, newItems);
-    // setItems(newArray);
+    // setMonthItems(newArray);
     // // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [monthItems]);
   const shouldAddPages = useCallback(index => {
     'worklet';
 
-    return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index > items.length - PAGE_RELOAD_THRESHOLD);
+    return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index > monthItems.length - PAGE_RELOAD_THRESHOLD);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [monthItems]);
   useAnimatedReaction(() => {
     return current.value;
   }, (selected, previous) => {
     const index = getItemIndex(selected);
     if (shouldAddPages(index)) {
-      console.log('Add new pages: ', index, items.length);
+      console.log('Add new pages: ', index, monthItems.length);
       runOnJS(addPages)(/* index */);
     } else if (lastUpdateSource.value !== UpdateSource.MONTH_SCROLL) {
       if (previous && !isSameMonth(selected, previous)) {
@@ -176,7 +175,7 @@ function Calendar(props) {
   }, []);
   return <CalendarContext.Provider value={contextValue}>
       {staticHeader && <Header />}
-      <FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={items} initialScrollIndex={initialMonthIndex.current} estimatedFirstItemOffset={0} renderItem={renderCalendarItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false}
+      <FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={monthItems} initialScrollIndex={initialMonthIndex.current} estimatedFirstItemOffset={0} renderItem={renderCalendarItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false}
     // TODO: Consider moving this shared logic with Agenda to a hook
     onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={VIEWABILITY_CONFIG} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} />
       {children}

package/src/incubator/calendar/types.d.ts

@@ -113,7 +113,6 @@ export interface CalendarProps {
 export interface AgendaProps {
     renderEvent?: (event: Event) => React.ReactElement | null;
     renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
-    itemHeight?: number;
     showLoader?: boolean;
     onEndReached?: (date: number) => void;
 }

package/src/incubator/index.d.ts

@@ -4,7 +4,7 @@ export { default as TextField, TextFieldProps, FieldContextType, TextFieldMethod
 export { default as Toast, ToastProps, ToastPresets } from './toast';
 export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
 export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './panView';
-export { default as Slider, SliderRef } from './slider';
+export { default as Slider, SliderRef, SliderProps } from './slider';
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from './dialog';
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';

package/src/incubator/index.js

@@ -5,7 +5,7 @@ export { default as TextField, TextFieldProps, FieldContextType, TextFieldMethod
 export { default as Toast, ToastProps, ToastPresets } from "./toast";
 export { default as TouchableOpacity, TouchableOpacityProps } from "./TouchableOpacity";
 export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from "./panView";
-export { default as Slider, SliderRef } from "./slider";
+export { default as Slider, SliderRef, SliderProps } from "./slider";
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from "./dialog";
 // TODO: delete exports after fully removing from private
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from "../components/chipsInput";

package/src/incubator/slider/slider.api.json

@@ -100,10 +100,10 @@
   ],
   "snippet": [
     "<Incubator.Slider",
-    "  value={0$1}",
-    "  minimumValue={0$2}",
-    "  maximumValue={10$3}",
-    "  onValueChange={value => console.log(\\`value changed: \\${value}\\`)$4}",
+    "  value={0}",
+    "  minimumValue={0}",
+    "  maximumValue={10}",
+    "  onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
     "/>"
   ],
   "docs": {
@@ -187,7 +187,7 @@
               }
             ],
             "title": "Spec",
-            "description": "**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
+            "description": "markdown:  **Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
           },
           {
             "type": "section",
@@ -197,7 +197,7 @@
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
               }
             ],
-            "description": "**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
+            "description": "markdown:  **Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
           }
         ]
       }