@draftbit/core 46.9.1-20b4a7.2 → 46.9.1-26da3e.2

package/src/components/Table/TableCell.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+const TableCell = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = true, cellVerticalPadding, cellHorizontalPadding, children, style, }) => {
+    const parentContextValue = React.useContext(TableStyleContext);
+    const borderViewStyle = generateBorderStyles({
+        borderColor: borderColor || parentContextValue.borderColor,
+        borderWidth: borderWidth || parentContextValue.borderWidth,
+        borderStyle: borderStyle || parentContextValue.borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(View, { style: [
+            styles.cellContainer,
+            borderViewStyle,
+            {
+                paddingVertical: cellVerticalPadding || parentContextValue.cellVerticalPadding,
+                paddingHorizontal: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+            },
+            style,
+        ] }, children));
+};
+const styles = StyleSheet.create({
+    cellContainer: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default TableCell;

package/src/components/Table/TableCell.tsx

@@ -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,32 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+const TableRow = ({ borderWidth, borderColor, borderStyle, drawTopBorder = false, drawBottomBorder = true, drawStartBorder = true, drawEndBorder = false, cellVerticalPadding, cellHorizontalPadding, children, style, }) => {
+    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, style, styles.cellsContainer] }, children)));
+};
+const styles = StyleSheet.create({
+    cellsContainer: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default TableRow;

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import {
+  generateBorderStyles,
+  TableProps,
+  TableStyleContext,
+  TableStyleProps,
+} from "./TableCommon";
+
+export interface Props extends TableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
+  borderWidth,
+  borderColor,
+  borderStyle,
+  drawTopBorder = false,
+  drawBottomBorder = true,
+  drawStartBorder = true,
+  drawEndBorder = false,
+  cellVerticalPadding,
+  cellHorizontalPadding,
+  children,
+  style,
+}) => {
+  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, style, styles.cellsContainer]}>
+        {children}
+      </View>
+    </TableStyleContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellsContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});
+
+export default 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

@@ -35,7 +35,7 @@ export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
-export { BottomSheet } from "./components/BottomSheet";
+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

@@ -58,7 +58,7 @@ export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 
-export { BottomSheet } from "./components/BottomSheet";
+export { Table, TableRow, TableCell } from "./components/Table";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/src/mappings/Table.js

@@ -0,0 +1,137 @@
+import { COMPONENT_TYPES, StylesPanelSections, createColorProp, createStaticBoolProp, createStaticNumberProp, BLOCK_STYLES_SECTIONS, CONTAINER_COMPONENT_STYLES_SECTIONS, 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,
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Table",
+        tag: "Table",
+        description: "Top level table container",
+        category: COMPONENT_TYPES.table,
+        stylesPanelSections: 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: 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: 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: 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,
+            },
+            cellVerticalPadding: 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: 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: COMPONENT_TYPES.table,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS.filter((item) => item !== StylesPanelSections.Borders),
+        layout: {
+            flex: 1,
+            flexDirection: "row",
+        },
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            drawEndBorder: {
+                ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+                defaultValue: true,
+            },
+            cellVerticalPadding: createStaticNumberProp({
+                label: "Vertical Padding",
+                description: "Specifies the vertical padding of the cell",
+                required: false,
+                defaultValue: null,
+            }),
+            cellHorizontalPadding: createStaticNumberProp({
+                label: "Horizontal Padding",
+                description: "Specifies the horizontal padding of the cell",
+                required: false,
+                defaultValue: null,
+            }),
+        },
+    },
+];

package/src/mappings/Table.ts

@@ -0,0 +1,161 @@
+import {
+  COMPONENT_TYPES,
+  StylesPanelSections,
+  createColorProp,
+  createStaticBoolProp,
+  createStaticNumberProp,
+  BLOCK_STYLES_SECTIONS,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  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,
+  }),
+};
+
+export const SEED_DATA = [
+  {
+    name: "Table",
+    tag: "Table",
+    description: "Top level table container",
+    category: COMPONENT_TYPES.table,
+    stylesPanelSections: 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: 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: 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: 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,
+      },
+      cellVerticalPadding: 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: 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: COMPONENT_TYPES.table,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS.filter(
+      (item) => item !== StylesPanelSections.Borders
+    ),
+    layout: {
+      flex: 1,
+      flexDirection: "row",
+    },
+    props: {
+      ...SHARED_SEED_DATA_PROPS,
+      drawEndBorder: {
+        ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+        defaultValue: true,
+      },
+      cellVerticalPadding: createStaticNumberProp({
+        label: "Vertical Padding",
+        description: "Specifies the vertical padding of the cell",
+        required: false,
+        defaultValue: null,
+      }),
+      cellHorizontalPadding: createStaticNumberProp({
+        label: "Horizontal Padding",
+        description: "Specifies the horizontal padding of the cell",
+        required: false,
+        defaultValue: null,
+      }),
+    },
+  },
+];

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -1,88 +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 _BottomSheetComponent = _interopRequireDefault(require("./BottomSheetComponent"));
-var _theming = require("../../theming");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const BottomSheet = _ref => {
-  let {
-    theme,
-    snapPoints = ["10%", "50%", "80%"],
-    initialSnapIndex = 0,
-    showHandle = true,
-    handleColor = theme.colors.divider,
-    topBorderRadius = 20,
-    borderWidth = 1,
-    borderColor = theme.colors.divider,
-    onSettle,
-    style,
-    children,
-    ...rest
-  } = _ref;
-  const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.parentContainer,
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/_react.default.createElement(_BottomSheetComponent.default, _extends({
-    componentType: "ScrollView",
-    snapPoints: snapPoints,
-    initialSnapIndex: initialSnapIndex,
-    renderHandle: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showHandle && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: [styles.handleContainer, {
-        backgroundColor,
-        borderTopLeftRadius: topBorderRadius,
-        borderTopRightRadius: topBorderRadius
-      }]
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: [styles.handle, {
-        backgroundColor: handleColor
-      }]
-    }))),
-    contentContainerStyle: [styles.contentContainerStyle, style],
-    containerStyle: _reactNative.StyleSheet.flatten([styles.containerStyle, {
-      backgroundColor,
-      borderTopLeftRadius: topBorderRadius,
-      borderTopRightRadius: topBorderRadius,
-      borderWidth,
-      borderColor
-    }]),
-    onSettle: onSettle
-  }, rest), children));
-};
-const styles = _reactNative.StyleSheet.create({
-  //Render on top of everything
-  parentContainer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 10,
-    overflow: "hidden"
-  },
-  contentContainerStyle: {
-    paddingHorizontal: 16,
-    paddingVertical: 10
-  },
-  containerStyle: {
-    flex: 1,
-    overflow: "hidden"
-  },
-  handleContainer: {
-    alignItems: "center",
-    paddingVertical: 20
-  },
-  handle: {
-    width: 40,
-    height: 2,
-    borderRadius: 4
-  }
-});
-var _default = (0, _theming.withTheme)(BottomSheet);
-exports.default = _default;