@draftbit/core 48.0.3-fd9d4e.2 → 48.1.1-02a900.2

package/src/components/Progress/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import Svg, { Line, LineProps } from "react-native-svg";
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  DEFAULT_ANIMATION_DURATION,
+  ValueProgressProps,
+} from "../ProgressCommon";
+
+export const AnimatedLine = Animated.createAnimatedComponent(Line);
+
+export const LinearProgress: React.FC<ValueProgressProps> = ({
+  theme,
+  minimumValue = 0,
+  maximumValue = 100,
+  value = minimumValue,
+  thickness = 10,
+  trackThickness = thickness,
+  color = theme.colors.primary,
+  trackColor = theme.colors.divider,
+  trackOpacity = 1,
+  showTrack = true,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  isAnimated = true,
+  lineCap = "round",
+  trackLineCap = lineCap,
+  dashWidth,
+  trackDashWidth,
+  dashGap,
+  trackDashGap,
+  dashOffset,
+  trackDashOffset,
+  customDashArray,
+  trackCustomDashArray,
+  onFullPathWidth,
+  style,
+  testID,
+}) => {
+  const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
+
+  const dashArray =
+    dashWidth !== undefined
+      ? `${dashWidth} ${dashGap || dashWidth}`
+      : undefined;
+  const trackDashArray =
+    trackDashWidth !== undefined
+      ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
+      : undefined;
+
+  const maxThickness = Math.max(thickness, trackThickness);
+  const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
+
+  const progressLineWidth = svgContainerWidth - thicknessOffset;
+  const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
+
+  const currentFillPercentage = value / (maximumValue + minimumValue);
+  const currentProgressLineWidth = useSharedValue(
+    currentFillPercentage * progressLineWidth
+  );
+
+  const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
+    const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
+    return {
+      x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
+      strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
+    };
+  });
+
+  React.useEffect(() => {
+    currentProgressLineWidth.value = withTiming(
+      progressLineWidth * currentFillPercentage,
+      {
+        duration: isAnimated ? animationDuration : 0,
+      }
+    );
+  }, [
+    value,
+    progressLineWidth,
+    currentFillPercentage,
+    animationDuration,
+    currentProgressLineWidth,
+    maximumValue,
+    minimumValue,
+    isAnimated,
+  ]);
+
+  return (
+    <Svg
+      testID={testID ?? "linear-progress-component"}
+      onLayout={(event) => {
+        const width = event.nativeEvent.layout.width;
+        setSvgContainerWidth(width);
+        onFullPathWidth?.(width);
+      }}
+      style={[
+        {
+          height: maxThickness,
+        },
+        style,
+      ]}
+    >
+      {showTrack && (
+        <Line
+          x1={thicknessOffset}
+          y1={thicknessOffset}
+          x2={trackProgressLineWidth}
+          y2={thicknessOffset}
+          stroke={trackColor}
+          strokeWidth={trackThickness}
+          strokeOpacity={trackOpacity}
+          strokeLinecap={trackLineCap}
+          strokeDasharray={trackCustomDashArray || trackDashArray}
+          strokeDashoffset={trackDashOffset}
+        />
+      )}
+      <AnimatedLine
+        animatedProps={progressLineAnimatedProps}
+        x1={thicknessOffset}
+        y1={thicknessOffset}
+        y2={thicknessOffset}
+        stroke={color}
+        strokeWidth={thickness}
+        strokeLinecap={lineCap}
+        strokeDasharray={customDashArray || dashArray}
+        strokeDashoffset={dashOffset}
+      />
+    </Svg>
+  );
+};

package/src/components/Progress/LinearProgress/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
+import { withTheme } from "../../../theming";
+const LinearProgress = (props) => {
+    if (props.indeterminate) {
+        return (React.createElement(IndeterminateProgress, { ProgressComponent: LinearProgressComponent, ...props }));
+    }
+    else {
+        return React.createElement(LinearProgressComponent, { ...props });
+    }
+};
+export default withTheme(LinearProgress);
+//# sourceMappingURL=index.js.map

package/src/components/Progress/LinearProgress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAK7D,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,cAAc,GAEhB,CAAC,KAAK,EAAE,EAAE;IACZ,IAAI,KAAK,CAAC,aAAa,EAAE;QACvB,OAAO,CACL,oBAAC,qBAAqB,IACpB,iBAAiB,EAAE,uBAAuB,KACtC,KAAK,GACT,CACH,CAAC;KACH;SAAM;QACL,OAAO,oBAAC,uBAAuB,OAAK,KAAK,GAAI,CAAC;KAC/C;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,cAAc,CAAC,CAAC"}

package/src/components/Progress/LinearProgress/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import {
+  IndeterminateProgressProps,
+  ValueProgressProps,
+} from "../ProgressCommon";
+import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
+import { withTheme } from "../../../theming";
+
+const LinearProgress: React.FC<
+  ValueProgressProps & IndeterminateProgressProps
+> = (props) => {
+  if (props.indeterminate) {
+    return (
+      <IndeterminateProgress
+        ProgressComponent={LinearProgressComponent}
+        {...props}
+      />
+    );
+  } else {
+    return <LinearProgressComponent {...props} />;
+  }
+};
+
+export default withTheme(LinearProgress);

package/src/components/Progress/ProgressCommon.js

@@ -0,0 +1,2 @@
+export const DEFAULT_ANIMATION_DURATION = 500;
+//# sourceMappingURL=ProgressCommon.js.map

package/src/components/Progress/ProgressCommon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCommon.js","sourceRoot":"","sources":["ProgressCommon.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC"}

package/src/components/Progress/ProgressCommon.ts

@@ -0,0 +1,44 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+
+type LineCap = "round" | "square";
+
+export const DEFAULT_ANIMATION_DURATION = 500;
+
+export interface BaseProgressProps {
+  thickness?: number;
+  trackThickness?: number;
+  color?: string;
+  trackColor?: string;
+  trackOpacity?: number;
+  showTrack?: boolean;
+  animationDuration?: number;
+  isAnimated?: boolean;
+  lineCap?: LineCap;
+  trackLineCap?: LineCap;
+  dashWidth?: string | number;
+  trackDashWidth?: string | number;
+  dashGap?: string | number;
+  trackDashGap?: string | number;
+  dashOffset?: string | number;
+  trackDashOffset?: string | number;
+  customDashArray?: string;
+  trackCustomDashArray?: string;
+  onFullPathWidth?: (width: number) => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  testID?: string;
+}
+export interface ValueProgressProps extends BaseProgressProps {
+  value?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+}
+
+export interface IndeterminateProgressProps extends BaseProgressProps {
+  indeterminate?: boolean;
+}
+
+export interface CircularProgressProps {
+  startPosition?: "left" | "top" | "right" | "bottom";
+}

package/src/components/SectionList/SectionHeader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { withTheme } from "../../theming";
+const SectionHeader = ({ style, children, }) => React.createElement(View, { style: [style] }, children);
+export const DefaultSectionHeader = withTheme(({ title, theme }) => {
+    return (React.createElement(Text, { testID: "default-section-header", style: {
+            color: theme.colors.background,
+            backgroundColor: theme.colors.primary,
+            fontSize: 16,
+            padding: 10,
+        } }, title));
+});
+export default SectionHeader;
+//# sourceMappingURL=SectionHeader.js.map

package/src/components/SectionList/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO1C,MAAM,aAAa,GAA0D,CAAC,EAC5E,KAAK,EACL,QAAQ,GACT,EAAE,EAAE,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAQ,CAAC;AAM9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAC3C,CAAC,EAAE,KAAK,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9C,OAAO,CACL,oBAAC,IAAI,IACH,MAAM,EAAC,wBAAwB,EAC/B,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YAC9B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YACrC,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;SACZ,IAEA,KAAK,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/SectionList/SectionHeader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, Text } from "react-native";
+import { withTheme } from "../../theming";
+import type { Theme } from "../../styles/DefaultTheme";
+
+interface SectionHeaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
+  style,
+  children,
+}) => <View style={[style]}>{children}</View>;
+
+interface DefaultSectionHeaderProps {
+  title: string;
+  theme: Theme;
+}
+export const DefaultSectionHeader = withTheme(
+  ({ title, theme }: DefaultSectionHeaderProps) => {
+    return (
+      <Text
+        testID="default-section-header"
+        style={{
+          color: theme.colors.background,
+          backgroundColor: theme.colors.primary,
+          fontSize: 16,
+          padding: 10,
+        }}
+      >
+        {title}
+      </Text>
+    );
+  }
+);
+
+export default SectionHeader;

package/src/components/SectionList/SectionList.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { FlashList } from "@shopify/flash-list";
+import { FlatList } from "react-native";
+import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
+export const DEFAULT_SECTION = "Uncategorized";
+const SectionList = ({ sectionKey, listComponent = "FlatList", data: dataProp, renderItem: renderItemProp, ...rest }) => {
+    const data = React.useMemo(() => (dataProp || []), [dataProp]);
+    const dataWithSections = React.useMemo(() => {
+        var _a;
+        const result = [];
+        const sectionDataItems = {};
+        for (const item of data) {
+            const section = ((_a = item[sectionKey]) === null || _a === void 0 ? void 0 : _a.toString()) || DEFAULT_SECTION;
+            if (sectionDataItems[section]) {
+                sectionDataItems[section].push(item);
+            }
+            else {
+                sectionDataItems[section] = [item];
+            }
+        }
+        for (const section in sectionDataItems) {
+            result.push({ type: "SECTION_ITEM", title: section });
+            const sectionItems = sectionDataItems[section].map((item) => ({ type: "DATA_ITEM", data: item }));
+            result.push(...sectionItems);
+        }
+        return result;
+    }, [data, sectionKey]);
+    const extractSectionHeader = (element) => {
+        if (!element) {
+            return null;
+        }
+        const props = element.props || {};
+        const children = React.Children.toArray(props.children).map((child) => child);
+        if (element.type === SectionHeader) {
+            return element;
+        }
+        else {
+            for (const child of children) {
+                if (child.type === SectionHeader) {
+                    return child;
+                }
+            }
+        }
+        return null;
+    };
+    const extractRemainingNonSectionHeader = (element) => {
+        if (!element) {
+            return null;
+        }
+        const props = element.props || {};
+        const children = React.Children.toArray(props.children).map((child) => child);
+        if (element.type === SectionHeader) {
+            return null;
+        }
+        else {
+            const newChildren = [];
+            for (const child of children) {
+                if (child.type !== SectionHeader) {
+                    newChildren.push(child);
+                }
+            }
+            return React.cloneElement(element, {
+                ...props,
+                children: newChildren,
+            });
+        }
+    };
+    const renderItem = ({ item, index, }) => {
+        switch (item.type) {
+            case "SECTION_ITEM": {
+                const renderedItem = renderItemProp({
+                    index,
+                    section: item.title,
+                });
+                return (extractSectionHeader(renderedItem) || (React.createElement(DefaultSectionHeader, { title: item.title })));
+            }
+            case "DATA_ITEM": {
+                const renderedItem = renderItemProp({
+                    item: item.data,
+                    index,
+                    section: item.data[sectionKey] || DEFAULT_SECTION,
+                });
+                return extractRemainingNonSectionHeader(renderedItem);
+            }
+        }
+    };
+    switch (listComponent) {
+        case "FlatList":
+            return (React.createElement(FlatList, { ...rest, data: dataWithSections, renderItem: renderItem }));
+        case "FlashList":
+            return (React.createElement(FlashList, { ...rest, data: dataWithSections, renderItem: renderItem }));
+    }
+};
+export default SectionList;
+//# sourceMappingURL=SectionList.js.map

package/src/components/SectionList/SectionList.js.map

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

package/src/components/SectionList/SectionList.tsx

@@ -0,0 +1,171 @@
+import React from "react";
+import { FlashListProps, FlashList } from "@shopify/flash-list";
+import { FlatListProps, FlatList } from "react-native";
+import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
+
+type ListComponentType = "FlatList" | "FlashList";
+
+interface AdditionalSectionListProps<T> {
+  sectionKey: string;
+  renderItem: (itemInfo: {
+    item?: T;
+    index: number;
+    section: string;
+  }) => JSX.Element;
+  listComponent?: ListComponentType;
+}
+
+type FlatListSectionListProps<T> = Omit<FlatListProps<T>, "renderItem"> &
+  AdditionalSectionListProps<T>;
+
+type FlashListSectionListProps<T> = Omit<FlashListProps<T>, "renderItem"> &
+  AdditionalSectionListProps<T>;
+
+interface SectionListDataItem<T> {
+  type: "DATA_ITEM";
+  data: T;
+}
+
+interface SectionListSectionItem {
+  type: "SECTION_ITEM";
+  title: string;
+}
+
+type SectionListItem<T> = SectionListDataItem<T> | SectionListSectionItem;
+
+export const DEFAULT_SECTION = "Uncategorized";
+
+const SectionList = <T extends { [key: string]: any }>({
+  sectionKey,
+  listComponent = "FlatList",
+  data: dataProp,
+  renderItem: renderItemProp,
+  ...rest
+}: FlatListSectionListProps<T> | FlashListSectionListProps<T>) => {
+  const data = React.useMemo(() => (dataProp || []) as T[], [dataProp]);
+
+  const dataWithSections = React.useMemo(() => {
+    const result: SectionListItem<T>[] = [];
+    const sectionDataItems: { [key: string]: T[] } = {};
+
+    for (const item of data) {
+      const section = item[sectionKey]?.toString() || DEFAULT_SECTION;
+      if (sectionDataItems[section]) {
+        sectionDataItems[section].push(item);
+      } else {
+        sectionDataItems[section] = [item];
+      }
+    }
+
+    for (const section in sectionDataItems) {
+      result.push({ type: "SECTION_ITEM", title: section });
+      const sectionItems: SectionListDataItem<T>[] = sectionDataItems[
+        section
+      ].map((item) => ({ type: "DATA_ITEM", data: item }));
+      result.push(...sectionItems);
+    }
+
+    return result;
+  }, [data, sectionKey]);
+
+  const extractSectionHeader = (
+    element: JSX.Element | null
+  ): JSX.Element | null => {
+    if (!element) {
+      return null;
+    }
+
+    const props = element.props || {};
+    const children = React.Children.toArray(props.children).map(
+      (child) => child as React.ReactElement
+    );
+    if (element.type === SectionHeader) {
+      return element;
+    } else {
+      for (const child of children) {
+        if (child.type === SectionHeader) {
+          return child;
+        }
+      }
+    }
+    return null;
+  };
+
+  const extractRemainingNonSectionHeader = (
+    element: JSX.Element | null
+  ): JSX.Element | null => {
+    if (!element) {
+      return null;
+    }
+
+    const props = element.props || {};
+    const children = React.Children.toArray(props.children).map(
+      (child) => child as React.ReactElement
+    );
+    if (element.type === SectionHeader) {
+      return null;
+    } else {
+      const newChildren = [];
+      for (const child of children) {
+        if (child.type !== SectionHeader) {
+          newChildren.push(child);
+        }
+      }
+      return React.cloneElement(element, {
+        ...props,
+        children: newChildren,
+      });
+    }
+  };
+
+  const renderItem = ({
+    item,
+    index,
+  }: {
+    item: SectionListItem<T>;
+    index: number;
+  }) => {
+    switch (item.type) {
+      case "SECTION_ITEM": {
+        const renderedItem = renderItemProp({
+          index,
+          section: item.title,
+        });
+        return (
+          extractSectionHeader(renderedItem) || (
+            <DefaultSectionHeader title={item.title} />
+          )
+        );
+      }
+      case "DATA_ITEM": {
+        const renderedItem = renderItemProp({
+          item: item.data,
+          index,
+          section: item.data[sectionKey] || DEFAULT_SECTION,
+        });
+        return extractRemainingNonSectionHeader(renderedItem);
+      }
+    }
+  };
+
+  switch (listComponent) {
+    case "FlatList":
+      return (
+        <FlatList
+          {...(rest as FlatListProps<SectionListItem<T>>)}
+          data={dataWithSections}
+          renderItem={renderItem}
+        />
+      );
+    case "FlashList":
+      return (
+        <FlashList
+          {...(rest as FlashListProps<SectionListItem<T>>)}
+          data={dataWithSections}
+          renderItem={renderItem}
+        />
+      );
+  }
+};
+
+export default SectionList;

package/src/components/SectionList/index.js

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

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

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

package/src/components/SectionList/index.tsx

@@ -0,0 +1,2 @@
+export { default as SectionList } from "./SectionList";
+export { default as SectionHeader } from "./SectionHeader";

package/src/components/Table/TableCell.js

@@ -1,7 +1,8 @@
 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, }) => {
+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,
@@ -12,7 +13,8 @@ const TableCell = ({ borderWidth, borderColor, borderStyle, drawTopBorder = fals
         drawStartBorder,
         drawEndBorder,
     });
-    return (React.createElement(View, { style: [
+    const ContainerComponent = onPress ? Pressable : View;
+    return (React.createElement(ContainerComponent, { onPress: onPress, style: [
             styles.cellContainer,
             borderViewStyle,
             {

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

@@ -1 +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;AAMvB,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,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;IACH,OAAO,CACL,oBAAC,IAAI,IACH,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,CACJ,CACR,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"}
+{"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"}

package/src/components/Table/TableCell.tsx

@@ -5,8 +5,10 @@ import {
   TableProps,
   TableStyleContext,
 } from "./TableCommon";
+import Pressable from "../Pressable";
 
 export interface Props extends TableProps {
+  onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -21,6 +23,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   cellVerticalPadding,
   cellHorizontalPadding,
   children,
+  onPress,
   style,
 }) => {
   const parentContextValue = React.useContext(TableStyleContext);
@@ -34,8 +37,11 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
     drawStartBorder,
     drawEndBorder,
   });
+
+  const ContainerComponent = onPress ? Pressable : View;
   return (
-    <View
+    <ContainerComponent
+      onPress={onPress}
       style={[
         styles.cellContainer,
         borderViewStyle,
@@ -49,7 +55,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
       ]}
     >
       {children}
-    </View>
+    </ContainerComponent>
   );
 };
 

package/src/components/Table/TableRow.js

@@ -2,7 +2,8 @@ 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, }) => {
+import Pressable from "../Pressable";
+const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = true, drawStartBorder = true, drawEndBorder = false, cellVerticalPadding, cellHorizontalPadding, isTableHeader = false, children, onPress, 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 = {
@@ -21,8 +22,9 @@ const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false
         drawStartBorder,
         drawEndBorder,
     });
+    const ContainerComponent = onPress ? Pressable : View;
     return (React.createElement(TableStyleContext.Provider, { value: contextValue },
-        React.createElement(View, { style: [
+        React.createElement(ContainerComponent, { onPress: onPress, style: [
                 borderViewStyle,
                 isTableHeader ? { backgroundColor: theme.colors.primary } : {},
                 style,

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["TableRow.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,GAElB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ1C,MAAM,QAAQ,GAA6C,CAAC,EAC1D,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,IAAI,EACvB,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,KAAK,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE/D,uGAAuG;IACvG,MAAM,YAAY,GAAoB;QACpC,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,qBAAqB,EACnB,qBAAqB,IAAI,kBAAkB,CAAC,qBAAqB;QACnE,mBAAmB,EACjB,mBAAmB,IAAI,kBAAkB,CAAC,mBAAmB;KAChE,CAAC;IAEF,MAAM,eAAe,GAAG,oBAAoB,CAAC;QAC3C,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,aAAa;KACd,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QAC7C,oBAAC,IAAI,IACH,KAAK,EAAE;gBACL,eAAe;gBACf,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;gBAC9D,KAAK;gBACL,MAAM,CAAC,cAAc;aACtB,IAEA,QAAQ,CACJ,CACoB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,cAAc,EAAE;QACd,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["TableRow.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,GAElB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,SAAS,MAAM,cAAc,CAAC;AASrC,MAAM,QAAQ,GAA6C,CAAC,EAC1D,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,IAAI,EACvB,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,KAAK,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE/D,uGAAuG;IACvG,MAAM,YAAY,GAAoB;QACpC,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW;QAC1D,qBAAqB,EACnB,qBAAqB,IAAI,kBAAkB,CAAC,qBAAqB;QACnE,mBAAmB,EACjB,mBAAmB,IAAI,kBAAkB,CAAC,mBAAmB;KAChE,CAAC;IAEF,MAAM,eAAe,GAAG,oBAAoB,CAAC;QAC3C,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,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,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QAC7C,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;gBACL,eAAe;gBACf,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;gBAC9D,KAAK;gBACL,MAAM,CAAC,cAAc;aACtB,IAEA,QAAQ,CACU,CACM,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,cAAc,EAAE;QACd,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC,QAAQ,CAAC,CAAC"}