@draftbit/core 46.10.3-e89832.2 → 46.10.3-fb35c9.2

package/lib/commonjs/index.js

@@ -117,12 +117,6 @@ Object.defineProperty(exports, "CircleImage", {
     return _CircleImage.default;
   }
 });
-Object.defineProperty(exports, "Container", {
-  enumerable: true,
-  get: function () {
-    return _Container.default;
-  }
-});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
@@ -255,24 +249,6 @@ Object.defineProperty(exports, "Row", {
     return _Layout.Row;
   }
 });
-Object.defineProperty(exports, "RowBodyIcon", {
-  enumerable: true,
-  get: function () {
-    return _RowBodyIcon.default;
-  }
-});
-Object.defineProperty(exports, "RowHeadlineImageCaption", {
-  enumerable: true,
-  get: function () {
-    return _RowHeadlineImageCaption.default;
-  }
-});
-Object.defineProperty(exports, "RowHeadlineImageIcon", {
-  enumerable: true,
-  get: function () {
-    return _RowHeadlineImageIcon.default;
-  }
-});
 Object.defineProperty(exports, "SVG", {
   enumerable: true,
   get: function () {
@@ -369,6 +345,24 @@ Object.defineProperty(exports, "TabViewItem", {
     return _TabView.TabViewItem;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.Table;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableRow;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function () {
@@ -428,7 +422,6 @@ var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
 var _AvatarEdit = _interopRequireDefault(require("./components/AvatarEdit"));
 var _Card = _interopRequireDefault(require("./components/Card"));
 var _Checkbox = require("./components/Checkbox");
-var _Container = _interopRequireDefault(require("./components/Container"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _FAB = _interopRequireDefault(require("./components/FAB"));
 var _FieldSearchBarFull = _interopRequireDefault(require("./components/FieldSearchBarFull"));
@@ -455,13 +448,11 @@ var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
 var _BottomSheet = require("./components/BottomSheet");
 var _YoutubePlayer = require("./components/YoutubePlayer");
+var _Table = require("./components/Table");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle"));
-var _RowBodyIcon = _interopRequireDefault(require("./components/RowBodyIcon"));
-var _RowHeadlineImageCaption = _interopRequireDefault(require("./components/RowHeadlineImageCaption"));
-var _RowHeadlineImageIcon = _interopRequireDefault(require("./components/RowHeadlineImageIcon"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Stepper = _interopRequireDefault(require("./components/Stepper"));
 var _useAuthState = require("./components/useAuthState");

package/lib/commonjs/mappings/NativeBase/Layout.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA = {
+  category: _types.COMPONENT_TYPES.layout,
+  packageName: "native-base",
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
+};
+const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = _types.CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== _types.StylesPanelSections.LayoutFlexItems && item !== _types.StylesPanelSections.LayoutContent);
+const SEED_DATA = [{
+  name: "Aspect Ratio",
+  tag: "AspectRatio",
+  description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
+  ...SHARED_SEED_DATA,
+  props: {
+    ratio: (0, _types.createStaticNumberProp)({
+      label: "Ratio",
+      description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
+      defaultValue: 1.33
+    })
+  },
+  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects]
+}, {
+  name: "Box",
+  tag: "Box",
+  description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+  ...SHARED_SEED_DATA
+}, {
+  name: "Center",
+  tag: "Center",
+  description: "Center aligns its contents to the center within itself",
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
+}, {
+  name: "Circle",
+  tag: "Circle",
+  description: "Center aligns its contents to the center within itself with a round border radius",
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
+}, {
+  name: "Container",
+  tag: "Container",
+  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
+  props: {
+    centerContent: (0, _types.createStaticBoolProp)({
+      label: "Center content",
+      description: "Center child elements based on their content width",
+      defaultValue: true
+    })
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Column",
+  tag: "Column",
+  description: "Column aligns items vertically",
+  layout: {
+    flexDirection: "column"
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Row",
+  tag: "Row",
+  description: "Column aligns items horizontally",
+  layout: {
+    flexDirection: "row"
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Spacer",
+  tag: "Spacer",
+  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+  layout: {
+    flex: 1
+  },
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Margins]
+}, {
+  name: "Stack",
+  tag: "Stack",
+  description: "Stack aligns items vertically or horizontally based on the direction prop",
+  ...SHARED_SEED_DATA,
+  props: {
+    isDisabled: (0, _types.createBoolProp)({
+      label: "Disabled",
+      description: "If true, the Stack will be disabled"
+    }),
+    isInvalid: (0, _types.createBoolProp)({
+      label: "Invalid",
+      description: "If true, the Stack will be invalid"
+    })
+  }
+}, {
+  name: "ZStack",
+  tag: "ZStack",
+  description: "ZStack aligns items to the z-axis",
+  ...SHARED_SEED_DATA,
+  props: {
+    reversed: (0, _types.createBoolProp)({
+      label: "Reversed",
+      description: "Determines whether to reverse the direction of items"
+    })
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Table.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA_PROPS = {
+  borderWidth: (0, _types.createStaticNumberProp)({
+    label: "Border Width",
+    description: "Specifies the width of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    required: false,
+    defaultValue: null
+  }),
+  borderColor: (0, _types.createColorProp)({
+    label: "Border Color",
+    description: "Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    defaultValue: null
+  }),
+  borderStyle: (0, _types.createTextEnumProp)({
+    label: "Border Style",
+    description: "Specifies the style of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    options: ["solid", "dotted", "dashed"],
+    defaultValue: null
+  }),
+  drawTopBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Top Border",
+    description: "Whether to draw the top border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawBottomBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Bottom Border",
+    description: "Whether to draw the bottom border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawStartBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Start Border",
+    description: "Whether to draw the start border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawEndBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw End Border",
+    description: "Whether to draw the end border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  cellVerticalPadding: (0, _types.createStaticNumberProp)({
+    label: "Cell Vertical Padding",
+    description: "Specifies the vertical padding of the cell. Passed down to TableCell components unless overridden",
+    required: false,
+    defaultValue: null
+  }),
+  cellHorizontalPadding: (0, _types.createStaticNumberProp)({
+    label: "Cell Horizontal Padding",
+    description: "Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden",
+    required: false,
+    defaultValue: null
+  })
+};
+const SEED_DATA = [{
+  name: "Table",
+  tag: "Table",
+  description: "Top level table container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.Background, _types.StylesPanelSections.LayoutSelectedItem],
+  layout: {
+    flex: 1
+  },
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    borderWidth: {
+      ...SHARED_SEED_DATA_PROPS.borderWidth,
+      defaultValue: 1
+    },
+    borderColor: {
+      ...SHARED_SEED_DATA_PROPS.borderColor,
+      defaultValue: "divider"
+    },
+    borderStyle: {
+      ...SHARED_SEED_DATA_PROPS.borderStyle,
+      defaultValue: "solid"
+    },
+    drawTopBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawTopBorder,
+      defaultValue: true
+    },
+    cellVerticalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellVerticalPadding,
+      defaultValue: 10
+    },
+    cellHorizontalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellHorizontalPadding,
+      defaultValue: 10
+    },
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
+  }
+}, {
+  name: "Table Row",
+  tag: "TableRow",
+  description: "Table Row container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.Background],
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    drawStartBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawStartBorder,
+      defaultValue: true
+    },
+    drawBottomBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawBottomBorder,
+      defaultValue: true
+    },
+    isTableHeader: (0, _types.createStaticBoolProp)({
+      label: "Header",
+      description: "Whether this row is a header or not (changes background and sticks while scrolling)",
+      defaultValue: false
+    })
+  }
+}, {
+  name: "Table Cell",
+  tag: "TableCell",
+  description: "Table Cell container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
+  layout: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    drawEndBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+      defaultValue: true
+    }
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/styles/overlay.js

@@ -15,6 +15,7 @@ function overlay(elevation) {
   let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
   if (isAnimatedValue(elevation)) {
     const inputRange = [0, 1, 2, 3, 8, 24];
+
     // @ts-expect-error: TS doesn't seem to refine the type correctly
     return elevation.interpolate({
       inputRange,
@@ -23,6 +24,7 @@ function overlay(elevation) {
       })
     });
   }
+
   // @ts-expect-error: TS doesn't seem to refine the type correctly
   return calculateColor(surfaceColor, elevation);
 }
@@ -63,4 +65,4 @@ const elevationOverlayTransparency = {
   22: 15.72,
   23: 15.84,
   24: 16
-};};
+};

package/lib/commonjs/utilities.js

@@ -57,6 +57,7 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
     marginStyles
   };
 }
+
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles
@@ -89,4 +90,4 @@ function getValueForRadioButton(value) {
   } else {
     throw new Error("Invalid value: ".concat(value));
   }
-}}
+}

package/lib/module/components/Portal/PortalManager.js

@@ -1,6 +1,3 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 /**
@@ -9,18 +6,47 @@ import { View, StyleSheet } from "react-native";
 export default class PortalManager extends React.PureComponent {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "state", {
+    this.state = {
       portals: []
-    });
-    _defineProperty(this, "mount", (key, children) => {
+    };
+    this.mount = (key, children) => {
       this.setState(state => ({
         portals: [...state.portals, {
           key,
           children
         }]
       }));
+    };
+    this.update = (key, children) => this.setState(state => ({
+      portals: state.portals.map(item => {
+        if (item.key === key) {
+          return {
+            ...item,
+            children
+          };
+        }
+        return item;
+      })
+    }));
+    this.unmount = key => this.setState(state => ({
+      portals: state.portals.filter(item => item.key !== key)
+    }));
+  }
+  render() {
+    return this.state.portals.map(_ref => {
+      let {
+        key,
+        children
+      } = _ref;
+      return /*#__PURE__*/React.createElement(View, {
+        key: key,
+        collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */,
+        pointerEvents: "box-none",
+        style: StyleSheet.absoluteFill
+      }, children);
     });
-    _defineProperty(this, "update", (key, children) => this.setState(state => ({
+  }
+}ey, children) => this.setState(state => ({
       portals: state.portals.map(item => {
         if (item.key === key) {
           return {

package/lib/module/components/Table/Table.js

@@ -0,0 +1,114 @@
+import React from "react";
+import { ScrollView, View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext } from "./TableCommon";
+const Table = _ref => {
+  let {
+    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
+  } = _ref;
+  //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 /*#__PURE__*/React.cloneElement(component, {
+        key
+      });
+    });
+  }, [data, renderItem, keyExtractor, isRenderItem]);
+  const children = isRenderItem ? dataAsChildren : React.Children.toArray(childrenProp);
+  const validChildren = React.useMemo(() => children.filter(item => /*#__PURE__*/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 && nestedHeaders.length) {
+        //New element excluding header children
+        return /*#__PURE__*/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 && 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 /*#__PURE__*/React.createElement(TableStyleContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, borderViewStyle, style]
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, header), /*#__PURE__*/React.createElement(ScrollView, rest, childrenWithoutHeader)));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export default withTheme(Table);rt default withTheme(Table);

package/lib/module/components/Table/TableCell.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext } from "./TableCommon";
+const TableCell = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    borderStyle,
+    drawTopBorder = false,
+    drawBottomBorder = false,
+    drawStartBorder = false,
+    drawEndBorder = true,
+    cellVerticalPadding,
+    cellHorizontalPadding,
+    children,
+    style
+  } = _ref;
+  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 /*#__PURE__*/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/lib/module/components/Table/TableCommon.js

@@ -0,0 +1,21 @@
+import React from "react";
+export const TableStyleContext = /*#__PURE__*/React.createContext({});
+export function generateBorderStyles(_ref) {
+  let {
+    borderColor,
+    borderWidth,
+    borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder
+  } = _ref;
+  return {
+    borderColor,
+    borderStyle,
+    borderTopWidth: drawTopBorder ? borderWidth : 0,
+    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
+    borderStartWidth: drawStartBorder ? borderWidth : 0,
+    borderEndWidth: drawEndBorder ? borderWidth : 0
+  };
+}

package/lib/module/components/Table/TableRow.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext } from "./TableCommon";
+import { withTheme } from "../../theming";
+const TableRow = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    borderStyle,
+    drawTopBorder = false,
+    drawBottomBorder = true,
+    drawStartBorder = true,
+    drawEndBorder = false,
+    cellVerticalPadding,
+    cellHorizontalPadding,
+    isTableHeader = false,
+    children,
+    style,
+    theme
+  } = _ref;
+  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 /*#__PURE__*/React.createElement(TableStyleContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/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);

package/lib/module/components/Table/index.js

@@ -0,0 +1,3 @@
+export { default as Table } from "./Table";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";