@draftbit/core 46.8.1-d78af9.2 → 46.8.1-eb4f7f.2

package/src/components/BottomSheet/index.js

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./BottomSheet";

package/src/components/BottomSheet/index.ts

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./BottomSheet";

package/src/components/DeckSwiper/DeckSwiper.js

@@ -1,40 +1,10 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import DeckSwiperComponent from "react-native-deck-swiper";
-const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, data, keyExtractor, renderItem, style, children, }) => {
-    //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
-    if ((data && !renderItem) || (renderItem && !data)) {
-        throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
-    }
-    if (data && renderItem && children) {
-        console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
-    }
+const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, style, children, }) => {
     const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
     // an array of indices based on children count
     const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
-    const cardsData = data || cardsFillerData;
-    const renderCard = (card, index) => {
-        if (renderItem) {
-            return renderItem({ item: card, index });
-        }
-        else {
-            return React.createElement(React.Fragment, null, childrenArray[index]);
-        }
-    };
-    const renderFirstCard = () => {
-        if (cardsData.length) {
-            return renderCard(cardsData[0], 0);
-        }
-        return undefined;
-    };
-    const cardKeyExtractor = (card) => {
-        if (keyExtractor) {
-            return keyExtractor(card);
-        }
-        else {
-            return card.toString();
-        }
-    };
     /**
      * By default react-native-deck-swiper positions everything with absolute position.
      * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -45,8 +15,8 @@ const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infinite
      * This effectivley makes the default height of the container be the height of the first card.
      */
     return (React.createElement(View, null,
-        React.createElement(View, { style: styles.containerHeightFiller }, renderFirstCard()),
-        React.createElement(DeckSwiperComponent, { cards: cardsData, renderCard: renderCard, keyExtractor: cardKeyExtractor, containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
+        React.createElement(View, { style: styles.containerHeightFiller }, childrenArray.length && childrenArray[0]),
+        React.createElement(DeckSwiperComponent, { cards: cardsFillerData, renderCard: (_, i) => React.createElement(React.Fragment, null, childrenArray[i]), keyExtractor: (card) => card === null || card === void 0 ? void 0 : card.toString(), containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
 };
 const styles = StyleSheet.create({
     cardsContainer: {

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 import DeckSwiperComponent from "react-native-deck-swiper";
 
-export interface DeckSwiperProps<T> {
+export interface DeckSwiperProps {
   onIndexChanged?: (index: number) => void;
   onEndReached?: () => void;
   startCardIndex?: number;
@@ -10,13 +10,10 @@ export interface DeckSwiperProps<T> {
   verticalEnabled?: boolean;
   horizontalEnabled?: boolean;
   visibleCardCount?: number;
-  data?: Array<T>;
-  keyExtractor?: (item: T) => string;
-  renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
 }
 
-const DeckSwiper = <T extends object>({
+const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
   onIndexChanged,
   onEndReached,
   startCardIndex = 0,
@@ -24,25 +21,9 @@ const DeckSwiper = <T extends object>({
   verticalEnabled = true,
   horizontalEnabled = true,
   visibleCardCount = 1,
-  data,
-  keyExtractor,
-  renderItem,
   style,
   children,
-}: React.PropsWithChildren<DeckSwiperProps<T>>) => {
-  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
-  if ((data && !renderItem) || (renderItem && !data)) {
-    throw new Error(
-      "'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both"
-    );
-  }
-
-  if (data && renderItem && children) {
-    console.warn(
-      "'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'"
-    );
-  }
-
+}) => {
   const childrenArray = React.useMemo(
     () => React.Children.toArray(children),
     [children]
@@ -54,31 +35,6 @@ const DeckSwiper = <T extends object>({
     [childrenArray]
   );
 
-  const cardsData = data || cardsFillerData;
-
-  const renderCard = (card: any, index: number): JSX.Element => {
-    if (renderItem) {
-      return renderItem({ item: card, index });
-    } else {
-      return <>{childrenArray[index]}</>;
-    }
-  };
-
-  const renderFirstCard = (): JSX.Element | undefined => {
-    if (cardsData.length) {
-      return renderCard(cardsData[0], 0);
-    }
-    return undefined;
-  };
-
-  const cardKeyExtractor = (card: any) => {
-    if (keyExtractor) {
-      return keyExtractor(card);
-    } else {
-      return card.toString();
-    }
-  };
-
   /**
    * By default react-native-deck-swiper positions everything with absolute position.
    * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -91,11 +47,13 @@ const DeckSwiper = <T extends object>({
 
   return (
     <View>
-      <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
+      <View style={styles.containerHeightFiller}>
+        {childrenArray.length && childrenArray[0]}
+      </View>
       <DeckSwiperComponent
-        cards={cardsData as any[]}
-        renderCard={renderCard}
-        keyExtractor={cardKeyExtractor}
+        cards={cardsFillerData}
+        renderCard={(_, i) => <>{childrenArray[i]}</>}
+        keyExtractor={(card) => card?.toString()}
         containerStyle={
           StyleSheet.flatten([styles.cardsContainer, style]) as
             | object

package/src/components/DeckSwiper/DeckSwiperCard.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { withTheme } from "../../theming";
-const DeckSwiperCard = ({ style, children, theme }) => (React.createElement(View, { style: [
+const DeckSwiperCard = ({ style, children, theme, }) => (React.createElement(View, { style: [
         styles.card,
         {
             backgroundColor: theme.colors.background,

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -5,12 +5,15 @@ import { withTheme } from "../../theming";
 
 export interface DeckSwiperCardProps {
   style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
   theme: Theme;
 }
 
-const DeckSwiperCard: React.FC<
-  React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme }) => (
+const DeckSwiperCard: React.FC<DeckSwiperCardProps> = ({
+  style,
+  children,
+  theme,
+}) => (
   <View
     style={[
       styles.card,

package/src/index.js

@@ -32,6 +32,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
+export { BottomSheet } from "./components/BottomSheet";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -53,6 +53,8 @@ export {
 
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 
+export { BottomSheet } from "./components/BottomSheet";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/BottomSheet.js

@@ -0,0 +1,64 @@
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticArrayProp, createStaticNumberProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Bottom Sheet",
+    tag: "BottomSheet",
+    description: "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
+    category: COMPONENT_TYPES.bottomsheet,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: { paddingHorizontal: 16, paddingVertical: 10, flex: 1 },
+    triggers: [Triggers.OnSettle],
+    props: {
+        onSettle: createActionProp({
+            label: "On settle",
+            description: "Action to execute when sheet settles on a snap point",
+        }),
+        snapPoints: createStaticArrayProp({
+            label: "Snap points",
+            description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
+            defaultValue: ["10%", "50%", "80%"],
+        }),
+        initialSnapIndex: createStaticNumberProp({
+            label: "Initial snap index",
+            description: "Index of the snap point to be used as the initial point",
+            defaultValue: 0,
+            required: false,
+        }),
+        showHandle: createStaticBoolProp({
+            label: "Show handle",
+            description: "Whether to show the top handle or not",
+            defaultValue: true,
+        }),
+        handleColor: createColorProp({
+            label: "Handle color",
+            description: "Color of the top handle",
+            defaultValue: "divider",
+        }),
+        topBorderRadius: createStaticNumberProp({
+            label: "Top border radius",
+            description: "Border radius of top corners",
+            defaultValue: 20,
+            required: false,
+        }),
+        borderWidth: createStaticNumberProp({
+            label: "Border width",
+            description: "Width of bottom sheet borders",
+            defaultValue: 1,
+            required: false,
+        }),
+        borderColor: createColorProp({
+            label: "Border color",
+            description: "Color of bottom sheet borders",
+            defaultValue: "divider",
+        }),
+        showsVerticalScrollIndicator: createStaticBoolProp({
+            label: "Show Vertical Scroll Indicator",
+            description: "When true, shows a vertical scroll indicator. The default value is true.",
+            defaultValue: true,
+        }),
+        bounces: createStaticBoolProp({
+            label: "Bounce",
+            description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
+            defaultValue: true,
+        }),
+    },
+};

package/src/mappings/BottomSheet.ts

@@ -0,0 +1,78 @@
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createColorProp,
+  createStaticArrayProp,
+  createStaticNumberProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BottomSheet",
+  description:
+    "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
+  category: COMPONENT_TYPES.bottomsheet,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: { paddingHorizontal: 16, paddingVertical: 10, flex: 1 },
+  triggers: [Triggers.OnSettle],
+  props: {
+    onSettle: createActionProp({
+      label: "On settle",
+      description: "Action to execute when sheet settles on a snap point",
+    }),
+    snapPoints: createStaticArrayProp({
+      label: "Snap points",
+      description:
+        "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
+      defaultValue: ["10%", "50%", "80%"],
+    }),
+    initialSnapIndex: createStaticNumberProp({
+      label: "Initial snap index",
+      description: "Index of the snap point to be used as the initial point",
+      defaultValue: 0,
+      required: false,
+    }),
+    showHandle: createStaticBoolProp({
+      label: "Show handle",
+      description: "Whether to show the top handle or not",
+      defaultValue: true,
+    }),
+    handleColor: createColorProp({
+      label: "Handle color",
+      description: "Color of the top handle",
+      defaultValue: "divider",
+    }),
+    topBorderRadius: createStaticNumberProp({
+      label: "Top border radius",
+      description: "Border radius of top corners",
+      defaultValue: 20,
+      required: false,
+    }),
+    borderWidth: createStaticNumberProp({
+      label: "Border width",
+      description: "Width of bottom sheet borders",
+      defaultValue: 1,
+      required: false,
+    }),
+    borderColor: createColorProp({
+      label: "Border color",
+      description: "Color of bottom sheet borders",
+      defaultValue: "divider",
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description:
+        "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true,
+    }),
+    bounces: createStaticBoolProp({
+      label: "Bounce",
+      description:
+        "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
+      defaultValue: true,
+    }),
+  },
+};