@draftbit/core 47.0.1-0e56b5.2 → 47.0.1-2935a8.2

package/src/components/Touchable.js

@@ -1,17 +1,12 @@
-import React, { useCallback } from "react";
-import { Pressable, } from "react-native";
-export default function Touchable({ children, disabled, onPress, onLongPress, hitSlop, delayLongPress, activeOpacity, disabledOpacity, style, ...props }) {
-    const getOpacity = useCallback((pressed) => {
-        if (disabled) {
-            return disabledOpacity;
-        }
-        else {
-            if (pressed)
-                return activeOpacity;
-            else
-                return 1;
-        }
-    }, [activeOpacity, disabled, disabledOpacity]);
-    const _style = useCallback(({ pressed }) => [style, { opacity: getOpacity(pressed) }], [getOpacity, style]);
-    return (React.createElement(Pressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: _style, ...props }, children));
+import React from "react";
+import { Pressable } from "react-native";
+export default function Touchable({ children, disabled, onPress, style, ...props }) {
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, style: ({ pressed }) => {
+            return [
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                },
+                style,
+            ];
+        }, ...props }, children));
 }

package/src/components/Touchable.tsx

@@ -1,64 +1,33 @@
-import React, { useCallback } from "react";
-import {
-  Pressable,
-  PressableProps,
-  PressableStateCallbackType,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
+import React from "react";
+import { Pressable, ViewStyle, PressableProps } from "react-native";
 
 type Props = {
   disabled?: boolean;
   children: React.ReactNode;
   style?: ViewStyle;
   onPress?: () => void;
-  onLongPress?: () => void;
-  delayLongPress?: number;
-  hitSlop?: number;
-  pressRetentionOffset?: number;
-  activeOpacity?: number;
-  disabledOpacity?: number;
 } & PressableProps;
 
-export type StyleType = (
-  state: PressableStateCallbackType
-) => StyleProp<ViewStyle>;
-
 export default function Touchable({
   children,
   disabled,
   onPress,
-  onLongPress,
-  hitSlop,
-  delayLongPress,
-  activeOpacity,
-  disabledOpacity,
   style,
   ...props
 }: Props) {
-  const getOpacity = useCallback(
-    (pressed: boolean) => {
-      if (disabled) {
-        return disabledOpacity;
-      } else {
-        if (pressed) return activeOpacity;
-        else return 1;
-      }
-    },
-    [activeOpacity, disabled, disabledOpacity]
-  );
-  const _style = useCallback<StyleType>(
-    ({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
-    [getOpacity, style]
-  );
   return (
     <Pressable
       onPress={onPress}
-      onLongPress={onLongPress}
       disabled={disabled}
-      delayLongPress={delayLongPress ? delayLongPress : 500}
-      hitSlop={hitSlop ? hitSlop : 8}
-      style={_style}
+      hitSlop={8}
+      style={({ pressed }) => {
+        return [
+          {
+            opacity: pressed || disabled ? 0.75 : 1,
+          },
+          style,
+        ];
+      }}
       {...props}
     >
       {children}

package/src/components/Touchable.web.js

@@ -0,0 +1,2 @@
+import { TouchableOpacity } from "react-native";
+export default TouchableOpacity;

package/src/components/Touchable.web.tsx

@@ -0,0 +1,3 @@
+import { TouchableOpacity } from "react-native";
+
+export default TouchableOpacity;

package/src/mappings/Button.js

@@ -1,8 +1,7 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp, } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
-    onLongPress: createActionProp(),
     icon: createIconProp({
         defaultValue: null,
         required: false,
@@ -14,26 +13,11 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-    activeOpacity: createStaticNumberProp({
-        label: "Active Opacity",
-        description: "Opacity of the button when active.",
-        required: false,
-    }),
-    disabledOpacity: createStaticNumberProp({
-        label: "Disabled Opacity",
-        description: "Opacity of the button when disabled.",
-        required: false,
-    }),
-    delayLongPress: createStaticNumberProp({
-        label: "Delay Long Press",
-        description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-        required: false,
-    }),
-    hitSlop: createStaticNumberProp({
-        label: "Hit Slop",
-        description: "Sets additional distance outside of element in which a press can be detected",
-        required: false,
-    }),
+};
+const LAYOUT = {
+    backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
 };
 export const SEED_DATA = [
     {
@@ -50,9 +34,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
+            ...LAYOUT,
             backgroundColor: "transparent",
-            borderRadius: 8,
-            fontFamily: "system-700",
             borderWidth: 1,
             textAlign: "center",
         },
@@ -73,8 +56,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },
@@ -95,8 +77,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,13 +7,11 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
-  createStaticNumberProp,
 } from "@draftbit/types";
 
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
-  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false,
@@ -25,28 +23,12 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-  activeOpacity: createStaticNumberProp({
-    label: "Active Opacity",
-    description: "Opacity of the button when active.",
-    required: false,
-  }),
-  disabledOpacity: createStaticNumberProp({
-    label: "Disabled Opacity",
-    description: "Opacity of the button when disabled.",
-    required: false,
-  }),
-  delayLongPress: createStaticNumberProp({
-    label: "Delay Long Press",
-    description:
-      "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-    required: false,
-  }),
-  hitSlop: createStaticNumberProp({
-    label: "Hit Slop",
-    description:
-      "Sets additional distance outside of element in which a press can be detected",
-    required: false,
-  }),
+};
+
+const LAYOUT = {
+  backgroundColor: "transparent",
+  borderRadius: 8,
+  fontFamily: "system-700",
 };
 
 export const SEED_DATA = [
@@ -64,9 +46,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
+      ...LAYOUT,
       backgroundColor: "transparent",
-      borderRadius: 8,
-      fontFamily: "system-700",
       borderWidth: 1,
       textAlign: "center",
     },
@@ -87,8 +68,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -109,8 +89,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },

package/src/mappings/FlashList.js

@@ -1,33 +1,77 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "FlashList",
-    tag: "FlashList",
-    description: "Flashlist by Shopify",
-    packageName: "@shopify/flash-list",
-    category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-        flex: 1,
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Masonry List",
+        tag: "MasonryFlashList",
+        description: "Masonry Flashlist by Shopify",
+        packageName: "@shopify/flash-list",
+        category: COMPONENT_TYPES.data,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+        layout: {
+            flex: 1,
+        },
+        triggers: [
+            Triggers.OnRefresh,
+            Triggers.OnEndReached,
+            Triggers.OnEndReachedThreshold,
+            Triggers.OnViewableItemsChanged,
+        ],
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: createActionProp(),
+            onEndReachedThreshold: createActionProp(),
+            onViewableItemsChanged: createActionProp(),
+            numColumns: createNumColumnsType({
+                editable: true,
+            }),
+            estimatedItemSize: createNumberProp({
+                group: GROUPS.basic,
+                label: "Est. Item Size",
+                description: "Approximate size of the items before rendering.",
+                defaultValue: 50,
+                step: 1,
+                precision: 0,
+            }),
+            optimizeItemArrangement: createStaticBoolProp({
+                label: "Optimize Item Arrangement",
+                description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.",
+            }),
+        },
     },
-    props: {
-        estimatedItemSize: createNumberProp({
-            group: GROUPS.basic,
-            label: "Est. Item Size",
-            description: "Approximate size of the items before rendering.",
-            defaultValue: 50,
-            step: 1,
-            precision: 0,
-        }),
-        horizontal: createStaticBoolProp({
-            label: "Horizontal",
-            description: "Render list horizontally",
-        }),
-        inverted: createStaticBoolProp({
-            label: "Inverted",
-            description: "If true, reverses the direction.",
-        }),
-        numColumns: createNumColumnsType({
-            editable: true,
-        }),
+    {
+        name: "FlashList",
+        tag: "FlashList",
+        description: "Flashlist by Shopify",
+        packageName: "@shopify/flash-list",
+        category: COMPONENT_TYPES.data,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+        layout: {
+            flex: 1,
+        },
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: createActionProp(),
+            onEndReachedThreshold: createActionProp(),
+            onViewableItemsChanged: createActionProp(),
+            estimatedItemSize: createNumberProp({
+                group: GROUPS.basic,
+                label: "Est. Item Size",
+                description: "Approximate size of the items before rendering.",
+                defaultValue: 50,
+                step: 1,
+                precision: 0,
+            }),
+            horizontal: createStaticBoolProp({
+                label: "Horizontal",
+                description: "Render list horizontally",
+            }),
+            inverted: createStaticBoolProp({
+                label: "Inverted",
+                description: "If true, reverses the direction.",
+            }),
+            numColumns: createNumColumnsType({
+                editable: true,
+            }),
+        },
     },
-};
+];

package/src/mappings/FlashList.ts

@@ -5,37 +5,84 @@ import {
   createNumberProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   GROUPS,
+  Triggers,
+  createActionProp,
 } from "@draftbit/types";
 
-export const SEED_DATA = {
-  name: "FlashList",
-  tag: "FlashList",
-  description: "Flashlist by Shopify",
-  packageName: "@shopify/flash-list",
-  category: COMPONENT_TYPES.data,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1,
+export const SEED_DATA = [
+  {
+    name: "Masonry List",
+    tag: "MasonryFlashList",
+    description: "Masonry Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+      flex: 1,
+    },
+    triggers: [
+      Triggers.OnRefresh,
+      Triggers.OnEndReached,
+      Triggers.OnEndReachedThreshold,
+      Triggers.OnViewableItemsChanged,
+    ],
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: createActionProp(),
+      onEndReachedThreshold: createActionProp(),
+      onViewableItemsChanged: createActionProp(),
+      numColumns: createNumColumnsType({
+        editable: true,
+      }),
+      estimatedItemSize: createNumberProp({
+        group: GROUPS.basic,
+        label: "Est. Item Size",
+        description: "Approximate size of the items before rendering.",
+        defaultValue: 50,
+        step: 1,
+        precision: 0,
+      }),
+      optimizeItemArrangement: createStaticBoolProp({
+        label: "Optimize Item Arrangement",
+        description:
+          "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.",
+      }),
+    },
   },
-  props: {
-    estimatedItemSize: createNumberProp({
-      group: GROUPS.basic,
-      label: "Est. Item Size",
-      description: "Approximate size of the items before rendering.",
-      defaultValue: 50,
-      step: 1,
-      precision: 0,
-    }),
-    horizontal: createStaticBoolProp({
-      label: "Horizontal",
-      description: "Render list horizontally",
-    }),
-    inverted: createStaticBoolProp({
-      label: "Inverted",
-      description: "If true, reverses the direction.",
-    }),
-    numColumns: createNumColumnsType({
-      editable: true,
-    }),
+  {
+    name: "FlashList",
+    tag: "FlashList",
+    description: "Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+      flex: 1,
+    },
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: createActionProp(),
+      onEndReachedThreshold: createActionProp(),
+      onViewableItemsChanged: createActionProp(),
+      estimatedItemSize: createNumberProp({
+        group: GROUPS.basic,
+        label: "Est. Item Size",
+        description: "Approximate size of the items before rendering.",
+        defaultValue: 50,
+        step: 1,
+        precision: 0,
+      }),
+      horizontal: createStaticBoolProp({
+        label: "Horizontal",
+        description: "Render list horizontally",
+      }),
+      inverted: createStaticBoolProp({
+        label: "Inverted",
+        description: "If true, reverses the direction.",
+      }),
+      numColumns: createNumColumnsType({
+        editable: true,
+      }),
+    },
   },
-};
+];

package/src/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "List",
     tag: "FlatList",
@@ -8,7 +8,17 @@ export const SEED_DATA = {
     layout: {
         flex: 1,
     },
+    triggers: [
+        Triggers.OnRefresh,
+        Triggers.OnEndReached,
+        Triggers.OnEndReachedThreshold,
+        Triggers.OnViewableItemsChanged,
+    ],
     props: {
+        onRefresh: createActionProp(),
+        onEndReached: createActionProp(),
+        onEndReachedThreshold: createActionProp(),
+        onViewableItemsChanged: createActionProp(),
         horizontal: createStaticBoolProp({
             label: "Horizontal",
             description: "Render list horizontally",
@@ -20,5 +30,9 @@ export const SEED_DATA = {
         numColumns: createNumColumnsType({
             editable: true,
         }),
+        initialNumToRender: createStaticBoolProp({
+            label: "Initial Num To Render",
+            descriprion: "How many items to render in the initial batch",
+        }),
     },
 };

package/src/mappings/FlatList.ts

@@ -3,6 +3,8 @@ import {
   createNumColumnsType,
   createStaticBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,7 +16,17 @@ export const SEED_DATA = {
   layout: {
     flex: 1,
   },
+  triggers: [
+    Triggers.OnRefresh,
+    Triggers.OnEndReached,
+    Triggers.OnEndReachedThreshold,
+    Triggers.OnViewableItemsChanged,
+  ],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    onEndReachedThreshold: createActionProp(),
+    onViewableItemsChanged: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally",
@@ -26,5 +38,9 @@ export const SEED_DATA = {
     numColumns: createNumColumnsType({
       editable: true,
     }),
+    initialNumToRender: createStaticBoolProp({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch",
+    }),
   },
 };

package/src/mappings/Touchable.js

@@ -0,0 +1,17 @@
+import { COMPONENT_TYPES, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "Simple button with no styles",
+    category: COMPONENT_TYPES.button,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Borders,
+    ],
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+    },
+};

package/src/mappings/Touchable.ts

@@ -0,0 +1,23 @@
+import {
+  COMPONENT_TYPES,
+  createActionProp,
+  Triggers,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Touchable",
+  tag: "Touchable",
+  description: "Simple button with no styles",
+  category: COMPONENT_TYPES.button,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Borders,
+  ],
+  layout: {},
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+  },
+};

package/lib/commonjs/components/Pressable.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Pressable;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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); }
-function Pressable(_ref) {
-  let {
-    children,
-    disabled,
-    onPress,
-    onLongPress,
-    hitSlop,
-    delayLongPress,
-    activeOpacity,
-    disabledOpacity,
-    style,
-    ...props
-  } = _ref;
-  const getOpacity = (0, _react.useCallback)(pressed => {
-    if (disabled) {
-      return disabledOpacity;
-    } else {
-      if (pressed) return activeOpacity;else return 1;
-    }
-  }, [activeOpacity, disabled, disabledOpacity]);
-  const _style = (0, _react.useCallback)(_ref2 => {
-    let {
-      pressed
-    } = _ref2;
-    return [style, {
-      opacity: getOpacity(pressed)
-    }];
-  }, [getOpacity, style]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
-    onPress: onPress,
-    onLongPress: onLongPress,
-    disabled: disabled,
-    delayLongPress: delayLongPress ? delayLongPress : 500,
-    hitSlop: hitSlop ? hitSlop : 8,
-    style: _style
-  }, props), children);
-}