@draftbit/core 46.2.4-58c73f.0 → 46.2.4-956f64.5

package/lib/commonjs/mappings/TextInput.js

@@ -7,185 +7,6 @@ exports.SEED_DATA_PROPS = exports.SEED_DATA = void 0;
 
 var _types = require("@draftbit/types");
 
-const TEXT_INPUT_PROPS = {
-  allowFontScaling: {
-    group: _types.GROUPS.advanced,
-    label: "Allow Font Scaling",
-    description: "Whether fonts should scale to respect Text Size in the user's accessibility settings. (Default: true)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  autoCapitalize: {
-    group: _types.GROUPS.advanced,
-    label: "Auto Capitalize",
-    description: "Can automatically capitalize sentences, words, and characters (Default: none).",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: ["none", "sentences", "words", "characters"],
-    formType: _types.FORM_TYPES.flatArray,
-    propType: _types.PROP_TYPES.STRING
-  },
-  autoCorrect: {
-    group: _types.GROUPS.advanced,
-    label: "Auto Correct",
-    description: "Enables auto correction",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  autoFocus: {
-    group: _types.GROUPS.basic,
-    label: "Auto Focus",
-    description: "Focuses the input on load in and brings up the keyboard",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  caretHidden: {
-    group: _types.GROUPS.advanced,
-    label: "Hide Caret",
-    description: "Hides the caret(the line small line underneath each showing where you're editing/typing",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  contextMenuHidden: {
-    group: _types.GROUPS.advanced,
-    label: "Hide Context Menu",
-    description: "Hides the system context menu (Default: false)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  editable: {
-    group: _types.GROUPS.advanced,
-    label: "Editable",
-    description: "If false, the text is not editable",
-    editable: true,
-    required: false,
-    defaultValue: true,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  keyboardAppearance: {
-    group: _types.GROUPS.advanced,
-    label: "Keyboard Appearance",
-    description: "Determines the color of the keyboard.(iOS Only)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: ["default", "light", "dark"],
-    formType: _types.FORM_TYPES.flatArray,
-    propType: _types.PROP_TYPES.STRING
-  },
-  keyboardType: {
-    group: _types.GROUPS.advanced,
-    label: "Keyboard Type",
-    description: "Determines what keyboard is given to the user.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: ["default", "email-address", "numeric", "phone-pad", "ascii-capable", "numbers-and-punctuation", "url", "number-pad", "name-phone-pad", "decimal-pad", "twitter", "web-search", "visible-password"],
-    formType: _types.FORM_TYPES.flatArray,
-    propType: _types.PROP_TYPES.STRING
-  },
-  maxLength: {
-    group: _types.GROUPS.basic,
-    label: "Max Length",
-    description: "Limits the input to a set number of characters.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    min: 0,
-    step: 1,
-    precision: 0,
-    formType: _types.FORM_TYPES.number,
-    propType: _types.PROP_TYPES.NUMBER
-  },
-  placeholder: {
-    group: _types.GROUPS.data,
-    label: "Placeholder Text",
-    description: "The text that is shown on load when no value is available.",
-    editable: true,
-    required: false,
-    defaultValue: "Enter a value...",
-    formType: _types.FORM_TYPES.string,
-    propType: _types.PROP_TYPES.STRING
-  },
-  placeholderTextColor: {
-    group: _types.GROUPS.basic,
-    label: "Placeholder Text Color",
-    description: "The color of the placeholder text.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.color,
-    propType: _types.PROP_TYPES.STRING
-  },
-  returnKeyLabel: {
-    group: _types.GROUPS.advanced,
-    label: "Return Key Label",
-    description: "(Android Only) Sets the label on the return key (use this instead of rewturnKeyType)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.string,
-    propType: _types.PROP_TYPES.STRING
-  },
-  returnKeyType: {
-    group: _types.GROUPS.advanced,
-    label: "Return Key Type",
-    description: "Determines how the return key should look like",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: ["done", "go", "next", "search", "send", "none", "previous", "default", "emergency-call", "google", "join", "route", "yahoo"],
-    formType: _types.FORM_TYPES.flatArray,
-    propType: _types.PROP_TYPES.STRING
-  },
-  secureTextEntry: {
-    group: _types.GROUPS.basic,
-    label: "Password Input?",
-    description: "Hides the characters with a *, useful for passwords and other sensitive information.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  },
-  selectionColor: {
-    group: _types.GROUPS.advanced,
-    label: "Selection Color",
-    description: "Color of the highlighted portion when selecting.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.color,
-    propType: _types.PROP_TYPES.STRING
-  },
-  selectTextOnFocus: {
-    group: _types.GROUPS.advanced,
-    label: "Select Text on Focus",
-    description: "If true, all the text will automatically be selected on focus",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: _types.FORM_TYPES.boolean,
-    propType: _types.PROP_TYPES.BOOLEAN
-  }
-};
 const SEED_DATA_PROPS = {
   style: {
     group: _types.GROUPS.basic,
@@ -265,7 +86,184 @@ const SEED_DATA = [{
     borderRadius: 8
   },
   triggers: [_types.Triggers.OnChangeText],
-  props: { ...TEXT_INPUT_PROPS,
+  props: {
+    allowFontScaling: {
+      group: _types.GROUPS.advanced,
+      label: "Allow Font Scaling",
+      description: "Whether fonts should scale to respect Text Size in the user's accessibility settings. (Default: true)",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    autoCapitalize: {
+      group: _types.GROUPS.advanced,
+      label: "Auto Capitalize",
+      description: "Can automatically capitalize sentences, words, and characters (Default: none).",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      options: ["none", "sentences", "words", "characters"],
+      formType: _types.FORM_TYPES.flatArray,
+      propType: _types.PROP_TYPES.STRING
+    },
+    autoCorrect: {
+      group: _types.GROUPS.advanced,
+      label: "Auto Correct",
+      description: "Enables auto correction",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    autoFocus: {
+      group: _types.GROUPS.basic,
+      label: "Auto Focus",
+      description: "Focuses the input on load in and brings up the keyboard",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    caretHidden: {
+      group: _types.GROUPS.advanced,
+      label: "Hide Caret",
+      description: "Hides the caret(the line small line underneath each showing where you're editing/typing",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    contextMenuHidden: {
+      group: _types.GROUPS.advanced,
+      label: "Hide Context Menu",
+      description: "Hides the system context menu (Default: false)",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    editable: {
+      group: _types.GROUPS.advanced,
+      label: "Editable",
+      description: "If false, the text is not editable",
+      editable: true,
+      required: false,
+      defaultValue: true,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    keyboardAppearance: {
+      group: _types.GROUPS.advanced,
+      label: "Keyboard Appearance",
+      description: "Determines the color of the keyboard.(iOS Only)",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      options: ["default", "light", "dark"],
+      formType: _types.FORM_TYPES.flatArray,
+      propType: _types.PROP_TYPES.STRING
+    },
+    keyboardType: {
+      group: _types.GROUPS.advanced,
+      label: "Keyboard Type",
+      description: "Determines what keyboard is given to the user.",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      options: ["default", "email-address", "numeric", "phone-pad", "ascii-capable", "numbers-and-punctuation", "url", "number-pad", "name-phone-pad", "decimal-pad", "twitter", "web-search", "visible-password"],
+      formType: _types.FORM_TYPES.flatArray,
+      propType: _types.PROP_TYPES.STRING
+    },
+    maxLength: {
+      group: _types.GROUPS.basic,
+      label: "Max Length",
+      description: "Limits the input to a set number of characters.",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      min: 0,
+      step: 1,
+      precision: 0,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER
+    },
+    placeholder: {
+      group: _types.GROUPS.data,
+      label: "Placeholder Text",
+      description: "The text that is shown on load when no value is available.",
+      editable: true,
+      required: false,
+      defaultValue: "Enter a value...",
+      formType: _types.FORM_TYPES.string,
+      propType: _types.PROP_TYPES.STRING
+    },
+    placeholderTextColor: {
+      group: _types.GROUPS.basic,
+      label: "Placeholder Text Color",
+      description: "The color of the placeholder text.",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.STRING
+    },
+    returnKeyLabel: {
+      group: _types.GROUPS.advanced,
+      label: "Return Key Label",
+      description: "(Android Only) Sets the label on the return key (use this instead of rewturnKeyType)",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.string,
+      propType: _types.PROP_TYPES.STRING
+    },
+    returnKeyType: {
+      group: _types.GROUPS.advanced,
+      label: "Return Key Type",
+      description: "Determines how the return key should look like",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      options: ["done", "go", "next", "search", "send", "none", "previous", "default", "emergency-call", "google", "join", "route", "yahoo"],
+      formType: _types.FORM_TYPES.flatArray,
+      propType: _types.PROP_TYPES.STRING
+    },
+    secureTextEntry: {
+      group: _types.GROUPS.basic,
+      label: "Password Input?",
+      description: "Hides the characters with a *, useful for passwords and other sensitive information.",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
+    selectionColor: {
+      group: _types.GROUPS.advanced,
+      label: "Selection Color",
+      description: "Color of the highlighted portion when selecting.",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.STRING
+    },
+    selectTextOnFocus: {
+      group: _types.GROUPS.advanced,
+      label: "Select Text on Focus",
+      description: "If true, all the text will automatically be selected on focus",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: _types.FORM_TYPES.boolean,
+      propType: _types.PROP_TYPES.BOOLEAN
+    },
     ...SEED_DATA_PROPS,
     multiline: {
       group: _types.GROUPS.basic,

package/lib/commonjs/mappings/Youtube.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+
+var _types = require("@draftbit/types");
+
+const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Given a VideoId orPlaylist and play Youtube video",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframehttps://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: _types.COMPONENT_TYPES.media,
+  stylesPanelSections: [_types.StylesPanelSections.Size],
+  layout: {
+    height: 250
+  },
+  props: {
+    videoId: (0, _types.createTextProp)({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: "nwMUpDESXrI"
+    }),
+    playlist: (0, _types.createTextProp)({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
+    }),
+    mute: (0, _types.createStaticBoolProp)({
+      label: "Mute Audio",
+      description: "Mute the audio of the video."
+    }),
+    autoplay: (0, _types.createStaticBoolProp)({
+      label: "Auto Play",
+      description: "Autoplay the video on load."
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/CardContainerShortImage.js

@@ -1,5 +1,3 @@
-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 { View, Text } from "react-native";
 import Image from "./Image";
@@ -25,10 +23,11 @@ const CardContainerShortImage = _ref => {
     onPress,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React.createElement(Card, {
     style: style,
-    onPress: onPress
-  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    onPress: onPress,
+    ...rest
+  }, /*#__PURE__*/React.createElement(Elevation, {
     style: {
       elevation,
       borderRadius: roundness
@@ -76,4 +75,19 @@ const CardContainerShortImage = _ref => {
   }))));
 };
 
+export default withTheme(CardContainerShortImage);2, {
+      color: colors.medium,
+      marginTop: 4
+    }]
+  }, subtitle) : null), mode === "right" && /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }))));
+};
+
 export default withTheme(CardContainerShortImage);

package/lib/module/components/Config.js

@@ -54,6 +54,7 @@ export default {
     width: size.width,
     height: size.height
   }, "image-placeholder_1"),
+  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
   squareImageUrl: buildImageUrl({
     width: 100,
     height: 100

package/lib/module/components/Layout.js

@@ -1,8 +1,5 @@
-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 { View } from "react-native"; // @ts-ignore
-
+import { View } from "react-native";
 export function Center(_ref) {
   let {
     width = 240,
@@ -12,15 +9,16 @@ export function Center(_ref) {
     style,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(View, _extends({
+  return /*#__PURE__*/React.createElement(View, {
     style: [{
       justifyContent: "center",
       alignItems: "center",
       width,
       height,
       backgroundColor: bgColor
-    }, style]
-  }, rest), children);
+    }, style],
+    ...rest
+  }, children);
 }
 export function Circle(_ref2) {
   let {
@@ -31,7 +29,7 @@ export function Circle(_ref2) {
     ...rest
   } = _ref2;
   const borderRadius = 1000;
-  return /*#__PURE__*/React.createElement(Center, _extends({
+  return /*#__PURE__*/React.createElement(Center, {
     width: size,
     height: size,
     bgColor: bgColor,
@@ -39,8 +37,9 @@ export function Circle(_ref2) {
       backgroundColor: bgColor,
       borderRadius,
       overflow: "hidden"
-    }]
-  }, rest), children);
+    }],
+    ...rest
+  }, children);
 }
 export function Square(_ref3) {
   let {
@@ -50,12 +49,13 @@ export function Square(_ref3) {
     style,
     ...rest
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Center, _extends({
+  return /*#__PURE__*/React.createElement(Center, {
     style: style,
     width: size,
     height: size,
-    bgColor: bgColor
-  }, rest), children);
+    bgColor: bgColor,
+    ...rest
+  }, children);
 }
 export function Row(_ref4) {
   let {
@@ -65,14 +65,14 @@ export function Row(_ref4) {
     style,
     ...rest
   } = _ref4;
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [style, // style goes first b/c we can't override these
-    {
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, {
       alignItems,
       flexDirection: "row",
       justifyContent: justifyContent
-    }]
-  }, rest), children);
+    }],
+    ...rest
+  }, children);
 }
 export function Spacer(_ref5) {
   let {
@@ -84,14 +84,36 @@ export function Spacer(_ref5) {
     style,
     ...rest
   } = _ref5;
-  return /*#__PURE__*/React.createElement(View, _extends({
+  return /*#__PURE__*/React.createElement(View, {
     style: [style, {
       paddingRight: right,
       paddingTop: top,
       paddingLeft: left,
       paddingBottom: bottom
-    }]
-  }, rest), children);
+    }],
+    ...rest
+  }, children);
+}
+export function Stack(_ref6) {
+  let {
+    children,
+    justifyContent = "flex-start",
+    alignItems = "flex-start",
+    style,
+    ...rest
+  } = _ref6;
+  return (
+    /*#__PURE__*/
+    // style must go first since we don't want justifyContent, alignItems overridden
+    React.createElement(View, {
+      style: [style, {
+        justifyContent,
+        alignItems
+      }],
+      ...rest
+    }, children)
+  );
+}dren);
 }
 export function Stack(_ref6) {
   let {

package/lib/module/components/SVG.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { View, Platform, Image } from "react-native";
+import { SvgUri } from "react-native-svg";
+import Config from "./Config";
+
+const SVG = _ref => {
+  let {
+    source,
+    style
+  } = _ref;
+  let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Platform.OS === "ios" && /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, /*#__PURE__*/React.createElement(SvgUri, {
+    width: "100%",
+    height: "100%",
+    uri: svgSource
+  })), Platform.OS === "android" && /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, /*#__PURE__*/React.createElement(SvgUri, {
+    width: "100%",
+    height: "100%",
+    uri: svgSource
+  })), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
+    style: style,
+    source: {
+      uri: svgSource
+    }
+  }));
+};
+
+export default SVG;

package/lib/module/components/TextField.js

@@ -177,6 +177,7 @@ class TextField extends React.Component {
       rightIconName,
       assistiveText,
       underlineColor: underlineColorProp,
+      activeBorderColor: activeBorderColorProp,
       multiline = false,
       numberOfLines = 4,
       style,
@@ -204,7 +205,7 @@ class TextField extends React.Component {
       underlineColor = "transparent";
       backgroundColor = colors.divider;
     } else {
-      activeColor = error ? colors.error : colors.primary;
+      activeColor = error ? colors.error : activeBorderColorProp;
       placeholderColor = borderColor = colors.light;
       underlineColor = underlineColorProp;
       backgroundColor = colors.background;

package/lib/module/components/Youtube.js

@@ -0,0 +1,59 @@
+import { COMPONENT_TYPES, createBoolProp, createTextProp } from "@draftbit/types";
+import React from "react";
+import YoutubePlayer from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+
+const Youtube = _ref => {
+  let {
+    videoId,
+    playlist,
+    style,
+    mute,
+    autoplay
+  } = _ref;
+  const {
+    viewStyles: {
+      height,
+      width
+    }
+  } = extractStyles(style);
+  return /*#__PURE__*/React.createElement(YoutubePlayer, {
+    height: height,
+    width: width,
+    play: autoplay,
+    videoId: videoId,
+    playList: playlist,
+    mute: mute
+  });
+};
+
+export default Youtube;
+export const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Youtube Component",
+  category: COMPONENT_TYPES.media,
+  layout: {
+    width: "100%"
+  },
+  props: {
+    videoId: createTextProp({
+      label: "VideoId",
+      description: "Youtube Video ID"
+    }),
+    playlist: createTextProp({
+      label: "PlayList",
+      description: "Playlist ID"
+    }),
+    mute: createBoolProp({
+      label: "Mute",
+      description: "Whether to mute video",
+      defaultValue: false
+    }),
+    autoplay: createBoolProp({
+      label: "Autoplay",
+      description: "Whether to Autoplay video",
+      defaultValue: false
+    })
+  }
+};