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

package/lib/typescript/src/mappings/{CardBlock.d.ts → Table.d.ts}

@@ -3,69 +3,97 @@ export declare const SEED_DATA: ({
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection?: undefined;
+    };
     props: {
-        numColumns: {
+        borderWidth: {
+            defaultValue: number;
             label: string;
             description: string;
-            group: string;
             formType: string;
             propType: string;
-            defaultValue: number;
+            group: string;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        image: {
+        borderColor: {
+            defaultValue: string;
             group: string;
             label: string;
             description: string;
+            editable: boolean;
+            required: boolean;
             formType: string;
             propType: string;
-            defaultValue: null;
+        };
+        borderStyle: {
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
             editable: boolean;
             required: boolean;
+            formType: string;
+            propType: string;
+            options: never[];
         };
-        title: {
-            group: string;
+        drawTopBorder: {
+            defaultValue: boolean;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
             editable: boolean;
             required: boolean;
-        };
-        leftDescription: {
             group: string;
+        };
+        cellVerticalPadding: {
+            defaultValue: number;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            group: string;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        rightDescription: {
-            group: string;
+        cellHorizontalPadding: {
+            defaultValue: number;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            group: string;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        aspectRatio: {
-            group: string;
+        showsVerticalScrollIndicator: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: number;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
+            group: string;
         };
-        titleCentered: {
+        drawBottomBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
             group: string;
+        };
+        drawStartBorder: {
             label: string;
             description: string;
             formType: string;
@@ -73,217 +101,237 @@ export declare const SEED_DATA: ({
             defaultValue: boolean;
             editable: boolean;
             required: boolean;
+            group: string;
         };
-        elevation: {
-            defaultValue: any;
+        drawEndBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            options: number[];
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
             group: string;
         };
     };
-    stylesPanelSections?: undefined;
 } | {
     name: string;
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     props: {
-        icon: {
-            group: string;
+        drawStartBorder: {
+            defaultValue: boolean;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
             editable: boolean;
             required: boolean;
+            group: string;
         };
-        numColumns: {
+        drawBottomBorder: {
+            defaultValue: boolean;
             label: string;
             description: string;
-            group: string;
             formType: string;
             propType: string;
-            defaultValue: number;
             editable: boolean;
             required: boolean;
-        };
-        image: {
             group: string;
+        };
+        isTableHeader: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        title: {
             group: string;
+        };
+        borderWidth: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        leftDescription: {
+        borderColor: {
             group: string;
             label: string;
             description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
-            defaultValue: string;
+        };
+        borderStyle: {
+            group: string;
+            label: string;
+            description: string;
             editable: boolean;
             required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
         };
-        rightDescription: {
-            group: string;
+        drawTopBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        aspectRatio: {
             group: string;
+        };
+        drawEndBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: number;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        titleCentered: {
             group: string;
+        };
+        cellVerticalPadding: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        elevation: {
-            defaultValue: any;
+        cellHorizontalPadding: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            options: number[];
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
-            group: string;
+            step: number;
         };
     };
-    stylesPanelSections?: undefined;
+    layout?: undefined;
 } | {
     name: string;
     tag: string;
     description: string;
     category: string;
     stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection: string;
+    };
     props: {
-        icon: {
-            group: string;
+        drawEndBorder: {
+            defaultValue: boolean;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
             editable: boolean;
             required: boolean;
+            group: string;
         };
-        numColumns: {
+        borderWidth: {
             label: string;
             description: string;
-            group: string;
             formType: string;
             propType: string;
-            defaultValue: number;
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        image: {
+        borderColor: {
             group: string;
             label: string;
             description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
             editable: boolean;
             required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
         };
-        title: {
+        borderStyle: {
             group: string;
             label: string;
             description: string;
-            formType: string;
-            propType: string;
-            defaultValue: string;
             editable: boolean;
             required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
         };
-        leftDescription: {
-            group: string;
+        drawTopBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        rightDescription: {
             group: string;
+        };
+        drawBottomBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        aspectRatio: {
             group: string;
+        };
+        drawStartBorder: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: number;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-        };
-        titleCentered: {
             group: string;
+        };
+        cellVerticalPadding: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        elevation: {
-            defaultValue: any;
+        cellHorizontalPadding: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            options: number[];
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
-            group: string;
+            step: number;
         };
     };
 })[];
-//# sourceMappingURL=CardBlock.d.ts.map
+//# sourceMappingURL=Table.d.ts.map

package/lib/typescript/src/mappings/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Table.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.10.3-ccc53a.2+ccc53a3",
+  "version": "46.10.3-cf3748.2+cf37488",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.10.3-ccc53a.2+ccc53a3",
+    "@draftbit/types": "^46.10.3-cf3748.2+cf37488",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -100,5 +100,5 @@
       ]
     ]
   },
-  "gitHead": "ccc53a3f778652bec8705f21cb35a109c091642a"
+  "gitHead": "cf37488982c9f617ee126da24adba23bcab663dc"
 }

package/src/components/Table/Table.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { ScrollView, View, StyleSheet, } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext, } from "./index";
+const Table = ({ 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 }) => {
+    //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) => {
+        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.filter((item) => React.isValidElement(item)), [children]);
+    const childrenWithoutHeader = React.useMemo(() => {
+        const flattenedWithoutNestedHeaders = validChildren.map((item) => {
+            const nestedChildren = React.Children.toArray(item.props.children);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
+                //New element excluding header children
+                return React.cloneElement(item, {
+                    children: nestedChildren.filter((child) => !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);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : 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 = {
+        borderColor,
+        borderStyle,
+        borderWidth,
+        cellHorizontalPadding,
+        cellVerticalPadding,
+    };
+    const borderViewStyle = generateBorderStyles({
+        borderColor,
+        borderWidth,
+        borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(TableStyleContext.Provider, { value: contextValue },
+        React.createElement(View, { style: [styles.container, borderViewStyle, style] },
+            React.createElement(React.Fragment, null, header),
+            React.createElement(ScrollView, { ...rest }, childrenWithoutHeader))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default withTheme(Table);