@draftbit/core 46.9.1-c72bba.2 → 46.9.1-d273d3.2

package/src/components/BottomSheet/index.js

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

package/src/components/BottomSheet/index.ts

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

package/src/components/YotubePlayer.js

@@ -0,0 +1,10 @@
+import React from "react";
+import YoutubePlayerComponent from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+const YoutubePlayer = ({ videoId, playlist, mute = false, autoplay = false, style, }) => {
+    const { viewStyles } = extractStyles(style);
+    const { height, width } = viewStyles;
+    const defaultVideoId = "nwMUpDESXrI";
+    return (React.createElement(YoutubePlayerComponent, { height: height, width: width, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, mute: mute, webViewStyle: style }));
+};
+export default YoutubePlayer;

package/src/components/YotubePlayer.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import YoutubePlayerComponent from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+
+interface YoutubePlayerProps {
+  videoId?: string;
+  playlist?: string;
+  mute?: boolean;
+  autoplay?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
+  videoId,
+  playlist,
+  mute = false,
+  autoplay = false,
+  style,
+}) => {
+  const { viewStyles } = extractStyles(style);
+  const { height, width } = viewStyles;
+  const defaultVideoId = "nwMUpDESXrI";
+
+  return (
+    <YoutubePlayerComponent
+      height={height}
+      width={width}
+      play={autoplay}
+      videoId={!videoId && !playlist ? defaultVideoId : videoId}
+      playList={playlist}
+      mute={mute}
+      webViewStyle={style}
+    />
+  );
+};
+
+export default YoutubePlayer;

package/src/index.js

@@ -35,7 +35,8 @@ export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
-export { Table, TableRow, TableCell } from "./components/Table";
+export { BottomSheet } from "./components/BottomSheet";
+export { default as YoutubePlayer } from "./components/YotubePlayer";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -58,7 +58,9 @@ export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 
-export { Table, TableRow, TableCell } from "./components/Table";
+export { BottomSheet } from "./components/BottomSheet";
+
+export { default as YoutubePlayer } from "./components/YotubePlayer";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/src/mappings/BottomSheet.js

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

package/src/mappings/BottomSheet.ts

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

package/src/mappings/YoutubePlayer.js

@@ -0,0 +1,37 @@
+import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES, createStaticBoolProp, createTextProp, } from "@draftbit/types";
+export 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: COMPONENT_TYPES.media,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        height: 250,
+    },
+    props: {
+        videoId: createTextProp({
+            label: "Video ID",
+            description: "VideoId of the Youtube video.",
+            defaultValue: null,
+        }),
+        playlist: createTextProp({
+            label: "Playlist",
+            description: "Playlist of the Youtube videos.",
+            defaultValue: null,
+        }),
+        mute: createStaticBoolProp({
+            label: "Mute Audio",
+            description: "Mute the audio of the video.",
+            defaultValue: false,
+            required: false,
+        }),
+        autoplay: createStaticBoolProp({
+            label: "Auto Play",
+            description: "Autoplay the video on load.",
+            defaultValue: false,
+            required: false,
+        }),
+    },
+};

package/src/mappings/YoutubePlayer.ts

@@ -0,0 +1,43 @@
+import {
+  BLOCK_STYLES_SECTIONS,
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  createTextProp,
+} from "@draftbit/types";
+
+export 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: COMPONENT_TYPES.media,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    height: 250,
+  },
+  props: {
+    videoId: createTextProp({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: null,
+    }),
+    playlist: createTextProp({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: null,
+    }),
+    mute: createStaticBoolProp({
+      label: "Mute Audio",
+      description: "Mute the audio of the video.",
+      defaultValue: false,
+      required: false,
+    }),
+    autoplay: createStaticBoolProp({
+      label: "Auto Play",
+      description: "Autoplay the video on load.",
+      defaultValue: false,
+      required: false,
+    }),
+  },
+};

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

@@ -1,123 +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 _theming = require("../../theming");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Table = _ref => {
-  let {
-    theme,
-    borderWidth = 1,
-    borderColor = theme.colors.divider,
-    borderStyle = "solid",
-    drawTopBorder = true,
-    drawBottomBorder = false,
-    drawStartBorder = false,
-    drawEndBorder = false,
-    cellVerticalPadding = 10,
-    cellHorizontalPadding = 10,
-    data,
-    keyExtractor,
-    renderItem,
-    children: childrenProp,
-    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) {
-    throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
-  }
-  if (data && renderItem && childrenProp) {
-    console.warn("'children' of Table ignored due to usage of 'data' and 'renderItem'");
-  }
-  const isTableHeader = _react.default.useCallback(object => {
-    return object.isTableHeader;
-  }, []);
-  const isRenderItem = data && renderItem;
-
-  //Uses 'renderItem' and 'data' to create an array of children
-  const dataAsChildren = _react.default.useMemo(() => {
-    if (!isRenderItem) return [];
-    return data.map((item, index) => {
-      const component = renderItem({
-        item,
-        index
-      });
-      if (!component) {
-        return null;
-      }
-      const key = keyExtractor ? keyExtractor(item, index) : index.toString();
-      return /*#__PURE__*/_react.default.cloneElement(component, {
-        key
-      });
-    });
-  }, [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(() => {
-    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,
-    borderWidth,
-    cellHorizontalPadding,
-    cellVerticalPadding
-  };
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor,
-    borderWidth,
-    borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container, borderViewStyle, style]
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, rest, childrenWithoutHeader)));
-};
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-var _default = (0, _theming.withTheme)(Table);
-exports.default = _default;
-exports.default = _default;

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

@@ -1,49 +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 _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableCell = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = false,
-    drawStartBorder = false,
-    drawEndBorder = true,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    children,
-    style
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor: borderColor || parentContextValue.borderColor,
-    borderWidth: borderWidth || parentContextValue.borderWidth,
-    borderStyle: borderStyle || parentContextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.cellContainer, borderViewStyle, {
-      paddingVertical: cellVerticalPadding || parentContextValue.cellVerticalPadding,
-      paddingHorizontal: cellHorizontalPadding || parentContextValue.cellHorizontalPadding
-    }, style]
-  }, children);
-};
-const styles = _reactNative.StyleSheet.create({
-  cellContainer: {
-    flex: 1,
-    flexDirection: "row"
-  }
-});
-var _default = TableCell;
-exports.default = _default;

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

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableStyleContext = void 0;
-exports.generateBorderStyles = generateBorderStyles;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableStyleContext = /*#__PURE__*/_react.default.createContext({});
-exports.TableStyleContext = TableStyleContext;
-function generateBorderStyles(_ref) {
-  let {
-    borderColor,
-    borderWidth,
-    borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  } = _ref;
-  return {
-    borderColor,
-    borderStyle,
-    borderTopWidth: drawTopBorder ? borderWidth : 0,
-    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
-    borderStartWidth: drawStartBorder ? borderWidth : 0,
-    borderEndWidth: drawEndBorder ? borderWidth : 0
-  };
-}

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

@@ -1,61 +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 _TableCommon = require("./TableCommon");
-var _theming = require("../../theming");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableRow = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = true,
-    drawStartBorder = true,
-    drawEndBorder = false,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    isTableHeader = false,
-    children,
-    style,
-    theme
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
-
-  //Create context to use and pass to children based on own props or fall back to parent provided context
-  const contextValue = {
-    borderColor: borderColor || parentContextValue.borderColor,
-    borderStyle: borderStyle || parentContextValue.borderStyle,
-    borderWidth: borderWidth || parentContextValue.borderWidth,
-    cellHorizontalPadding: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
-    cellVerticalPadding: cellVerticalPadding || parentContextValue.cellVerticalPadding
-  };
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor: contextValue.borderColor,
-    borderWidth: contextValue.borderWidth,
-    borderStyle: contextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [borderViewStyle, isTableHeader ? {
-      backgroundColor: theme.colors.primary
-    } : {}, style, styles.cellsContainer]
-  }, children));
-};
-const styles = _reactNative.StyleSheet.create({
-  cellsContainer: {
-    flexDirection: "row"
-  }
-});
-var _default = (0, _theming.withTheme)(TableRow);
-exports.default = _default;

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

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.default;
-  }
-});
-Object.defineProperty(exports, "TableCell", {
-  enumerable: true,
-  get: function () {
-    return _TableCell.default;
-  }
-});
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function () {
-    return _TableRow.default;
-  }
-});
-var _Table = _interopRequireDefault(require("./Table"));
-var _TableRow = _interopRequireDefault(require("./TableRow"));
-var _TableCell = _interopRequireDefault(require("./TableCell"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }