@draftbit/core 47.0.1-9fd6f2.2 → 47.0.1-cc5ccc.2

package/src/components/Checkbox/Checkbox.js

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { View, StyleSheet, } from "react-native";
+import { View, StyleSheet, Pressable, } from "react-native";
 import { useTheme } from "../../theming";
-import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
     const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
@@ -33,7 +32,7 @@ const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck,
             onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
         }
     };
-    return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
+    return (React.createElement(Pressable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
         React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
         React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
             React.createElement(View, { style: [

package/src/components/Checkbox/Checkbox.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import {
   View,
   StyleSheet,
-  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
+  Pressable,
+  PressableProps,
 } from "react-native";
 import { useTheme } from "../../theming";
 import type { IconSlot } from "../../interfaces/Icon";
 
-import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 
 export interface CheckboxProps {
@@ -27,9 +27,7 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Checkbox: React.FC<
-  CheckboxProps & TouchableHighlightProps & IconSlot
-> = ({
+const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
   Icon,
   status,
   disabled = false,
@@ -87,7 +85,7 @@ const Checkbox: React.FC<
   };
 
   return (
-    <Touchable
+    <Pressable
       {...rest}
       onPress={handlePress}
       disabled={disabled}
@@ -111,7 +109,7 @@ const Checkbox: React.FC<
           ]}
         />
       </View>
-    </Touchable>
+    </Pressable>
   );
 };
 

package/src/components/DeprecatedCardWrapper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { withTheme } from "../theming";
-import Touchable from "./Touchable";
+import { Pressable } from "react-native";
 const getWidth = (numColumns) => {
     switch (numColumns) {
         case 1:
@@ -13,6 +13,6 @@ const getWidth = (numColumns) => {
 };
 const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
     const width = getWidth(numColumns);
-    return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
+    return (React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
 };
 export default withTheme(Card);

package/src/components/DeprecatedCardWrapper.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { withTheme } from "../theming";
-import Touchable from "./Touchable";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, Pressable } from "react-native";
 import theme from "../styles/DefaultTheme";
 
 type Props = {
@@ -32,14 +31,14 @@ const Card: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const width = getWidth(numColumns);
   return (
-    <Touchable
+    <Pressable
       disabled={!onPress}
       onPress={onPress}
       style={[style, { width }]}
       {...rest}
     >
       {children}
-    </Touchable>
+    </Pressable>
   );
 };
 

package/src/components/DeprecatedFAB.js

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { ActivityIndicator, View, StyleSheet, } from "react-native";
+import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
@@ -83,7 +82,7 @@ const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, co
         });
     }
     return (React.createElement(Elevation, { style: [{ elevation }, style] },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
+        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
             React.createElement(View, { style: styles.content },
                 icon && loading !== true ? (React.createElement(View, { style: iconStyle },
                     React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,

package/src/components/DeprecatedFAB.tsx

@@ -3,15 +3,15 @@ import {
   ActivityIndicator,
   View,
   StyleSheet,
-  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  Pressable,
+  PressableProps,
 } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 
@@ -65,7 +65,7 @@ type Props = {
   elevation?: number;
   theme: Theme;
   style?: StyleProp<ViewStyle>;
-} & TouchableHighlightProps &
+} & PressableProps &
   IconSlot;
 
 const FAB: React.FC<React.PropsWithChildren<Props>> = ({
@@ -169,7 +169,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <Elevation style={[{ elevation }, style]}>
-      <Touchable
+      <Pressable
         {...rest}
         onPress={onPress}
         accessibilityState={{ disabled }}
@@ -200,7 +200,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
             </Text>
           ) : null}
         </View>
-      </Touchable>
+      </Pressable>
     </Elevation>
   );
 };

package/src/components/Picker/Picker.js

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Pressable, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
-import Touchable from "../Touchable";
+import { Button } from "../Button";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
 function normalizeOptions(options) {
     if (options.length === 0) {
@@ -166,7 +165,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
     return (
     /* marginsContainer */
     React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
-        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+        React.createElement(Pressable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
             React.createElement(View, { pointerEvents: "none", style: [
                     styles.outsetContainer,
                     stylesWithoutBordersAndMargins,

package/src/components/Picker/Picker.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
+  Pressable,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -14,8 +15,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
-import Touchable from "../Touchable";
+import { Button } from "../Button";
 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 */}
-      <Touchable
+      <Pressable
         disabled={disabled}
         onPress={togglePickerVisible}
         style={styles.touchableContainer}
@@ -342,7 +342,7 @@ const Picker: React.FC<PickerProps> = ({
           </View>
         </View>
         {assistiveTextLabel}
-      </Touchable>
+      </Pressable>
 
       {/* 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 "../DeprecatedButton";
+import { Button } from "../Button";
 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 "../DeprecatedButton";
+import { Button } from "../Button";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { PickerComponentProps } from "./PickerTypes";

package/src/components/Pressable.js

@@ -0,0 +1,17 @@
+import React, { useCallback } 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));
+}

package/src/components/Pressable.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import {
+  Pressable as NativePressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} 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 Pressable({
+  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 (
+    <NativePressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      disabled={disabled}
+      delayLongPress={delayLongPress ? delayLongPress : 500}
+      hitSlop={hitSlop ? hitSlop : 8}
+      style={_style}
+      {...props}
+    >
+      {children}
+    </NativePressable>
+  );
+}

package/src/components/Touchable.js

@@ -1,12 +1,17 @@
-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));
+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));
 }

package/src/components/Touchable.tsx

@@ -1,33 +1,64 @@
-import React from "react";
-import { Pressable, ViewStyle, PressableProps } from "react-native";
+import React, { useCallback } from "react";
+import {
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} 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}
-      hitSlop={8}
-      style={({ pressed }) => {
-        return [
-          {
-            opacity: pressed || disabled ? 0.75 : 1,
-          },
-          style,
-        ];
-      }}
+      delayLongPress={delayLongPress ? delayLongPress : 500}
+      hitSlop={hitSlop ? hitSlop : 8}
+      style={_style}
       {...props}
     >
       {children}

package/src/mappings/Button.js

@@ -1,7 +1,8 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createNumberProp, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
+    onLongPress: createActionProp(),
     icon: createIconProp({
         defaultValue: null,
         required: false,
@@ -13,11 +14,10 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-};
-const LAYOUT = {
-    backgroundColor: "transparent",
-    borderRadius: 8,
-    fontFamily: "system-700",
+    activeOpacity: createNumberProp(),
+    disabledOpacity: createNumberProp(),
+    delayLongPress: createNumberProp(),
+    hitSlop: createNumberProp(),
 };
 export const SEED_DATA = [
     {
@@ -34,8 +34,9 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
             backgroundColor: "transparent",
+            borderRadius: 8,
+            fontFamily: "system-700",
             borderWidth: 1,
             textAlign: "center",
         },
@@ -56,7 +57,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
+            borderRadius: 8,
+            fontFamily: "system-700",
             backgroundColor: "primary",
             textAlign: "center",
         },
@@ -77,7 +79,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
+            borderRadius: 8,
+            fontFamily: "system-700",
             backgroundColor: "primary",
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,11 +7,13 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
+  createNumberProp,
 } from "@draftbit/types";
 
-const SEED_DATA_TRIGGERS = [Triggers.OnPress];
+const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
+  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false,
@@ -23,12 +25,10 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-};
-
-const LAYOUT = {
-  backgroundColor: "transparent",
-  borderRadius: 8,
-  fontFamily: "system-700",
+  activeOpacity: createNumberProp(),
+  disabledOpacity: createNumberProp(),
+  delayLongPress: createNumberProp(),
+  hitSlop: createNumberProp(),
 };
 
 export const SEED_DATA = [
@@ -46,8 +46,9 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
       backgroundColor: "transparent",
+      borderRadius: 8,
+      fontFamily: "system-700",
       borderWidth: 1,
       textAlign: "center",
     },
@@ -68,7 +69,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -89,7 +91,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },

package/src/mappings/Pressable.js

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