@draftbit/core 46.12.1-07ad46.2 → 46.12.1-0e8f23.2

package/src/mappings/BottomSheet.ts

@@ -7,6 +7,9 @@ import {
   createColorProp,
   createStaticNumberProp,
   createArrayProp,
+  GROUPS,
+  createTextEnumProp,
+  FORM_TYPES,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -22,17 +25,35 @@ export const SEED_DATA = {
       label: "On settle",
       description: "Action to execute when sheet settles on a snap point",
     }),
-    snapPoints: createArrayProp({
-      label: "Snap points",
+    topSnapPosition: createStaticNumberProp({
+      label: "Top snap position",
       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%"],
+        "Top most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "10%",
+      required: false,
+      formType: FORM_TYPES.numeric,
     }),
-    initialSnapIndex: createStaticNumberProp({
-      label: "Initial snap index",
-      description: "Index of the snap point to be used as the initial point",
-      defaultValue: 0,
+    middleSnapPosition: createStaticNumberProp({
+      label: "Middle snap position",
+      description:
+        "Middle postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "50%",
       required: false,
+      formType: FORM_TYPES.numeric,
+    }),
+    bottomSnapPosition: createStaticNumberProp({
+      label: "Bottom snap position",
+      description:
+        "Bottom most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "80%",
+      required: false,
+      formType: FORM_TYPES.numeric,
+    }),
+    initialSnapPosition: createTextEnumProp({
+      label: "Initial snap position",
+      description: "Initial snap position that bottom sheet will snap to",
+      options: ["top", "middle", "bottom"],
+      defaultValue: "bottom",
     }),
     showHandle: createStaticBoolProp({
       label: "Show handle",
@@ -73,5 +94,19 @@ export const SEED_DATA = {
         "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,
     }),
+    snapPoints: createArrayProp({
+      label: "Custom Snap points",
+      description:
+        "An array of numerical values (that represent distance from the top) where bottom sheet can snap to. Accepts numbers and percentages (minimum 2 snap points). Overrides snap position props",
+      defaultValue: null,
+    }),
+    initialSnapIndex: createStaticNumberProp({
+      label: "Initial snap index",
+      description:
+        "Index of the snap point to be used as the initial point. Overrides initial snap position",
+      defaultValue: null,
+      required: false,
+      group: GROUPS.advanced,
+    }),
   },
 };

package/src/mappings/FlatList.js

@@ -5,9 +5,6 @@ export const SEED_DATA = {
     description: "A basic List component",
     category: COMPONENT_TYPES.data,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-        flex: 1,
-    },
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
         onRefresh: createActionProp(),

package/src/mappings/FlatList.ts

@@ -15,9 +15,6 @@ export const SEED_DATA = {
   description: "A basic List component",
   category: COMPONENT_TYPES.data,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1,
-  },
   triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
     onRefresh: createActionProp(),

package/src/mappings/MapMarker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, createColorProp, createImageProp, createNumberProp, createStaticNumberProp, createTextProp, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
@@ -11,7 +11,9 @@ export const SEED_DATA = {
         StylesPanelSections.Effects,
     ],
     layout: {},
+    triggers: [Triggers.OnPress],
     props: {
+        onPress: createActionProp(),
         latitude: createNumberProp({
             label: "Latitude",
             description: "The latitude in which the marker is located",
@@ -48,5 +50,18 @@ export const SEED_DATA = {
             label: "Pin Color",
             description: "Sets the color of the marker",
         }),
+        pinImage: createImageProp({
+            label: "Pin image",
+            description: "Image to be used instead of the default pin",
+            editable: true,
+            required: false,
+            defaultValue: null,
+        }),
+        pinImageSize: createStaticNumberProp({
+            label: "Pin image size",
+            description: "The size of pin image. Only applies when using custom pin image",
+            required: false,
+            defaultValue: 50,
+        }),
     },
 };

package/src/mappings/MapMarker.ts

@@ -1,11 +1,15 @@
 import {
   COMPONENT_TYPES,
+  createActionProp,
   createBoolProp,
   createColorProp,
+  createImageProp,
   createNumberProp,
+  createStaticNumberProp,
   createTextProp,
   GROUPS,
   StylesPanelSections,
+  Triggers,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -20,7 +24,9 @@ export const SEED_DATA = {
     StylesPanelSections.Effects,
   ],
   layout: {},
+  triggers: [Triggers.OnPress],
   props: {
+    onPress: createActionProp(),
     latitude: createNumberProp({
       label: "Latitude",
       description: "The latitude in which the marker is located",
@@ -58,5 +64,19 @@ export const SEED_DATA = {
       label: "Pin Color",
       description: "Sets the color of the marker",
     }),
+    pinImage: createImageProp({
+      label: "Pin image",
+      description: "Image to be used instead of the default pin",
+      editable: true,
+      required: false,
+      defaultValue: null,
+    }),
+    pinImageSize: createStaticNumberProp({
+      label: "Pin image size",
+      description:
+        "The size of pin image. Only applies when using custom pin image",
+      required: false,
+      defaultValue: 50,
+    }),
   },
 };

package/src/mappings/MapView.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, Triggers, createActionProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map View",
     tag: "MapView",
@@ -11,7 +11,12 @@ export const SEED_DATA = {
         width: "100%",
         height: "100%",
     },
+    triggers: [Triggers.OnRegionChange],
     props: {
+        onRegionChange: createActionProp({
+            label: "On region changed",
+            description: "Action to execute when map panning stops and region changes",
+        }),
         provider: {
             formType: FORM_TYPES.flatArray,
             propType: PROP_TYPES.STRING,

package/src/mappings/MapView.ts

@@ -8,6 +8,8 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   StylesPanelSections,
+  Triggers,
+  createActionProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -22,7 +24,13 @@ export const SEED_DATA = {
     width: "100%",
     height: "100%",
   },
+  triggers: [Triggers.OnRegionChange],
   props: {
+    onRegionChange: createActionProp({
+      label: "On region changed",
+      description:
+        "Action to execute when map panning stops and region changes",
+    }),
     provider: {
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING,

package/src/mappings/SwipeableView.js

@@ -0,0 +1,181 @@
+import { COMPONENT_TYPES, createStaticNumberProp, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, StylesPanelSections, GROUPS, createBoolProp, createTextProp, createIconProp, createTextEnumProp, createColorProp, Triggers, createActionProp, } from "@draftbit/types";
+export const SHARED_SEED_DATA_PROPS = {
+    title: createTextProp({
+        label: "Title",
+        description: "Title of button/swipeable",
+        defaultValue: "Swipeable",
+        required: true,
+        group: GROUPS.basic,
+    }),
+    side: createTextEnumProp({
+        label: "Side",
+        description: "Side where button/swipeable is added",
+        options: ["left", "right"],
+        defaultValue: "left",
+        required: true,
+    }),
+    icon: createIconProp({
+        defaultValue: null,
+        required: false,
+    }),
+    iconSize: createStaticNumberProp({
+        label: "Icon size",
+        description: "Size of icon",
+        defaultValue: 25,
+        required: false,
+    }),
+    backgroundColor: createColorProp({
+        label: "Background color",
+        description: "Color of button/swipeable background",
+        defaultValue: "primary",
+    }),
+    color: createColorProp({
+        label: "Color",
+        description: "Color of text and icon of button/swipeable",
+        defaultValue: "surface",
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Swipeable View",
+        tag: "SwipeableView",
+        doc_link: "https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeRow.md",
+        description: "A swipeable view that is able to show hidden buttons and/or handle swipe events",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [
+            ...CONTAINER_COMPONENT_STYLES_SECTIONS,
+            StylesPanelSections.Typography,
+        ],
+        layout: {
+            overflow: "hidden",
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 10,
+        },
+        props: {
+            closeOnPress: createStaticBoolProp({
+                label: "Close on press",
+                description: "Whether the view should be closed/dismissed when pressed",
+                defaultValue: true,
+            }),
+            swipeActivationPercentage: createStaticNumberProp({
+                label: "Swipe activation percentage",
+                description: "Percentage of swipe completion needed to trigger onSwipe. Overriden by 'Left activation value' and 'Right activation value'",
+                defaultValue: 80,
+                required: false,
+            }),
+            disableLeftSwipe: createBoolProp({
+                label: "Disable left swipe",
+                description: "Whether left swipe is enabled or not",
+                defaultValue: true,
+            }),
+            disableRightSwipe: createBoolProp({
+                label: "Disable right swipe",
+                description: "Whether right swipe is enabled or not",
+                defaultValue: true,
+            }),
+            leftOpenValue: createStaticNumberProp({
+                label: "Left open value",
+                description: "The X translation value that left swipe snaps to (positive value). Defaults to half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            rightOpenValue: createStaticNumberProp({
+                label: "Right open value",
+                description: "The X translation value that right swipe snaps to (negative value). Defaults to negative half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            leftActivationValue: createStaticNumberProp({
+                label: "Left activation value",
+                description: "The X translation value that triggers onSwipe when surpassed (positive value). Defaults to 80% of half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            rightActivationValue: createStaticNumberProp({
+                label: "Right activation value",
+                description: "The X translation value that triggers onSwipe when surpassed (negative value). Defaults to negative 80% of half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            stopLeftSwipe: createStaticNumberProp({
+                label: "Stop left swipe",
+                description: "The maximum X translation value that is swipable from left (positive value). Defaults to half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            stopRightSwipe: createStaticNumberProp({
+                label: "Stop right swipe",
+                description: "The maximum X translation value that is swipable from right (negative value). Defaults to negative half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            directionalDistanceChangeThreshold: createStaticNumberProp({
+                label: "Change threshold",
+                description: "Change the sensitivity of the swipe on the view",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            friction: createStaticNumberProp({
+                label: "Friction",
+                description: "Controls the 'bounciness' of the swipe animation",
+                defaultValue: 20,
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            tension: createStaticNumberProp({
+                label: "Change threshold",
+                description: "Controls the tension/speed of the swipe animation",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            swipeToOpenVelocityContribution: createStaticNumberProp({
+                label: "Swipe Velocity Contribution",
+                description: "Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            swipeToOpenPercent: createStaticNumberProp({
+                label: "Swipe to open percentage",
+                description: "What % of the left/right does the user need to swipe past to trigger the view opening",
+                group: GROUPS.advanced,
+                defaultValue: 50,
+                required: false,
+            }),
+            swipeToClosePercent: createStaticNumberProp({
+                label: "Swipe to close percentage",
+                description: "What % of the left/right does the user need to swipe past to trigger the view closing",
+                group: GROUPS.advanced,
+                defaultValue: 50,
+                required: false,
+            }),
+        },
+    },
+    {
+        name: "Swipeable View Button",
+        tag: "SwipeableViewButton",
+        description: "Button to be rendered under a Swipeable View",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [],
+        triggers: [Triggers.OnPress],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onPress: createActionProp(),
+        },
+    },
+    {
+        name: "Swipeable View Swipe Handler",
+        tag: "SwipeableViewSwipeHandler",
+        description: "Component that renders and handles swipe of Swipeable View",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [],
+        triggers: [Triggers.OnSwipe],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onSwipe: createActionProp({
+                label: "On swipe",
+                description: "Called when Swipeable View swiped in the direction this is configured to",
+            }),
+        },
+    },
+];

package/src/mappings/SwipeableView.ts

@@ -0,0 +1,210 @@
+import {
+  COMPONENT_TYPES,
+  createStaticNumberProp,
+  createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  StylesPanelSections,
+  GROUPS,
+  createBoolProp,
+  createTextProp,
+  createIconProp,
+  createTextEnumProp,
+  createColorProp,
+  Triggers,
+  createActionProp,
+} from "@draftbit/types";
+
+export const SHARED_SEED_DATA_PROPS = {
+  title: createTextProp({
+    label: "Title",
+    description: "Title of button/swipeable",
+    defaultValue: "Swipeable",
+    required: true,
+    group: GROUPS.basic,
+  }),
+  side: createTextEnumProp({
+    label: "Side",
+    description: "Side where button/swipeable is added",
+    options: ["left", "right"],
+    defaultValue: "left",
+    required: true,
+  }),
+  icon: createIconProp({
+    defaultValue: null,
+    required: false,
+  }),
+  iconSize: createStaticNumberProp({
+    label: "Icon size",
+    description: "Size of icon",
+    defaultValue: 25,
+    required: false,
+  }),
+  backgroundColor: createColorProp({
+    label: "Background color",
+    description: "Color of button/swipeable background",
+    defaultValue: "primary",
+  }),
+  color: createColorProp({
+    label: "Color",
+    description: "Color of text and icon of button/swipeable",
+    defaultValue: "surface",
+  }),
+};
+
+export const SEED_DATA = [
+  {
+    name: "Swipeable View",
+    tag: "SwipeableView",
+    doc_link:
+      "https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeRow.md",
+    description:
+      "A swipeable view that is able to show hidden buttons and/or handle swipe events",
+    category: COMPONENT_TYPES.testing /*.view*/,
+    stylesPanelSections: [
+      ...CONTAINER_COMPONENT_STYLES_SECTIONS,
+      StylesPanelSections.Typography,
+    ],
+    layout: {
+      overflow: "hidden",
+      flexDirection: "row",
+      alignItems: "center",
+      padding: 10,
+    },
+    props: {
+      closeOnPress: createStaticBoolProp({
+        label: "Close on press",
+        description: "Whether the view should be closed/dismissed when pressed",
+        defaultValue: true,
+      }),
+      swipeActivationPercentage: createStaticNumberProp({
+        label: "Swipe activation percentage",
+        description:
+          "Percentage of swipe completion needed to trigger onSwipe. Overriden by 'Left activation value' and 'Right activation value'",
+        defaultValue: 80,
+        required: false,
+      }),
+      disableLeftSwipe: createBoolProp({
+        label: "Disable left swipe",
+        description: "Whether left swipe is enabled or not",
+        defaultValue: true,
+      }),
+      disableRightSwipe: createBoolProp({
+        label: "Disable right swipe",
+        description: "Whether right swipe is enabled or not",
+        defaultValue: true,
+      }),
+      leftOpenValue: createStaticNumberProp({
+        label: "Left open value",
+        description:
+          "The X translation value that left swipe snaps to (positive value). Defaults to half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      rightOpenValue: createStaticNumberProp({
+        label: "Right open value",
+        description:
+          "The X translation value that right swipe snaps to (negative value). Defaults to negative half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      leftActivationValue: createStaticNumberProp({
+        label: "Left activation value",
+        description:
+          "The X translation value that triggers onSwipe when surpassed (positive value). Defaults to 80% of half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      rightActivationValue: createStaticNumberProp({
+        label: "Right activation value",
+        description:
+          "The X translation value that triggers onSwipe when surpassed (negative value). Defaults to negative 80% of half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      stopLeftSwipe: createStaticNumberProp({
+        label: "Stop left swipe",
+        description:
+          "The maximum X translation value that is swipable from left (positive value). Defaults to half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      stopRightSwipe: createStaticNumberProp({
+        label: "Stop right swipe",
+        description:
+          "The maximum X translation value that is swipable from right (negative value). Defaults to negative half view width",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      directionalDistanceChangeThreshold: createStaticNumberProp({
+        label: "Change threshold",
+        description: "Change the sensitivity of the swipe on the view",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      friction: createStaticNumberProp({
+        label: "Friction",
+        description: "Controls the 'bounciness' of the swipe animation",
+        defaultValue: 20,
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      tension: createStaticNumberProp({
+        label: "Change threshold",
+        description: "Controls the tension/speed of the swipe animation",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      swipeToOpenVelocityContribution: createStaticNumberProp({
+        label: "Swipe Velocity Contribution",
+        description:
+          "Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15",
+        group: GROUPS.advanced,
+        required: false,
+      }),
+      swipeToOpenPercent: createStaticNumberProp({
+        label: "Swipe to open percentage",
+        description:
+          "What % of the left/right does the user need to swipe past to trigger the view opening",
+        group: GROUPS.advanced,
+        defaultValue: 50,
+        required: false,
+      }),
+      swipeToClosePercent: createStaticNumberProp({
+        label: "Swipe to close percentage",
+        description:
+          "What % of the left/right does the user need to swipe past to trigger the view closing",
+        group: GROUPS.advanced,
+        defaultValue: 50,
+        required: false,
+      }),
+    },
+  },
+  {
+    name: "Swipeable View Button",
+    tag: "SwipeableViewButton",
+    description: "Button to be rendered under a Swipeable View",
+    category: COMPONENT_TYPES.testing /*.view*/,
+    stylesPanelSections: [],
+    triggers: [Triggers.OnPress],
+    props: {
+      ...SHARED_SEED_DATA_PROPS,
+      onPress: createActionProp(),
+    },
+  },
+  {
+    name: "Swipeable View Swipe Handler",
+    tag: "SwipeableViewSwipeHandler",
+    description: "Component that renders and handles swipe of Swipeable View",
+    category: COMPONENT_TYPES.testing /*.view*/,
+    stylesPanelSections: [],
+    triggers: [Triggers.OnSwipe],
+    props: {
+      ...SHARED_SEED_DATA_PROPS,
+      onSwipe: createActionProp({
+        label: "On swipe",
+        description:
+          "Called when Swipeable View swiped in the direction this is configured to",
+      }),
+    },
+  },
+];

package/src/utilities.js

@@ -65,6 +65,47 @@ export function extractBorderAndMarginStyles(style, additionalBorderStyles, addi
     ]), identity);
     return { borderStyles, marginStyles };
 }
+export const flexItemStyleNames = [
+    "alignSelf",
+    "flexBasis",
+    "flexShrink",
+    "flexGrow",
+    "flex",
+];
+export function extractFlexItemStyles(style, additionalFlexItemStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const flexItemStyles = pickBy(pick(flatStyle, [
+        ...flexItemStyleNames,
+        ...(additionalFlexItemStyles ? additionalFlexItemStyles : []),
+    ]), identity);
+    return flexItemStyles;
+}
+export const positionStyleNames = [
+    "position",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "zIndex",
+    "overflow",
+];
+export function extractPositionStyles(style, additionalPositionStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const positionStyles = pickBy(pick(flatStyle, [
+        ...positionStyleNames,
+        ...(additionalPositionStyles ? additionalPositionStyles : []),
+    ]), identity);
+    return positionStyles;
+}
+export const effectsStyleNames = ["opacity", "elevation"];
+export function extractEffectStyles(style, additionalEffectStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const effectStyles = pickBy(pick(flatStyle, [
+        ...effectsStyleNames,
+        ...(additionalEffectStyles ? additionalEffectStyles : []),
+    ]), identity);
+    return effectStyles;
+}
 export const sizeStyleNames = ["width", "height"];
 export function extractSizeStyles(style, additionalSizeStyles) {
     const flatStyle = StyleSheet.flatten(style || {});