@draftbit/core 46.10.3-fbd333.2 → 46.11.1-0339d0.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

@@ -10,6 +10,7 @@ export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
 export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
 export { default as CircleImage } from "./components/CircleImage";
+export { default as Container } from "./components/Container";
 export { default as Divider } from "./components/Divider";
 export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
@@ -37,11 +38,15 @@ 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";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
+export { default as RowBodyIcon } from "./components/RowBodyIcon";
+export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
+export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";

package/src/index.tsx

@@ -11,6 +11,7 @@ export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
 export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
 export { default as CircleImage } from "./components/CircleImage";
+export { default as Container } from "./components/Container";
 export { default as Divider } from "./components/Divider";
 export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
@@ -63,11 +64,20 @@ 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";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
+export { default as RowBodyIcon } from "./components/RowBodyIcon";
+export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
+export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";

package/src/mappings/Container.js

@@ -0,0 +1,30 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Container",
+    tag: "Container",
+    description: "A container component with gutter padding",
+    category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        height: 250,
+    },
+    props: {
+        useThemeGutterPadding: {
+            group: GROUPS.basic,
+            label: "Use gutter padding",
+            description: "When true, uses the theme gutter spacing as the container's horizontal padding",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            defaultValue: false,
+            editable: false,
+            required: true,
+        },
+        backgroundImage: createImageProp({
+            label: "Background Image",
+            description: "Apply a custom background image",
+            defaultValue: null,
+        }),
+        backgroundImageResizeMode: createResizeModeProp(),
+        elevation: createElevationType(0),
+    },
+};

package/src/mappings/Container.ts

@@ -0,0 +1,41 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createElevationType,
+  createImageProp,
+  createResizeModeProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Container",
+  tag: "Container",
+  description: "A container component with gutter padding",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    height: 250,
+  },
+  props: {
+    useThemeGutterPadding: {
+      group: GROUPS.basic,
+      label: "Use gutter padding",
+      description:
+        "When true, uses the theme gutter spacing as the container's horizontal padding",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: false,
+      editable: false,
+      required: true,
+    },
+    backgroundImage: createImageProp({
+      label: "Background Image",
+      description: "Apply a custom background image",
+      defaultValue: null,
+    }),
+    backgroundImageResizeMode: createResizeModeProp(),
+    elevation: createElevationType(0),
+  },
+};

package/src/mappings/Layout.js

@@ -31,7 +31,7 @@ export const SEED_DATA = [
     {
         name: "Spacer",
         tag: "Spacer",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         props: {
             top: {
                 label: "Top",
@@ -106,7 +106,7 @@ export const SEED_DATA = [
     {
         name: "Center",
         tag: "Center",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             width: {
@@ -144,7 +144,7 @@ export const SEED_DATA = [
     {
         name: "Circle",
         tag: "Circle",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {
@@ -172,7 +172,7 @@ export const SEED_DATA = [
     {
         name: "Square",
         tag: "Square",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {

package/src/mappings/Layout.ts

@@ -38,7 +38,7 @@ export const SEED_DATA = [
   {
     name: "Spacer",
     tag: "Spacer",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     props: {
       top: {
         label: "Top",
@@ -113,7 +113,7 @@ export const SEED_DATA = [
   {
     name: "Center",
     tag: "Center",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       width: {
@@ -151,7 +151,7 @@ export const SEED_DATA = [
   {
     name: "Circle",
     tag: "Circle",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
@@ -179,7 +179,7 @@ export const SEED_DATA = [
   {
     name: "Square",
     tag: "Square",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {

package/src/mappings/NativeBase/Layout.js

@@ -1,6 +1,6 @@
-import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
 const SHARED_SEED_DATA = {
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.testing /*.layout*/,
     packageName: "native-base",
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };
@@ -48,19 +48,6 @@ export const SEED_DATA = [
         ...SHARED_SEED_DATA,
         stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
     },
-    {
-        name: "Container",
-        tag: "Container",
-        description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
-        props: {
-            centerContent: createStaticBoolProp({
-                label: "Center content",
-                description: "Center child elements based on their content width",
-                defaultValue: true,
-            }),
-        },
-        ...SHARED_SEED_DATA,
-    },
     {
         name: "Column",
         tag: "Column",

package/src/mappings/NativeBase/Layout.ts

@@ -4,11 +4,10 @@ import {
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   createStaticNumberProp,
   StylesPanelSections,
-  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SHARED_SEED_DATA = {
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.testing /*.layout*/,
   packageName: "native-base",
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };
@@ -66,20 +65,6 @@ export const SEED_DATA = [
     ...SHARED_SEED_DATA,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
   },
-  {
-    name: "Container",
-    tag: "Container",
-    description:
-      "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
-    props: {
-      centerContent: createStaticBoolProp({
-        label: "Center content",
-        description: "Center child elements based on their content width",
-        defaultValue: true,
-      }),
-    },
-    ...SHARED_SEED_DATA,
-  },
   {
     name: "Column",
     tag: "Column",