@draftbit/core 46.10.3-93b2ea.2 → 46.10.3-b95a8c.2

package/src/components/RowBodyIcon.js

@@ -1,8 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import Config from "./Config";
-const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
-};
-export default withTheme(RowBodyIcon);

package/src/components/RowBodyIcon.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-import Row from "./Row";
-import Config from "./Config";
-import { StyleProp, ViewStyle } from "react-native";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  icon: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  title,
-  subtitle,
-  icon,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.body1}
-      titleColor={colors.medium}
-      subtitleTypeStyle={typography.subtitle2}
-      subtitleColor={colors.light}
-      title={title}
-      subtitle={subtitle}
-      right={() => (
-        <Icon
-          name={icon}
-          size={Config.rowSingleLineIconSize}
-          color={colors.light}
-          style={{ marginLeft: 16 }}
-        />
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowBodyIcon);

package/src/components/RowHeadlineImageCaption.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { Text } from "react-native";
-import { withTheme } from "../theming";
-import Row from "./Row";
-const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
-                ...typography.caption,
-                color: colors.strong,
-                marginLeft: 16,
-            } }, caption)), style: style }));
-};
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageCaption.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Text, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  caption?: string;
-  image: string | ImageSourcePropType;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
-  title,
-  subtitle,
-  caption,
-  image,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.headline6}
-      titleColor={colors.strong}
-      subtitleTypeStyle={typography.body2}
-      subtitleColor={colors.medium}
-      title={title}
-      subtitle={subtitle}
-      image={image}
-      right={() => (
-        <Text
-          style={{
-            ...typography.caption,
-            color: colors.strong,
-            marginLeft: 16,
-          }}
-        >
-          {caption}
-        </Text>
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import Config from "./Config";
-const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
-                ? Config.rowMultiLineIconSize
-                : Config.rowSingleLineIconSize, color: colors.light, style: {
-                marginLeft: 16,
-                alignSelf: multilineSubtitle ? "flex-start" : "center",
-                marginTop: multilineSubtitle ? 4 : 0,
-            } })), style: style }));
-};
-export default withTheme(RowHeadlineImageIcon);

package/src/components/RowHeadlineImageIcon.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-import Row from "./Row";
-import Config from "./Config";
-import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-
-type Props = {
-  title?: string;
-  image: string | ImageSourcePropType;
-  subtitle?: string;
-  multilineSubtitle?: boolean;
-  icon: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const RowHeadlineImageIcon: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  icon,
-  title,
-  image,
-  subtitle,
-  multilineSubtitle = false,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.headline6}
-      titleColor={colors.strong}
-      subtitleTypeStyle={typography.body2}
-      subtitleColor={colors.medium}
-      title={title}
-      subtitle={subtitle}
-      multilineSubtitle={multilineSubtitle}
-      image={image}
-      right={() => (
-        <Icon
-          name={icon}
-          size={
-            multilineSubtitle
-              ? Config.rowMultiLineIconSize
-              : Config.rowSingleLineIconSize
-          }
-          color={colors.light}
-          style={{
-            marginLeft: 16,
-            alignSelf: multilineSubtitle ? "flex-start" : "center",
-            marginTop: multilineSubtitle ? 4 : 0,
-          }}
-        />
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowHeadlineImageIcon);

package/src/components/Table/Table.js

@@ -1,93 +0,0 @@
-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 = 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);

package/src/components/Table/Table.tsx

@@ -1,176 +0,0 @@
-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 = 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

@@ -1,31 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

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

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

package/src/components/Table/TableRow.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
-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);