@draftbit/core 47.0.1-ed6e56.2 → 47.1.0

package/src/components/Button.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import {
   Text,
   Pressable,
+  PressableProps,
   Platform,
   StyleSheet,
   TextStyle,
-  PressableProps,
   ActivityIndicator,
 } from "react-native";
 
@@ -27,6 +27,11 @@ type BaseProps = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
+  onLongPress?: () => void;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+  delayLongPress?: number;
+  hitSlop?: number;
   icon?: string;
 } & PressableProps &
   IconSlot;
@@ -37,6 +42,11 @@ type Props = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
+  onLongPress?: () => void;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+  delayLongPress?: number;
+  hitSlop?: number;
   icon?: string;
   theme: Theme;
 } & PressableProps &
@@ -46,10 +56,11 @@ function Base({
   Icon,
   icon,
   title,
-  onPress,
   loading,
   disabled,
   style,
+  activeOpacity,
+  disabledOpacity,
   ...props
 }: BaseProps): JSX.Element {
   const {
@@ -91,13 +102,12 @@ function Base({
 
   return (
     <Pressable
-      onPress={onPress}
       disabled={disabled || loading}
       style={({ pressed }) => {
         return [
           styles.base,
           {
-            opacity: pressed || disabled ? 0.75 : 1,
+            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
           },
           buttonStyles,
         ];

package/src/components/Checkbox/Checkbox.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import {
   View,
   StyleSheet,
-  TouchableHighlightProps,
+  Pressable,
+  PressableProps,
   StyleProp,
   ViewStyle,
 } 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/Checkbox/CheckboxGroupRow.tsx

@@ -6,13 +6,13 @@ import {
   TextStyle,
   View,
   Platform,
+  Pressable,
 } from "react-native";
 import Checkbox, { CheckboxProps } from "./Checkbox";
 import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import type { IconSlot } from "../../interfaces/Icon";
 import { Direction as GroupDirection } from "./context";
-import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
 
 export enum Direction {
@@ -92,7 +92,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
   const { textStyles, viewStyles } = extractStyles(style);
 
   return (
-    <Touchable
+    <Pressable
       onPress={handlePress}
       style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
       disabled={disabled}
@@ -125,7 +125,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
           uncheckedColor={uncheckedColor}
         />
       </View>
-    </Touchable>
+    </Pressable>
   );
 };
 

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/DatePicker/DatePicker.tsx

@@ -515,7 +515,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <DateTimePicker
                 value={getValidDate()}
                 mode={mode}
-                displayMode="default"
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
                 onChange={(_event: any, data: any) => {

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -1,20 +1,21 @@
 import React from "react";
+import { Platform } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 
 const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
-  displayMode = "default",
   mode,
   toggleVisibility,
 }) => {
-  return (
+  return Platform.OS === "ios" || Platform.OS === "android" ? (
     <DateTimePickerModal
       date={value}
       mode={mode}
       isVisible={true}
-      display={displayMode}
+      display={Platform.OS === "ios" ? "spinner" : "default"}
       onCancel={() => {
         console.log("Picker cancelled before selecting anything.");
         toggleVisibility();
@@ -23,6 +24,13 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
         onChange(null, data);
       }}
     />
+  ) : (
+    <DateTimePicker
+      value={value}
+      mode={mode}
+      onChange={onChange}
+      display={"default"}
+    />
   );
 };
 

package/src/components/DatePicker/DatePickerComponent.web.tsx

@@ -48,6 +48,7 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
             onChange(null, d);
           }}
           onClose={() => toggleVisibility()}
+          variant="dialog"
           TextFieldComponent={() => null}
         />
       </ThemeProvider>

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -6,14 +6,5 @@ export interface DatePickerComponentProps {
   mode: "date" | "time" | "datetime";
   toggleVisibility: () => void;
   isVisible?: boolean;
-  displayMode?:
-    | "default"
-    | "compact"
-    | "inline"
-    | "spinner"
-    | "clock"
-    | "calendar"
-    | undefined;
-  variant?: "dialog" | "inline" | undefined;
   theme?: typeof theme;
 }

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.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.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Pressable as NativePressable,
+  PressableProps,
+  ViewStyle,
+} from "react-native";
+
+type Props = {
+  style?: ViewStyle;
+  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/Swiper/Swiper.tsx

@@ -19,6 +19,7 @@ export interface SwiperProps<T> {
   keyExtractor: (item: T, index: number) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  onIndexChanged?: (index: number) => void;
 }
 
 const Swiper = ({
@@ -37,6 +38,7 @@ const Swiper = ({
   keyExtractor,
   renderItem,
   children,
+  onIndexChanged,
   style,
 }: SwiperProps<any>) => (
   <View style={style}>
@@ -46,6 +48,7 @@ const Swiper = ({
       loop={loop}
       timeout={timeout}
       vertical={vertical}
+      onIndexChanged={onIndexChanged}
       controlsProps={{
         prevTitle,
         nextTitle,

package/src/components/Touchable.tsx

@@ -1,29 +1,33 @@
 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;
+  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/index.tsx

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

package/src/mappings/Button.ts

@@ -7,11 +7,13 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
+  createStaticNumberProp,
 } 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,38 @@ 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.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false,
+  }),
+  disabledOpacity: createStaticNumberProp({
+    label: "Disabled Opacity",
+    description: "Opacity of the button when disabled.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false,
+  }),
+  delayLongPress: createStaticNumberProp({
+    label: "Delay Long Press",
+    description:
+      "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+    required: false,
+  }),
+  hitSlop: createStaticNumberProp({
+    label: "Hit Slop",
+    description:
+      "Sets additional distance outside of element in which a press can be detected",
+    required: false,
+  }),
 };
 
 export const SEED_DATA = [
@@ -46,7 +74,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "transparent",
       borderWidth: 1,
       textAlign: "center",
@@ -68,7 +97,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -89,7 +119,8 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      ...LAYOUT,
+      borderRadius: 8,
+      fontFamily: "system-700",
       backgroundColor: "primary",
       textAlign: "center",
     },