@draftbit/core 47.2.1-a33ddf.2 → 47.2.1-d833e1.2

package/src/components/SwipeableView/SwipeableView.tsx

@@ -0,0 +1,299 @@
+import React from "react";
+import {
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  Text,
+} from "react-native";
+import Pressable from "../Pressable";
+import {
+  extractBorderAndMarginStyles,
+  extractEffectStyles,
+  extractFlexItemStyles,
+  extractPositionStyles,
+  extractSizeStyles,
+  extractStyles,
+} from "../../utilities";
+import { SwipeRow } from "react-native-swipe-list-view";
+import { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import { SwipeableViewButtonProps } from "./SwipeableViewButton";
+import { SwipeableViewSwipeHandlerProps } from "./SwipeableViewSwipeHandler";
+
+export interface SwipeableViewProps extends IconSlot {
+  closeOnPress?: boolean;
+  leftOpenValue?: number;
+  rightOpenValue?: number;
+  leftActivationValue?: number;
+  rightActivationValue?: number;
+  swipeActivationPercentage?: number;
+  stopLeftSwipe?: number;
+  stopRightSwipe?: number;
+  directionalDistanceChangeThreshold?: number;
+  friction?: number;
+  tension?: number;
+  disableLeftSwipe?: boolean;
+  disableRightSwipe?: boolean;
+  swipeToOpenVelocityContribution?: number;
+  swipeToOpenPercent?: number;
+  swipeToClosePercent?: number;
+  style?: StyleProp<ViewStyle | TextStyle>;
+  theme: Theme;
+}
+
+const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
+  theme,
+  style,
+  children,
+  Icon,
+  closeOnPress,
+  leftOpenValue,
+  rightOpenValue,
+  leftActivationValue,
+  rightActivationValue,
+  swipeActivationPercentage = 80,
+  stopLeftSwipe,
+  stopRightSwipe,
+  friction = 20,
+  ...rest
+}) => {
+  const instanceOfSwipeableViewButtonProps = (
+    object: any
+  ): object is SwipeableViewButtonProps => {
+    return "title" in object && "side" in object && "onPress" in object;
+  };
+
+  const instanceOfSwipeableViewSwipeHandlerProps = (
+    object: any
+  ): object is SwipeableViewSwipeHandlerProps => {
+    return "title" in object && "side" in object && "onSwipe" in object;
+  };
+
+  const { viewStyles, textStyles } = extractStyles(style);
+
+  const { borderStyles, marginStyles } =
+    extractBorderAndMarginStyles(viewStyles);
+
+  const parentContainerStyles = StyleSheet.flatten([
+    borderStyles,
+    marginStyles,
+    extractFlexItemStyles(viewStyles),
+    extractPositionStyles(viewStyles),
+    extractEffectStyles(viewStyles),
+    extractSizeStyles(viewStyles),
+  ]);
+
+  //Remove styles already consumed from viewStyles
+  Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+  const surfaceContainerStyles = viewStyles;
+
+  const [componentWidth, setComponentWidth] = React.useState<number | null>(
+    null
+  );
+  const leftButtons = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewButtonProps(child.props) &&
+          child.props.side === "left"
+      ) as React.ReactElement<SwipeableViewButtonProps>[],
+    [children]
+  );
+
+  const rightButtons = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewButtonProps(child.props) &&
+          child.props.side === "right"
+      ) as React.ReactElement<SwipeableViewButtonProps>[],
+    [children]
+  );
+
+  const leftSwipeHandlers = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          child.props.side === "left"
+      ) as React.ReactElement<SwipeableViewSwipeHandlerProps>[],
+    [children]
+  );
+
+  const rightSwipeHandlers = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          child.props.side === "right"
+      ) as React.ReactElement<SwipeableViewSwipeHandlerProps>[],
+    [children]
+  );
+
+  const remainingChildren = React.useMemo(
+    () =>
+      React.Children.toArray(children).filter(
+        (child) =>
+          React.isValidElement(child) &&
+          !instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+          !instanceOfSwipeableViewButtonProps(child.props)
+      ),
+    [children]
+  );
+
+  if (leftButtons.length > 2 || rightButtons.length > 2) {
+    throw Error("Cannot have more than 2 buttons per side");
+  }
+
+  if (leftSwipeHandlers.length > 1 || rightSwipeHandlers.length > 1) {
+    throw Error("Cannot have more than 1 swiper handler per side");
+  }
+
+  if (
+    (leftButtons.length && leftSwipeHandlers.length) ||
+    (rightButtons.length && rightSwipeHandlers.length)
+  ) {
+    throw Error("Cannot combine swiper handler and buttons on the same side");
+  }
+
+  //Renders a single button/item. Used for both buttons and swipe handler
+  const renderBehindItem = (
+    props: SwipeableViewSwipeHandlerProps | SwipeableViewButtonProps,
+    index: number
+  ) => (
+    <Pressable
+      key={index.toString()}
+      onPress={(props as any).onPress}
+      style={[
+        styles.buttonContainer,
+        { backgroundColor: props.backgroundColor || theme.colors.primary },
+      ]}
+    >
+      {props.icon && (
+        <Icon
+          name={props.icon}
+          size={props.iconSize || 25}
+          color={props.color || theme.colors.surface}
+        />
+      )}
+      <Text
+        style={[textStyles, { color: props.color || theme.colors.surface }]}
+      >
+        {props.title}
+      </Text>
+    </Pressable>
+  );
+
+  const isLeftSwipeHandler = !!leftSwipeHandlers.length;
+  const isRightSwipeHandler = !!rightSwipeHandlers.length;
+
+  const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
+  const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
+
+  return (
+    <View
+      onLayout={(event) => {
+        setComponentWidth(event.nativeEvent.layout.width);
+      }}
+      style={[styles.parentContainer, parentContainerStyles]}
+    >
+      {/*@ts-ignore*/}
+      <SwipeRow
+        leftOpenValue={
+          isLeftSwipeHandler ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+        }
+        rightOpenValue={
+          isRightSwipeHandler ? 0 : rightOpenValue || defaultRightOpenValue
+        }
+        leftActivationValue={
+          leftActivationValue || isLeftSwipeHandler
+            ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+            : defaultLeftOpenValue
+        }
+        rightActivationValue={
+          rightActivationValue || isRightSwipeHandler
+            ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+            : defaultRightOpenValue
+        }
+        stopLeftSwipe={stopLeftSwipe || defaultLeftOpenValue}
+        stopRightSwipe={stopRightSwipe || defaultRightOpenValue}
+        onLeftAction={
+          isLeftSwipeHandler
+            ? () => leftSwipeHandlers[0].props.onSwipe?.()
+            : undefined
+        }
+        onRightAction={
+          isRightSwipeHandler
+            ? () => rightSwipeHandlers[0].props.onSwipe?.()
+            : undefined
+        }
+        closeOnRowPress={closeOnPress}
+        friction={friction}
+        {...rest}
+      >
+        <View style={styles.behindContainer}>
+          <View style={styles.behindContainerItem}>
+            {(isLeftSwipeHandler ? leftSwipeHandlers : leftButtons).map(
+              (item, index) => renderBehindItem(item.props, index)
+            )}
+          </View>
+          <View style={styles.behindContainerItem}>
+            {(isRightSwipeHandler ? rightSwipeHandlers : rightButtons).map(
+              (item, index) => renderBehindItem(item.props, index)
+            )}
+          </View>
+        </View>
+        <View
+          style={[
+            styles.surfaceContainer,
+            {
+              backgroundColor: theme.colors.background,
+            },
+            surfaceContainerStyles,
+          ]}
+        >
+          {remainingChildren}
+        </View>
+      </SwipeRow>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  parentContainer: {
+    overflow: "hidden",
+    minHeight: 50,
+  },
+  behindContainer: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    flexDirection: "row",
+  },
+  behindContainerItem: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  buttonContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  surfaceContainer: {
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    padding: 10,
+    alignItems: "center",
+    overflow: "hidden",
+  },
+});
+
+export default withTheme(SwipeableView);

package/src/components/SwipeableView/SwipeableViewButton.js

@@ -0,0 +1,5 @@
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableViewButton = () => {
+    return null;
+};
+export default SwipeableViewButton;

package/src/components/SwipeableView/SwipeableViewButton.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface SwipeableViewButtonProps {
+  title: string;
+  side: "left" | "right";
+  onPress: (() => void) | null; //Not optional in order to always exist in props
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableViewButton: React.FC<SwipeableViewButtonProps> = () => {
+  return null;
+};
+
+export default SwipeableViewButton;

package/src/components/SwipeableView/SwipeableViewSwipeHandler.js

@@ -0,0 +1,5 @@
+//Renders nothing, acts as a wrapper to be used by SwipeableView
+const SwipeableViewSwipeHandler = () => {
+    return null;
+};
+export default SwipeableViewSwipeHandler;

package/src/components/SwipeableView/SwipeableViewSwipeHandler.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export interface SwipeableViewSwipeHandlerProps {
+  title: string;
+  side: "left" | "right";
+  onSwipe: (() => void) | null; //Not optional in order to always exist in props
+  icon?: string;
+  iconSize?: number;
+  backgroundColor?: string;
+  color?: string;
+}
+
+//Renders nothing, acts as a wrapper to be used by SwipeableView
+const SwipeableViewSwipeHandler: React.FC<
+  SwipeableViewSwipeHandlerProps
+> = () => {
+  return null;
+};
+
+export default SwipeableViewSwipeHandler;

package/src/components/SwipeableView/index.js

@@ -0,0 +1,3 @@
+export { default as SwipeableView } from "./SwipeableView";
+export { default as SwipeableViewButton } from "./SwipeableViewButton";
+export { default as SwipeableViewSwipeHandler } from "./SwipeableViewSwipeHandler";

package/src/components/SwipeableView/index.tsx

@@ -0,0 +1,3 @@
+export { default as SwipeableView } from "./SwipeableView";
+export { default as SwipeableViewButton } from "./SwipeableViewButton";
+export { default as SwipeableViewSwipeHandler } from "./SwipeableViewSwipeHandler";

package/src/index.js

@@ -38,6 +38,7 @@ export { default as Markdown } from "./components/Markdown";
 export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
 export { Table, TableRow, TableCell } from "./components/Table";
+export { SwipeableView, SwipeableViewButton, SwipeableViewSwipeHandler, } from "./components/SwipeableView";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -64,6 +64,12 @@ export { YoutubePlayer } from "./components/YoutubePlayer";
 
 export { Table, TableRow, TableCell } from "./components/Table";
 
+export {
+  SwipeableView,
+  SwipeableViewButton,
+  SwipeableViewSwipeHandler,
+} from "./components/SwipeableView";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/BottomSheet.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticNumberProp, createArrayProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticNumberProp, createArrayProp, GROUPS, createTextEnumProp, FORM_TYPES, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Bottom Sheet",
     tag: "BottomSheet",
@@ -11,16 +11,32 @@ export const SEED_DATA = {
             label: "On settle",
             description: "Action to execute when sheet settles on a snap point",
         }),
-        snapPoints: createArrayProp({
-            label: "Snap points",
-            description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
-            defaultValue: ["10%", "50%", "80%"],
+        topSnapPosition: createStaticNumberProp({
+            label: "Top snap position",
+            description: "Top most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "10%",
+            required: false,
+            formType: FORM_TYPES.numeric,
         }),
-        initialSnapIndex: createStaticNumberProp({
-            label: "Initial snap index",
-            description: "Index of the snap point to be used as the initial point",
-            defaultValue: 0,
+        middleSnapPosition: createStaticNumberProp({
+            label: "Middle snap position",
+            description: "Middle postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "50%",
             required: false,
+            formType: FORM_TYPES.numeric,
+        }),
+        bottomSnapPosition: createStaticNumberProp({
+            label: "Bottom snap position",
+            description: "Bottom most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+            defaultValue: "80%",
+            required: false,
+            formType: FORM_TYPES.numeric,
+        }),
+        initialSnapPosition: createTextEnumProp({
+            label: "Initial snap position",
+            description: "Initial snap position that bottom sheet will snap to",
+            options: ["top", "middle", "bottom"],
+            defaultValue: "bottom",
         }),
         showHandle: createStaticBoolProp({
             label: "Show handle",
@@ -59,5 +75,17 @@ export const SEED_DATA = {
             description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
             defaultValue: true,
         }),
+        snapPoints: createArrayProp({
+            label: "Custom Snap points",
+            description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to. Accepts numbers and percentages (minimum 2 snap points). Overrides snap position props",
+            defaultValue: null,
+        }),
+        initialSnapIndex: createStaticNumberProp({
+            label: "Initial snap index",
+            description: "Index of the snap point to be used as the initial point. Overrides initial snap position",
+            defaultValue: null,
+            required: false,
+            group: GROUPS.advanced,
+        }),
     },
 };

package/src/mappings/BottomSheet.ts

@@ -7,6 +7,9 @@ import {
   createColorProp,
   createStaticNumberProp,
   createArrayProp,
+  GROUPS,
+  createTextEnumProp,
+  FORM_TYPES,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -22,17 +25,35 @@ export const SEED_DATA = {
       label: "On settle",
       description: "Action to execute when sheet settles on a snap point",
     }),
-    snapPoints: createArrayProp({
-      label: "Snap points",
+    topSnapPosition: createStaticNumberProp({
+      label: "Top snap position",
       description:
-        "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
-      defaultValue: ["10%", "50%", "80%"],
+        "Top most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "10%",
+      required: false,
+      formType: FORM_TYPES.numeric,
     }),
-    initialSnapIndex: createStaticNumberProp({
-      label: "Initial snap index",
-      description: "Index of the snap point to be used as the initial point",
-      defaultValue: 0,
+    middleSnapPosition: createStaticNumberProp({
+      label: "Middle snap position",
+      description:
+        "Middle postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "50%",
       required: false,
+      formType: FORM_TYPES.numeric,
+    }),
+    bottomSnapPosition: createStaticNumberProp({
+      label: "Bottom snap position",
+      description:
+        "Bottom most postion where bottom sheet can snap to. A numerical value that represents distance from the top",
+      defaultValue: "80%",
+      required: false,
+      formType: FORM_TYPES.numeric,
+    }),
+    initialSnapPosition: createTextEnumProp({
+      label: "Initial snap position",
+      description: "Initial snap position that bottom sheet will snap to",
+      options: ["top", "middle", "bottom"],
+      defaultValue: "bottom",
     }),
     showHandle: createStaticBoolProp({
       label: "Show handle",
@@ -73,5 +94,19 @@ export const SEED_DATA = {
         "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
       defaultValue: true,
     }),
+    snapPoints: createArrayProp({
+      label: "Custom Snap points",
+      description:
+        "An array of numerical values (that represent distance from the top) where bottom sheet can snap to. Accepts numbers and percentages (minimum 2 snap points). Overrides snap position props",
+      defaultValue: null,
+    }),
+    initialSnapIndex: createStaticNumberProp({
+      label: "Initial snap index",
+      description:
+        "Index of the snap point to be used as the initial point. Overrides initial snap position",
+      defaultValue: null,
+      required: false,
+      group: GROUPS.advanced,
+    }),
   },
 };