@draftbit/core 48.5.6 → 48.5.7-efd08d.2

package/src/components/TabView/TabViewItem.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
-
-interface TabViewItemProps {
-  title: string;
-  icon?: string;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>> = ({
-  style,
-  children,
-}) => {
-  return <View style={[styles.parentContainer, style]}>{children}</View>;
-};
-
-const styles = StyleSheet.create({
-  parentContainer: {
-    flex: 1,
-  },
-});
-
-export default TabViewItem;
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+
+interface TabViewItemProps {
+  title: string;
+  icon?: string;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>> = ({
+  style,
+  children,
+}) => {
+  return <View style={[styles.parentContainer, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  parentContainer: {
+    flex: 1,
+  },
+});
+
+export default TabViewItem;

package/src/components/TabView/index.js

@@ -0,0 +1,3 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";
+//# sourceMappingURL=index.js.map

package/src/components/TabView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/src/components/TabView/index.tsx

@@ -1,2 +1,2 @@
-export { default as TabView } from "./TabView";
-export { default as TabViewItem } from "./TabViewItem";
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/components/Table/Table.js

@@ -0,0 +1,94 @@
+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, ...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 = Array.isArray(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);
+//# sourceMappingURL=Table.js.map

package/src/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["Table.tsx"],"names":[],"mappings":"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"}

package/src/components/Table/Table.tsx

@@ -1,176 +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 "./TableCommon";
-
-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 = Array.isArray(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);
+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 "./TableCommon";
+
+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 = Array.isArray(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,34 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+import Pressable from "../Pressable";
+const TableCell = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = true, cellVerticalPadding, cellHorizontalPadding, children, onPress, 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,
+    });
+    const ContainerComponent = onPress ? Pressable : View;
+    return (React.createElement(ContainerComponent, { onPress: onPress, 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;
+//# sourceMappingURL=TableCell.js.map

package/src/components/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,UAAU,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EACL,oBAAoB,EAEpB,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,cAAc,CAAC;AAOrC,MAAM,SAAS,GAA6C,CAAC,EAC3D,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,KAAK,EACxB,eAAe,GAAG,KAAK,EACvB,aAAa,GAAG,IAAI,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,oBAAoB,CAAC;QAC3C,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACtD,OAAO,CACL,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL,MAAM,CAAC,aAAa;YACpB,eAAe;YACf;gBACE,eAAe,EACb,mBAAmB,IAAI,kBAAkB,CAAC,mBAAmB;gBAC/D,iBAAiB,EACf,qBAAqB,IAAI,kBAAkB,CAAC,qBAAqB;aACpE;YACD,KAAK;SACN,IAEA,QAAQ,CACU,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,aAAa,EAAE;QACb,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}