@draftbit/core 46.9.1-26da3e.2 → 46.9.1-2a60b8.2

package/src/mappings/ActionSheet.ts

@@ -10,7 +10,10 @@ export const SEED_DATA = {
   tag: "ActionSheet",
   description: "Action Sheet container",
   category: COMPONENT_TYPES.actionsheet,
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+  stylesPanelSections: [
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   props: {
     visible: createStaticBoolProp({
       group: GROUPS.data,

package/src/mappings/ActionSheetCancel.js

@@ -3,7 +3,10 @@ export const SEED_DATA = {
     name: "Action Sheet Cancel",
     tag: "ActionSheetCancel",
     description: "Action Sheet cancel",
-    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+    stylesPanelSections: [
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     category: COMPONENT_TYPES.actionsheet,
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/ActionSheetCancel.ts

@@ -12,7 +12,10 @@ export const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+  stylesPanelSections: [
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   props: {

package/src/mappings/ActionSheetItem.js

@@ -4,7 +4,10 @@ export const SEED_DATA = {
     tag: "ActionSheetItem",
     description: "Action Sheet item",
     category: COMPONENT_TYPES.actionsheet,
-    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+    stylesPanelSections: [
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     triggers: [Triggers.OnPress],
     layout: {
         textAlign: "center",

package/src/mappings/ActionSheetItem.ts

@@ -13,7 +13,10 @@ export const SEED_DATA = {
   tag: "ActionSheetItem",
   description: "Action Sheet item",
   category: COMPONENT_TYPES.actionsheet,
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+  stylesPanelSections: [
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   triggers: [Triggers.OnPress],
   layout: {
     textAlign: "center",

package/src/mappings/MapCallout.js

@@ -1,9 +1,13 @@
-import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Callout",
     tag: "MapCallout",
     packageName: "@draftbit/maps",
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     description: "An info window to display on top of a marker when it is clicked",
     category: COMPONENT_TYPES.map,
     triggers: [Triggers.OnPress],

package/src/mappings/MapCallout.ts

@@ -4,14 +4,18 @@ import {
   createBoolProp,
   GROUPS,
   Triggers,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   description:
     "An info window to display on top of a marker when it is clicked",
   category: COMPONENT_TYPES.map,

package/src/mappings/MapMarker.js

@@ -1,11 +1,15 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
     packageName: "@draftbit/maps",
     description: "A marker to show inside map view",
     category: COMPONENT_TYPES.map,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {},
     props: {
         latitude: createNumberProp({

package/src/mappings/MapMarker.ts

@@ -5,7 +5,7 @@ import {
   createNumberProp,
   createTextProp,
   GROUPS,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,7 +14,11 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: COMPONENT_TYPES.map,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
   props: {
     latitude: createNumberProp({

package/src/mappings/YoutubePlayer.js

@@ -0,0 +1,37 @@
+import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES, createStaticBoolProp, createTextProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Youtube Player",
+    tag: "YoutubePlayer",
+    description: "Plays a youtube video form a Youtube video or playlist id",
+    doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+    code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+    category: COMPONENT_TYPES.media,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        height: 250,
+    },
+    props: {
+        videoId: createTextProp({
+            label: "Video ID",
+            description: "VideoId of the Youtube video.",
+            defaultValue: null,
+        }),
+        playlist: createTextProp({
+            label: "Playlist",
+            description: "Playlist of the Youtube videos.",
+            defaultValue: null,
+        }),
+        mute: createStaticBoolProp({
+            label: "Mute Audio",
+            description: "Mute the audio of the video.",
+            defaultValue: false,
+            required: false,
+        }),
+        autoplay: createStaticBoolProp({
+            label: "Auto Play",
+            description: "Autoplay the video on load.",
+            defaultValue: false,
+            required: false,
+        }),
+    },
+};

package/src/mappings/YoutubePlayer.ts

@@ -0,0 +1,43 @@
+import {
+  BLOCK_STYLES_SECTIONS,
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  createTextProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Youtube Player",
+  tag: "YoutubePlayer",
+  description: "Plays a youtube video form a Youtube video or playlist id",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    height: 250,
+  },
+  props: {
+    videoId: createTextProp({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: null,
+    }),
+    playlist: createTextProp({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: null,
+    }),
+    mute: createStaticBoolProp({
+      label: "Mute Audio",
+      description: "Mute the audio of the video.",
+      defaultValue: false,
+      required: false,
+    }),
+    autoplay: createStaticBoolProp({
+      label: "Auto Play",
+      description: "Autoplay the video on load.",
+      defaultValue: false,
+      required: false,
+    }),
+  },
+};

package/lib/commonjs/components/Table/Table.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _theming = require("../../theming");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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,
-    children,
-    style
-  } = _ref;
-  const contextValue = {
-    borderColor,
-    borderStyle,
-    borderWidth,
-    cellHorizontalPadding,
-    cellVerticalPadding
-  };
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor,
-    borderWidth,
-    borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    style: [borderViewStyle, style]
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Table);
-exports.default = _default;

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

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableCell = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = false,
-    drawStartBorder = false,
-    drawEndBorder = true,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    children,
-    style
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor: borderColor || parentContextValue.borderColor,
-    borderWidth: borderWidth || parentContextValue.borderWidth,
-    borderStyle: borderStyle || parentContextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.cellContainer, borderViewStyle, {
-      paddingVertical: cellVerticalPadding || parentContextValue.cellVerticalPadding,
-      paddingHorizontal: cellHorizontalPadding || parentContextValue.cellHorizontalPadding
-    }, style]
-  }, children);
-};
-const styles = _reactNative.StyleSheet.create({
-  cellContainer: {
-    flex: 1,
-    flexDirection: "row"
-  }
-});
-var _default = TableCell;
-exports.default = _default;

package/lib/commonjs/components/Table/TableCommon.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableStyleContext = void 0;
-exports.generateBorderStyles = generateBorderStyles;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableStyleContext = /*#__PURE__*/_react.default.createContext({});
-exports.TableStyleContext = TableStyleContext;
-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/commonjs/components/Table/TableRow.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableRow = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = true,
-    drawStartBorder = true,
-    drawEndBorder = false,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    children,
-    style
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.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 = (0, _TableCommon.generateBorderStyles)({
-    borderColor: contextValue.borderColor,
-    borderWidth: contextValue.borderWidth,
-    borderStyle: contextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [borderViewStyle, style, styles.cellsContainer]
-  }, children));
-};
-const styles = _reactNative.StyleSheet.create({
-  cellsContainer: {
-    flex: 1,
-    flexDirection: "row"
-  }
-});
-var _default = TableRow;
-exports.default = _default;

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

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.default;
-  }
-});
-Object.defineProperty(exports, "TableCell", {
-  enumerable: true,
-  get: function () {
-    return _TableCell.default;
-  }
-});
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function () {
-    return _TableRow.default;
-  }
-});
-var _Table = _interopRequireDefault(require("./Table"));
-var _TableRow = _interopRequireDefault(require("./TableRow"));
-var _TableCell = _interopRequireDefault(require("./TableCell"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/mappings/Table.js

@@ -1,143 +0,0 @@
-"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
-  })
-};
-const SEED_DATA = [{
-  name: "Table",
-  tag: "Table",
-  description: "Top level table container",
-  category: _types.COMPONENT_TYPES.table,
-  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
-  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: (0, _types.createStaticNumberProp)({
-      label: "Cell Vertical Padding",
-      description: "Specifies the vertical padding of the cell. Passed down to child Table Row components unless overridden",
-      required: false,
-      defaultValue: 10
-    }),
-    cellHorizontalPadding: (0, _types.createStaticNumberProp)({
-      label: "Cell Horizontal Padding",
-      description: "Specifies the horizontal padding of the cell. Passed down to child Table Row components unless overridden",
-      required: false,
-      defaultValue: 10
-    })
-  }
-}, {
-  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
-    },
-    cellVerticalPadding: (0, _types.createStaticNumberProp)({
-      label: "Cell Vertical Padding",
-      description: "Specifies the vertical padding of the cell. Passed down to child Table Cell 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 child Table Cell components unless overridden",
-      required: false,
-      defaultValue: null
-    })
-  }
-}, {
-  name: "Table Cell",
-  tag: "TableCell",
-  description: "Table Cell container",
-  category: _types.COMPONENT_TYPES.table,
-  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== _types.StylesPanelSections.Borders),
-  layout: {
-    flex: 1,
-    flexDirection: "row"
-  },
-  props: {
-    ...SHARED_SEED_DATA_PROPS,
-    drawEndBorder: {
-      ...SHARED_SEED_DATA_PROPS.drawEndBorder,
-      defaultValue: true
-    },
-    cellVerticalPadding: (0, _types.createStaticNumberProp)({
-      label: "Vertical Padding",
-      description: "Specifies the vertical padding of the cell",
-      required: false,
-      defaultValue: null
-    }),
-    cellHorizontalPadding: (0, _types.createStaticNumberProp)({
-      label: "Horizontal Padding",
-      description: "Specifies the horizontal padding of the cell",
-      required: false,
-      defaultValue: null
-    })
-  }
-}];
-exports.SEED_DATA = SEED_DATA;

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

@@ -1,42 +0,0 @@
-import React from "react";
-import { ScrollView } 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,
-    children,
-    style
-  } = _ref;
-  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(ScrollView, {
-    style: [borderViewStyle, style]
-  }, children));
-};
-export default withTheme(Table);

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

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