@draftbit/core 47.0.1-54c307.2 → 47.0.1-cc5ccc.2

package/lib/module/components/Touchable.js

@@ -1,25 +1,40 @@
 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 React, { useCallback } 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,
-    hitSlop: 8,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [{
-        opacity: pressed || disabled ? 0.75 : 1
-      }, style];
-    }
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _style
   }, props), children);
 }

package/lib/module/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
@@ -12,12 +13,11 @@ const SEED_DATA_PROPS = {
     defaultValue: "Get Started"
   }),
   disabled: createDisabledProp(),
-  loading: createLoadingProp()
-};
-const LAYOUT = {
-  backgroundColor: "transparent",
-  borderRadius: 8,
-  fontFamily: "system-700"
+  loading: createLoadingProp(),
+  activeOpacity: createNumberProp(),
+  disabledOpacity: createNumberProp(),
+  delayLongPress: createNumberProp(),
+  hitSlop: createNumberProp()
 };
 export const SEED_DATA = [{
   name: "Button Outline",
@@ -25,8 +25,9 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
     backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
     borderWidth: 1,
     textAlign: "center"
   },
@@ -38,7 +39,8 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },
@@ -50,7 +52,8 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.button,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },

package/lib/module/mappings/Pressable.js

@@ -0,0 +1,45 @@
+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
+}];

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

@@ -1,3 +1,5 @@
+import { PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
+export declare type StyleType = (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
 declare const ButtonSolid: any;
 export { ButtonSolid };
 declare const Button: any;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AA0IA,QAAA,MAAM,WAAW,EAAE,GAAsB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,EAAE,GAAsB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,CAAC;AAmBlB,QAAA,MAAM,aAAa,EAAE,GAAwB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,0BAA0B,EAG1B,SAAS,EAET,SAAS,EAEV,MAAM,cAAc,CAAC;AA+CtB,oBAAY,SAAS,GAAG,CACtB,KAAK,EAAE,0BAA0B,KAC9B,SAAS,CAAC,SAAS,CAAC,CAAC;AA+G1B,QAAA,MAAM,WAAW,EAAE,GAAsB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,EAAE,GAAsB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,CAAC;AAmBlB,QAAA,MAAM,aAAa,EAAE,GAAwB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TouchableHighlightProps, StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, PressableProps } from "react-native";
 import type { IconSlot } from "../../interfaces/Icon";
 export interface CheckboxProps {
     status?: boolean;
@@ -15,6 +15,6 @@ export interface CheckboxProps {
     size?: number;
     style?: StyleProp<ViewStyle>;
 }
-declare const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot>;
+declare const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot>;
 export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,uBAAuB,EACvB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKtD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CACtB,aAAa,GAAG,uBAAuB,GAAG,QAAQ,CAqFnD,CAAC;AAqBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EACT,SAAS,EAET,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,cAAc,GAAG,QAAQ,CAoFjE,CAAC;AAqBF,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeprecatedCardWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedCardWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,aAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;;;;AAiCF,wBAA+B"}
+{"version":3,"file":"DeprecatedCardWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedCardWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,aAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;;;;AAiCF,wBAA+B"}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TouchableHighlightProps, StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, PressableProps } from "react-native";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 /**
@@ -48,7 +48,7 @@ declare type Props = {
     elevation?: number;
     theme: Theme;
     style?: StyleProp<ViewStyle>;
-} & TouchableHighlightProps & IconSlot;
+} & PressableProps & IconSlot;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
 }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;

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

@@ -1 +1 @@
-{"version":3,"file":"DeprecatedFAB.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedFAB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,uBAAuB,EACvB,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,uBAAuB,GACzB,QAAQ,CAAC;;;;AAkKX,wBAA8B"}
+{"version":3,"file":"DeprecatedFAB.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedFAB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,SAAS,EACT,SAAS,EAGT,cAAc,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,cAAc,GAChB,QAAQ,CAAC;;;;AAkKX,wBAA8B"}

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AA2aF,wBAAiC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AA2aF,wBAAiC"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { PressableProps, PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
+declare 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 declare type StyleType = (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
+export default function Pressable({ children, disabled, onPress, onLongPress, hitSlop, delayLongPress, activeOpacity, disabledOpacity, style, ...props }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Pressable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAEL,cAAc,EACd,0BAA0B,EAC1B,SAAS,EACT,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,cAAc,CAAC;AAEnB,oBAAY,SAAS,GAAG,CACtB,KAAK,EAAE,0BAA0B,KAC9B,SAAS,CAAC,SAAS,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,eA6BP"}

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

@@ -1,11 +1,18 @@
 import React from "react";
-import { ViewStyle, PressableProps } from "react-native";
+import { PressableProps, PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
 declare 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 default function Touchable({ children, disabled, onPress, style, ...props }: Props): JSX.Element;
+export declare type StyleType = (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
+export default function Touchable({ children, disabled, onPress, onLongPress, hitSlop, delayLongPress, activeOpacity, disabledOpacity, style, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=Touchable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Touchable.d.ts","sourceRoot":"","sources":["../../../../src/components/Touchable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEpE,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;CACtB,GAAG,cAAc,CAAC;AAEnB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,eAmBP"}
+{"version":3,"file":"Touchable.d.ts","sourceRoot":"","sources":["../../../../src/components/Touchable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAEL,cAAc,EACd,0BAA0B,EAC1B,SAAS,EACT,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,cAAc,CAAC;AAEnB,oBAAY,SAAS,GAAG,CACtB,KAAK,EAAE,0BAA0B,KAC9B,SAAS,CAAC,SAAS,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,eA6BP"}

package/lib/typescript/src/mappings/Button.d.ts

@@ -5,10 +5,10 @@ export declare const SEED_DATA: ({
     stylesPanelSections: string[];
     layout: {
         backgroundColor: string;
-        borderWidth: number;
-        textAlign: string;
         borderRadius: number;
         fontFamily: string;
+        borderWidth: number;
+        textAlign: string;
     };
     triggers: string[];
     props: {
@@ -22,6 +22,16 @@ export declare const SEED_DATA: ({
             defaultValue: null;
             group: string;
         };
+        onLongPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
         icon: {
             label: string;
             description: string;
@@ -53,6 +63,50 @@ export declare const SEED_DATA: ({
             propType: string;
             defaultValue: null;
         };
+        activeOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        disabledOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        delayLongPress: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        hitSlop: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
     };
 } | {
     name: string;
@@ -60,10 +114,11 @@ export declare const SEED_DATA: ({
     category: string;
     stylesPanelSections: string[];
     layout: {
-        backgroundColor: string;
-        textAlign: string;
         borderRadius: number;
         fontFamily: string;
+        backgroundColor: string;
+        textAlign: string;
+        borderWidth?: undefined;
     };
     triggers: string[];
     props: {
@@ -77,6 +132,16 @@ export declare const SEED_DATA: ({
             defaultValue: null;
             group: string;
         };
+        onLongPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
         icon: {
             label: string;
             description: string;
@@ -108,6 +173,50 @@ export declare const SEED_DATA: ({
             propType: string;
             defaultValue: null;
         };
+        activeOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        disabledOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        delayLongPress: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        hitSlop: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
     };
 })[];
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Button.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiErB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Button.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoErB,CAAC"}

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

@@ -0,0 +1,76 @@
+export declare const SEED_DATA: {
+    stylesPanelSections: string[];
+    layout: {};
+    triggers: string[];
+    props: {
+        onPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onLongPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        activeOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        disabledOpacity: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        delayLongPress: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        hitSlop: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+}[];
+//# sourceMappingURL=Pressable.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.0.1-54c307.2+54c307a",
+  "version": "47.0.1-cc5ccc.2+cc5ccc0",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^47.0.1-54c307.2+54c307a",
+    "@draftbit/types": "^47.0.1-cc5ccc.2+cc5ccc0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "54c307ae557205641ebd3e084b8b3ce1f5030fde"
+  "gitHead": "cc5ccc0cb02f87cb9672ab134b665d254375c75f"
 }

package/src/components/Button.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useCallback } from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
 import { withTheme } from "../theming";
 const CONSTANTS = {
@@ -7,7 +7,7 @@ const CONSTANTS = {
     padding: 8,
     icon: 24,
 };
-function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
+function Base({ Icon, icon, title, onPress, onLongPress, activeOpacity, disabledOpacity, loading, disabled, style, ...props }) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
     const titleStyles = {
         color,
@@ -28,15 +28,22 @@ function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }
     if (textAlign === "right") {
         buttonStyles.justifyContent = "flex-end";
     }
-    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
-            return [
-                styles.base,
-                {
-                    opacity: pressed || disabled ? 0.75 : 1,
-                },
-                buttonStyles,
-            ];
-        }, ...props },
+    const getOpacity = useCallback((pressed) => {
+        if (disabled) {
+            return disabledOpacity;
+        }
+        else {
+            if (pressed)
+                return activeOpacity;
+            else
+                return 1;
+        }
+    }, [activeOpacity, disabled, disabledOpacity]);
+    const _style = useCallback(({ pressed }) => [
+        buttonStyles,
+        { opacity: getOpacity(pressed) },
+    ], [getOpacity, buttonStyles]);
+    return (React.createElement(Pressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled || loading, style: (styles.base, _style), ...props },
         loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
         icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
         React.createElement(Text, { style: titleStyles }, title)));