@draftbit/core 46.11.1-0339d0.2 → 46.11.1-138467.2

package/src/components/SwipeableView/SwipeableView.tsx

@@ -1,299 +0,0 @@
-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

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

package/src/components/SwipeableView/SwipeableViewButton.tsx

@@ -1,18 +0,0 @@
-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

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

package/src/components/SwipeableView/SwipeableViewSwipeHandler.tsx

@@ -1,20 +0,0 @@
-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

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

package/src/components/SwipeableView/index.tsx

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

package/src/mappings/NativeBase/Layout.js

@@ -1,111 +0,0 @@
-import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
-const SHARED_SEED_DATA = {
-    category: COMPONENT_TYPES.testing /*.layout*/,
-    packageName: "native-base",
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-};
-const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = CONTAINER_COMPONENT_STYLES_SECTIONS.filter((item) => item !== StylesPanelSections.LayoutFlexItems &&
-    item !== StylesPanelSections.LayoutContent);
-export const SEED_DATA = [
-    {
-        name: "Aspect Ratio",
-        tag: "AspectRatio",
-        description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
-        ...SHARED_SEED_DATA,
-        props: {
-            ratio: createStaticNumberProp({
-                label: "Ratio",
-                description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
-                defaultValue: 1.33,
-            }),
-        },
-        stylesPanelSections: [
-            StylesPanelSections.Background,
-            StylesPanelSections.Size,
-            StylesPanelSections.Margins,
-            StylesPanelSections.Position,
-            StylesPanelSections.Borders,
-            StylesPanelSections.Effects,
-        ],
-    },
-    {
-        name: "Box",
-        tag: "Box",
-        description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
-        ...SHARED_SEED_DATA,
-    },
-    {
-        name: "Center",
-        tag: "Center",
-        description: "Center aligns its contents to the center within itself",
-        ...SHARED_SEED_DATA,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
-    },
-    {
-        name: "Circle",
-        tag: "Circle",
-        description: "Center aligns its contents to the center within itself with a round border radius",
-        ...SHARED_SEED_DATA,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
-    },
-    {
-        name: "Column",
-        tag: "Column",
-        description: "Column aligns items vertically",
-        layout: {
-            flexDirection: "column",
-        },
-        ...SHARED_SEED_DATA,
-    },
-    {
-        name: "Row",
-        tag: "Row",
-        description: "Column aligns items horizontally",
-        layout: {
-            flexDirection: "row",
-        },
-        ...SHARED_SEED_DATA,
-    },
-    {
-        name: "Spacer",
-        tag: "Spacer",
-        description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
-        layout: {
-            flex: 1,
-        },
-        ...SHARED_SEED_DATA,
-        stylesPanelSections: [
-            StylesPanelSections.LayoutSelectedItem,
-            StylesPanelSections.Background,
-            StylesPanelSections.Margins,
-        ],
-    },
-    {
-        name: "Stack",
-        tag: "Stack",
-        description: "Stack aligns items vertically or horizontally based on the direction prop",
-        ...SHARED_SEED_DATA,
-        props: {
-            isDisabled: createBoolProp({
-                label: "Disabled",
-                description: "If true, the Stack will be disabled",
-            }),
-            isInvalid: createBoolProp({
-                label: "Invalid",
-                description: "If true, the Stack will be invalid",
-            }),
-        },
-    },
-    {
-        name: "ZStack",
-        tag: "ZStack",
-        description: "ZStack aligns items to the z-axis",
-        ...SHARED_SEED_DATA,
-        props: {
-            reversed: createBoolProp({
-                label: "Reversed",
-                description: "Determines whether to reverse the direction of items",
-            }),
-        },
-    },
-];

package/src/mappings/NativeBase/Layout.ts

@@ -1,130 +0,0 @@
-import {
-  COMPONENT_TYPES,
-  createBoolProp,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
-  createStaticNumberProp,
-  StylesPanelSections,
-} from "@draftbit/types";
-
-const SHARED_SEED_DATA = {
-  category: COMPONENT_TYPES.testing /*.layout*/,
-  packageName: "native-base",
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-};
-
-const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX =
-  CONTAINER_COMPONENT_STYLES_SECTIONS.filter(
-    (item) =>
-      item !== StylesPanelSections.LayoutFlexItems &&
-      item !== StylesPanelSections.LayoutContent
-  );
-
-export const SEED_DATA = [
-  {
-    name: "Aspect Ratio",
-    tag: "AspectRatio",
-    description:
-      "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
-    ...SHARED_SEED_DATA,
-    props: {
-      ratio: createStaticNumberProp({
-        label: "Ratio",
-        description:
-          "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
-        defaultValue: 1.33,
-      }),
-    },
-    stylesPanelSections: [
-      StylesPanelSections.Background,
-      StylesPanelSections.Size,
-      StylesPanelSections.Margins,
-      StylesPanelSections.Position,
-      StylesPanelSections.Borders,
-      StylesPanelSections.Effects,
-    ],
-  },
-  {
-    name: "Box",
-    tag: "Box",
-    description:
-      "This is a generic component for low level layout needs. It is similar to a div in HTML",
-    ...SHARED_SEED_DATA,
-  },
-  {
-    name: "Center",
-    tag: "Center",
-    description: "Center aligns its contents to the center within itself",
-    ...SHARED_SEED_DATA,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
-  },
-  {
-    name: "Circle",
-    tag: "Circle",
-    description:
-      "Center aligns its contents to the center within itself with a round border radius",
-    ...SHARED_SEED_DATA,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
-  },
-  {
-    name: "Column",
-    tag: "Column",
-    description: "Column aligns items vertically",
-    layout: {
-      flexDirection: "column",
-    },
-    ...SHARED_SEED_DATA,
-  },
-  {
-    name: "Row",
-    tag: "Row",
-    description: "Column aligns items horizontally",
-    layout: {
-      flexDirection: "row",
-    },
-    ...SHARED_SEED_DATA,
-  },
-  {
-    name: "Spacer",
-    tag: "Spacer",
-    description:
-      "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
-    layout: {
-      flex: 1,
-    },
-    ...SHARED_SEED_DATA,
-    stylesPanelSections: [
-      StylesPanelSections.LayoutSelectedItem,
-      StylesPanelSections.Background,
-      StylesPanelSections.Margins,
-    ],
-  },
-  {
-    name: "Stack",
-    tag: "Stack",
-    description:
-      "Stack aligns items vertically or horizontally based on the direction prop",
-    ...SHARED_SEED_DATA,
-    props: {
-      isDisabled: createBoolProp({
-        label: "Disabled",
-        description: "If true, the Stack will be disabled",
-      }),
-      isInvalid: createBoolProp({
-        label: "Invalid",
-        description: "If true, the Stack will be invalid",
-      }),
-    },
-  },
-  {
-    name: "ZStack",
-    tag: "ZStack",
-    description: "ZStack aligns items to the z-axis",
-    ...SHARED_SEED_DATA,
-    props: {
-      reversed: createBoolProp({
-        label: "Reversed",
-        description: "Determines whether to reverse the direction of items",
-      }),
-    },
-  },
-];