@draftbit/core 47.0.1-cc5ccc.2 → 47.0.1-d41acb.2

package/src/components/Picker/Picker.tsx

@@ -7,7 +7,6 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
-  Pressable,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -15,7 +14,8 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
 import {
@@ -306,7 +306,7 @@ const Picker: React.FC<PickerProps> = ({
     /* marginsContainer */
     <View style={[styles.marginsContainer, marginStyles]}>
       {/* touchableContainer */}
-      <Pressable
+      <Touchable
         disabled={disabled}
         onPress={togglePickerVisible}
         style={styles.touchableContainer}
@@ -342,7 +342,7 @@ const Picker: React.FC<PickerProps> = ({
           </View>
         </View>
         {assistiveTextLabel}
-      </Pressable>
+      </Touchable>
 
       {/* iosPicker */}
       {isIos && pickerVisible ? (

package/src/components/Picker/PickerComponent.ios.js

@@ -5,7 +5,7 @@ import omit from "lodash.omit";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";

package/src/components/Picker/PickerComponent.ios.tsx

@@ -8,7 +8,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { PickerComponentProps } from "./PickerTypes";

package/src/components/Pressable.js

@@ -1,17 +1,12 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { Pressable as NativePressable, } from "react-native";
-export default function Pressable({ 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(NativePressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: _style, ...props }, children));
+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,9 +1,7 @@
-import React, { useCallback } from "react";
+import React from "react";
 import {
   Pressable as NativePressable,
   PressableProps,
-  PressableStateCallbackType,
-  StyleProp,
   ViewStyle,
 } from "react-native";
 
@@ -15,50 +13,35 @@ type Props = {
   onLongPress?: () => void;
   delayLongPress?: number;
   hitSlop?: number;
-  pressRetentionOffset?: number;
   activeOpacity?: number;
   disabledOpacity?: number;
 } & PressableProps;
 
-export type StyleType = (
-  state: PressableStateCallbackType
-) => StyleProp<ViewStyle>;
-
 export default function Pressable({
   children,
   disabled,
   onPress,
-  onLongPress,
-  hitSlop,
-  delayLongPress,
   activeOpacity,
   disabledOpacity,
+  delayLongPress,
+  hitSlop,
   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 (
     <NativePressable
       onPress={onPress}
-      onLongPress={onLongPress}
       disabled={disabled}
       delayLongPress={delayLongPress ? delayLongPress : 500}
       hitSlop={hitSlop ? hitSlop : 8}
-      style={_style}
+      style={({ pressed }) => {
+        return [
+          {
+            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+          },
+          style,
+        ];
+      }}
       {...props}
     >
       {children}

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, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
+    return (React.createElement(Pressable, { disabled: disabled, onPress: onPress, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
+            return [
+                {
+                    opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+                },
+                style,
+            ];
+        }, ...props }, children));
 }

package/src/components/Touchable.tsx

@@ -1,11 +1,5 @@
-import React, { useCallback } from "react";
-import {
-  Pressable,
-  PressableProps,
-  PressableStateCallbackType,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
+import React from "react";
+import { Pressable, PressableProps, ViewStyle } from "react-native";
 
 type Props = {
   disabled?: boolean;
@@ -15,50 +9,35 @@ type Props = {
   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,
+  delayLongPress,
+  hitSlop,
   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}
+      onPress={onPress}
       delayLongPress={delayLongPress ? delayLongPress : 500}
       hitSlop={hitSlop ? hitSlop : 8}
-      style={_style}
+      style={({ pressed }) => {
+        return [
+          {
+            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 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/index.js

@@ -26,6 +26,7 @@ export { default as Switch, SwitchRow } from "./components/Switch";
 export { default as TextField } from "./components/TextField";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
+export { default as Pressable } from "./components/Pressable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";

package/src/index.tsx

@@ -27,6 +27,7 @@ export { default as Switch, SwitchRow } from "./components/Switch";
 export { default as TextField } from "./components/TextField";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
+export { default as Pressable } from "./components/Pressable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export {
   ActionSheet,

package/src/mappings/Button.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createNumberProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp, } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
@@ -14,10 +14,36 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-    activeOpacity: createNumberProp(),
-    disabledOpacity: createNumberProp(),
-    delayLongPress: createNumberProp(),
-    hitSlop: createNumberProp(),
+    activeOpacity: createStaticNumberProp({
+        label: "Active Opacity",
+        description: "Opacity of the button when active.",
+        defaultValue: 0.8,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        precision: 2,
+        required: false,
+    }),
+    disabledOpacity: createStaticNumberProp({
+        label: "Disabled Opacity",
+        description: "Opacity of the button when 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 = [
     {
@@ -34,9 +60,9 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            backgroundColor: "transparent",
             borderRadius: 8,
             fontFamily: "system-700",
+            backgroundColor: "transparent",
             borderWidth: 1,
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,7 +7,7 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
-  createNumberProp,
+  createStaticNumberProp,
 } from "@draftbit/types";
 
 const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
@@ -25,10 +25,38 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-  activeOpacity: createNumberProp(),
-  disabledOpacity: createNumberProp(),
-  delayLongPress: createNumberProp(),
-  hitSlop: createNumberProp(),
+  activeOpacity: createStaticNumberProp({
+    label: "Active Opacity",
+    description: "Opacity of the button when active.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false,
+  }),
+  disabledOpacity: createStaticNumberProp({
+    label: "Disabled Opacity",
+    description: "Opacity of the button when 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 = [
@@ -46,9 +74,9 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      backgroundColor: "transparent",
       borderRadius: 8,
       fontFamily: "system-700",
+      backgroundColor: "transparent",
       borderWidth: 1,
       textAlign: "center",
     },

package/src/mappings/{Pressable.js → Touchable.js}

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createActionProp, Triggers, createNumberProp, StylesPanelSections, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, Triggers, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     stylesPanelSections: [
         StylesPanelSections.Size,
@@ -10,27 +10,35 @@ const SEED_DATA_PROPS = {
     props: {
         onPress: createActionProp(),
         onLongPress: createActionProp(),
-        activeOpacity: createNumberProp({
+        activeOpacity: createStaticNumberProp({
             label: "Active Opacity",
             description: "The opacity when the button is pressed.",
             defaultValue: 0.8,
-            group: GROUPS.basic,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            precision: 2,
+            required: false,
         }),
-        disabledOpacity: createNumberProp({
+        disabledOpacity: createStaticNumberProp({
             label: "Disabled Opacity",
             description: "The opacity when the button is disabled.",
             defaultValue: 0.8,
-            group: GROUPS.basic,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            precision: 2,
+            required: false,
         }),
-        delayLongPress: createNumberProp({
+        delayLongPress: createStaticNumberProp({
             label: "Delay Long Press",
             description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-            group: GROUPS.basic,
+            required: false,
         }),
-        hitSlop: createNumberProp({
+        hitSlop: createStaticNumberProp({
             label: "Hit Slop",
             description: "Sets additional distance outside of element in which a press can be detected.",
-            group: GROUPS.basic,
+            required: false,
         }),
     },
 };
@@ -39,14 +47,14 @@ export const SEED_DATA = [
         name: "Touchable",
         tag: "Touchable",
         description: "An interactive view with no styles",
-        category: COMPONENT_TYPES.button,
+        category: COMPONENT_TYPES.deprecated,
         ...SEED_DATA_PROPS,
     },
     {
         name: "Pressable",
         tag: "Pressable",
         description: "An interactive view with no styles",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.button,
         ...SEED_DATA_PROPS,
     },
 ];

package/src/mappings/{Pressable.ts → Touchable.ts}

@@ -2,9 +2,8 @@ import {
   COMPONENT_TYPES,
   createActionProp,
   Triggers,
-  createNumberProp,
+  createStaticNumberProp,
   StylesPanelSections,
-  GROUPS,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -18,29 +17,37 @@ const SEED_DATA_PROPS = {
   props: {
     onPress: createActionProp(),
     onLongPress: createActionProp(),
-    activeOpacity: createNumberProp({
+    activeOpacity: createStaticNumberProp({
       label: "Active Opacity",
       description: "The opacity when the button is pressed.",
       defaultValue: 0.8,
-      group: GROUPS.basic,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false,
     }),
-    disabledOpacity: createNumberProp({
+    disabledOpacity: createStaticNumberProp({
       label: "Disabled Opacity",
       description: "The opacity when the button is disabled.",
       defaultValue: 0.8,
-      group: GROUPS.basic,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false,
     }),
-    delayLongPress: createNumberProp({
+    delayLongPress: createStaticNumberProp({
       label: "Delay Long Press",
       description:
         "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-      group: GROUPS.basic,
+      required: false,
     }),
-    hitSlop: createNumberProp({
+    hitSlop: createStaticNumberProp({
       label: "Hit Slop",
       description:
         "Sets additional distance outside of element in which a press can be detected.",
-      group: GROUPS.basic,
+      required: false,
     }),
   },
 };
@@ -50,14 +57,14 @@ export const SEED_DATA = [
     name: "Touchable",
     tag: "Touchable",
     description: "An interactive view with no styles",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.deprecated,
     ...SEED_DATA_PROPS,
   },
   {
     name: "Pressable",
     tag: "Pressable",
     description: "An interactive view with no styles",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.button,
     ...SEED_DATA_PROPS,
   },
 ];

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

@@ -1 +0,0 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Pressable.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAerB,CAAC"}