@draftbit/core 49.7.6-e09d3d.2 → 49.7.7-ba2f6c.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "49.7.6-e09d3d.2+e09d3da",
+  "version": "49.7.7-ba2f6c.2+ba2f6c0",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -42,7 +42,7 @@
     "@date-io/date-fns": "^1.3.13",
     "@dotlottie/react-player": "1.6.1",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "^49.7.6-e09d3d.2+e09d3da",
+    "@draftbit/theme": "^49.7.7-ba2f6c.2+ba2f6c0",
     "@expo/vector-icons": "^13.0.0",
     "@gorhom/bottom-sheet": "5.0.0-alpha.7",
     "@lottiefiles/react-lottie-player": "3.5.3",
@@ -120,5 +120,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "e09d3dab6b2efa177d2dc8a071ce5e7e176d55e3"
+  "gitHead": "ba2f6c09749aac6bf01271ef53289e32024bae12"
 }

package/src/components/BottomSheet/BottomSheet.js

@@ -7,7 +7,7 @@ const windowHeight = Dimensions.get("window").height;
 // Clarification:
 // Input of snap points is sorted top -> bottom where each value represents distance from top
 // Implementation using `@gorhom/bottom-sheet` is sorted bottom -> top where each value represents distance from bottom
-const BottomSheet = React.forwardRef(({ snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor, topBorderRadius = 20, borderWidth = 1, borderColor, onSettle, style, children, ...rest }, ref) => {
+const BottomSheet = React.forwardRef(({ snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor, topBorderRadius = 20, borderWidth = 1, borderColor, enableDynamicSizing = true, onSettle, style, children, ...rest }, ref) => {
     const theme = useTheme();
     const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background.brand;
     const snapPoints = snapPointsProp !== null && snapPointsProp !== void 0 ? snapPointsProp : [
@@ -26,7 +26,7 @@ const BottomSheet = React.forwardRef(({ snapPoints: snapPointsProp, topSnapPosit
                 return 2;
         }
     };
-    return (React.createElement(BottomSheetComponent, { ref: ref, snapPoints: mappedSnapPoints, index: initialSnapIndex !== undefined
+    return (React.createElement(BottomSheetComponent, { ref: ref, enableDynamicSizing: enableDynamicSizing, snapPoints: mappedSnapPoints, index: initialSnapIndex !== undefined
             ? mappedSnapPoints.length - initialSnapIndex - 1
             : getSnapIndexFromPosition(initialSnapPosition), handleIndicatorStyle: [
             { backgroundColor: handleColor !== null && handleColor !== void 0 ? handleColor : theme.colors.border.brand },
@@ -37,7 +37,12 @@ const BottomSheet = React.forwardRef(({ snapPoints: snapPointsProp, topSnapPosit
             borderTopRightRadius: topBorderRadius,
             borderWidth,
             borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.border.brand,
-        }, onChange: (index) => onSettle === null || onSettle === void 0 ? void 0 : onSettle(mappedSnapPoints.length - index - 1) },
+        }, onChange: (index) => 
+        // Convert bottom-sheet index to match our top-to-bottom ordering
+        // When dynamic sizing is enabled, we don't need to subtract 1 since an extra snap point may be added
+        enableDynamicSizing
+            ? onSettle === null || onSettle === void 0 ? void 0 : onSettle(mappedSnapPoints.length - index)
+            : onSettle === null || onSettle === void 0 ? void 0 : onSettle(mappedSnapPoints.length - index - 1) },
         React.createElement(BottomSheetScrollView, { contentContainerStyle: [styles.contentContainerStyle, style], ...rest }, children)));
 });
 // @gorhom/bottom-sheet has a different format for snap points and requires some manipulation

package/src/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"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"}

package/src/components/BottomSheet/BottomSheet.tsx

@@ -35,6 +35,7 @@ export interface BottomSheetProps extends ScrollViewProps {
   topBorderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
+  enableDynamicSizing?: boolean;
   onSettle?: (index: number) => void;
   style?: StyleProp<ViewStyle>;
 }
@@ -56,6 +57,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
       topBorderRadius = 20,
       borderWidth = 1,
       borderColor,
+      enableDynamicSizing = true,
       onSettle,
       style,
       children,
@@ -92,6 +94,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
     return (
       <BottomSheetComponent
         ref={ref}
+        enableDynamicSizing={enableDynamicSizing}
         snapPoints={mappedSnapPoints}
         index={
           initialSnapIndex !== undefined
@@ -109,7 +112,13 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
           borderWidth,
           borderColor: borderColor ?? theme.colors.border.brand,
         }}
-        onChange={(index) => onSettle?.(mappedSnapPoints.length - index - 1)}
+        onChange={(index) =>
+          // Convert bottom-sheet index to match our top-to-bottom ordering
+          // When dynamic sizing is enabled, we don't need to subtract 1 since an extra snap point may be added
+          enableDynamicSizing
+            ? onSettle?.(mappedSnapPoints.length - index)
+            : onSettle?.(mappedSnapPoints.length - index - 1)
+        }
       >
         <BottomSheetScrollView
           contentContainerStyle={[styles.contentContainerStyle, style]}

package/src/components/Swiper/Swiper.js

@@ -1,8 +1,8 @@
 import { withTheme } from "@draftbit/theme";
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
-const Swiper = ({ theme, vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor = theme.colors.foreground.brand, dotActiveColor = theme.colors.branding.primary, data, keyExtractor, renderItem, children: childrenProp, onIndexChanged: onIndexChangedProp, onSwipe, onSwipedNext, onSwipedPrevious, minDistanceForAction, minDistanceToCapture, style, }) => {
+const Swiper = forwardRef(({ theme, vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor = theme === null || theme === void 0 ? void 0 : theme.colors.foreground.brand, dotActiveColor = theme === null || theme === void 0 ? void 0 : theme.colors.branding.primary, data, keyExtractor, renderItem, children: childrenProp, onIndexChanged: onIndexChangedProp, onSwipe, onSwipedNext, onSwipedPrevious, minDistanceForAction, minDistanceToCapture, style, }, ref) => {
     var _a;
     const [currentIndex, setCurrentIndex] = React.useState(0);
     const numberOfItems = (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : React.Children.count(childrenProp);
@@ -56,6 +56,20 @@ const Swiper = ({ theme, vertical = false, loop = false, timeout = 0, from = 0,
             swiperRef.current.forceUpdate();
         }
     }, [children]);
+    useImperativeHandle(ref, () => ({
+        swipeTo: (index) => {
+            var _a;
+            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goTo(index);
+        },
+        swipeNext: () => {
+            var _a;
+            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToNext();
+        },
+        swipePrev: () => {
+            var _a;
+            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToPrev();
+        },
+    }));
     return (React.createElement(View, { style: style },
         React.createElement(SwiperComponent, { ref: swiperRef, from: from, loop: loop, timeout: timeout, vertical: vertical, onIndexChanged: onIndexChanged, minDistanceForAction: minDistanceForAction, minDistanceToCapture: minDistanceToCapture, controlsProps: {
                 prevTitle,
@@ -70,6 +84,6 @@ const Swiper = ({ theme, vertical = false, loop = false, timeout = 0, from = 0,
                     ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
                     : {}),
             } }, children)));
-};
+});
 export default withTheme(Swiper);
 //# sourceMappingURL=Swiper.js.map

package/src/components/Swiper/Swiper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swiper.js","sourceRoot":"","sources":["Swiper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Swiper.js","sourceRoot":"","sources":["Swiper.tsx"],"names":[],"mappings":"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"}

package/src/components/Swiper/Swiper.tsx

@@ -1,8 +1,14 @@
 import { ReadTheme, withTheme } from "@draftbit/theme";
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
+export interface SwiperRef {
+  swipeTo: (index: number) => void;
+  swipeNext: () => void;
+  swipePrev: () => void;
+}
+
 export interface SwiperProps<T> {
   onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
@@ -29,123 +35,140 @@ export interface SwiperProps<T> {
   theme: ReadTheme;
 }
 
-const Swiper = ({
-  theme,
-  vertical = false,
-  loop = false,
-  timeout = 0,
-  from = 0,
-  prevTitle = "",
-  nextTitle = "",
-  prevTitleColor,
-  nextTitleColor,
-  dotsTouchable = true,
-  dotColor = theme.colors.foreground.brand,
-  dotActiveColor = theme.colors.branding.primary,
-  data,
-  keyExtractor,
-  renderItem,
-  children: childrenProp,
-  onIndexChanged: onIndexChangedProp,
-  onSwipe,
-  onSwipedNext,
-  onSwipedPrevious,
-  minDistanceForAction,
-  minDistanceToCapture,
-  style,
-}: SwiperProps<any>) => {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const numberOfItems = data?.length ?? React.Children.count(childrenProp);
-  const swiperRef = React.useRef<any>(null);
-
-  const onIndexChanged = (index: number) => {
-    const previous = currentIndex;
-    const current = index;
+const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
+  (
+    {
+      theme,
+      vertical = false,
+      loop = false,
+      timeout = 0,
+      from = 0,
+      prevTitle = "",
+      nextTitle = "",
+      prevTitleColor,
+      nextTitleColor,
+      dotsTouchable = true,
+      dotColor = theme?.colors.foreground.brand,
+      dotActiveColor = theme?.colors.branding.primary,
+      data,
+      keyExtractor,
+      renderItem,
+      children: childrenProp,
+      onIndexChanged: onIndexChangedProp,
+      onSwipe,
+      onSwipedNext,
+      onSwipedPrevious,
+      minDistanceForAction,
+      minDistanceToCapture,
+      style,
+    }: SwiperProps<any>,
+    ref
+  ) => {
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const numberOfItems = data?.length ?? React.Children.count(childrenProp);
+    const swiperRef = React.useRef<any>(null);
 
-    onIndexChangedProp?.(index);
-    setCurrentIndex(index);
+    const onIndexChanged = (index: number) => {
+      const previous = currentIndex;
+      const current = index;
 
-    if (previous === numberOfItems - 1 && current === 0) {
-      //Last -> first swipe
-      onSwipedNext?.(previous);
-    } else if (previous === 0 && current === numberOfItems - 1) {
-      //First -> last swipe
-      onSwipedPrevious?.(previous);
-    } else if (current > previous) {
-      onSwipedNext?.(previous);
-    } else if (current < previous) {
-      onSwipedPrevious?.(previous);
-    }
-    onSwipe?.(previous);
-  };
+      onIndexChangedProp?.(index);
+      setCurrentIndex(index);
 
-  const children: React.ReactNode = React.useMemo(
-    () =>
-      Array.isArray(data) && renderItem
-        ? data.map((item, index) => {
-            const component = renderItem({ item, index });
+      if (previous === numberOfItems - 1 && current === 0) {
+        //Last -> first swipe
+        onSwipedNext?.(previous);
+      } else if (previous === 0 && current === numberOfItems - 1) {
+        //First -> last swipe
+        onSwipedPrevious?.(previous);
+      } else if (current > previous) {
+        onSwipedNext?.(previous);
+      } else if (current < previous) {
+        onSwipedPrevious?.(previous);
+      }
+      onSwipe?.(previous);
+    };
 
-            if (!component) {
-              return null;
-            }
+    const children: React.ReactNode = React.useMemo(
+      () =>
+        Array.isArray(data) && renderItem
+          ? data.map((item, index) => {
+              const component = renderItem({ item, index });
 
-            const key = keyExtractor ? keyExtractor(item, index) : index;
-            return React.cloneElement(component, {
-              key,
-            });
-          })
-        : childrenProp,
-    [childrenProp, data, renderItem, keyExtractor]
-  );
+              if (!component) {
+                return null;
+              }
 
-  /*
-  react-native-web-swiper assigns it's 'children' attribute as follows: `children = (() => React.Children.toArray(this.props.children))();`
-  This is probelematic when state is involved due to anoynmous function effectivley creating new components everytime, losing any state
-  
-  This is a monkey patch that updates the 'children' attribute to just use the children from the props
-  Can be removed when/if https://github.com/reactrondev/react-native-web-swiper/pull/102 is merged
-  */
-  React.useEffect(() => {
-    const childrenArray = React.Children.toArray(
-      swiperRef.current?.props?.children
+              const key = keyExtractor ? keyExtractor(item, index) : index;
+              return React.cloneElement(component, {
+                key,
+              });
+            })
+          : childrenProp,
+      [childrenProp, data, renderItem, keyExtractor]
     );
-    if (swiperRef.current) {
-      swiperRef.current.children = childrenArray;
-      swiperRef.current.count = childrenArray.length;
-      swiperRef.current.forceUpdate();
-    }
-  }, [children]);
 
-  return (
-    <View style={style}>
-      {/* @ts-ignore */}
-      <SwiperComponent
-        ref={swiperRef}
-        from={from}
-        loop={loop}
-        timeout={timeout}
-        vertical={vertical}
-        onIndexChanged={onIndexChanged}
-        minDistanceForAction={minDistanceForAction}
-        minDistanceToCapture={minDistanceToCapture}
-        controlsProps={{
-          prevTitle,
-          nextTitle,
-          prevTitleStyle: { color: prevTitleColor },
-          nextTitleStyle: { color: nextTitleColor },
-          dotsTouchable,
-          ...(dotColor
-            ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
-            : {}),
-          ...(dotActiveColor
-            ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
-            : {}),
-        }}
-      >
-        {children}
-      </SwiperComponent>
-    </View>
-  );
-};
+    /*
+    react-native-web-swiper assigns it's 'children' attribute as follows: `children = (() => React.Children.toArray(this.props.children))();`
+    This is probelematic when state is involved due to anoynmous function effectivley creating new components everytime, losing any state
+    
+    This is a monkey patch that updates the 'children' attribute to just use the children from the props
+    Can be removed when/if https://github.com/reactrondev/react-native-web-swiper/pull/102 is merged
+    */
+    React.useEffect(() => {
+      const childrenArray = React.Children.toArray(
+        swiperRef.current?.props?.children
+      );
+      if (swiperRef.current) {
+        swiperRef.current.children = childrenArray;
+        swiperRef.current.count = childrenArray.length;
+        swiperRef.current.forceUpdate();
+      }
+    }, [children]);
+
+    useImperativeHandle(ref, () => ({
+      swipeTo: (index: number) => {
+        swiperRef.current?.goTo(index);
+      },
+      swipeNext: () => {
+        swiperRef.current?.goToNext();
+      },
+      swipePrev: () => {
+        swiperRef.current?.goToPrev();
+      },
+    }));
+
+    return (
+      <View style={style}>
+        {/* @ts-ignore */}
+        <SwiperComponent
+          ref={swiperRef}
+          from={from}
+          loop={loop}
+          timeout={timeout}
+          vertical={vertical}
+          onIndexChanged={onIndexChanged}
+          minDistanceForAction={minDistanceForAction}
+          minDistanceToCapture={minDistanceToCapture}
+          controlsProps={{
+            prevTitle,
+            nextTitle,
+            prevTitleStyle: { color: prevTitleColor },
+            nextTitleStyle: { color: nextTitleColor },
+            dotsTouchable,
+            ...(dotColor
+              ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+              : {}),
+            ...(dotActiveColor
+              ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+              : {}),
+          }}
+        >
+          {children}
+        </SwiperComponent>
+      </View>
+    );
+  }
+);
 
 export default withTheme(Swiper);