@draftbit/core 46.2.4-8bc8d1.5 → 46.2.4-8ee341.5

package/src/components/BottomSheet/BottomSheet.native.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+
+import { extractStyles } from "../../utilities";
+import { BottomSheetProps } from "./types";
+
+const BottomSheetComponent: React.FC<BottomSheetProps> = ({
+  style,
+  children,
+  step,
+}) => {
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const { viewStyles } = extractStyles(style);
+
+  // variables
+  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);
+
+  // callbacks
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);
+
+  React.useEffect(() => {
+    if (step === -1) {
+      bottomSheetRef?.current?.close();
+    }
+  }, [step]);
+
+  return (
+    <View
+      style={[
+        containerStyle.container,
+        viewStyles,
+        { backgroundColor: step !== -1 ? "grey" : "transparent" },
+      ]}
+    >
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={step}
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+      >
+        <BottomSheetView>{children}</BottomSheetView>
+      </BottomSheet>
+    </View>
+  );
+};
+
+export default BottomSheetComponent;
+
+const containerStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: "center",
+  },
+});

package/src/components/BottomSheet/BottomSheet.web.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { StyleSheet, View, Dimensions } from "react-native";
+import ScrollBottomSheet from "react-native-scroll-bottom-sheet";
+import { extractStyles } from "../../utilities";
+const windowHeight = Dimensions.get("window").height;
+const BottomSheetComponent = ({ style, children, step, }) => {
+    const { viewStyles } = extractStyles(style);
+    const bottomSheetRef = React.useRef();
+    const webStep = React.useMemo(() => step + 1, [step]);
+    const snapPoints = React.useMemo(() => ["25%", "50%", windowHeight - 200], []);
+    React.useEffect(() => {
+        var _a;
+        (_a = bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.snapTo(snapPoints.length - webStep);
+        // bottomSheetRef.current.snapTo(step);
+    }, [webStep, step, snapPoints]);
+    if (step === -1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(ScrollBottomSheet, { ref: bottomSheetRef, componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: 0, renderHandle: () => (React.createElement(View, { style: styles.header },
+                React.createElement(View, { style: styles.panelHandle }))), contentContainerStyle: styles.contentContainerStyle },
+            React.createElement(View, { style: {
+                    ...styles.container,
+                    ...viewStyles,
+                    backgroundColor: webStep !== -1 ? "grey" : "transparent",
+                } }, children))));
+};
+export default BottomSheetComponent;
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainerStyle: {
+        padding: 16,
+    },
+    header: {
+        alignItems: "center",
+        backgroundColor: "white",
+        paddingVertical: 20,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    },
+    panelHandle: {
+        width: 40,
+        height: 2,
+        backgroundColor: "rgba(0,0,0,0.3)",
+        borderRadius: 4,
+    },
+    item: {
+        padding: 20,
+        justifyContent: "center",
+        backgroundColor: "white",
+        alignItems: "center",
+        marginVertical: 10,
+    },
+});

package/src/components/BottomSheet/BottomSheet.web.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { StyleSheet, View, Dimensions } from "react-native";
+import ScrollBottomSheet from "react-native-scroll-bottom-sheet";
+
+import { extractStyles } from "../../utilities";
+import { BottomSheetProps } from "./types";
+
+const windowHeight = Dimensions.get("window").height;
+
+const BottomSheetComponent: React.FC<BottomSheetProps> = ({
+  style,
+  children,
+  step,
+}) => {
+  const { viewStyles } = extractStyles(style);
+  const bottomSheetRef = React.useRef<any>();
+
+  const webStep = React.useMemo(() => step + 1, [step]);
+  const snapPoints = React.useMemo(
+    () => ["25%", "50%", windowHeight - 200],
+    []
+  );
+
+  React.useEffect(() => {
+    bottomSheetRef?.current?.snapTo(snapPoints.length - webStep);
+    // bottomSheetRef.current.snapTo(step);
+  }, [webStep, step, snapPoints]);
+
+  if (step === -1) {
+    return <></>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <ScrollBottomSheet
+        ref={bottomSheetRef}
+        componentType="ScrollView"
+        snapPoints={snapPoints}
+        initialSnapIndex={0}
+        renderHandle={() => (
+          <View style={styles.header}>
+            <View style={styles.panelHandle} />
+          </View>
+        )}
+        contentContainerStyle={styles.contentContainerStyle}
+      >
+        <View
+          style={{
+            ...styles.container,
+            ...viewStyles,
+            backgroundColor: webStep !== -1 ? "grey" : "transparent",
+          }}
+        >
+          {children}
+        </View>
+      </ScrollBottomSheet>
+    </View>
+  );
+};
+
+export default BottomSheetComponent;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainerStyle: {
+    padding: 16,
+  },
+  header: {
+    alignItems: "center",
+    backgroundColor: "white",
+    paddingVertical: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  panelHandle: {
+    width: 40,
+    height: 2,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    borderRadius: 4,
+  },
+  item: {
+    padding: 20,
+    justifyContent: "center",
+    backgroundColor: "white",
+    alignItems: "center",
+    marginVertical: 10,
+  },
+});

package/src/components/BottomSheet/index.js

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

package/src/components/BottomSheet/index.tsx

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

package/src/components/BottomSheet/types.js

@@ -0,0 +1 @@
+export {};

package/src/components/BottomSheet/types.tsx

@@ -0,0 +1,8 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+export interface BottomSheetProps {
+  style: StyleProp<ViewStyle | TextStyle>;
+  children: React.ReactNode;
+  step: number;
+  isOpen?: Boolean;
+}

package/src/components/Config.js

@@ -42,7 +42,7 @@ export default {
     cardIconElevation: 1,
     placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
     getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
-    placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
+    placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
     squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
     FABSize: 40,
     FABBorderRadius: 20,

package/src/components/Config.ts

@@ -60,7 +60,7 @@ export default {
       { width: size.width, height: size.height },
       "image-placeholder_1"
     ),
-  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
+  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
   squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
   FABSize: 40,
   FABBorderRadius: 20,

package/src/components/{DSvg.js → SVG.js}

@@ -2,12 +2,13 @@ import * as React from "react";
 import { View, Platform, Image } from "react-native";
 import { SvgUri } from "react-native-svg";
 import Config from "./Config";
-const DSvg = ({ source = Config.placeholderSvgURL, style, }) => {
+const SVG = ({ source, style }) => {
+    let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
     return (React.createElement(React.Fragment, null,
         Platform.OS === "ios" && (React.createElement(View, { style: style },
-            React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
+            React.createElement(SvgUri, { width: "100%", height: "100%", uri: svgSource }))),
         Platform.OS === "android" && (React.createElement(View, { style: style },
-            React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
-        Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: source } }))));
+            React.createElement(SvgUri, { width: "100%", height: "100%", uri: svgSource }))),
+        Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: svgSource } }))));
 };
-export default DSvg;
+export default SVG;

package/src/components/{DSvg.tsx → SVG.tsx}

@@ -4,32 +4,32 @@ import { SvgUri } from "react-native-svg";
 
 import Config from "./Config";
 
-type SvgComponentProps = {
+type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
 };
 
-const DSvg: React.FC<React.PropsWithChildren<SvgComponentProps>> = ({
-  source = Config.placeholderSvgURL,
-  style,
-}) => {
+const SVG = ({ source, style }: SVGComponentProps) => {
+  let svgSource =
+    source === null || source === undefined ? Config.placeholderSvgURL : source;
+
   return (
     <>
       {Platform.OS === "ios" && (
         <View style={style}>
-          <SvgUri width="100%" height="100%" uri={source} />
+          <SvgUri width="100%" height="100%" uri={svgSource} />
         </View>
       )}
       {Platform.OS === "android" && (
         <View style={style}>
-          <SvgUri width="100%" height="100%" uri={source} />
+          <SvgUri width="100%" height="100%" uri={svgSource} />
         </View>
       )}
       {Platform.OS === "web" && (
-        <Image style={style} source={{ uri: source }} />
+        <Image style={style} source={{ uri: svgSource }} />
       )}
     </>
   );
 };
 
-export default DSvg;
+export default SVG;

package/src/index.js

@@ -17,7 +17,7 @@ export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
 export { default as IconButton } from "./components/IconButton";
 export { default as Image } from "./components/Image";
-export { default as DSvg } from "./components/DSvg";
+export { default as SVG } from "./components/SVG";
 export { default as NumberInput } from "./components/NumberInput";
 export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as StarRating } from "./components/StarRating";
@@ -29,6 +29,7 @@ export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
+export { BottomSheet } from "./components/BottomSheet";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -18,7 +18,7 @@ export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
 export { default as IconButton } from "./components/IconButton";
 export { default as Image } from "./components/Image";
-export { default as DSvg } from "./components/DSvg";
+export { default as SVG } from "./components/SVG";
 export { default as NumberInput } from "./components/NumberInput";
 export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as StarRating } from "./components/StarRating";
@@ -34,6 +34,7 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
+export { BottomSheet } from "./components/BottomSheet";
 
 export {
   Center,

package/src/mappings/BottomSheet.js

@@ -0,0 +1,25 @@
+import {
+  COMPONENT_TYPES,
+  createNumberProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BotttomSheet",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [
+    StylesPanelSections.Background,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
+  props: {
+    step: createNumberProp({
+      label: "Step",
+      description: "Step can be -1, 0, 1, or 2.",
+    }),
+  },
+};

package/src/mappings/SVG.js

@@ -0,0 +1,14 @@
+import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "SVG",
+    tag: "SVG",
+    description: "An SVG component",
+    category: COMPONENT_TYPES.media,
+    layout: {
+        width: 100,
+        height: 100,
+    },
+    props: {
+        source: createSvgProp(),
+    },
+};

package/src/mappings/SVG.ts

@@ -0,0 +1,15 @@
+import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "SVG",
+  tag: "SVG",
+  description: "An SVG component",
+  category: COMPONENT_TYPES.media,
+  layout: {
+    width: 100,
+    height: 100,
+  },
+  props: {
+    source: createSvgProp(),
+  },
+};

package/lib/module/mappings/DSvg.js

@@ -1,16 +0,0 @@
-import { COMPONENT_TYPES, createSvgProp, StylesPanelSections } from "@draftbit/types";
-export const SEED_DATA = {
-  name: "SVG",
-  tag: "SVG",
-  description: "An SVG component",
-  packageName: "@draftbit/core",
-  category: COMPONENT_TYPES.media,
-  layout: {
-    width: 100,
-    height: 100
-  },
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects],
-  props: {
-    source: createSvgProp()
-  }
-};

package/lib/typescript/src/components/DSvg.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-import { StyleProp, ImageStyle } from "react-native";
-declare type SvgComponentProps = {
-    source: string;
-    style?: StyleProp<ImageStyle>;
-};
-declare const DSvg: React.FC<React.PropsWithChildren<SvgComponentProps>>;
-export default DSvg;

package/src/mappings/DSvg.js

@@ -1,21 +0,0 @@
-import { COMPONENT_TYPES, createSvgProp, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "SVG",
-    tag: "SVG",
-    description: "An SVG component",
-    packageName: "@draftbit/core",
-    category: COMPONENT_TYPES.media,
-    layout: {
-        width: 100,
-        height: 100,
-    },
-    stylesPanelSections: [
-        StylesPanelSections.Size,
-        StylesPanelSections.Margins,
-        StylesPanelSections.Position,
-        StylesPanelSections.Effects,
-    ],
-    props: {
-        source: createSvgProp(),
-    },
-};

package/src/mappings/DSvg.ts

@@ -1,26 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createSvgProp,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-export const SEED_DATA = {
-  name: "SVG",
-  tag: "SVG",
-  description: "An SVG component",
-  packageName: "@draftbit/core",
-  category: COMPONENT_TYPES.media,
-  layout: {
-    width: 100,
-    height: 100,
-  },
-  stylesPanelSections: [
-    StylesPanelSections.Size,
-    StylesPanelSections.Margins,
-    StylesPanelSections.Position,
-    StylesPanelSections.Effects,
-  ],
-  props: {
-    source: createSvgProp(),
-  },
-};