@draftbit/core 46.10.2 → 46.10.3-106fd0.2

package/src/components/Table/Table.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+  View,
+  StyleSheet,
+  ScrollViewProps,
+} from "react-native";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+  TableStyleProps,
+} from "./index";
+
+export interface Props<T> extends TableProps, ScrollViewProps {
+  data?: Array<T>;
+  keyExtractor?: (item: T, index: number) => string;
+  renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Table = <T extends object>({
+  borderWidth = 1,
+  borderColor = "rgba(200, 200, 200, 1)",
+  borderStyle = "solid",
+  drawTopBorder = true,
+  drawBottomBorder = false,
+  drawStartBorder = false,
+  drawEndBorder = false,
+  cellVerticalPadding = 10,
+  cellHorizontalPadding = 10,
+  data,
+  keyExtractor,
+  renderItem,
+  children: childrenProp,
+  style,
+  ...rest
+}: React.PropsWithChildren<Props<T>>) => {
+  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+  if ((data && !renderItem) || (renderItem && !data)) {
+    throw new Error(
+      "'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both"
+    );
+  }
+
+  if (data && renderItem && childrenProp) {
+    console.warn(
+      "'children' of Table ignored due to usage of 'data' and 'renderItem'"
+    );
+  }
+
+  const isTableHeader = React.useCallback((object: any): boolean => {
+    return object.isTableHeader;
+  }, []);
+
+  const isRenderItem = data && renderItem;
+
+  //Uses 'renderItem' and 'data' to create an array of children
+  const dataAsChildren = React.useMemo(() => {
+    if (!isRenderItem) return [];
+
+    return data.map((item, index) => {
+      const component = renderItem({ item, index });
+
+      if (!component) {
+        return null;
+      }
+
+      const key = keyExtractor ? keyExtractor(item, index) : index.toString();
+      return React.cloneElement(component, {
+        key,
+      });
+    });
+  }, [data, renderItem, keyExtractor, isRenderItem]);
+
+  const children = isRenderItem
+    ? dataAsChildren
+    : React.Children.toArray(childrenProp);
+
+  const validChildren = React.useMemo(
+    () =>
+      (children as any[]).filter((item) =>
+        React.isValidElement(item)
+      ) as React.ReactElement[],
+    [children]
+  );
+
+  const childrenWithoutHeader = React.useMemo(() => {
+    const flattenedWithoutNestedHeaders = validChildren.map((item) => {
+      const nestedChildren = React.Children.toArray(
+        item.props.children
+      ) as any[];
+      //Header can be nested in React.Fragment when in renderItem
+      const nestedHeaders = nestedChildren.filter((child: any) =>
+        isTableHeader(child.props)
+      );
+      if (nestedHeaders?.length) {
+        //New element excluding header children
+        return React.cloneElement(item, {
+          children: nestedChildren.filter(
+            (child: any) => !isTableHeader(child.props)
+          ),
+        });
+      }
+      return item;
+    });
+
+    return flattenedWithoutNestedHeaders.filter(
+      (item) => !isTableHeader(item.props)
+    );
+  }, [validChildren, isTableHeader]);
+
+  const header = React.useMemo(() => {
+    const flattenedPossibleHeaders = validChildren.map((item) => {
+      const nestedChildren = React.Children.toArray(
+        item.props.children
+      ) as any[];
+      //Header can be nested in React.Fragment when in renderItem
+      const nestedHeaders = nestedChildren.filter((child: any) =>
+        isTableHeader(child.props)
+      );
+      if (nestedHeaders?.length) {
+        return nestedHeaders[0];
+      }
+      return item;
+    });
+    const allHeaders = flattenedPossibleHeaders.filter((item) =>
+      isTableHeader(item.props)
+    );
+    if (allHeaders.length) {
+      return allHeaders[0]; //Only 1 header taken
+    }
+    return null;
+  }, [validChildren, isTableHeader]);
+
+  const contextValue: TableStyleProps = {
+    borderColor,
+    borderStyle,
+    borderWidth,
+    cellHorizontalPadding,
+    cellVerticalPadding,
+  };
+
+  const borderViewStyle = generateBorderStyles({
+    borderColor,
+    borderWidth,
+    borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder,
+  });
+
+  return (
+    <TableStyleContext.Provider value={contextValue}>
+      <View style={[styles.container, borderViewStyle, style]}>
+        <>{header}</>
+        <ScrollView {...rest}>{childrenWithoutHeader}</ScrollView>
+      </View>
+    </TableStyleContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/Table/TableCell.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext } from "./index";
+const TableCell = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = true, cellVerticalPadding, cellHorizontalPadding, children, style, }) => {
+    const parentContextValue = React.useContext(TableStyleContext);
+    const borderViewStyle = generateBorderStyles({
+        borderColor: borderColor || parentContextValue.borderColor,
+        borderWidth: borderWidth || parentContextValue.borderWidth,
+        borderStyle: borderStyle || parentContextValue.borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(View, { style: [
+            styles.cellContainer,
+            borderViewStyle,
+            {
+                paddingVertical: cellVerticalPadding || parentContextValue.cellVerticalPadding,
+                paddingHorizontal: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+            },
+            style,
+        ] }, children));
+};
+const styles = StyleSheet.create({
+    cellContainer: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default TableCell;

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { generateBorderStyles, TableProps, TableStyleContext } from "./index";
+
+export interface Props extends TableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
+  borderWidth,
+  borderColor,
+  borderStyle,
+  drawTopBorder = false,
+  drawBottomBorder = false,
+  drawStartBorder = false,
+  drawEndBorder = true,
+  cellVerticalPadding,
+  cellHorizontalPadding,
+  children,
+  style,
+}) => {
+  const parentContextValue = React.useContext(TableStyleContext);
+
+  const borderViewStyle = generateBorderStyles({
+    borderColor: borderColor || parentContextValue.borderColor,
+    borderWidth: borderWidth || parentContextValue.borderWidth,
+    borderStyle: borderStyle || parentContextValue.borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder,
+  });
+  return (
+    <View
+      style={[
+        styles.cellContainer,
+        borderViewStyle,
+        {
+          paddingVertical:
+            cellVerticalPadding || parentContextValue.cellVerticalPadding,
+          paddingHorizontal:
+            cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});
+
+export default TableCell;

package/src/components/Table/TableRow.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext, } from "./index";
+import { withTheme } from "../../theming";
+const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = true, drawStartBorder = true, drawEndBorder = false, cellVerticalPadding, cellHorizontalPadding, isTableHeader = false, children, style, theme, }) => {
+    const parentContextValue = React.useContext(TableStyleContext);
+    //Create context to use and pass to children based on own props or fall back to parent provided context
+    const contextValue = {
+        borderColor: borderColor || parentContextValue.borderColor,
+        borderStyle: borderStyle || parentContextValue.borderStyle,
+        borderWidth: borderWidth || parentContextValue.borderWidth,
+        cellHorizontalPadding: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+        cellVerticalPadding: cellVerticalPadding || parentContextValue.cellVerticalPadding,
+    };
+    const borderViewStyle = generateBorderStyles({
+        borderColor: contextValue.borderColor,
+        borderWidth: contextValue.borderWidth,
+        borderStyle: contextValue.borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(TableStyleContext.Provider, { value: contextValue },
+        React.createElement(View, { style: [
+                borderViewStyle,
+                isTableHeader ? { backgroundColor: theme.colors.primary } : {},
+                style,
+                styles.cellsContainer,
+            ] }, children)));
+};
+const styles = StyleSheet.create({
+    cellsContainer: {
+        flexDirection: "row",
+    },
+});
+export default withTheme(TableRow);

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+  TableStyleProps,
+} from "./index";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface Props extends TableProps {
+  isTableHeader?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
+  borderWidth,
+  borderColor,
+  borderStyle,
+  drawTopBorder = false,
+  drawBottomBorder = true,
+  drawStartBorder = true,
+  drawEndBorder = false,
+  cellVerticalPadding,
+  cellHorizontalPadding,
+  isTableHeader = false,
+  children,
+  style,
+  theme,
+}) => {
+  const parentContextValue = React.useContext(TableStyleContext);
+
+  //Create context to use and pass to children based on own props or fall back to parent provided context
+  const contextValue: TableStyleProps = {
+    borderColor: borderColor || parentContextValue.borderColor,
+    borderStyle: borderStyle || parentContextValue.borderStyle,
+    borderWidth: borderWidth || parentContextValue.borderWidth,
+    cellHorizontalPadding:
+      cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+    cellVerticalPadding:
+      cellVerticalPadding || parentContextValue.cellVerticalPadding,
+  };
+
+  const borderViewStyle = generateBorderStyles({
+    borderColor: contextValue.borderColor,
+    borderWidth: contextValue.borderWidth,
+    borderStyle: contextValue.borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder,
+  });
+  return (
+    <TableStyleContext.Provider value={contextValue}>
+      <View
+        style={[
+          borderViewStyle,
+          isTableHeader ? { backgroundColor: theme.colors.primary } : {},
+          style,
+          styles.cellsContainer,
+        ]}
+      >
+        {children}
+      </View>
+    </TableStyleContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellsContainer: {
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableRow);

package/src/components/Table/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+export const TableStyleContext = React.createContext({});
+export function generateBorderStyles({ borderColor, borderWidth, borderStyle, drawTopBorder, drawBottomBorder, drawStartBorder, drawEndBorder, }) {
+    return {
+        borderColor,
+        borderStyle,
+        borderTopWidth: drawTopBorder ? borderWidth : 0,
+        borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+        borderStartWidth: drawStartBorder ? borderWidth : 0,
+        borderEndWidth: drawEndBorder ? borderWidth : 0,
+    };
+}
+export { Table } from "./Table";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";

package/src/components/Table/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+
+type BorderStyle = "solid" | "dotted" | "dashed";
+
+export const TableStyleContext = React.createContext<TableStyleProps>({});
+
+export interface TableStyleProps {
+  borderWidth?: number;
+  borderColor?: string;
+  borderStyle?: BorderStyle;
+  cellVerticalPadding?: number;
+  cellHorizontalPadding?: number;
+}
+
+export interface TableProps extends TableStyleProps {
+  drawTopBorder?: boolean;
+  drawBottomBorder?: boolean;
+  drawStartBorder?: boolean;
+  drawEndBorder?: boolean;
+}
+
+export function generateBorderStyles({
+  borderColor,
+  borderWidth,
+  borderStyle,
+  drawTopBorder,
+  drawBottomBorder,
+  drawStartBorder,
+  drawEndBorder,
+}: TableProps): ViewStyle {
+  return {
+    borderColor,
+    borderStyle,
+    borderTopWidth: drawTopBorder ? borderWidth : 0,
+    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+    borderStartWidth: drawStartBorder ? borderWidth : 0,
+    borderEndWidth: drawEndBorder ? borderWidth : 0,
+  };
+}
+
+export { Table } from "./Table";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";

package/src/index.js

@@ -10,7 +10,6 @@ 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,14 +36,12 @@ export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
+export { Table, TableRow, TableCell } from "./components/Table";
 /* 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,7 +11,6 @@ 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";
@@ -62,14 +61,13 @@ export { BottomSheet } from "./components/BottomSheet";
 
 export { YoutubePlayer } from "./components/YoutubePlayer";
 
+export { Table, TableRow, TableCell } from "./components/Table";
+
 /* 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/NativeBase/Layout.js

@@ -0,0 +1,124 @@
+import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+    category: COMPONENT_TYPES.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: "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",
+        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",
+            }),
+        },
+    },
+];