@draftbit/core 46.10.3-877a3f.2 → 46.10.3-a0279d.2

package/src/components/Table/TableCell.tsx

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

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

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

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

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+  TableStyleProps,
+} from "./TableCommon";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface Props extends TableProps {
+  isTableHeader?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
+  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: TableStyleProps = {
+    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 (
+    <TableStyleContext.Provider value={contextValue}>
+      <View
+        style={[
+          borderViewStyle,
+          isTableHeader ? { backgroundColor: theme.colors.primary } : {},
+          style,
+          styles.cellsContainer,
+        ]}
+      >
+        {children}
+      </View>
+    </TableStyleContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellsContainer: {
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableRow);

package/src/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";

package/src/components/Table/index.tsx

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

package/src/index.js

@@ -10,7 +10,6 @@ export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
 export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
 export { default as CircleImage } from "./components/CircleImage";
-export { default as Container } from "./components/Container";
 export { default as Divider } from "./components/Divider";
 export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
@@ -37,6 +36,7 @@ export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
+export { Table, TableRow, TableCell } from "./components/Table";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -11,7 +11,6 @@ export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
 export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
 export { default as CircleImage } from "./components/CircleImage";
-export { default as Container } from "./components/Container";
 export { default as Divider } from "./components/Divider";
 export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
@@ -62,6 +61,8 @@ export { BottomSheet } from "./components/BottomSheet";
 
 export { YoutubePlayer } from "./components/YoutubePlayer";
 
+export { Table, TableRow, TableCell } from "./components/Table";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/NativeBase/Layout.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
 const SHARED_SEED_DATA = {
     category: COMPONENT_TYPES.layout,
     packageName: "native-base",
@@ -19,6 +19,14 @@ export const SEED_DATA = [
                 defaultValue: 1.33,
             }),
         },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
     },
     {
         name: "Box",
@@ -45,9 +53,10 @@ export const SEED_DATA = [
         tag: "Container",
         description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
         props: {
-            centerContent: createBoolProp({
+            centerContent: createStaticBoolProp({
                 label: "Center content",
                 description: "Center child elements based on their content width",
+                defaultValue: true,
             }),
         },
         ...SHARED_SEED_DATA,
@@ -74,8 +83,15 @@ export const 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: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
+        stylesPanelSections: [
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.Background,
+            StylesPanelSections.Margins,
+        ],
     },
     {
         name: "Stack",
@@ -83,16 +99,6 @@ export const SEED_DATA = [
         description: "Stack aligns items vertically or horizontally based on the direction prop",
         ...SHARED_SEED_DATA,
         props: {
-            direction: createTextEnumProp({
-                label: "Direction",
-                description: "The direction of the Stack",
-                options: ["row", "column"],
-                defaultValue: "column",
-            }),
-            reversed: createBoolProp({
-                label: "Reversed",
-                description: "Determines whether to reverse the direction of items",
-            }),
             isDisabled: createBoolProp({
                 label: "Disabled",
                 description: "If true, the Stack will be disabled",

package/src/mappings/NativeBase/Layout.ts

@@ -1,10 +1,10 @@
 import {
   COMPONENT_TYPES,
-  createTextEnumProp,
   createBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   createStaticNumberProp,
   StylesPanelSections,
+  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SHARED_SEED_DATA = {
@@ -35,6 +35,14 @@ export const SEED_DATA = [
         defaultValue: 1.33,
       }),
     },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.Margins,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
   },
   {
     name: "Box",
@@ -64,9 +72,10 @@ export const SEED_DATA = [
     description:
       "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
     props: {
-      centerContent: createBoolProp({
+      centerContent: createStaticBoolProp({
         label: "Center content",
         description: "Center child elements based on their content width",
+        defaultValue: true,
       }),
     },
     ...SHARED_SEED_DATA,
@@ -94,8 +103,15 @@ export const SEED_DATA = [
     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: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX,
+    stylesPanelSections: [
+      StylesPanelSections.LayoutSelectedItem,
+      StylesPanelSections.Background,
+      StylesPanelSections.Margins,
+    ],
   },
   {
     name: "Stack",
@@ -104,16 +120,6 @@ export const SEED_DATA = [
       "Stack aligns items vertically or horizontally based on the direction prop",
     ...SHARED_SEED_DATA,
     props: {
-      direction: createTextEnumProp({
-        label: "Direction",
-        description: "The direction of the Stack",
-        options: ["row", "column"],
-        defaultValue: "column",
-      }),
-      reversed: createBoolProp({
-        label: "Reversed",
-        description: "Determines whether to reverse the direction of items",
-      }),
       isDisabled: createBoolProp({
         label: "Disabled",
         description: "If true, the Stack will be disabled",

package/src/mappings/Table.js

@@ -0,0 +1,150 @@
+import { COMPONENT_TYPES, StylesPanelSections, createColorProp, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, } from "@draftbit/types";
+const SHARED_SEED_DATA_PROPS = {
+    borderWidth: 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: createColorProp({
+        label: "Border Color",
+        description: "Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden",
+        defaultValue: null,
+    }),
+    borderStyle: 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: createStaticBoolProp({
+        label: "Draw Top Border",
+        description: "Whether to draw the top border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawBottomBorder: createStaticBoolProp({
+        label: "Draw Bottom Border",
+        description: "Whether to draw the bottom border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawStartBorder: createStaticBoolProp({
+        label: "Draw Start Border",
+        description: "Whether to draw the start border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    drawEndBorder: createStaticBoolProp({
+        label: "Draw End Border",
+        description: "Whether to draw the end border at this layer of the Table tree or not",
+        defaultValue: false,
+    }),
+    cellVerticalPadding: 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: createStaticNumberProp({
+        label: "Cell Horizontal Padding",
+        description: "Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden",
+        required: false,
+        defaultValue: null,
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Table",
+        tag: "Table",
+        description: "Top level table container",
+        category: COMPONENT_TYPES.table,
+        stylesPanelSections: [
+            StylesPanelSections.Size,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+            StylesPanelSections.Background,
+            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: 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: COMPONENT_TYPES.table,
+        stylesPanelSections: [StylesPanelSections.Background],
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            drawStartBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawStartBorder,
+                defaultValue: true,
+            },
+            drawBottomBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawBottomBorder,
+                defaultValue: true,
+            },
+            isTableHeader: 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: COMPONENT_TYPES.table,
+        stylesPanelSections: [
+            StylesPanelSections.LayoutFlexItems,
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.LayoutContent,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            flex: 1,
+            flexDirection: "row",
+        },
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            drawEndBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+                defaultValue: true,
+            },
+        },
+    },
+];