@draftbit/core 46.4.4-746597.2 → 46.4.4-74e9b3.2

package/src/components/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ 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;
@@ -24,7 +25,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, placeholder, ...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, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -36,6 +37,7 @@ 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();
@@ -125,8 +127,10 @@ 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 = typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+    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 hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -138,9 +142,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = colors.primary;
-        placeholderColor = borderColor = colors.light;
-        underlineColor = colors.light;
+        activeColor = inputBorderColorActive || colors.primary;
+        placeholderColor = borderColor = inputBorderColor || colors.light;
+        underlineColor = inputBorderColor || colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -202,6 +206,7 @@ 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,
@@ -245,6 +250,7 @@ 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] },
@@ -282,7 +288,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: colors.light,
+                                        color: labelColor || colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -294,7 +300,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: placeholderColor,
+                                        color: labelColor || placeholder,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,6 +23,7 @@ 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);
 
@@ -47,10 +48,14 @@ 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;
 
@@ -84,7 +89,11 @@ 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);
@@ -106,6 +115,8 @@ 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();
@@ -211,8 +222,11 @@ 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 = typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE =
+    textStyles?.fontSize || typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = labelSize
+    ? labelSize
+    : typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -233,9 +247,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = colors.primary;
-    placeholderColor = borderColor = colors.light;
-    underlineColor = colors.light;
+    activeColor = inputBorderColorActive || colors.primary;
+    placeholderColor = borderColor = inputBorderColor || colors.light;
+    underlineColor = inputBorderColor || colors.light;
     backgroundColor = colors.background;
   }
 
@@ -306,6 +320,7 @@ 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)
@@ -351,6 +366,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
+    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -406,7 +422,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: colors.light,
+                        color: labelColor || colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -423,7 +439,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholder,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}

package/src/components/Stepper.js

@@ -36,4 +36,5 @@ 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,7 +29,6 @@ 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,7 +34,6 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { BottomSheet } from "./components/BottomSheet";
 
 export {
   Center,

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,6 +10,12 @@ 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",
@@ -21,6 +27,12 @@ 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.",
@@ -139,6 +151,14 @@ 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,6 +5,9 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
+  StylesPanelSections,
+  createNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -18,6 +21,12 @@ 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",
@@ -29,6 +38,12 @@ 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.",
@@ -150,6 +165,14 @@ 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/lib/commonjs/components/BottomSheet/BottomSheet.native.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _bottomSheet = _interopRequireWildcard(require("@gorhom/bottom-sheet"));
-var _utilities = require("../../utilities");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const bottomSheetRef = (0, _react.useRef)(null);
-  const {
-    viewStyles
-  } = (0, _utilities.extractStyles)(style);
-
-  // variables
-  const snapPoints = (0, _react.useMemo)(() => ["25%", "50%", "90%"], []);
-
-  // callbacks
-  const handleSheetChanges = (0, _react.useCallback)(index => {
-    console.log("handleSheetChanges", index);
-  }, []);
-  _react.default.useEffect(() => {
-    if (step === -1) {
-      var _bottomSheetRef$curre;
-      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
-    }
-  }, [step]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [containerStyle.container, viewStyles, {
-      backgroundColor: step !== -1 ? "grey" : "transparent"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.default, {
-    ref: bottomSheetRef,
-    index: step,
-    snapPoints: snapPoints,
-    onChange: handleSheetChanges
-  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetView, null, children)));
-};
-var _default = BottomSheetComponent;
-exports.default = _default;
-const containerStyle = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    flex: 1,
-    alignItems: "center"
-  }
-});
-//# sourceMappingURL=BottomSheet.native.js.map

package/lib/commonjs/components/BottomSheet/BottomSheet.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BottomSheetComponent","style","children","step","bottomSheetRef","useRef","viewStyles","extractStyles","snapPoints","useMemo","handleSheetChanges","useCallback","index","console","log","React","useEffect","current","close","containerStyle","container","backgroundColor","StyleSheet","create","flex","contentContainer","alignItems"],"sourceRoot":"../../src","sources":["BottomSheet.native.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAAgD;AAAA;AAGhD,MAAMA,oBAAgD,GAAG,QAInD;EAAA,IAJoD;IACxDC,KAAK;IACLC,QAAQ;IACRC;EACF,CAAC;EACC,MAAMC,cAAc,GAAG,IAAAC,aAAM,EAAc,IAAI,CAAC;EAChD,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACN,KAAK,CAAC;;EAE3C;EACA,MAAMO,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;;EAE3D;EACA,MAAMC,kBAAkB,GAAG,IAAAC,kBAAW,EAAEC,KAAa,IAAK;IACxDC,OAAO,CAACC,GAAG,CAAC,oBAAoB,EAAEF,KAAK,CAAC;EAC1C,CAAC,EAAE,EAAE,CAAC;EAENG,cAAK,CAACC,SAAS,CAAC,MAAM;IACpB,IAAIb,IAAI,KAAK,CAAC,CAAC,EAAE;MAAA;MACfC,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEa,OAAO,0DAAvB,sBAAyBC,KAAK,EAAE;IAClC;EACF,CAAC,EAAE,CAACf,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,iBAAI;IACH,KAAK,EAAE,CACLgB,cAAc,CAACC,SAAS,EACxBd,UAAU,EACV;MAAEe,eAAe,EAAElB,IAAI,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG;IAAc,CAAC;EACzD,gBAEF,6BAAC,oBAAW;IACV,GAAG,EAAEC,cAAe;IACpB,KAAK,EAAED,IAAK;IACZ,UAAU,EAAEK,UAAW;IACvB,QAAQ,EAAEE;EAAmB,gBAE7B,6BAAC,4BAAe,QAAER,QAAQ,CAAmB,CACjC,CACT;AAEX,CAAC;AAAC,eAEaF,oBAAoB;AAAA;AAEnC,MAAMmB,cAAc,GAAGG,uBAAU,CAACC,MAAM,CAAC;EACvCH,SAAS,EAAE;IACTI,IAAI,EAAE;EACR,CAAC;EACDC,gBAAgB,EAAE;IAChBD,IAAI,EAAE,CAAC;IACPE,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/commonjs/components/BottomSheet/BottomSheet.web.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeScrollBottomSheet = _interopRequireDefault(require("react-native-scroll-bottom-sheet"));
-var _utilities = require("../../utilities");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const windowHeight = _reactNative.Dimensions.get("window").height;
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const {
-    viewStyles
-  } = (0, _utilities.extractStyles)(style);
-  const bottomSheetRef = _react.default.useRef();
-  const webStep = _react.default.useMemo(() => step + 1, [step]);
-  const snapPoints = _react.default.useMemo(() => ["25%", "50%", windowHeight - 200], []);
-  _react.default.useEffect(() => {
-    var _bottomSheetRef$curre;
-    bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.snapTo(snapPoints.length - webStep);
-    // bottomSheetRef.current.snapTo(step);
-  }, [webStep, step, snapPoints]);
-  if (step === -1) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  }
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeScrollBottomSheet.default, {
-    ref: bottomSheetRef,
-    componentType: "ScrollView",
-    snapPoints: snapPoints,
-    initialSnapIndex: 0,
-    renderHandle: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.header
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.panelHandle
-    })),
-    contentContainerStyle: styles.contentContainerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ...styles.container,
-      ...viewStyles,
-      backgroundColor: webStep !== -1 ? "grey" : "transparent"
-    }
-  }, children)));
-};
-var _default = BottomSheetComponent;
-exports.default = _default;
-const styles = _reactNative.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
-  }
-});
-//# sourceMappingURL=BottomSheet.web.js.map

package/lib/commonjs/components/BottomSheet/BottomSheet.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["windowHeight","Dimensions","get","height","BottomSheetComponent","style","children","step","viewStyles","extractStyles","bottomSheetRef","React","useRef","webStep","useMemo","snapPoints","useEffect","current","snapTo","length","styles","container","header","panelHandle","contentContainerStyle","backgroundColor","StyleSheet","create","flex","padding","alignItems","paddingVertical","borderTopLeftRadius","borderTopRightRadius","width","borderRadius","item","justifyContent","marginVertical"],"sourceRoot":"../../src","sources":["BottomSheet.web.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAAgD;AAGhD,MAAMA,YAAY,GAAGC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM;AAEpD,MAAMC,oBAAgD,GAAG,QAInD;EAAA,IAJoD;IACxDC,KAAK;IACLC,QAAQ;IACRC;EACF,CAAC;EACC,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACJ,KAAK,CAAC;EAC3C,MAAMK,cAAc,GAAGC,cAAK,CAACC,MAAM,EAAO;EAE1C,MAAMC,OAAO,GAAGF,cAAK,CAACG,OAAO,CAAC,MAAMP,IAAI,GAAG,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EACrD,MAAMQ,UAAU,GAAGJ,cAAK,CAACG,OAAO,CAC9B,MAAM,CAAC,KAAK,EAAE,KAAK,EAAEd,YAAY,GAAG,GAAG,CAAC,EACxC,EAAE,CACH;EAEDW,cAAK,CAACK,SAAS,CAAC,MAAM;IAAA;IACpBN,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEO,OAAO,0DAAvB,sBAAyBC,MAAM,CAACH,UAAU,CAACI,MAAM,GAAGN,OAAO,CAAC;IAC5D;EACF,CAAC,EAAE,CAACA,OAAO,EAAEN,IAAI,EAAEQ,UAAU,CAAC,CAAC;EAE/B,IAAIR,IAAI,KAAK,CAAC,CAAC,EAAE;IACf,oBAAO,2DAAK;EACd;EAEA,oBACE,6BAAC,iBAAI;IAAC,KAAK,EAAEa,MAAM,CAACC;EAAU,gBAC5B,6BAAC,qCAAiB;IAChB,GAAG,EAAEX,cAAe;IACpB,aAAa,EAAC,YAAY;IAC1B,UAAU,EAAEK,UAAW;IACvB,gBAAgB,EAAE,CAAE;IACpB,YAAY,EAAE,mBACZ,6BAAC,iBAAI;MAAC,KAAK,EAAEK,MAAM,CAACE;IAAO,gBACzB,6BAAC,iBAAI;MAAC,KAAK,EAAEF,MAAM,CAACG;IAAY,EAAG,CAErC;IACF,qBAAqB,EAAEH,MAAM,CAACI;EAAsB,gBAEpD,6BAAC,iBAAI;IACH,KAAK,EAAE;MACL,GAAGJ,MAAM,CAACC,SAAS;MACnB,GAAGb,UAAU;MACbiB,eAAe,EAAEZ,OAAO,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG;IAC7C;EAAE,GAEDP,QAAQ,CACJ,CACW,CACf;AAEX,CAAC;AAAC,eAEaF,oBAAoB;AAAA;AAEnC,MAAMgB,MAAM,GAAGM,uBAAU,CAACC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,IAAI,EAAE;EACR,CAAC;EACDJ,qBAAqB,EAAE;IACrBK,OAAO,EAAE;EACX,CAAC;EACDP,MAAM,EAAE;IACNQ,UAAU,EAAE,QAAQ;IACpBL,eAAe,EAAE,OAAO;IACxBM,eAAe,EAAE,EAAE;IACnBC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE;EACxB,CAAC;EACDV,WAAW,EAAE;IACXW,KAAK,EAAE,EAAE;IACT/B,MAAM,EAAE,CAAC;IACTsB,eAAe,EAAE,iBAAiB;IAClCU,YAAY,EAAE;EAChB,CAAC;EACDC,IAAI,EAAE;IACJP,OAAO,EAAE,EAAE;IACXQ,cAAc,EAAE,QAAQ;IACxBZ,eAAe,EAAE,OAAO;IACxBK,UAAU,EAAE,QAAQ;IACpBQ,cAAc,EAAE;EAClB;AACF,CAAC,CAAC"}

package/lib/commonjs/components/BottomSheet/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BottomSheet", {
-  enumerable: true,
-  get: function () {
-    return _BottomSheet.default;
-  }
-});
-var _BottomSheet = _interopRequireDefault(require("./BottomSheet"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/BottomSheet/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;AACA;AAAuD"}

package/lib/commonjs/components/BottomSheet/types.js

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map

package/lib/commonjs/components/BottomSheet/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.tsx"],"mappings":""}

package/lib/commonjs/mappings/BottomSheet.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Bottom Sheet",
-  tag: "BottomSheet",
-  category: _types.COMPONENT_TYPES.container,
-  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
-  props: {
-    step: (0, _types.createNumberProp)({
-      label: "Step",
-      description: "Step can be -1, 0, 1, or 2."
-    })
-  }
-};
-exports.SEED_DATA = SEED_DATA;
-//# sourceMappingURL=BottomSheet.js.map

package/lib/commonjs/mappings/BottomSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","container","stylesPanelSections","StylesPanelSections","Background","Borders","Size","MarginsAndPaddings","Position","Effects","props","step","createNumberProp","label","description"],"sourceRoot":"../../src","sources":["BottomSheet.ts"],"mappings":";;;;;;AAAA;AAMO,MAAMA,SAAS,GAAG;EACvBC,IAAI,EAAE,cAAc;EACpBC,GAAG,EAAE,aAAa;EAClBC,QAAQ,EAAEC,sBAAe,CAACC,SAAS;EACnCC,mBAAmB,EAAE,CACnBC,0BAAmB,CAACC,UAAU,EAC9BD,0BAAmB,CAACE,OAAO,EAC3BF,0BAAmB,CAACG,IAAI,EACxBH,0BAAmB,CAACI,kBAAkB,EACtCJ,0BAAmB,CAACK,QAAQ,EAC5BL,0BAAmB,CAACM,OAAO,CAC5B;EACDC,KAAK,EAAE;IACLC,IAAI,EAAE,IAAAC,uBAAgB,EAAC;MACrBC,KAAK,EAAE,MAAM;MACbC,WAAW,EAAE;IACf,CAAC;EACH;AACF,CAAC;AAAC"}

package/lib/module/components/BottomSheet/BottomSheet.native.js

@@ -1,50 +0,0 @@
-import React, { useCallback, useMemo, useRef } from "react";
-import { View, StyleSheet } from "react-native";
-import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
-import { extractStyles } from "../../utilities";
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const bottomSheetRef = useRef(null);
-  const {
-    viewStyles
-  } = extractStyles(style);
-
-  // variables
-  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);
-
-  // callbacks
-  const handleSheetChanges = useCallback(index => {
-    console.log("handleSheetChanges", index);
-  }, []);
-  React.useEffect(() => {
-    if (step === -1) {
-      var _bottomSheetRef$curre;
-      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
-    }
-  }, [step]);
-  return /*#__PURE__*/React.createElement(View, {
-    style: [containerStyle.container, viewStyles, {
-      backgroundColor: step !== -1 ? "grey" : "transparent"
-    }]
-  }, /*#__PURE__*/React.createElement(BottomSheet, {
-    ref: bottomSheetRef,
-    index: step,
-    snapPoints: snapPoints,
-    onChange: handleSheetChanges
-  }, /*#__PURE__*/React.createElement(BottomSheetView, null, children)));
-};
-export default BottomSheetComponent;
-const containerStyle = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    flex: 1,
-    alignItems: "center"
-  }
-});
-//# sourceMappingURL=BottomSheet.native.js.map

package/lib/module/components/BottomSheet/BottomSheet.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useCallback","useMemo","useRef","View","StyleSheet","BottomSheet","BottomSheetView","extractStyles","BottomSheetComponent","style","children","step","bottomSheetRef","viewStyles","snapPoints","handleSheetChanges","index","console","log","useEffect","current","close","containerStyle","container","backgroundColor","create","flex","contentContainer","alignItems"],"sourceRoot":"../../src","sources":["BottomSheet.native.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC3D,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,OAAOC,WAAW,IAAIC,eAAe,QAAQ,sBAAsB;AAEnE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,MAAMC,oBAAgD,GAAG,QAInD;EAAA,IAJoD;IACxDC,KAAK;IACLC,QAAQ;IACRC;EACF,CAAC;EACC,MAAMC,cAAc,GAAGV,MAAM,CAAc,IAAI,CAAC;EAChD,MAAM;IAAEW;EAAW,CAAC,GAAGN,aAAa,CAACE,KAAK,CAAC;;EAE3C;EACA,MAAMK,UAAU,GAAGb,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;;EAE3D;EACA,MAAMc,kBAAkB,GAAGf,WAAW,CAAEgB,KAAa,IAAK;IACxDC,OAAO,CAACC,GAAG,CAAC,oBAAoB,EAAEF,KAAK,CAAC;EAC1C,CAAC,EAAE,EAAE,CAAC;EAENjB,KAAK,CAACoB,SAAS,CAAC,MAAM;IACpB,IAAIR,IAAI,KAAK,CAAC,CAAC,EAAE;MAAA;MACfC,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEQ,OAAO,0DAAvB,sBAAyBC,KAAK,EAAE;IAClC;EACF,CAAC,EAAE,CAACV,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,IAAI;IACH,KAAK,EAAE,CACLW,cAAc,CAACC,SAAS,EACxBV,UAAU,EACV;MAAEW,eAAe,EAAEb,IAAI,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG;IAAc,CAAC;EACzD,gBAEF,oBAAC,WAAW;IACV,GAAG,EAAEC,cAAe;IACpB,KAAK,EAAED,IAAK;IACZ,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAEC;EAAmB,gBAE7B,oBAAC,eAAe,QAAEL,QAAQ,CAAmB,CACjC,CACT;AAEX,CAAC;AAED,eAAeF,oBAAoB;AAEnC,MAAMc,cAAc,GAAGlB,UAAU,CAACqB,MAAM,CAAC;EACvCF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR,CAAC;EACDC,gBAAgB,EAAE;IAChBD,IAAI,EAAE,CAAC;IACPE,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/module/components/BottomSheet/BottomSheet.web.js

@@ -1,76 +0,0 @@
-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 = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  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 _bottomSheetRef$curre;
-    bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.snapTo(snapPoints.length - webStep);
-    // bottomSheetRef.current.snapTo(step);
-  }, [webStep, step, snapPoints]);
-  if (step === -1) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
-  }, /*#__PURE__*/React.createElement(ScrollBottomSheet, {
-    ref: bottomSheetRef,
-    componentType: "ScrollView",
-    snapPoints: snapPoints,
-    initialSnapIndex: 0,
-    renderHandle: () => /*#__PURE__*/React.createElement(View, {
-      style: styles.header
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.panelHandle
-    })),
-    contentContainerStyle: styles.contentContainerStyle
-  }, /*#__PURE__*/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
-  }
-});
-//# sourceMappingURL=BottomSheet.web.js.map