@draftbit/core 46.9.1-b17d64.2 → 46.9.1-b92e81.2

package/lib/commonjs/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Banner", {
     return _Banner.default;
   }
 });
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -363,24 +369,6 @@ Object.defineProperty(exports, "TabViewItem", {
     return _TabView.TabViewItem;
   }
 });
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.Table;
-  }
-});
-Object.defineProperty(exports, "TableCell", {
-  enumerable: true,
-  get: function () {
-    return _Table.TableCell;
-  }
-});
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function () {
-    return _Table.TableRow;
-  }
-});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function () {
@@ -459,7 +447,7 @@ var _Shadow = _interopRequireDefault(require("./components/Shadow"));
 var _DeckSwiper = require("./components/DeckSwiper");
 var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
-var _Table = require("./components/Table");
+var _BottomSheet = require("./components/BottomSheet");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/BottomSheet.js

@@ -0,0 +1,70 @@
+"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",
+  description: "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
+  category: _types.COMPONENT_TYPES.bottomsheet,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  triggers: [_types.Triggers.OnSettle],
+  props: {
+    onSettle: (0, _types.createActionProp)({
+      label: "On settle",
+      description: "Action to execute when sheet settles on a snap point"
+    }),
+    snapPoints: (0, _types.createArrayProp)({
+      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: (0, _types.createStaticNumberProp)({
+      label: "Initial snap index",
+      description: "Index of the snap point to be used as the initial point",
+      defaultValue: 0,
+      required: false
+    }),
+    showHandle: (0, _types.createStaticBoolProp)({
+      label: "Show handle",
+      description: "Whether to show the top sheet handle or not",
+      defaultValue: true
+    }),
+    handleColor: (0, _types.createColorProp)({
+      label: "Handle color",
+      description: "Color of the top handle",
+      defaultValue: "divider"
+    }),
+    topBorderRadius: (0, _types.createStaticNumberProp)({
+      label: "Top border radius",
+      description: "Border radius of top corners",
+      defaultValue: 20,
+      required: false
+    }),
+    borderWidth: (0, _types.createStaticNumberProp)({
+      label: "Border width",
+      description: "Width of bottom sheet borders",
+      defaultValue: 1,
+      required: false
+    }),
+    borderColor: (0, _types.createColorProp)({
+      label: "Border color",
+      description: "Color of bottom sheet borders",
+      defaultValue: "divider"
+    }),
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    }),
+    bounces: (0, _types.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
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/FieldSearchBarFull.js

@@ -14,6 +14,7 @@ const SEED_DATA = [{
   preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
   supports_list_render: false,
   triggers: [_types.Triggers.OnChange],
+  // TODO Triggers.OnSubmit for multiple triggers
   props: {
     icon: {
       group: _types.GROUPS.basic,
@@ -52,7 +53,4 @@ const SEED_DATA = [{
   },
   layout: {}
 }];
-exports.SEED_DATA = SEED_DATA;},
-  layout: {}
-}];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/StarRating.js

@@ -23,7 +23,9 @@ const SEED_DATA = {
     }),
     fieldName: (0, _types.createFieldNameProp)({
       defaultValue: "ratingValue",
+      // this is the name of the variable declared on the screen in Draftbit
       handlerPropName: "onPress",
+      // the change handler prop in this component
       valuePropName: "rating" // the value prop in this component
     }),
 
@@ -48,10 +50,4 @@ const SEED_DATA = {
     })
   }
 };
-exports.SEED_DATA = SEED_DATA;pes.createColorProp)({
-      label: "Inactive Color",
-      defaultValue: "divider"
-    })
-  }
-};
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/styles/overlay.js

@@ -15,6 +15,7 @@ function overlay(elevation) {
   let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
   if (isAnimatedValue(elevation)) {
     const inputRange = [0, 1, 2, 3, 8, 24];
+
     // @ts-expect-error: TS doesn't seem to refine the type correctly
     return elevation.interpolate({
       inputRange,
@@ -23,6 +24,7 @@ function overlay(elevation) {
       })
     });
   }
+
   // @ts-expect-error: TS doesn't seem to refine the type correctly
   return calculateColor(surfaceColor, elevation);
 }
@@ -63,4 +65,4 @@ const elevationOverlayTransparency = {
   22: 15.72,
   23: 15.84,
   24: 16
-};};
+};

package/lib/commonjs/utilities.js

@@ -57,6 +57,7 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
     marginStyles
   };
 }
+
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles
@@ -89,4 +90,4 @@ function getValueForRadioButton(value) {
   } else {
     throw new Error("Invalid value: ".concat(value));
   }
-}}
+}

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

@@ -0,0 +1,80 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import BottomSheetComponent from "./BottomSheetComponent";
+import { withTheme } from "../../theming";
+const BottomSheet = _ref => {
+  let {
+    theme,
+    snapPoints = ["10%", "50%", "80%"],
+    initialSnapIndex = 0,
+    showHandle = true,
+    handleColor = theme.colors.divider,
+    topBorderRadius = 20,
+    borderWidth = 1,
+    borderColor = theme.colors.divider,
+    onSettle,
+    style,
+    children,
+    ...rest
+  } = _ref;
+  const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.parentContainer,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React.createElement(BottomSheetComponent, _extends({
+    componentType: "ScrollView",
+    snapPoints: snapPoints,
+    initialSnapIndex: initialSnapIndex,
+    renderHandle: () => /*#__PURE__*/React.createElement(React.Fragment, null, showHandle && /*#__PURE__*/React.createElement(View, {
+      style: [styles.handleContainer, {
+        backgroundColor,
+        borderTopLeftRadius: topBorderRadius,
+        borderTopRightRadius: topBorderRadius
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.handle, {
+        backgroundColor: handleColor
+      }]
+    }))),
+    contentContainerStyle: [styles.contentContainerStyle, style],
+    containerStyle: StyleSheet.flatten([styles.containerStyle, {
+      backgroundColor,
+      borderTopLeftRadius: topBorderRadius,
+      borderTopRightRadius: topBorderRadius,
+      borderWidth,
+      borderColor
+    }]),
+    onSettle: onSettle
+  }, rest), children));
+};
+const styles = StyleSheet.create({
+  //Render on top of everything
+  parentContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 10,
+    overflow: "hidden"
+  },
+  contentContainerStyle: {
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  containerStyle: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  handleContainer: {
+    alignItems: "center",
+    paddingVertical: 20
+  },
+  handle: {
+    width: 40,
+    height: 2,
+    borderRadius: 4
+  }
+});
+export default withTheme(BottomSheet);