@draftbit/core 46.9.1-200936.2 → 46.9.1-258aa2.2

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

@@ -0,0 +1,327 @@
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection?: undefined;
+    };
+    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: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            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;
+        };
+    };
+} | {
+    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;
+        };
+        isTableHeader: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        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;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    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;
+        };
+        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;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+})[];
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6FrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.9.1-200936.2+200936e",
+  "version": "46.9.1-258aa2.2+258aa22",
   "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.9.1-200936.2+200936e",
+    "@draftbit/types": "^46.9.1-258aa2.2+258aa22",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -96,5 +96,5 @@
       ]
     ]
   },
-  "gitHead": "200936ee0d452b1ab256bd1d2cbe18017e703f8b"
+  "gitHead": "258aa2278e6c2b74dba1cd565f04cd5b024aa2ca"
 }

package/src/components/Table/Table.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { ScrollView, View, StyleSheet, } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+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, }) => {
+    //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(() => validChildren.filter((item) => !isTableHeader(item.props)), [validChildren, isTableHeader]);
+    const headers = React.useMemo(() => validChildren.filter((item) => isTableHeader(item.props)), [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, headers),
+            React.createElement(ScrollView, null, childrenWithoutHeader))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default withTheme(Table);

package/src/components/Table/Table.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+  View,
+  StyleSheet,
+} from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+  TableStyleProps,
+} from "./TableCommon";
+
+export interface Props<T> extends TableProps {
+  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,
+}: 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(
+    () => validChildren.filter((item) => !isTableHeader(item.props)),
+    [validChildren, isTableHeader]
+  );
+
+  const headers = React.useMemo(
+    () => validChildren.filter((item) => isTableHeader(item.props)),
+    [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]}>
+        <>{headers}</>
+        <ScrollView>{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 "./TableCommon";
+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,63 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+} from "./TableCommon";
+
+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/TableCommon.js

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

package/src/components/Table/TableCommon.ts

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