@draftbit/core 47.0.1-2f600c.2 → 47.0.1-4681da.2

package/src/mappings/FlashList.js

@@ -1,33 +1,79 @@
-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, createStaticNumberProp, } 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],
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: 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.",
+            }),
+            onEndReachedThreshold: createStaticNumberProp({
+                label: "End Reached Threshold",
+                description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+                defaultValue: 0.5,
+            }),
+        },
     },
-    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,
+        },
+        triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: 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,
+            }),
+            onEndReachedThreshold: createStaticNumberProp({
+                label: "End Reached Threshold",
+                description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+                defaultValue: 0.5,
+            }),
+        },
     },
-};
+];

package/src/mappings/FlashList.ts

@@ -5,37 +5,89 @@ import {
   createNumberProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   GROUPS,
+  Triggers,
+  createActionProp,
+  createStaticNumberProp,
 } 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],
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: 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.",
+      }),
+      onEndReachedThreshold: createStaticNumberProp({
+        label: "End Reached Threshold",
+        description:
+          "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+        defaultValue: 0.5,
+      }),
+    },
   },
-  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,
+    },
+    triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: 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,
+      }),
+      onEndReachedThreshold: createStaticNumberProp({
+        label: "End Reached Threshold",
+        description:
+          "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+        defaultValue: 0.5,
+      }),
+    },
   },
-};
+];

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, createStaticNumberProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "List",
     tag: "FlatList",
@@ -8,7 +8,10 @@ export const SEED_DATA = {
     layout: {
         flex: 1,
     },
+    triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
+        onRefresh: createActionProp(),
+        onEndReached: createActionProp(),
         horizontal: createStaticBoolProp({
             label: "Horizontal",
             description: "Render list horizontally",
@@ -20,5 +23,14 @@ 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",
+        }),
+        onEndReachedThreshold: createStaticNumberProp({
+            label: "End Reached Threshold",
+            description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+            defaultValue: 0.5,
+        }),
     },
 };

package/src/mappings/FlatList.ts

@@ -3,6 +3,9 @@ import {
   createNumColumnsType,
   createStaticBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createStaticNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,7 +17,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1,
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally",
@@ -26,5 +32,15 @@ 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",
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description:
+        "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5,
+    }),
   },
 };

package/src/mappings/Touchable.js

@@ -1,60 +1,17 @@
-import { COMPONENT_TYPES, createActionProp, Triggers, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
-const SEED_DATA_PROPS = {
+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, Triggers.OnLongPress],
+    triggers: [Triggers.OnPress],
     props: {
         onPress: createActionProp(),
-        onLongPress: createActionProp(),
-        activeOpacity: createStaticNumberProp({
-            label: "Active Opacity",
-            description: "The opacity when the button is pressed.",
-            defaultValue: 0.8,
-            min: 0,
-            max: 1,
-            step: 0.01,
-            precision: 2,
-            required: false,
-        }),
-        disabledOpacity: createStaticNumberProp({
-            label: "Disabled Opacity",
-            description: "The opacity when the button is disabled.",
-            defaultValue: 0.8,
-            min: 0,
-            max: 1,
-            step: 0.01,
-            precision: 2,
-            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,
-        }),
     },
 };
-export const SEED_DATA = [
-    {
-        name: "Touchable",
-        tag: "Touchable",
-        description: "An interactive view with no styles",
-        category: COMPONENT_TYPES.deprecated,
-        ...SEED_DATA_PROPS,
-    },
-    {
-        name: "Pressable",
-        tag: "Pressable",
-        description: "An interactive view with no styles",
-        category: COMPONENT_TYPES.button,
-        ...SEED_DATA_PROPS,
-    },
-];

package/src/mappings/Touchable.ts

@@ -2,69 +2,22 @@ import {
   COMPONENT_TYPES,
   createActionProp,
   Triggers,
-  createStaticNumberProp,
   StylesPanelSections,
 } from "@draftbit/types";
 
-const SEED_DATA_PROPS = {
+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, Triggers.OnLongPress],
+  triggers: [Triggers.OnPress],
   props: {
     onPress: createActionProp(),
-    onLongPress: createActionProp(),
-    activeOpacity: createStaticNumberProp({
-      label: "Active Opacity",
-      description: "The opacity when the button is pressed.",
-      defaultValue: 0.8,
-      min: 0,
-      max: 1,
-      step: 0.01,
-      precision: 2,
-      required: false,
-    }),
-    disabledOpacity: createStaticNumberProp({
-      label: "Disabled Opacity",
-      description: "The opacity when the button is disabled.",
-      defaultValue: 0.8,
-      min: 0,
-      max: 1,
-      step: 0.01,
-      precision: 2,
-      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,
-    }),
   },
 };
-
-export const SEED_DATA = [
-  {
-    name: "Touchable",
-    tag: "Touchable",
-    description: "An interactive view with no styles",
-    category: COMPONENT_TYPES.deprecated,
-    ...SEED_DATA_PROPS,
-  },
-  {
-    name: "Pressable",
-    tag: "Pressable",
-    description: "An interactive view with no styles",
-    category: COMPONENT_TYPES.button,
-    ...SEED_DATA_PROPS,
-  },
-];

package/lib/commonjs/components/Pressable.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Pressable;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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,
-    activeOpacity,
-    disabledOpacity,
-    delayLongPress,
-    hitSlop,
-    style,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
-    onPress: onPress,
-    disabled: disabled,
-    delayLongPress: delayLongPress ? delayLongPress : 500,
-    hitSlop: hitSlop ? hitSlop : 8,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [{
-        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
-      }, style];
-    }
-  }, props), children);
-}

package/lib/module/components/Pressable.js

@@ -1,30 +0,0 @@
-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); }
-import React from "react";
-import { Pressable as NativePressable } from "react-native";
-export default function Pressable(_ref) {
-  let {
-    children,
-    disabled,
-    onPress,
-    activeOpacity,
-    disabledOpacity,
-    delayLongPress,
-    hitSlop,
-    style,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React.createElement(NativePressable, _extends({
-    onPress: onPress,
-    disabled: disabled,
-    delayLongPress: delayLongPress ? delayLongPress : 500,
-    hitSlop: hitSlop ? hitSlop : 8,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [{
-        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
-      }, style];
-    }
-  }, props), children);
-}

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { PressableProps, ViewStyle } from "react-native";
-declare type Props = {
-    disabled?: boolean;
-    children: React.ReactNode;
-    style?: ViewStyle;
-    onPress?: () => void;
-    onLongPress?: () => void;
-    delayLongPress?: number;
-    hitSlop?: number;
-    activeOpacity?: number;
-    disabledOpacity?: number;
-} & PressableProps;
-export default function Pressable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }: Props): JSX.Element;
-export {};
-//# sourceMappingURL=Pressable.d.ts.map

package/lib/typescript/src/components/Pressable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,cAAc,EACd,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,cAAc,CAAC;AAEnB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,EACb,eAAe,EACf,cAAc,EACd,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,eAoBP"}

package/src/components/Pressable.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { Pressable as NativePressable, } from "react-native";
-export default function Pressable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
-    return (React.createElement(NativePressable, { onPress: onPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
-            return [
-                {
-                    opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
-                },
-                style,
-            ];
-        }, ...props }, children));
-}

package/src/components/Pressable.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import {
-  Pressable as NativePressable,
-  PressableProps,
-  ViewStyle,
-} from "react-native";
-
-type Props = {
-  disabled?: boolean;
-  children: React.ReactNode;
-  style?: ViewStyle;
-  onPress?: () => void;
-  onLongPress?: () => void;
-  delayLongPress?: number;
-  hitSlop?: number;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-} & PressableProps;
-
-export default function Pressable({
-  children,
-  disabled,
-  onPress,
-  activeOpacity,
-  disabledOpacity,
-  delayLongPress,
-  hitSlop,
-  style,
-  ...props
-}: Props) {
-  return (
-    <NativePressable
-      onPress={onPress}
-      disabled={disabled}
-      delayLongPress={delayLongPress ? delayLongPress : 500}
-      hitSlop={hitSlop ? hitSlop : 8}
-      style={({ pressed }) => {
-        return [
-          {
-            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
-          },
-          style,
-        ];
-      }}
-      {...props}
-    >
-      {children}
-    </NativePressable>
-  );
-}