@draftbit/core 47.1.1-dbfde6.2 → 47.2.1-95dcf0.2

package/src/mappings/Shadow.ts

@@ -1,23 +1,28 @@
 import {
   COMPONENT_TYPES,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
   createColorProp,
   createStaticNumberProp,
   createStaticBoolProp,
   createDisabledProp,
+  GROUPS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Shadow",
-  tag: "Shadow View",
+  tag: "Shadow",
   description: "A cross-platform, universal shadow.",
-  library: "react-native-shadow-2",
   category: COMPONENT_TYPES.view,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {},
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     disabled: createDisabledProp({
-      description: "Disabled the shadow.",
+      description: "Disables the shadow.",
     }),
     startColor: createColorProp({
       label: "Start Color",
@@ -36,12 +41,70 @@ export const SEED_DATA = {
     paintInside: createStaticBoolProp({
       label: "Paint Inside",
       description: "Apply the shadow below/inside the content.",
-      defaultValue: null,
+      defaultValue: true,
     }),
     stretch: createStaticBoolProp({
       label: "Stretch",
       description: "Force children to occupy all available horizontal space.",
       defaultValue: null,
     }),
+    offsetX: createStaticNumberProp({
+      label: "Offset X",
+      description: "Moves the shadow in the x direction",
+      defeaultValue: 0,
+    }),
+    offsetY: createStaticNumberProp({
+      label: "Offset Y",
+      description: "Moves the shadow in the y direction",
+      defeaultValue: 0,
+    }),
+    showShadowSideStart: createStaticBoolProp({
+      label: "Show Shadow Start",
+      description: "Whether to show shadow on the start side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideEnd: createStaticBoolProp({
+      label: "Show Shadow End",
+      description: "Whether to show shadow on the end side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideTop: createStaticBoolProp({
+      label: "Show Shadow Top",
+      description: "Whether to show shadow on the top side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowSideBottom: createStaticBoolProp({
+      label: "Show Shadow Bottom",
+      description: "Whether to show shadow on the bottom side or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerTopStart: createStaticBoolProp({
+      label: "Show Shadow Top Start Corner",
+      description: "Whether to show shadow on the top start corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerTopEnd: createStaticBoolProp({
+      label: "Show Shadow Top End Corner",
+      description: "Whether to show shadow on the top end corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerBottomStart: createStaticBoolProp({
+      label: "Show Shadow Bottom Start Corner",
+      description: "Whether to show shadow on the bottom start corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
+    showShadowCornerBottomEnd: createStaticBoolProp({
+      label: "Show Shadow Bottom End Corner",
+      description: "Whether to show shadow on the bottom end corner or not",
+      defaultValue: true,
+      group: GROUPS.advanced,
+    }),
   },
 };

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/mappings/Swiper.js

@@ -1,9 +1,18 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Swiper",
     tag: "Swiper",
     description: "Swiper container",
     category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         height: 300,
         width: "100%",

package/src/mappings/Swiper.ts

@@ -7,6 +7,7 @@ import {
   GROUPS,
   Triggers,
   createActionProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,6 +15,15 @@ export const SEED_DATA = {
   tag: "Swiper",
   description: "Swiper container",
   category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     height: 300,
     width: "100%",

package/src/mappings/SwiperItem.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Swiper Item",
     tag: "SwiperItem",
     description: "Swiper item",
     category: COMPONENT_TYPES.swiper,
     props: {},
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/SwiperItem.ts

@@ -1,4 +1,7 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Swiper Item",
@@ -6,4 +9,5 @@ export const SEED_DATA = {
   description: "Swiper item",
   category: COMPONENT_TYPES.swiper,
   props: {},
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/TabView.js

@@ -0,0 +1,75 @@
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Tab View",
+    tag: "TabView",
+    description: "Tab view container",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Typography,
+    ],
+    triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
+    props: {
+        onIndexChanged: createActionProp({
+            label: "On index changed",
+            description: "Action to execute when swipe to new index",
+        }),
+        onEndReached: createActionProp({
+            label: "On end reached",
+            description: "Action to execute when end of swiping reached",
+        }),
+        tabBarPosition: createTextEnumProp({
+            label: "Tab Bar Position",
+            description: "Position of tab bar",
+            options: ["top", "bottom"],
+            defaultValue: "top",
+        }),
+        keyboardDismissMode: createTextEnumProp({
+            label: "Keyboard Dismiss Mode",
+            description: "Keyboard Dismiss Mode",
+            options: ["auto", "on-drag", "none"],
+            defaultValue: "auto",
+        }),
+        swipeEnabled: createStaticBoolProp({
+            label: "Swipe Enabled",
+            description: "Whether swiping is enabled or not",
+            defaultValue: true,
+        }),
+        scrollEnabled: createStaticBoolProp({
+            label: "Tab Scroll Enabled",
+            description: "Whether scrolling of tabs is enabled or not",
+            defaultValue: false,
+        }),
+        activeColor: createColorProp({
+            label: "Active Color",
+            description: "Color of icon and text of active tab",
+            defaultValue: "primary",
+        }),
+        inactiveColor: createColorProp({
+            label: "Inactive Color",
+            description: "Color of icon and text of inactive tab(s)",
+            defaultValue: null,
+        }),
+        pressColor: createColorProp({
+            label: "Press Color",
+            description: "Color of ripple when pressed",
+            defaultValue: "primary",
+            group: GROUPS.android,
+        }),
+        indicatorColor: createColorProp({
+            label: "Indicator Color",
+            description: "Color of indicator",
+            defaultValue: "primary",
+        }),
+        tabsBackgroundColor: createColorProp({
+            label: "Tabs Background Color",
+            description: "Background color of tabs container",
+            defaultValue: "background",
+        }),
+    },
+};