@draftbit/core 46.4.4-6ea8db.2 → 46.4.4-746597.2

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/DatePicker/DatePicker.js

@@ -6,7 +6,6 @@ import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
-import { extractStyles } from "../../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -25,7 +24,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -37,7 +36,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const [placeholder1, setPlaceholder1] = React.useState("");
     const [focused, setFocused] = React.useState(false);
     const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
-    const { textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -127,10 +125,8 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     };
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
     const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-    const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = labelSize
-        ? labelSize
-        : typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -142,9 +138,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = inputBorderColorActive || colors.primary;
-        placeholderColor = borderColor = inputBorderColor || colors.light;
-        underlineColor = inputBorderColor || colors.light;
+        activeColor = colors.primary;
+        placeholderColor = borderColor = colors.light;
+        underlineColor = colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -206,7 +202,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const labelStyle = {
         ...typography.subtitle1,
         top: type === "solid" ? 16 : 0,
-        fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
         left: leftIconName && leftIconMode === "inset"
             ? ICON_SIZE + (type === "solid" ? 16 : 12)
             : 0,
@@ -250,7 +245,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         styles.input,
         inputStyle,
         type === "solid" ? { marginHorizontal: 12 } : {},
-        textStyles,
     ];
     // const render = (props) => <NativeTextInput {...props} />;
     return (React.createElement(View, { style: [styles.container, style] },
@@ -288,7 +282,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || colors.light,
+                                        color: colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -300,7 +294,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || placeholder,
+                                        color: placeholderColor,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,7 +23,6 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -48,14 +47,10 @@ type Props = {
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
   label?: string;
-  labelSize?: number;
-  labelColor: string;
   placeholder?: string;
   leftIconName?: string;
   leftIconMode?: "outset" | "inset";
   rightIconName?: string;
-  borderColor?: string;
-  borderColorActive?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -89,11 +84,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   rightIconName,
   leftIconMode = "inset",
   label,
-  labelSize,
-  labelColor,
   placeholder,
-  borderColor: inputBorderColor,
-  borderColorActive: inputBorderColorActive,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -115,8 +106,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
-  const { textStyles } = extractStyles(style);
-
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -222,11 +211,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
   const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-  const MAXIMIZED_LABEL_FONT_SIZE =
-    textStyles?.fontSize || typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = labelSize
-    ? labelSize
-    : typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -247,9 +233,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = inputBorderColorActive || colors.primary;
-    placeholderColor = borderColor = inputBorderColor || colors.light;
-    underlineColor = inputBorderColor || colors.light;
+    activeColor = colors.primary;
+    placeholderColor = borderColor = colors.light;
+    underlineColor = colors.light;
     backgroundColor = colors.background;
   }
 
@@ -320,7 +306,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   const labelStyle = {
     ...typography.subtitle1,
     top: type === "solid" ? 16 : 0,
-    fontFamily: textStyles?.fontFamily,
     left:
       leftIconName && leftIconMode === "inset"
         ? ICON_SIZE + (type === "solid" ? 16 : 12)
@@ -366,7 +351,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
-    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -422,7 +406,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || colors.light,
+                        color: colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -439,7 +423,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || placeholder,
+                        color: placeholderColor,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}

package/src/components/Stepper.js

@@ -36,5 +36,4 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
             ] }, value),
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
-//oh hello
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -97,5 +97,5 @@ const Stepper: FC<Props> = ({
     </View>
   );
 };
-//oh hello
+
 export default withTheme(Stepper);

package/src/index.js

@@ -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

@@ -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,20 @@
+import { COMPONENT_TYPES, createNumberProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Bottom Sheet",
+    tag: "BottomSheet",
+    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/BottomSheet.ts

@@ -0,0 +1,25 @@
+import {
+  COMPONENT_TYPES,
+  createNumberProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BottomSheet",
+  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/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,12 +10,6 @@ const SEED_DATA_PROPS = {
         required: true,
         group: GROUPS.data,
     },
-    labelSize: createNumberProp({
-        label: "Label Size",
-    }),
-    labelColor: createColorProp({
-        label: "Label Color",
-    }),
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -27,12 +21,6 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
-    borderColor: createColorProp({
-        label: "Border Color",
-    }),
-    borderColorActive: createColorProp({
-        label: "Border Color",
-    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -151,14 +139,6 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
-        StylesPanelSections: [
-            StylesPanelSections.Background,
-            StylesPanelSections.Borders,
-            StylesPanelSections.MarginsAndPaddings,
-            StylesPanelSections.Position,
-            StylesPanelSections.Size,
-            StylesPanelSections.Typography,
-        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,9 +5,6 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
-  StylesPanelSections,
-  createNumberProp,
-  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -21,12 +18,6 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data,
   },
-  labelSize: createNumberProp({
-    label: "Label Size",
-  }),
-  labelColor: createColorProp({
-    label: "Label Color",
-  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -38,12 +29,6 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
-  borderColor: createColorProp({
-    label: "Border Color",
-  }),
-  borderColorActive: createColorProp({
-    label: "Border Color",
-  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -165,14 +150,6 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
-    StylesPanelSections: [
-      StylesPanelSections.Background,
-      StylesPanelSections.Borders,
-      StylesPanelSections.MarginsAndPaddings,
-      StylesPanelSections.Position,
-      StylesPanelSections.Size,
-      StylesPanelSections.Typography,
-    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {