@draftbit/core 46.9.1-db63a0.2 → 46.9.1-deddd4.2

package/lib/commonjs/components/Checkbox/context.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkboxGroupContext = exports.Direction = void 0;
 exports.useCheckboxGroupContext = useCheckboxGroupContext;
 var _react = require("react");
-let Direction;
+var Direction;
 exports.Direction = Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";

package/lib/commonjs/components/Container.js

@@ -11,6 +11,7 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+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); }
 const Container = _ref => {
   let {
     useThemeGutterPadding,
@@ -72,10 +73,9 @@ const Container = _ref => {
   };
   const Wrap = elevation ? _Elevation.default : _reactNative.View;
   if (elevation) containerStyle.elevation = elevation;
-  return /*#__PURE__*/React.createElement(Wrap, {
-    style: [containerStyle, style],
-    ...rest
-  }, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
+  return /*#__PURE__*/React.createElement(Wrap, _extends({
+    style: [containerStyle, style]
+  }, rest), backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
     source: typeof backgroundImage === "string" ? {
       uri: backgroundImage
     } : backgroundImage,
@@ -90,15 +90,4 @@ const Container = _ref => {
   }, children));
 };
 var _default = (0, _theming.withTheme)(Container);
-exports.default = _default;sizeMode: backgroundImageResizeMode,
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: innerStyle
-  }, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: innerStyle
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Container);
 exports.default = _default;

package/lib/commonjs/components/Table/Table.js

@@ -25,7 +25,8 @@ const Table = _ref => {
     keyExtractor,
     renderItem,
     children: childrenProp,
-    style
+    style,
+    ...rest
   } = _ref;
   //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) {
@@ -58,8 +59,38 @@ const Table = _ref => {
   }, [data, renderItem, keyExtractor, isRenderItem]);
   const children = isRenderItem ? dataAsChildren : _react.default.Children.toArray(childrenProp);
   const validChildren = _react.default.useMemo(() => children.filter(item => /*#__PURE__*/_react.default.isValidElement(item)), [children]);
-  const childrenWithoutHeader = _react.default.useMemo(() => validChildren.filter(item => !isTableHeader(item.props)), [validChildren, isTableHeader]);
-  const headers = _react.default.useMemo(() => validChildren.filter(item => isTableHeader(item.props)), [validChildren, isTableHeader]);
+  const childrenWithoutHeader = _react.default.useMemo(() => {
+    const flattenedWithoutNestedHeaders = validChildren.map(item => {
+      const nestedChildren = _react.default.Children.toArray(item.props.children);
+      //Header can be nested in React.Fragment when in renderItem
+      const nestedHeaders = nestedChildren.filter(child => isTableHeader(child.props));
+      if (nestedHeaders !== null && nestedHeaders !== void 0 && nestedHeaders.length) {
+        //New element excluding header children
+        return /*#__PURE__*/_react.default.cloneElement(item, {
+          children: nestedChildren.filter(child => !isTableHeader(child.props))
+        });
+      }
+      return item;
+    });
+    return flattenedWithoutNestedHeaders.filter(item => !isTableHeader(item.props));
+  }, [validChildren, isTableHeader]);
+  const header = _react.default.useMemo(() => {
+    const flattenedPossibleHeaders = validChildren.map(item => {
+      const nestedChildren = _react.default.Children.toArray(item.props.children);
+      //Header can be nested in React.Fragment when in renderItem
+      const nestedHeaders = nestedChildren.filter(child => isTableHeader(child.props));
+      if (nestedHeaders !== null && nestedHeaders !== void 0 && nestedHeaders.length) {
+        return nestedHeaders[0];
+      }
+      return item;
+    });
+    const allHeaders = flattenedPossibleHeaders.filter(item => isTableHeader(item.props));
+    if (allHeaders.length) {
+      return allHeaders[0]; //Only 1 header taken
+    }
+
+    return null;
+  }, [validChildren, isTableHeader]);
   const contextValue = {
     borderColor,
     borderStyle,
@@ -80,7 +111,7 @@ const Table = _ref => {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.container, borderViewStyle, style]
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headers), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, childrenWithoutHeader)));
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, rest, childrenWithoutHeader)));
 };
 const styles = _reactNative.StyleSheet.create({
   container: {
@@ -88,4 +119,5 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(Table);
+exports.default = _default;
 exports.default = _default;

package/lib/commonjs/components/YotubePlayer.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
+var _utilities = require("../utilities");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const YoutubePlayer = _ref => {
+  let {
+    videoId,
+    playlist,
+    mute = false,
+    autoplay = false,
+    style
+  } = _ref;
+  const {
+    viewStyles
+  } = (0, _utilities.extractStyles)(style);
+  const {
+    height,
+    width
+  } = viewStyles;
+  const defaultVideoId = "nwMUpDESXrI";
+  return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
+    height: height,
+    width: width,
+    play: autoplay,
+    videoId: !videoId && !playlist ? defaultVideoId : videoId,
+    playList: playlist,
+    mute: mute,
+    webViewStyle: style
+  });
+};
+var _default = YoutubePlayer;
+exports.default = _default;

package/lib/commonjs/hooks.js

@@ -10,12 +10,11 @@ function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable
   // and can hold any value, similar to an instance property on a class
   const ref = _react.default.useRef();
-
   // Store current value in ref
   _react.default.useEffect(() => {
     ref.current = value;
   }, [value]);
-
   // Return previous value (happens before update in useEffect above)
   return ref.current;
+}
 }

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 () {
@@ -405,6 +411,12 @@ Object.defineProperty(exports, "Touchable", {
     return _Touchable.default;
   }
 });
+Object.defineProperty(exports, "YoutubePlayer", {
+  enumerable: true,
+  get: function () {
+    return _YotubePlayer.default;
+  }
+});
 Object.defineProperty(exports, "injectIcon", {
   enumerable: true,
   get: function () {
@@ -459,6 +471,8 @@ var _Shadow = _interopRequireDefault(require("./components/Shadow"));
 var _DeckSwiper = require("./components/DeckSwiper");
 var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
+var _BottomSheet = require("./components/BottomSheet");
+var _YotubePlayer = _interopRequireDefault(require("./components/YotubePlayer"));
 var _Table = require("./components/Table");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));

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

@@ -47,13 +47,13 @@ const SHARED_SEED_DATA_PROPS = {
     label: "Cell Vertical Padding",
     description: "Specifies the vertical padding of the cell. Passed down to TableCell components unless overridden",
     required: false,
-    defaultValue: 10
+    defaultValue: null
   }),
   cellHorizontalPadding: (0, _types.createStaticNumberProp)({
     label: "Cell Horizontal Padding",
     description: "Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden",
     required: false,
-    defaultValue: 10
+    defaultValue: null
   })
 };
 const SEED_DATA = [{
@@ -82,7 +82,20 @@ const SEED_DATA = [{
     drawTopBorder: {
       ...SHARED_SEED_DATA_PROPS.drawTopBorder,
       defaultValue: true
-    }
+    },
+    cellVerticalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellVerticalPadding,
+      defaultValue: 10
+    },
+    cellHorizontalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellHorizontalPadding,
+      defaultValue: 10
+    },
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
   }
 }, {
   name: "Table Row",

package/lib/commonjs/mappings/YoutubePlayer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Youtube Player",
+  tag: "YoutubePlayer",
+  description: "Plays a youtube video form a Youtube video or playlist id",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: _types.COMPONENT_TYPES.media,
+  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  layout: {
+    height: 250
+  },
+  props: {
+    videoId: (0, _types.createTextProp)({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: null
+    }),
+    playlist: (0, _types.createTextProp)({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: null
+    }),
+    mute: (0, _types.createStaticBoolProp)({
+      label: "Mute Audio",
+      description: "Mute the audio of the video.",
+      defaultValue: false,
+      required: false
+    }),
+    autoplay: (0, _types.createStaticBoolProp)({
+      label: "Auto Play",
+      description: "Autoplay the video on load.",
+      defaultValue: false,
+      required: false
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

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);