@draftbit/core 47.0.1-5c6c55.2 → 47.0.1-ad0ed2.2

package/src/components/Checkbox/CheckboxRow.js

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { StyleSheet, View, Platform, } from "react-native";
+import { StyleSheet, View, Platform, Pressable, } from "react-native";
 import { isString } from "lodash";
 import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
-import Touchable from "../Touchable";
 import Checkbox from "./Checkbox";
 export var Direction;
 (function (Direction) {
@@ -46,7 +45,7 @@ const CheckboxRow = ({ label = "Label", labelStyle, labelContainerStyle, checkbo
         }
     };
     const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Touchable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
+    return (React.createElement(Pressable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
         React.createElement(View, { style: [
                 styles.label,
                 {

package/src/components/Checkbox/CheckboxRow.tsx

@@ -6,6 +6,7 @@ import {
   TextStyle,
   View,
   Platform,
+  Pressable,
 } from "react-native";
 import { isString } from "lodash";
 
@@ -13,7 +14,6 @@ import type { IconSlot } from "../../interfaces/Icon";
 import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
-import Touchable from "../Touchable";
 import Checkbox, { CheckboxProps } from "./Checkbox";
 
 export enum Direction {
@@ -100,7 +100,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
   const { textStyles, viewStyles } = extractStyles(style);
 
   return (
-    <Touchable
+    <Pressable
       onPress={handlePress}
       style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
       disabled={disabled}
@@ -130,7 +130,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
         uncheckedIcon={uncheckedIcon}
         size={size}
       />
-    </Touchable>
+    </Pressable>
   );
 };
 

package/src/components/DeprecatedButton.js

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { ActivityIndicator, View, Text, StyleSheet, } from "react-native";
+import { ActivityIndicator, View, Text, StyleSheet, Pressable, } from "react-native";
 import color from "color";
 import Config from "./Config";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
-const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
+const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
     let backgroundColor, borderColor, textColor, borderWidth;
     const buttonColor = colorOverride || colors.primary;
     if (type === "solid") {
@@ -59,19 +58,8 @@ const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false,
             width: Config.buttonIconSize,
         },
     ];
-    const { margin, marginEnd, marginTop, marginLeft, marginRight, marginBottom, marginHorizontal, marginVertical, ...innerStyles } = StyleSheet.flatten(style || {});
-    const margins = {
-        margin,
-        marginEnd,
-        marginTop,
-        marginLeft,
-        marginRight,
-        marginBottom,
-        marginHorizontal,
-        marginVertical,
-    };
-    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch", ...margins } },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },
+    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch" } },
+        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle] },
             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/DeprecatedButton.tsx

@@ -4,14 +4,14 @@ import {
   View,
   Text,
   StyleSheet,
-  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  Pressable,
+  PressableProps,
 } from "react-native";
 import color from "color";
 import Config from "./Config";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 
@@ -63,7 +63,7 @@ type Props = {
   elevation?: number;
   style?: StyleProp<ViewStyle>;
   theme: Theme;
-} & TouchableHighlightProps &
+} & PressableProps &
   IconSlot;
 
 const Button: React.FC<React.PropsWithChildren<Props>> = ({
@@ -77,7 +77,6 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   onPress,
   elevation = 0,
-  style,
   theme: { colors, disabledOpacity, roundness, typography },
   ...rest
 }) => {
@@ -137,38 +136,15 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
     },
   ];
 
-  const {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-    ...innerStyles
-  } = StyleSheet.flatten(style || {});
-
-  const margins = {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-  };
-
   return (
-    <Elevation style={{ elevation, alignSelf: "stretch", ...margins }}>
-      <Touchable
+    <Elevation style={{ elevation, alignSelf: "stretch" }}>
+      <Pressable
         {...rest}
         onPress={onPress}
         accessibilityState={{ disabled }}
         accessibilityRole="button"
         disabled={disabled || loading}
-        style={[styles.button, buttonStyle, innerStyles]}
+        style={[styles.button, buttonStyle]}
       >
         <View style={styles.content}>
           {icon && loading !== true ? (
@@ -191,7 +167,7 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
             {children}
           </Text>
         </View>
-      </Touchable>
+      </Pressable>
     </Elevation>
   );
 };

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/Pressable.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,50 @@
+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>
+  );
+}

package/src/components/Touchable.js

@@ -1,10 +1,10 @@
 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 }) => {
+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 || disabled ? 0.75 : 1,
+                    opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
                 },
                 style,
             ];

package/src/components/Touchable.tsx

@@ -1,29 +1,39 @@
 import React from "react";
-import { Pressable, ViewStyle, PressableProps } from "react-native";
+import { Pressable, 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 Touchable({
   children,
   disabled,
   onPress,
+  activeOpacity,
+  disabledOpacity,
+  delayLongPress,
+  hitSlop,
   style,
   ...props
 }: Props) {
   return (
     <Pressable
-      onPress={onPress}
       disabled={disabled}
-      hitSlop={8}
+      onPress={onPress}
+      delayLongPress={delayLongPress ? delayLongPress : 500}
+      hitSlop={hitSlop ? hitSlop : 8}
       style={({ pressed }) => {
         return [
           {
-            opacity: pressed || disabled ? 0.75 : 1,
+            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
           },
           style,
         ];

package/src/mappings/Button.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp, } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
@@ -13,11 +13,26 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-};
-const LAYOUT = {
-    backgroundColor: "transparent",
-    borderRadius: 8,
-    fontFamily: "system-700",
+    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,
+    }),
 };
 export const SEED_DATA = [
     {
@@ -34,7 +49,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
+            borderRadius: 8,
+            fontFamily: "system-700",
             backgroundColor: "transparent",
             borderWidth: 1,
             textAlign: "center",
@@ -56,7 +72,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
+            borderRadius: 8,
+            fontFamily: "system-700",
             backgroundColor: "primary",
             textAlign: "center",
         },
@@ -77,7 +94,8 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            ...LAYOUT,
+            borderRadius: 8,
+            fontFamily: "system-700",
             backgroundColor: "primary",
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,6 +7,7 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
+  createStaticNumberProp,
 } from "@draftbit/types";
 
 const SEED_DATA_TRIGGERS = [Triggers.OnPress];
@@ -23,12 +24,28 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-};
-
-const LAYOUT = {
-  backgroundColor: "transparent",
-  borderRadius: 8,
-  fontFamily: "system-700",
+  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,
+  }),
 };
 
 export const SEED_DATA = [
@@ -46,7 +63,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "transparent",
       borderWidth: 1,
       textAlign: "center",
@@ -68,7 +86,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -89,7 +108,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },

package/src/mappings/Touchable.js

@@ -1,17 +1,52 @@
-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,
+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: [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.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,22 +2,62 @@ import {
   COMPONENT_TYPES,
   createActionProp,
   Triggers,
+  createNumberProp,
   StylesPanelSections,
+  GROUPS,
 } from "@draftbit/types";
 
-export const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: COMPONENT_TYPES.button,
+const SEED_DATA_PROPS = {
   stylesPanelSections: [
     StylesPanelSections.Size,
     StylesPanelSections.Margins,
     StylesPanelSections.Borders,
   ],
   layout: {},
-  triggers: [Triggers.OnPress],
+  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.deprecated,
+    ...SEED_DATA_PROPS,
+  },
+  {
+    name: "Pressable",
+    tag: "Pressable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...SEED_DATA_PROPS,
+  },
+];