@draftbit/core 46.10.3-ccc53a.2 → 46.10.3-cf3748.2

package/src/components/Table/Table.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+  View,
+  StyleSheet,
+  ScrollViewProps,
+} from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+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>;
+  theme: Theme;
+}
+
+const Table = <T extends object>({
+  theme,
+  borderWidth = 1,
+  borderColor = theme.colors.divider,
+  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,
+  },
+});
+
+export default withTheme(Table);

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 { default as 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 { default as Table } from "./Table";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";

package/src/index.js

@@ -36,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

@@ -61,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/Table.js

@@ -0,0 +1,150 @@
+import { COMPONENT_TYPES, StylesPanelSections, createColorProp, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, } from "@draftbit/types";
+const SHARED_SEED_DATA_PROPS = {
+    borderWidth: createStaticNumberProp({
+        label: "Border Width",
+        description: "Specifies the width of the border. Passed down to child Table(Row/Cell) components unless overridden",
+        required: false,
+        defaultValue: null,
+    }),
+    borderColor: createColorProp({
+        label: "Border Color",
+        description: "Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden",
+        defaultValue: null,
+    }),
+    borderStyle: createTextEnumProp({
+        label: "Border Style",
+        description: "Specifies the style of the border. Passed down to child Table(Row/Cell) components unless overridden",
+        options: ["solid", "dotted", "dashed"],
+        defaultValue: null,
+    }),
+    drawTopBorder: createStaticBoolProp({
+        label: "Draw Top Border",
+        description: "Whether to draw the top border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawBottomBorder: createStaticBoolProp({
+        label: "Draw Bottom Border",
+        description: "Whether to draw the bottom border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawStartBorder: createStaticBoolProp({
+        label: "Draw Start Border",
+        description: "Whether to draw the start border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawEndBorder: createStaticBoolProp({
+        label: "Draw End Border",
+        description: "Whether to draw the end border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    cellVerticalPadding: createStaticNumberProp({
+        label: "Cell Vertical Padding",
+        description: "Specifies the vertical padding of the cell. Passed down to TableCell components unless overridden",
+        required: false,
+        defaultValue: null,
+    }),
+    cellHorizontalPadding: createStaticNumberProp({
+        label: "Cell Horizontal Padding",
+        description: "Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden",
+        required: false,
+        defaultValue: null,
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Table",
+        tag: "Table",
+        description: "Top level table container",
+        category: COMPONENT_TYPES.table,
+        stylesPanelSections: [
+            StylesPanelSections.Size,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+            StylesPanelSections.Background,
+            StylesPanelSections.LayoutSelectedItem,
+        ],
+        layout: {
+            flex: 1,
+        },
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            borderWidth: { ...SHARED_SEED_DATA_PROPS.borderWidth, defaultValue: 1 },
+            borderColor: {
+                ...SHARED_SEED_DATA_PROPS.borderColor,
+                defaultValue: "divider",
+            },
+            borderStyle: {
+                ...SHARED_SEED_DATA_PROPS.borderStyle,
+                defaultValue: "solid",
+            },
+            drawTopBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawTopBorder,
+                defaultValue: true,
+            },
+            cellVerticalPadding: {
+                ...SHARED_SEED_DATA_PROPS.cellVerticalPadding,
+                defaultValue: 10,
+            },
+            cellHorizontalPadding: {
+                ...SHARED_SEED_DATA_PROPS.cellHorizontalPadding,
+                defaultValue: 10,
+            },
+            showsVerticalScrollIndicator: createStaticBoolProp({
+                label: "Show Vertical Scroll Indicator",
+                description: "When true, shows a vertical scroll indicator. The default value is true.",
+                defaultValue: true,
+            }),
+        },
+    },
+    {
+        name: "Table Row",
+        tag: "TableRow",
+        description: "Table Row container",
+        category: COMPONENT_TYPES.table,
+        stylesPanelSections: [StylesPanelSections.Background],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            drawStartBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawStartBorder,
+                defaultValue: true,
+            },
+            drawBottomBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawBottomBorder,
+                defaultValue: true,
+            },
+            isTableHeader: createStaticBoolProp({
+                label: "Header",
+                description: "Whether this row is a header or not (changes background and sticks while scrolling)",
+                defaultValue: false,
+            }),
+        },
+    },
+    {
+        name: "Table Cell",
+        tag: "TableCell",
+        description: "Table Cell container",
+        category: COMPONENT_TYPES.table,
+        stylesPanelSections: [
+            StylesPanelSections.LayoutFlexItems,
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.LayoutContent,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            flex: 1,
+            flexDirection: "row",
+        },
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            drawEndBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+                defaultValue: true,
+            },
+        },
+    },
+];