@draftbit/core 46.10.3-a5cf6b.2 → 46.10.3-af3058.2

package/lib/module/components/TabView/TabView.js

@@ -1,3 +1,4 @@
+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 * as React from "react";
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
 import { withTheme } from "../../theming";
@@ -27,11 +28,13 @@ const TabViewComponent = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
+
   //Check type of child using props
   //Regular '.type' cannot work because Draftbit strips the type in Draft view
   const instanceOfTabViewItemProps = object => {
     return "title" in object;
   };
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
@@ -57,8 +60,7 @@ const TabViewComponent = _ref => {
     }
   };
   const renderTabBar = props => {
-    return /*#__PURE__*/React.createElement(TabBar, {
-      ...props,
+    return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
       activeColor: activeColor || theme.colors.primary,
       inactiveColor: inactiveColor || theme.colors.divider,
       pressColor: pressColor || theme.colors.primary,
@@ -72,7 +74,7 @@ const TabViewComponent = _ref => {
           route,
           color
         } = _ref2;
-        return (route === null || route === void 0 ? void 0 : route.icon) ? /*#__PURE__*/React.createElement(Icon, {
+        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
           size: 16
@@ -81,8 +83,9 @@ const TabViewComponent = _ref => {
       style: {
         backgroundColor: tabsBackgroundColor || theme.colors.background
       }
-    });
+    }));
   };
+
   //Cannot render TabView without at least one tab
   if (!routes.length) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -101,17 +104,4 @@ const TabViewComponent = _ref => {
     swipeEnabled: swipeEnabled
   });
 };
-export default withTheme(TabViewComponent);tyles],
-    navigationState: {
-      index,
-      routes
-    },
-    renderScene: SceneMap(tabScenes),
-    renderTabBar: renderTabBar,
-    onIndexChange: indexChangeHandler,
-    tabBarPosition: tabBarPosition,
-    keyboardDismissMode: keyboardDismissMode,
-    swipeEnabled: swipeEnabled
-  });
-};
 export default withTheme(TabViewComponent);

package/lib/module/mappings/CardBlock.js

@@ -0,0 +1,119 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createNumColumnsType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+  image: {
+    group: GROUPS.data,
+    label: "Image",
+    description: "Image",
+    formType: FORM_TYPES.image,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  title: {
+    group: GROUPS.data,
+    label: "Title",
+    description: "Text to display",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Beautiful West Coast Villa",
+    editable: true,
+    required: false
+  },
+  leftDescription: {
+    group: GROUPS.data,
+    label: "Left description",
+    description: "Text to display on the left",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "San Diego",
+    editable: true,
+    required: false
+  },
+  rightDescription: {
+    group: GROUPS.data,
+    label: "Right description",
+    description: "Text to display on the right",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "$100",
+    editable: true,
+    required: false
+  },
+  aspectRatio: {
+    group: GROUPS.basic,
+    label: "Aspect ratio",
+    description: "Aspect ratio of the image",
+    formType: FORM_TYPES.aspectRatio,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 1.5,
+    editable: true,
+    required: false
+  },
+  titleCentered: {
+    group: GROUPS.basic,
+    label: "Title centered",
+    description: "Whether to center the title",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false
+  },
+  elevation: createElevationType(2)
+};
+export const SEED_DATA = [{
+  name: "Small Card",
+  tag: "CardBlock",
+  description: "An elevated card with a title and description, that takes up one third of its container.",
+  category: COMPONENT_TYPES.card,
+  props: {
+    ...SEED_DATA_PROPS,
+    numColumns: createNumColumnsType({
+      defaultValue: 1
+    })
+  }
+}, {
+  name: "Medium Block Card",
+  tag: "CardBlock",
+  description: "An elevated card with a title and description, that takes up one half of its container.",
+  category: COMPONENT_TYPES.card,
+  props: {
+    ...SEED_DATA_PROPS,
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Icon to display on the top right",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+      editable: true,
+      required: true
+    },
+    numColumns: createNumColumnsType({
+      defaultValue: 2
+    })
+  }
+}, {
+  name: "Large Block Card",
+  tag: "CardBlock",
+  description: "An elevated card with a title and description, that takes up the full width its container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  props: {
+    ...SEED_DATA_PROPS,
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Icon to display on the top right",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+      editable: true,
+      required: true
+    },
+    numColumns: createNumColumnsType({
+      defaultValue: 3
+    })
+  }
+}];

package/lib/module/mappings/CardContainer.js

@@ -0,0 +1,101 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, createElevationType, createNumColumnsType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+  image: {
+    label: "Image",
+    description: "Image",
+    formType: FORM_TYPES.image,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: true,
+    group: GROUPS.data
+  },
+  title: {
+    label: "Title",
+    description: "Text to display",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Beautiful West Coast Villa",
+    editable: true,
+    required: false,
+    group: GROUPS.data
+  },
+  leftDescription: {
+    label: "Left description",
+    description: "Text to display on the left",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "San Diego",
+    editable: true,
+    required: false,
+    group: GROUPS.data
+  },
+  rightDescription: {
+    label: "Right description",
+    description: "Text to display on the right",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "$100",
+    editable: true,
+    required: false,
+    group: GROUPS.data
+  },
+  icon: {
+    label: "Icon",
+    description: "Icon to display on the top right",
+    formType: FORM_TYPES.icon,
+    propType: PROP_TYPES.STRING /* OR ASSET TODO TEST ME */,
+    defaultValue: null,
+    editable: true,
+    required: false,
+    group: GROUPS.basic
+  },
+  aspectRatio: {
+    label: "Aspect ratio",
+    description: "Aspect ratio of the image",
+    formType: FORM_TYPES.aspectRatio,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 1.5,
+    editable: true,
+    required: false,
+    group: GROUPS.basic
+  },
+  textCentered: {
+    label: "Centered Text",
+    description: "Whether to center the text",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false,
+    group: GROUPS.basic
+  },
+  elevation: createElevationType(2)
+};
+export const SEED_DATA = [{
+  name: "Medium Card",
+  tag: "CardContainer",
+  description: "An elevated card with a title and description, that takes up half of its container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: null,
+  props: {
+    ...SEED_DATA_PROPS,
+    numColumns: createNumColumnsType({
+      defaultValue: 2
+    })
+  }
+}, {
+  name: "Large Card",
+  tag: "CardContainer",
+  description: "An elevated card with a title and description, that takes up its full container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: null,
+  props: {
+    ...SEED_DATA_PROPS,
+    numColumns: createNumColumnsType({
+      defaultValue: 3
+    })
+  }
+}];

package/lib/module/mappings/CardContainerRating.js

@@ -0,0 +1,123 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, createElevationType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+  image: {
+    group: GROUPS.data,
+    label: "Image",
+    description: "Image",
+    formType: FORM_TYPES.image,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  title: {
+    group: GROUPS.data,
+    label: "Title",
+    description: "Text to display",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Beautiful West Coast Villa",
+    editable: true,
+    required: false
+  },
+  leftDescription: {
+    group: GROUPS.data,
+    label: "Left description",
+    description: "Text to display on the left",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "San Diego",
+    editable: true,
+    required: false
+  },
+  rightDescription: {
+    group: GROUPS.data,
+    label: "Right description",
+    description: "Text to display on the right",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "$100",
+    editable: true,
+    required: false
+  },
+  icon: {
+    group: GROUPS.basic,
+    label: "Icon",
+    description: "Icon to display on the top right",
+    formType: FORM_TYPES.icon,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  aspectRatio: {
+    group: GROUPS.basic,
+    label: "Aspect ratio",
+    description: "Aspect ratio of the image",
+    formType: FORM_TYPES.aspectRatio,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 1.5,
+    editable: true,
+    required: false
+  },
+  rating: {
+    group: GROUPS.data,
+    label: "Rating",
+    description: "Number of stars to show. A number 0-5.",
+    formType: FORM_TYPES.number,
+    propType: PROP_TYPES.NUMBER,
+    defaultValue: 5,
+    min: 0,
+    max: 5,
+    step: 1,
+    precision: 0,
+    editable: true,
+    required: false
+  },
+  elevation: createElevationType(2)
+};
+export const SEED_DATA = [{
+  name: "Medium Card (Rating)",
+  tag: "CardContainerRating",
+  description: "An elevated card with a title and description, that takes up half of its container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_2col.png",
+  supports_list_render: true,
+  props: {
+    ...SEED_DATA_PROPS,
+    numColumns: {
+      label: "Number of Columns",
+      description: "Numbre of columns",
+      group: GROUPS.uncategorized,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 2,
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Large Card (Rating)",
+  tag: "CardContainerRating",
+  description: "An elevated card with a title and description, that takes up its full container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerRating_3col.png",
+  supports_list_render: true,
+  props: {
+    ...SEED_DATA_PROPS,
+    numColumns: {
+      label: "Number of Columns",
+      description: "Numbre of columns",
+      group: GROUPS.uncategorized,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 3,
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/CardContainerShortImage.js

@@ -0,0 +1,117 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Short Card (Left)",
+  tag: "CardContainerShortImage",
+  description: "An elevated card with a left aligned image and a title and subtitle",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerShortLeftImage.png",
+  supports_list_render: true,
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Title to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    aspectRatio: {
+      group: GROUPS.basic,
+      label: "Aspect ratio",
+      description: "Aspect ratio of the image",
+      formType: FORM_TYPES.aspectRatio,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2),
+    mode: {
+      group: GROUPS.uncategorized,
+      label: "Image Side",
+      description: "The side on which the image is on (left or right)",
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "left",
+      options: ["left", "right"],
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Short Card (Right)",
+  tag: "CardContainerShortImage",
+  description: "An elevated card with a right aligned image and a title and subtitle",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerShortRightImage.png",
+  supports_list_render: true,
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Title to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2),
+    mode: {
+      label: "Mode",
+      description: "Mode",
+      group: GROUPS.uncategorized,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "right",
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/CardInline.js

@@ -0,0 +1,52 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Inline Card",
+  tag: "CardInline",
+  description: "An elevated card with image and a title and description overlayed, that takes up the full width of its container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {},
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle text",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    aspectRatio: {
+      group: GROUPS.basic,
+      label: "Aspect ratio",
+      description: "Aspect ratio of the image",
+      formType: FORM_TYPES.aspectRatio,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 1.5,
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2)
+  }
+};