@draftbit/core 47.1.1-ee131b.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/components/TabView/TabView.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
+const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
+    const [index, setIndex] = React.useState(0);
+    const [routes, setRoutes] = React.useState([]);
+    const [tabScenes, setTabScenes] = React.useState({});
+    const { textStyles, viewStyles } = extractStyles(style);
+    //Check type of child using props
+    //Regular '.type' cannot work because Draftbit strips the type in Draft view
+    const instanceOfTabViewItemProps = (object) => {
+        return "title" in object;
+    };
+    //Populate routes and scenes based on children
+    React.useEffect(() => {
+        const newRoutes = [];
+        const scenes = {};
+        React.Children.toArray(children)
+            .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
+            .forEach((item, idx) => {
+            const child = item;
+            newRoutes.push({
+                key: idx.toString(),
+                title: child.props.title,
+                icon: child.props.icon,
+                accessibilityLabel: child.props.accessibilityLabel,
+            });
+            scenes[idx] = () => child;
+        });
+        setRoutes(newRoutes);
+        setTabScenes(scenes);
+    }, [children]);
+    const indexChangeHandler = (i) => {
+        setIndex(i);
+        onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+        if (i === routes.length) {
+            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+        }
+    };
+    const renderTabBar = (props) => {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+                backgroundColor: indicatorColor || theme.colors.primary,
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
+                backgroundColor: tabsBackgroundColor || theme.colors.background,
+            } }));
+    };
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default withTheme(TabViewComponent);

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import {
+  TabView,
+  TabBar,
+  SceneMap,
+  SceneRendererProps,
+  NavigationState,
+  Route,
+} from "react-native-tab-view";
+
+import { TabViewItemProps } from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+import { withTheme } from "../../theming";
+import type { Theme } from "../../styles/DefaultTheme";
+import { extractStyles } from "../../utilities";
+
+type TabBarProps = SceneRendererProps & {
+  navigationState: NavigationState<any>;
+};
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  tabsBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
+  Icon,
+  onIndexChanged,
+  onEndReached,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  tabsBackgroundColor,
+  style,
+  theme,
+  children,
+}) => {
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState<Route[]>([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = (
+    object: any
+  ): object is TabViewItemProps => {
+    return "title" in object;
+  };
+
+  //Populate routes and scenes based on children
+  React.useEffect(() => {
+    const newRoutes: Route[] = [];
+    const scenes: any = {};
+
+    React.Children.toArray(children)
+      .filter(
+        (child) =>
+          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
+      )
+      .forEach((item: any, idx) => {
+        const child = item as React.ReactElement;
+        newRoutes.push({
+          key: idx.toString(),
+          title: child.props.title,
+          icon: child.props.icon,
+          accessibilityLabel: child.props.accessibilityLabel,
+        });
+        scenes[idx] = () => child;
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = (i: number) => {
+    setIndex(i);
+    onIndexChanged?.(i);
+    if (i === routes.length) {
+      onEndReached?.();
+    }
+  };
+
+  const renderTabBar: React.FC<TabBarProps> = (props) => {
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor || theme.colors.primary}
+        inactiveColor={inactiveColor || "rgb(200,200,200)"}
+        pressColor={pressColor || theme.colors.primary}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{
+          backgroundColor: indicatorColor || theme.colors.primary,
+        }}
+        labelStyle={textStyles}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={16} />
+          ) : null
+        }
+        style={{
+          backgroundColor: tabsBackgroundColor || theme.colors.background,
+        }}
+      />
+    );
+  };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return <></>;
+  }
+
+  return (
+    <TabView
+      style={[viewStyles]}
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default withTheme(TabViewComponent);

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+const TabViewItem = ({ style, children, }) => {
+    return React.createElement(View, { style: [styles.parentContainer, style] }, children);
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        flex: 1,
+    },
+});
+export default TabViewItem;

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+
+//Props used by parent (TabView) to create tabs
+export interface TabViewItemProps {
+  title: string;
+  icon?: string;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>> = ({
+  style,
+  children,
+}) => {
+  return <View style={[styles.parentContainer, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  parentContainer: {
+    flex: 1,
+  },
+});
+
+export default TabViewItem;

package/src/components/TabView/index.js

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/components/TabView/index.tsx

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";