@draftbit/core 43.4.2-9ce900.0 → 43.4.2-b9b13c.1

package/src/components/LinearGradient.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { extractStyles } from "../utilities";
+
+type LinearGradientComponentProps = {
+  color1: string;
+  color2: string;
+  color3?: string;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const LinearGradientComponent = ({
+  children,
+  color1,
+  color2,
+  color3 = undefined,
+  startX = 0,
+  startY = 0,
+  endX = 100,
+  endY = 100,
+  style,
+}: LinearGradientComponentProps) => {
+  const { viewStyles } = extractStyles(style);
+  const colors = [color1, color2, color3].filter((color) => color) as string[];
+  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 LinearGradientComponent;

package/src/index.js

@@ -25,6 +25,7 @@ export { default as TextField } from "./components/TextField";
 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

@@ -26,6 +26,7 @@ export { default as TextField } from "./components/TextField";
 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/LinearGradient.js

@@ -1,21 +1,73 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES } from "@draftbit/types";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Linear Gradient",
     tag: "LinearGradient",
-    doc_link: "https://docs.expo.io/versions/latest/sdk/linear-gradient/",
-    code_link: "https://github.com/expo/expo/blob/master/packages/expo/src/effects/LinearGradient.d.ts",
-    category: COMPONENT_TYPES.layout,
-    supports_list_render: false,
-    layout: {},
+    description: "Linear Gradient Component",
     props: {
-        colors: {
+        color1: createColorProp({
+            label: "Color 1",
+        }),
+        color2: createColorProp({
+            label: "Color 2",
+        }),
+        color3: createColorProp({
+            label: "Color 3",
+        }),
+        startX: {
             group: GROUPS.basic,
-            label: "Colors",
-            description: "The colors required for your gradient",
+            label: "Start X",
+            description: "Start position from Left",
             editable: true,
-            required: true,
-            defaultValue: null,
-            formType: FORM_TYPES.color,
+            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/mappings/LinearGradient.ts

@@ -1,23 +1,79 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES } from "@draftbit/types";
+import {
+  createColorProp,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Linear Gradient",
   tag: "LinearGradient",
-  doc_link: "https://docs.expo.io/versions/latest/sdk/linear-gradient/",
-  code_link:
-    "https://github.com/expo/expo/blob/master/packages/expo/src/effects/LinearGradient.d.ts",
-  category: COMPONENT_TYPES.layout,
-  supports_list_render: false,
-  layout: {},
+  description: "Linear Gradient Component",
   props: {
-    colors: {
+    color1: createColorProp({
+      label: "Color 1",
+    }),
+    color2: createColorProp({
+      label: "Color 2",
+    }),
+    color3: createColorProp({
+      label: "Color 3",
+    }),
+    startX: {
       group: GROUPS.basic,
-      label: "Colors",
-      description: "The colors required for your gradient",
+      label: "Start X",
+      description: "Start position from Left",
       editable: true,
-      required: true,
-      defaultValue: null,
-      formType: FORM_TYPES.color,
+      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,
     },
   },
 };