@draftbit/core 46.10.3-0bad1e.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,6 +36,7 @@ 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";

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,6 +61,8 @@ 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";

package/src/mappings/NativeBase/Layout.js

@@ -1,9 +1,11 @@
-import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, } from "@draftbit/types";
+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",
@@ -17,6 +19,14 @@ export const SEED_DATA = [
                 defaultValue: 1.33,
             }),
         },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
     },
     {
         name: "Box",
@@ -29,36 +39,59 @@ export const SEED_DATA = [
         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",
@@ -66,16 +99,6 @@ export const SEED_DATA = [
         description: "Stack aligns items vertically or horizontally based on the direction prop",
         ...SHARED_SEED_DATA,
         props: {
-            direction: createTextEnumProp({
-                label: "Direction",
-                description: "The direction of the Stack",
-                options: ["row", "column"],
-                defaultValue: "column",
-            }),
-            reversed: createBoolProp({
-                label: "Reversed",
-                description: "Determines whether to reverse the direction of items",
-            }),
             isDisabled: createBoolProp({
                 label: "Disabled",
                 description: "If true, the Stack will be disabled",

package/src/mappings/NativeBase/Layout.ts

@@ -1,9 +1,10 @@
 import {
   COMPONENT_TYPES,
-  createTextEnumProp,
   createBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   createStaticNumberProp,
+  StylesPanelSections,
+  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SHARED_SEED_DATA = {
@@ -12,6 +13,13 @@ const SHARED_SEED_DATA = {
   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",
@@ -27,6 +35,14 @@ export const SEED_DATA = [
         defaultValue: 1.33,
       }),
     },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.Margins,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
   },
   {
     name: "Box",
@@ -40,6 +56,7 @@ export const SEED_DATA = [
     tag: "Center",
     description: "Center aligns its contents to the center within itself",
     ...SHARED_SEED_DATA,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
   },
   {
     name: "Circle",
@@ -47,24 +64,38 @@ export const SEED_DATA = [
     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,
   },
   {
@@ -72,7 +103,15 @@ export const SEED_DATA = [
     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",
@@ -81,16 +120,6 @@ export const SEED_DATA = [
       "Stack aligns items vertically or horizontally based on the direction prop",
     ...SHARED_SEED_DATA,
     props: {
-      direction: createTextEnumProp({
-        label: "Direction",
-        description: "The direction of the Stack",
-        options: ["row", "column"],
-        defaultValue: "column",
-      }),
-      reversed: createBoolProp({
-        label: "Reversed",
-        description: "Determines whether to reverse the direction of items",
-      }),
       isDisabled: createBoolProp({
         label: "Disabled",
         description: "If true, the Stack will be disabled",