@draftbit/core 46.11.6-74496c.2 → 46.12.0

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

@@ -5,9 +5,6 @@ export const SEED_DATA = {
     description: "A basic List component",
     category: COMPONENT_TYPES.data,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-        flex: 1,
-    },
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
         onRefresh: createActionProp(),

package/src/mappings/FlatList.ts

@@ -15,9 +15,6 @@ export const SEED_DATA = {
   description: "A basic List component",
   category: COMPONENT_TYPES.data,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1,
-  },
   triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
     onRefresh: createActionProp(),

package/src/mappings/SwipeableView.js

@@ -0,0 +1,181 @@
+import { COMPONENT_TYPES, createStaticNumberProp, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, StylesPanelSections, GROUPS, createBoolProp, createTextProp, createIconProp, createTextEnumProp, createColorProp, Triggers, createActionProp, } from "@draftbit/types";
+export const SHARED_SEED_DATA_PROPS = {
+    title: createTextProp({
+        label: "Title",
+        description: "Title of button/swipeable",
+        defaultValue: "Swipeable",
+        required: true,
+        group: GROUPS.basic,
+    }),
+    side: createTextEnumProp({
+        label: "Side",
+        description: "Side where button/swipeable is added",
+        options: ["left", "right"],
+        defaultValue: "left",
+        required: true,
+    }),
+    icon: createIconProp({
+        defaultValue: null,
+        required: false,
+    }),
+    iconSize: createStaticNumberProp({
+        label: "Icon size",
+        description: "Size of icon",
+        defaultValue: 25,
+        required: false,
+    }),
+    backgroundColor: createColorProp({
+        label: "Background color",
+        description: "Color of button/swipeable background",
+        defaultValue: "primary",
+    }),
+    color: createColorProp({
+        label: "Color",
+        description: "Color of text and icon of button/swipeable",
+        defaultValue: "surface",
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Swipeable View",
+        tag: "SwipeableView",
+        doc_link: "https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeRow.md",
+        description: "A swipeable view that is able to show hidden buttons and/or handle swipe events",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [
+            ...CONTAINER_COMPONENT_STYLES_SECTIONS,
+            StylesPanelSections.Typography,
+        ],
+        layout: {
+            overflow: "hidden",
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 10,
+        },
+        props: {
+            closeOnPress: createStaticBoolProp({
+                label: "Close on press",
+                description: "Whether the view should be closed/dismissed when pressed",
+                defaultValue: true,
+            }),
+            swipeActivationPercentage: createStaticNumberProp({
+                label: "Swipe activation percentage",
+                description: "Percentage of swipe completion needed to trigger onSwipe. Overriden by 'Left activation value' and 'Right activation value'",
+                defaultValue: 80,
+                required: false,
+            }),
+            disableLeftSwipe: createBoolProp({
+                label: "Disable left swipe",
+                description: "Whether left swipe is enabled or not",
+                defaultValue: true,
+            }),
+            disableRightSwipe: createBoolProp({
+                label: "Disable right swipe",
+                description: "Whether right swipe is enabled or not",
+                defaultValue: true,
+            }),
+            leftOpenValue: createStaticNumberProp({
+                label: "Left open value",
+                description: "The X translation value that left swipe snaps to (positive value). Defaults to half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            rightOpenValue: createStaticNumberProp({
+                label: "Right open value",
+                description: "The X translation value that right swipe snaps to (negative value). Defaults to negative half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            leftActivationValue: createStaticNumberProp({
+                label: "Left activation value",
+                description: "The X translation value that triggers onSwipe when surpassed (positive value). Defaults to 80% of half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            rightActivationValue: createStaticNumberProp({
+                label: "Right activation value",
+                description: "The X translation value that triggers onSwipe when surpassed (negative value). Defaults to negative 80% of half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            stopLeftSwipe: createStaticNumberProp({
+                label: "Stop left swipe",
+                description: "The maximum X translation value that is swipable from left (positive value). Defaults to half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            stopRightSwipe: createStaticNumberProp({
+                label: "Stop right swipe",
+                description: "The maximum X translation value that is swipable from right (negative value). Defaults to negative half view width",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            directionalDistanceChangeThreshold: createStaticNumberProp({
+                label: "Change threshold",
+                description: "Change the sensitivity of the swipe on the view",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            friction: createStaticNumberProp({
+                label: "Friction",
+                description: "Controls the 'bounciness' of the swipe animation",
+                defaultValue: 20,
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            tension: createStaticNumberProp({
+                label: "Change threshold",
+                description: "Controls the tension/speed of the swipe animation",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            swipeToOpenVelocityContribution: createStaticNumberProp({
+                label: "Swipe Velocity Contribution",
+                description: "Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15",
+                group: GROUPS.advanced,
+                required: false,
+            }),
+            swipeToOpenPercent: createStaticNumberProp({
+                label: "Swipe to open percentage",
+                description: "What % of the left/right does the user need to swipe past to trigger the view opening",
+                group: GROUPS.advanced,
+                defaultValue: 50,
+                required: false,
+            }),
+            swipeToClosePercent: createStaticNumberProp({
+                label: "Swipe to close percentage",
+                description: "What % of the left/right does the user need to swipe past to trigger the view closing",
+                group: GROUPS.advanced,
+                defaultValue: 50,
+                required: false,
+            }),
+        },
+    },
+    {
+        name: "Swipeable View Button",
+        tag: "SwipeableViewButton",
+        description: "Button to be rendered under a Swipeable View",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [],
+        triggers: [Triggers.OnPress],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onPress: createActionProp(),
+        },
+    },
+    {
+        name: "Swipeable View Swipe Handler",
+        tag: "SwipeableViewSwipeHandler",
+        description: "Component that renders and handles swipe of Swipeable View",
+        category: COMPONENT_TYPES.testing /*.view*/,
+        stylesPanelSections: [],
+        triggers: [Triggers.OnSwipe],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onSwipe: createActionProp({
+                label: "On swipe",
+                description: "Called when Swipeable View swiped in the direction this is configured to",
+            }),
+        },
+    },
+];