@draftbit/core 46.8.1-1b6459.2 → 46.8.1-61264d.2

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

@@ -0,0 +1,314 @@
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    props: {
+        borderWidth: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            options: never[];
+        };
+        drawTopBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        callHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        drawBottomBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawStartBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawEndBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+    layout?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    props: {
+        drawStartBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawBottomBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        callHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderWidth: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        drawTopBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawEndBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+    layout?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection: string;
+    };
+    props: {
+        drawEndBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        verticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        horizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderWidth: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        drawTopBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawBottomBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawStartBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+})[];
+//# 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":"AA0DA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsGrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.8.1-1b6459.2+1b64593",
+  "version": "46.8.1-61264d.2+61264d3",
   "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.8.1-1b6459.2+1b64593",
+    "@draftbit/types": "^46.8.1-61264d.2+61264d3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -92,5 +92,5 @@
       ]
     ]
   },
-  "gitHead": "1b64593d591a225b64dc1a4fd0afbdcf3de444ef"
+  "gitHead": "61264d30c8d88a2b2f3ef07bd44d44f682b838d4"
 }

package/src/components/Table/Table.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles } from "./TableCommon";
+import TableRow from "./TableRow";
+const Table = ({ theme, borderWidth = 1, borderColor = theme.colors.divider, borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, callHorizontalPadding = 10, children, style, }) => {
+    //Populate each TableRow props with default values provided here
+    const populatedTableRows = React.useMemo(() => React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === TableRow) {
+            const oldProps = { ...child.props };
+            const newProps = {
+                cellVerticalPadding: oldProps.cellVerticalPadding || cellVerticalPadding,
+                callHorizontalPadding: oldProps.callHorizontalPadding || callHorizontalPadding,
+                borderWidth: oldProps.borderWidth || borderWidth,
+                borderColor: oldProps.borderColor || borderColor,
+                borderStyle: oldProps.borderStyle || borderStyle,
+            };
+            return React.cloneElement(child, newProps);
+        }
+        return child;
+    }), [
+        children,
+        borderColor,
+        borderWidth,
+        borderStyle,
+        cellVerticalPadding,
+        callHorizontalPadding,
+    ]);
+    const borderViewStyle = generateBorderStyles({
+        borderColor,
+        borderWidth,
+        borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(View, { style: [styles.container, borderViewStyle, style] }, populatedTableRows));
+};
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+export default withTheme(Table);

package/src/components/Table/Table.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableBorderProps } from "./TableCommon";
+import TableRow, { TableRowProps } from "./TableRow";
+
+export interface TableProps extends TableBorderProps {
+  cellVerticalPadding?: number;
+  callHorizontalPadding?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
+  theme,
+  borderWidth = 1,
+  borderColor = theme.colors.divider,
+  borderStyle = "solid",
+  drawTopBorder = true,
+  drawBottomBorder = false,
+  drawStartBorder = false,
+  drawEndBorder = false,
+  cellVerticalPadding = 10,
+  callHorizontalPadding = 10,
+  children,
+  style,
+}) => {
+  //Populate each TableRow props with default values provided here
+  const populatedTableRows = React.useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === TableRow) {
+          const oldProps = { ...(child.props as TableRowProps) };
+          const newProps: TableRowProps = {
+            cellVerticalPadding:
+              oldProps.cellVerticalPadding || cellVerticalPadding,
+            callHorizontalPadding:
+              oldProps.callHorizontalPadding || callHorizontalPadding,
+            borderWidth: oldProps.borderWidth || borderWidth,
+            borderColor: oldProps.borderColor || borderColor,
+            borderStyle: oldProps.borderStyle || borderStyle,
+          };
+
+          return React.cloneElement(child, newProps);
+        }
+        return child;
+      }),
+    [
+      children,
+      borderColor,
+      borderWidth,
+      borderStyle,
+      cellVerticalPadding,
+      callHorizontalPadding,
+    ]
+  );
+
+  const borderViewStyle = generateBorderStyles({
+    borderColor,
+    borderWidth,
+    borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder,
+  });
+
+  return (
+    <View style={[styles.container, borderViewStyle, style]}>
+      {populatedTableRows}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
+export default withTheme(Table);

package/src/components/Table/TableCell.js

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

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { generateBorderStyles, TableBorderProps } from "./TableCommon";
+
+export interface TableCellProps extends TableBorderProps {
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
+  borderWidth,
+  borderColor,
+  borderStyle,
+  drawTopBorder = false,
+  drawBottomBorder = false,
+  drawStartBorder = false,
+  drawEndBorder = true,
+  verticalPadding,
+  horizontalPadding,
+  children,
+  style,
+}) => {
+  const borderViewStyle = generateBorderStyles({
+    borderColor,
+    borderWidth,
+    borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder,
+  });
+  return (
+    <View
+      style={[
+        styles.cellContainer,
+        borderViewStyle,
+        {
+          paddingVertical: verticalPadding,
+          paddingHorizontal: horizontalPadding,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});
+
+export default TableCell;

package/src/components/Table/TableCommon.js

@@ -0,0 +1,10 @@
+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,
+    };
+}

package/src/components/Table/TableCommon.ts

@@ -0,0 +1,32 @@
+import { ViewStyle } from "react-native";
+
+type BorderStyle = "solid" | "dotted" | "dashed";
+
+export interface TableBorderProps {
+  borderWidth?: number;
+  borderColor?: string;
+  borderStyle?: BorderStyle;
+  drawTopBorder?: boolean;
+  drawBottomBorder?: boolean;
+  drawStartBorder?: boolean;
+  drawEndBorder?: boolean;
+}
+
+export function generateBorderStyles({
+  borderColor,
+  borderWidth,
+  borderStyle,
+  drawTopBorder,
+  drawBottomBorder,
+  drawStartBorder,
+  drawEndBorder,
+}: TableBorderProps): ViewStyle {
+  return {
+    borderColor,
+    borderStyle,
+    borderTopWidth: drawTopBorder ? borderWidth : 0,
+    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+    borderStartWidth: drawStartBorder ? borderWidth : 0,
+    borderEndWidth: drawEndBorder ? borderWidth : 0,
+  };
+}

package/src/components/Table/TableRow.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles } from "./TableCommon";
+import TableCell from "./TableCell";
+const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = true, drawStartBorder = true, drawEndBorder = false, cellVerticalPadding, callHorizontalPadding, children, style, }) => {
+    //Populate each TableCell props with default values provided here
+    const populatedTableCells = React.useMemo(() => React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === TableCell) {
+            const oldProps = { ...child.props };
+            const newProps = {
+                verticalPadding: oldProps.verticalPadding || cellVerticalPadding,
+                horizontalPadding: oldProps.horizontalPadding || callHorizontalPadding,
+                borderWidth: oldProps.borderWidth || borderWidth,
+                borderColor: oldProps.borderColor || borderColor,
+                borderStyle: oldProps.borderStyle || borderStyle,
+            };
+            return React.cloneElement(child, newProps);
+        }
+        return child;
+    }), [
+        children,
+        borderColor,
+        borderWidth,
+        borderStyle,
+        cellVerticalPadding,
+        callHorizontalPadding,
+    ]);
+    const borderViewStyle = generateBorderStyles({
+        borderColor,
+        borderWidth,
+        borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(View, { style: [borderViewStyle, style, styles.cellsContainer] }, populatedTableCells));
+};
+const styles = StyleSheet.create({
+    cellsContainer: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default TableRow;