@draftbit/core 47.0.1-17098e.2 → 47.0.1-2aab54.2

package/lib/commonjs/mappings/NativeBase/Modal.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA = {
+  category: _types.COMPONENT_TYPES.NBModal,
+  packageName: "native-base",
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects]
+};
+const SEED_DATA = [{
+  name: "Modal",
+  tag: "Modal",
+  description: "A Modal is an overlay on the primary window or another dialog window. Content behind the modal dialog remains inert and users cannot interact with it.",
+  ...SHARED_SEED_DATA,
+  layout: {},
+  triggers: [_types.Triggers.OnClose, _types.Triggers.OnOpen],
+  props: {
+    isOpen: (0, _types.createBoolProp)({
+      label: "Is Open",
+      description: "If true, the modal will open. Useful for controllable state behavior."
+    }),
+    defaultIsOpen: (0, _types.createStaticBoolProp)({
+      label: "Default Is Open",
+      description: "If true, the modal will be opened by default."
+    }),
+    avoidKeyboard: (0, _types.createStaticBoolProp)({
+      label: "Avoid Keyboard",
+      description: "If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.",
+      defaultValue: false
+    }),
+    closeOnOverlayClick: (0, _types.createStaticBoolProp)({
+      label: "Close on Overlay Click",
+      description: "If true, the modal will close when the overlay is clicked.",
+      defaultValue: true
+    }),
+    isKeyboardDismissable: (0, _types.createStaticBoolProp)({
+      label: "Is Keyboard Dismissable",
+      description: "If true, the modal will close when the keyboard is dismissed.",
+      defaultValue: true
+    }),
+    backdropVisible: (0, _types.createStaticBoolProp)({
+      label: "Backdrop Visible",
+      description: "If true, the backdrop element is visible.",
+      defaultValue: true
+    }),
+    animationPreset: (0, _types.createTextEnumProp)({
+      label: "Animation Preset",
+      description: "The animation preset to use for the modal.",
+      options: ["slide", "fade", "none"],
+      defaultValue: "fade"
+    }),
+    useRNModal: (0, _types.createStaticBoolProp)({
+      label: "Use RN Modal",
+      description: "If true, the modal will use the RN Modal component."
+    }),
+    onOpen: (0, _types.createActionProp)(),
+    onClose: (0, _types.createActionProp)()
+  }
+}, {
+  name: "Modal Content",
+  tag: "Modal.Content",
+  description: "The container for the modal dialog's content.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Modal Header",
+  tag: "Modal.Header",
+  description: "The header that labels the modal dialog.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Modal Footer",
+  tag: "Modal.Footer",
+  description: "The footer that houses the modal actions.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Modal Body",
+  tag: "Modal.Body",
+  description: "A wrapper that houses the modal's main content",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Modal Close Button",
+  tag: "Modal.CloseButton",
+  description: "The button that closes the modal.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/NativeBase/Other.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = [{
+  name: "FAB",
+  tag: "Fab",
+  description: "A floating action button (FAB) is a circular icon button that hovers over content to execute a primary action in the application.",
+  category: _types.COMPONENT_TYPES.NBForms,
+  packageName: "native-base",
+  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
+  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
+  layout: {},
+  triggers: {},
+  props: {
+    placement: (0, _types.createTextEnumProp)({
+      label: "Placement",
+      description: "The placement of the Fab relative to the device.",
+      options: ["bottom-right", "top-right", "top-left", "bottom-left"],
+      defaultValue: "bottom-right"
+    }),
+    label: (0, _types.createTextProp)({
+      label: "Label",
+      description: "The Text to be displayed in Fab."
+    }),
+    icon: (0, _types.createIconProp)({
+      label: "Icon",
+      description: "Icon to be displayed in Fab.  "
+    })
+  }
+}, {
+  name: "Tooltip",
+  tag: "Tooltip",
+  description: "A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture.",
+  category: _types.COMPONENT_TYPES.NBOther,
+  packageName: "native-base",
+  allowChildren: true,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
+  layout: {},
+  triggers: [_types.Triggers.OnOpen, _types.Triggers.OnClose],
+  props: {
+    label: (0, _types.createTextProp)({
+      label: "Label",
+      description: "The Text to be displayed in Tooltip."
+    }),
+    isOpen: (0, _types.createBoolProp)({
+      label: "Is Open",
+      description: "Whether the tooltip is open or not."
+    }),
+    isDisabled: (0, _types.createDisabledProp)(),
+    defaultIsOpen: (0, _types.createStaticBoolProp)({
+      label: "Default Is Open",
+      description: "Whether the tooltip is open by default",
+      defaultValue: false
+    }),
+    onOpen: (0, _types.createActionProp)(),
+    onClose: (0, _types.createActionProp)(),
+    openDelay: (0, _types.createStaticNumberProp)({
+      label: "Open Delay",
+      description: "Delay in ms before tooltip opens",
+      defaultValue: 0
+    }),
+    closeDelay: (0, _types.createStaticNumberProp)({
+      label: "Close Delay",
+      description: "Delay in ms before tooltip closes",
+      defaultValue: 0
+    }),
+    placement: (0, _types.createTextEnumProp)({
+      label: "Placement",
+      description: "The placement of the menu",
+      options: ["bottom", "top", "left", "right", "top left", "top right", "bottom left", "bottom right", "right bottom", "right top", "left bottom", "left top"],
+      defaultValue: "bottom"
+    }),
+    arrowSize: (0, _types.createStaticNumberProp)({
+      label: "Arrow Size",
+      description: "The size of the arrow",
+      defaultValue: 12
+    }),
+    hasArrow: (0, _types.createStaticBoolProp)({
+      label: "Has Arrow",
+      description: "Whether the tooltip has an arrow",
+      defaultValue: false
+    }),
+    offset: (0, _types.createStaticNumberProp)({
+      label: "Offset",
+      description: "The distance between the triggere and the tooltip."
+    })
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/NativeBase/Popover.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA = {
+  category: _types.COMPONENT_TYPES.NBPopover,
+  packageName: "native-base",
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
+  layout: {},
+  triggers: {}
+};
+const SEED_DATA = [{
+  name: "Popover",
+  tag: "Popover",
+  description: "Popover floats around a trigger. It is a non-modal dialog used to provide contextual information to the user. It should be paired with a pressable trigger element.",
+  ...SHARED_SEED_DATA,
+  allowChildren: true,
+  props: {
+    isOpen: (0, _types.createBoolProp)({
+      label: "Is Open",
+      description: "If true, the popover is open. Useful for controlling the open state."
+    }),
+    defaultIsOpen: (0, _types.createStaticBoolProp)({
+      label: "Default Is Open",
+      description: "If true, the popover will be opened by default."
+    }),
+    trapFocus: (0, _types.createStaticBoolProp)({
+      label: "Trap Focus",
+      description: "Whether popover should trap focus."
+    }),
+    shouldFlip: (0, _types.createStaticBoolProp)({
+      label: "Should Flip",
+      description: "Whether popover should flip when it reaches the edge of the screen.",
+      defaultValue: true
+    }),
+    shouldOverlapWithTrigger: (0, _types.createStaticBoolProp)({
+      label: "Should Overlap With Trigger",
+      description: "Whether popover should overlap with trigger.",
+      defaultValue: false
+    }),
+    isKeyboardDismissable: (0, _types.createStaticBoolProp)({
+      label: "Is Keyboard Dismissable",
+      description: "If true, the popover will close when the keyboard is dismissed.",
+      defaultValue: true
+    }),
+    placement: (0, _types.createTextEnumProp)({
+      label: "Placement",
+      description: "The placement of the popover",
+      options: ["bottom", "top", "left", "right", "top left", "top right", "bottom left", "bottom right", "right bottom", "right top", "left bottom", "left top"],
+      defaultValue: "bottom left"
+    }),
+    useRNModal: (0, _types.createStaticBoolProp)({
+      label: "Use RN Modal",
+      description: "If true, the popover will use the RN Modal component."
+    }),
+    onOpen: (0, _types.createActionProp)(),
+    onClose: (0, _types.createActionProp)()
+  }
+}, {
+  name: "Popover Arrow",
+  tag: "Popover.Arrow",
+  description: "The popover arrow.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Popover Body",
+  tag: "Popover.Body",
+  description: "The body of the popover.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Popover Content",
+  tag: "Popover.Content",
+  description: "The popover itself.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Popover Close Button",
+  tag: "Popover.CloseButton",
+  description: "The button that closes the popover.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Popover Header",
+  tag: "Popover.Header",
+  description: "The header of the popover.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}, {
+  name: "Popover Trigger",
+  tag: "Popover.Trigger",
+  description: "Used to wrap the reference (or trigger) element.",
+  ...SHARED_SEED_DATA,
+  props: {}
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Touchable.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Touchable",
+  tag: "Touchable",
+  description: "Simple button with no styles",
+  category: _types.COMPONENT_TYPES.button,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
+  layout: {},
+  triggers: [_types.Triggers.OnPress],
+  props: {
+    onPress: (0, _types.createActionProp)()
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Button.js

@@ -1,5 +1,5 @@
 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, { useCallback } from "react";
+import * as React from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
 import { withTheme } from "../theming";
 const CONSTANTS = {
@@ -14,9 +14,6 @@ function Base(_ref) {
     icon,
     title,
     onPress,
-    onLongPress,
-    activeOpacity,
-    disabledOpacity,
     loading,
     disabled,
     style,
@@ -55,26 +52,17 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
-  const getOpacity = useCallback(pressed => {
-    if (disabled) {
-      return disabledOpacity;
-    } else {
-      if (pressed) return activeOpacity;else return 1;
-    }
-  }, [activeOpacity, disabled, disabledOpacity]);
-  const _style = useCallback(_ref2 => {
-    let {
-      pressed
-    } = _ref2;
-    return [buttonStyles, {
-      opacity: getOpacity(pressed)
-    }];
-  }, [getOpacity, buttonStyles]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: onPress,
-    onLongPress: onLongPress,
     disabled: disabled || loading,
-    style: (styles.base, _style)
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [styles.base, {
+        opacity: pressed || disabled ? 0.75 : 1
+      }, buttonStyles];
+    }
   }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: color,

package/lib/module/components/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 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 * as React from "react";
-import { View, StyleSheet, Pressable } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { useTheme } from "../../theming";
+import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 const Checkbox = _ref => {
   let {
@@ -50,7 +51,7 @@ const Checkbox = _ref => {
       onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
     }
   };
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
     onPress: handlePress,
     disabled: disabled,
     accessibilityState: {

package/lib/module/components/DeprecatedButton.js

@@ -0,0 +1,141 @@
+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 * as React from "react";
+import { ActivityIndicator, View, Text, StyleSheet } 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 = _ref => {
+  let {
+    Icon,
+    icon,
+    disabled = false,
+    type = "solid",
+    loading = false,
+    labelColor,
+    color: colorOverride,
+    children,
+    onPress,
+    elevation = 0,
+    style,
+    theme: {
+      colors,
+      disabledOpacity,
+      roundness,
+      typography
+    },
+    ...rest
+  } = _ref;
+  let backgroundColor, borderColor, textColor, borderWidth;
+  const buttonColor = colorOverride || colors.primary;
+  if (type === "solid") {
+    backgroundColor = buttonColor;
+    if (disabled) {
+      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || colors.surface;
+    }
+  } else {
+    backgroundColor = "transparent";
+    if (disabled) {
+      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || buttonColor;
+    }
+  }
+  if (type === "outline") {
+    if (disabled) {
+      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      borderColor = buttonColor;
+    }
+    borderWidth = StyleSheet.hairlineWidth;
+  } else {
+    borderColor = "transparent";
+    borderWidth = 0;
+  }
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: roundness
+  };
+  const textStyle = {
+    textAlign: "center",
+    color: textColor,
+    marginVertical: 16,
+    marginHorizontal: 16
+  };
+  const iconStyle = [styles.icon, {
+    marginLeft: 16,
+    marginRight: -8,
+    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 /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      alignSelf: "stretch",
+      ...margins
+    }
+  }, /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
+    onPress: onPress,
+    accessibilityState: {
+      disabled
+    },
+    accessibilityRole: "button",
+    disabled: disabled || loading,
+    style: [styles.button, buttonStyle, innerStyles]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.content
+  }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
+    style: iconStyle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.buttonIconSize,
+    color: textColor
+  })) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: textColor,
+    style: iconStyle
+  }) : null, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [textStyle, typography.button]
+  }, children))));
+};
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: "solid"
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    width: Config.buttonIconSize
+  }
+});
+export default withTheme(Button);

package/lib/module/components/DeprecatedCardWrapper.js

@@ -1,7 +1,7 @@
 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 { withTheme } from "../theming";
-import { Pressable } from "react-native";
+import Touchable from "./Touchable";
 const getWidth = numColumns => {
   switch (numColumns) {
     case 1:
@@ -21,7 +21,7 @@ const Card = _ref => {
     ...rest
   } = _ref;
   const width = getWidth(numColumns);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Touchable, _extends({
     disabled: !onPress,
     onPress: onPress,
     style: [style, {

package/lib/module/components/DeprecatedFAB.js

@@ -1,9 +1,10 @@
 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 * as React from "react";
-import { ActivityIndicator, View, StyleSheet, Pressable } from "react-native";
+import { ActivityIndicator, View, StyleSheet } 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 = _ref => {
@@ -97,7 +98,7 @@ const FAB = _ref => {
     style: [{
       elevation
     }, style]
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled

package/lib/module/components/Picker/Picker.js

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, Pressable } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions } 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 "../Button";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames } from "../../utilities";
 function normalizeOptions(options) {
   if (options.length === 0) {
@@ -197,7 +198,7 @@ const Picker = _ref => {
     /* marginsContainer */
     React.createElement(View, {
       style: [styles.marginsContainer, marginStyles]
-    }, /*#__PURE__*/React.createElement(Pressable, {
+    }, /*#__PURE__*/React.createElement(Touchable, {
       disabled: disabled,
       onPress: togglePickerVisible,
       style: styles.touchableContainer

package/lib/module/components/Picker/PickerComponent.ios.js

@@ -6,7 +6,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/lib/module/components/Touchable.js

@@ -1,40 +1,25 @@
 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, { useCallback } from "react";
+import React from "react";
 import { Pressable } from "react-native";
 export default function Touchable(_ref) {
   let {
     children,
     disabled,
     onPress,
-    onLongPress,
-    hitSlop,
-    delayLongPress,
-    activeOpacity,
-    disabledOpacity,
     style,
     ...props
   } = _ref;
-  const getOpacity = useCallback(pressed => {
-    if (disabled) {
-      return disabledOpacity;
-    } else {
-      if (pressed) return activeOpacity;else return 1;
-    }
-  }, [activeOpacity, disabled, disabledOpacity]);
-  const _style = useCallback(_ref2 => {
-    let {
-      pressed
-    } = _ref2;
-    return [style, {
-      opacity: getOpacity(pressed)
-    }];
-  }, [getOpacity, style]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: onPress,
-    onLongPress: onLongPress,
     disabled: disabled,
-    delayLongPress: delayLongPress ? delayLongPress : 500,
-    hitSlop: hitSlop ? hitSlop : 8,
-    style: _style
+    hitSlop: 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed || disabled ? 0.75 : 1
+      }, style];
+    }
   }, props), children);
 }

package/lib/module/components/Touchable.web.js

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