@draftbit/core 42.3.1 → 42.3.2-c31138.5

package/lib/typescript/src/components/LinearGradient.d.ts

@@ -0,0 +1,107 @@
+import { StyleProp, ViewStyle } from "react-native";
+declare type Props = {
+    color1: string;
+    color2: string;
+    color3: string;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    children?: any;
+    style?: StyleProp<ViewStyle>;
+};
+declare const LinearGradientComp: ({ children, color1, color2, color3, startX, startY, endX, endY, style, }: Props) => JSX.Element;
+export default LinearGradientComp;
+export declare const SEED_DATA: {
+    name: string;
+    tag: string;
+    description: string;
+    props: {
+        color1: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        color2: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        color3: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        startX: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
+            formType: string;
+            propType: string;
+        };
+        startY: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
+            formType: string;
+            propType: string;
+        };
+        endX: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
+            formType: string;
+            propType: string;
+        };
+        endY: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
+            formType: string;
+            propType: string;
+        };
+    };
+};

package/lib/typescript/src/index.d.ts

@@ -26,6 +26,7 @@ export { default as TextInput } from "./components/TextInput";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as LinearGradient } from "./components/LinearGradient";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "42.3.1",
+  "version": "42.3.2-c31138.5+c3113861",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -49,6 +49,7 @@
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
+    "expo-linear-gradient": "^9.2.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
@@ -95,5 +96,5 @@
       ]
     ]
   },
-  "gitHead": "a2001975f16d375a76160a8becc45da796a4f3c1"
+  "gitHead": "c3113861c13beaa818666b6b69c8255911b1c040"
 }

package/src/components/LinearGradient.js

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { LinearGradient } from "expo-linear-gradient";
+import { extractStyles } from "../utilities";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+const LinearGradientComp = ({ children, color1, color2, color3, startX = 0, startY = 0, endX = 100, endY = 100, style, }) => {
+    const { viewStyles } = extractStyles(style);
+    const colors = [color1, color2, color3].filter((color) => !!color);
+    const start = { x: startX / 100, y: startY / 100 };
+    const end = { x: endX / 100, y: endY / 100 };
+    return (React.createElement(LinearGradient, { colors: colors, start: start, end: end, style: viewStyles }, children));
+};
+export default LinearGradientComp;
+export const SEED_DATA = {
+    name: "LinearGradient",
+    tag: "LinearGradient",
+    description: "Linear Gradient Component",
+    props: {
+        color1: createColorProp({
+            label: "Color 1",
+        }),
+        color2: createColorProp({
+            label: "Color 2",
+        }),
+        color3: createColorProp({
+            label: "Color 3",
+        }),
+        startX: {
+            group: GROUPS.basic,
+            label: "Start X",
+            description: "Start position from Left",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        startY: {
+            group: GROUPS.basic,
+            label: "Start Y",
+            description: "Start position from Top",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        endX: {
+            group: GROUPS.basic,
+            label: "End Y",
+            description: "End position from Right",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        endY: {
+            group: GROUPS.basic,
+            label: "End Y",
+            description: "End position from Bottom",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+    },
+};

package/src/components/LinearGradient.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { extractStyles } from "../utilities";
+import {
+  createColorProp,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+} from "@draftbit/types";
+
+type Props = {
+  color1: string;
+  color2: string;
+  color3: string;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  children?: any;
+  style?: StyleProp<ViewStyle>;
+};
+
+const LinearGradientComp = ({
+  children,
+  color1,
+  color2,
+  color3,
+  startX = 0,
+  startY = 0,
+  endX = 100,
+  endY = 100,
+  style,
+}: Props) => {
+  const { viewStyles } = extractStyles(style);
+  const colors = [color1, color2, color3].filter((color: string) => !!color);
+  const start = { x: startX / 100, y: startY / 100 };
+  const end = { x: endX / 100, y: endY / 100 };
+  return (
+    <LinearGradient colors={colors} start={start} end={end} style={viewStyles}>
+      {children}
+    </LinearGradient>
+  );
+};
+
+export default LinearGradientComp;
+
+export const SEED_DATA = {
+  name: "LinearGradient",
+  tag: "LinearGradient",
+  description: "Linear Gradient Component",
+  props: {
+    color1: createColorProp({
+      label: "Color 1",
+    }),
+    color2: createColorProp({
+      label: "Color 2",
+    }),
+    color3: createColorProp({
+      label: "Color 3",
+    }),
+    startX: {
+      group: GROUPS.basic,
+      label: "Start X",
+      description: "Start position from Left",
+      editable: true,
+      required: false,
+      defaultValue: 0,
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 0,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+    },
+    startY: {
+      group: GROUPS.basic,
+      label: "Start Y",
+      description: "Start position from Top",
+      editable: true,
+      required: false,
+      defaultValue: 0,
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 0,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+    },
+    endX: {
+      group: GROUPS.basic,
+      label: "End Y",
+      description: "End position from Right",
+      editable: true,
+      required: false,
+      defaultValue: 100,
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 0,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+    },
+    endY: {
+      group: GROUPS.basic,
+      label: "End Y",
+      description: "End position from Bottom",
+      editable: true,
+      required: false,
+      defaultValue: 100,
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 0,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+    },
+  },
+};

package/src/index.js

@@ -26,6 +26,7 @@ export { default as TextInput } from "./components/TextInput";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as LinearGradient } from "./components/LinearGradient";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";

package/src/index.tsx

@@ -27,6 +27,7 @@ export { default as TextInput } from "./components/TextInput";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as LinearGradient } from "./components/LinearGradient";
 export {
   ActionSheet,
   ActionSheetItem,

package/src/mappings/Modal.js

@@ -0,0 +1,39 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createBoolProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Modal",
+  tag: "Modal",
+  description: "A basic Modal Component",
+  category: COMPONENT_TYPES.container,
+  props: {
+    animationType: {
+      group: GROUPS.basic,
+      name: "animationType",
+      label: "animationType",
+      description: "Animation Type",
+      options: ["slide", "fade", "none"],
+      editable: false,
+      required: false,
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "none",
+    },
+    transparent: createBoolProp({
+      group: GROUPS.basic,
+      label: "Transparent",
+      description:
+        "Determines whether the modal will fill the entire view. Setting this to true will render the modal over a transparent background",
+    }),
+    visible: createBoolProp({
+      group: GROUPS.data,
+      label: "Visible",
+      description: "Determines whether the modal is visible",
+    }),
+  },
+};

package/src/mappings/Switch.js

@@ -44,7 +44,10 @@ export const SEED_DATA = [
     name: "Switch Row",
     tag: "SwitchRow",
     category: COMPONENT_TYPES.input,
-    layout: {},
+    layout: {
+      marginLeft: 0,
+      marginRight: 0,
+    },
     triggers: SEED_DATA_TRIGGERS,
     props: {
       label: createTextProp({

package/src/mappings/TextArea.js

@@ -31,8 +31,8 @@ export const SEED_DATA = {
       label: "Number Of Lines",
       description: "Number Of Lines",
       group: GROUPS.basic,
-      formType: FORM_TYPES.boolean,
-      propType: PROP_TYPES.BOOLEAN,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
       defaultValue: 4,
       editable: true,
       required: false,

package/src/mappings/TextInput.js

@@ -9,7 +9,7 @@ import {
   Triggers,
 } from "@draftbit/types";
 
-export const COMMON_NATIVE_INPUT_PROPS = {
+export const SEED_DATA_PROPS = {
   style: {
     group: GROUPS.basic,
     label: "Style",
@@ -72,108 +72,6 @@ export const COMMON_NATIVE_INPUT_PROPS = {
   },
 };
 
-const NATIVE_INPUT_PROPS = {
-  ...COMMON_NATIVE_INPUT_PROPS,
-  multiline: {
-    group: GROUPS.basic,
-    label: "Multiple Lines",
-    description:
-      "Allows multiple lines of input, useful for situations where the user may be typing in a lot of data.",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: FORM_TYPES.boolean,
-    propType: PROP_TYPES.BOOLEAN,
-  },
-  numberOfLines: {
-    group: GROUPS.basic,
-    label: "Number of Lines",
-    description:
-      "Sets the number of lines for the input (Multiple Lines needs to be true)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    min: 0,
-    step: 1,
-    precision: 0,
-    formType: FORM_TYPES.number,
-    propType: PROP_TYPES.NUMBER,
-  },
-  scrollEnabled: {
-    group: GROUPS.basic,
-    label: "Scroll Enabled",
-    description:
-      "If false, scrolling of the input will be disabled. Only works when Multiple Lines is true",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: FORM_TYPES.boolean,
-    propType: PROP_TYPES.BOOLEAN,
-  },
-  spellcheck: {
-    group: GROUPS.basic,
-    label: "Disable Spell Check",
-    description:
-      "If false, disables spell-check style (red underlines). Default comes from Auto Correct",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    formType: FORM_TYPES.boolean,
-    propType: PROP_TYPES.BOOLEAN,
-  },
-  textContentType: {
-    group: GROUPS.advanced,
-    label: "Text Content Type",
-    description:
-      "Give the keyboard and system about what it should do with the input. For example, if its an address, autofill from address book",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: [
-      "none",
-      "URL",
-      "addressCity",
-      "addressCityAndState",
-      "addressState",
-      "countryName",
-      "creditCardNumber",
-      "emailAddress",
-      "familyName",
-      "fullStreetAddress",
-      "givenName",
-      "jobTitle",
-      "location",
-      "middleName",
-      "name",
-      "namePrefix",
-      "nameSuffix",
-      "nickname",
-      "organizationName",
-      "postalCode",
-      "streetAddressLine1",
-      "streetAddressLine2",
-      "sublocality",
-      "telephoneNumber",
-      "username",
-      "password",
-    ],
-    formType: FORM_TYPES.flatArray,
-    propType: PROP_TYPES.STRING,
-  },
-  textBreakStrategy: {
-    group: GROUPS.advanced,
-    label: "Text Break Strategy",
-    description:
-      "(Android Only) Set the text break strategy. (Default: simple)",
-    editable: true,
-    required: false,
-    defaultValue: null,
-    options: ["simple", "highQuality", "balanced"],
-    formType: FORM_TYPES.flatArray,
-    propType: PROP_TYPES.STRING,
-  },
-};
-
 export const SEED_DATA = [
   {
     name: "Text Input",
@@ -198,7 +96,105 @@ export const SEED_DATA = [
     triggers: [Triggers.OnChangeText],
     props: {
       ...TEXT_INPUT_PROPS,
-      ...NATIVE_INPUT_PROPS,
+      ...SEED_DATA_PROPS,
+      multiline: {
+        group: GROUPS.basic,
+        label: "Multiple Lines",
+        description:
+          "Allows multiple lines of input, useful for situations where the user may be typing in a lot of data.",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+      },
+      numberOfLines: {
+        group: GROUPS.basic,
+        label: "Number of Lines",
+        description:
+          "Sets the number of lines for the input (Multiple Lines needs to be true)",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        min: 0,
+        step: 1,
+        precision: 0,
+        formType: FORM_TYPES.number,
+        propType: PROP_TYPES.NUMBER,
+      },
+      scrollEnabled: {
+        group: GROUPS.basic,
+        label: "Scroll Enabled",
+        description:
+          "If false, scrolling of the input will be disabled. Only works when Multiple Lines is true",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+      },
+      spellcheck: {
+        group: GROUPS.basic,
+        label: "Disable Spell Check",
+        description:
+          "If false, disables spell-check style (red underlines). Default comes from Auto Correct",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+      },
+      textContentType: {
+        group: GROUPS.advanced,
+        label: "Text Content Type",
+        description:
+          "Give the keyboard and system about what it should do with the input. For example, if its an address, autofill from address book",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        options: [
+          "none",
+          "URL",
+          "addressCity",
+          "addressCityAndState",
+          "addressState",
+          "countryName",
+          "creditCardNumber",
+          "emailAddress",
+          "familyName",
+          "fullStreetAddress",
+          "givenName",
+          "jobTitle",
+          "location",
+          "middleName",
+          "name",
+          "namePrefix",
+          "nameSuffix",
+          "nickname",
+          "organizationName",
+          "postalCode",
+          "streetAddressLine1",
+          "streetAddressLine2",
+          "sublocality",
+          "telephoneNumber",
+          "username",
+          "password",
+        ],
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+      },
+      textBreakStrategy: {
+        group: GROUPS.advanced,
+        label: "Text Break Strategy",
+        description:
+          "(Android Only) Set the text break strategy. (Default: simple)",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        options: ["simple", "highQuality", "balanced"],
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+      },
     },
   },
   {
@@ -224,7 +220,7 @@ export const SEED_DATA = [
     triggers: [Triggers.OnChangeText],
     props: {
       ...NUMBER_INPUT_PROPS,
-      ...COMMON_NATIVE_INPUT_PROPS,
+      ...SEED_DATA_PROPS,
     },
   },
 ];