@draftbit/core 46.4.4-c18fe1.2 → 46.4.4-d55501.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-c18fe1.2+c18fe15",
+  "version": "46.4.4-d55501.2+d555017",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,8 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.4.4-c18fe1.2+c18fe15",
-    "@gorhom/bottom-sheet": "4.4.5",
+    "@draftbit/types": "^46.4.4-d55501.2+d555017",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -55,8 +54,9 @@
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
-    "react-native-scroll-bottom-sheet": "0.7.0",
-    "react-native-svg": "12.3.0",
+    "react-native-pager-view": "5.4.24",
+    "react-native-svg": "^12.3.0",
+    "react-native-tab-view": "^3.3.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -83,5 +83,5 @@
       ]
     ]
   },
-  "gitHead": "c18fe15af829dd9dbc224859aeda8cc5bda518dc"
+  "gitHead": "d555017e5aa603f019e5ed48664c4acf7e73a980"
 }

package/src/components/TabView/TabView.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
+    const [index, setIndex] = React.useState(0);
+    const [routes, setRoutes] = React.useState([]);
+    const [tabScenes, setTabScenes] = React.useState({});
+    React.useEffect(() => {
+        const newRoutes = [];
+        const scenes = {};
+        React.Children.toArray(children)
+            .filter((child) => child.type === TabViewItem)
+            .forEach((child) => {
+            var _a, _b, _c;
+            if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.id) {
+                newRoutes.push({
+                    key: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id,
+                    ...child === null || child === void 0 ? void 0 : child.props,
+                });
+                scenes[(_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.id] = () => child;
+            }
+        });
+        setRoutes(newRoutes);
+        setTabScenes(scenes);
+    }, [children]);
+    const indexChangeHandler = (i) => setIndex(i);
+    const renderTabBar = (props) => {
+        console.log(props);
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
+    };
+    return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default TabViewComponent;

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  style?: StyleProp<TextStyle | ViewStyle>;
+  children: React.ReactNode;
+} & IconSlot;
+
+const TabViewComponent = ({
+  Icon,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  style,
+  children,
+}: TabViewProps) => {
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  React.useEffect(() => {
+    const newRoutes: any = [];
+    const scenes: any = {};
+
+    React.Children.toArray(children)
+      .filter((child: any) => child.type === TabViewItem)
+      .forEach((child: any) => {
+        if (child?.props?.id) {
+          newRoutes.push({
+            key: child?.props?.id,
+            ...child?.props,
+          });
+          scenes[child?.props?.id] = () => child;
+        }
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = (i: any) => setIndex(i);
+
+  const renderTabBar = (props: any) => {
+    console.log(props);
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor}
+        inactiveColor={inactiveColor}
+        pressColor={pressColor}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{ backgroundColor: indicatorColor }}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={36} />
+          ) : null
+        }
+        style={style}
+      />
+    );
+  };
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default TabViewComponent;

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,5 @@
+const TabViewItem = ({ title, id, icon, children, accessibilityLabel, }) => {
+    console.log({ title, id, icon, accessibilityLabel });
+    return children;
+};
+export default TabViewItem;

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+interface TabViewItemProps {
+  title: string;
+  id: string;
+  icon: string;
+  accessibilityLabel: string;
+  children: React.ReactNode;
+}
+
+const TabViewItem = ({
+  title,
+  id,
+  icon,
+  children,
+  accessibilityLabel,
+}: TabViewItemProps) => {
+  console.log({ title, id, icon, accessibilityLabel });
+  return children;
+};
+
+export default TabViewItem;

package/src/components/TabView/index.js

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

package/src/components/TabView/index.tsx

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

package/src/index.js

@@ -29,7 +29,7 @@ export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { BottomSheet } from "./components/BottomSheet";
+export { TabView, TabViewItem } from "./components/TabView";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -34,7 +34,7 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { BottomSheet } from "./components/BottomSheet";
+export { TabView, TabViewItem } from "./components/TabView";
 
 export {
   Center,

package/src/mappings/TabView.js

@@ -0,0 +1,73 @@
+import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Tab View",
+        tag: "TabView",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            tabBarPosition: createTextEnumProp({
+                label: "Tab Bar Position",
+                description: "Tab Bar Position",
+                options: ["top", "bottom"],
+                defaultValue: "top",
+            }),
+            keyboardDismissMode: createTextEnumProp({
+                label: "Keyboard Dismiss Mode",
+                description: "Keyboard Dismiss Mode",
+                options: ["auto", "on-drag", "none"],
+                defaultValue: "auto",
+            }),
+            swipeEnabled: createBoolProp({
+                label: "Swipe Enabled",
+                description: "Swipe Enabled",
+                defaultValue: true,
+            }),
+            scrollEnabled: createBoolProp({
+                label: "Scroll Enabled",
+                description: "Scroll Enabled",
+                defaultValue: true,
+            }),
+            activeColor: createColorProp({
+                label: "Active Color",
+                description: "Active Color",
+                defaultValue: "primary",
+            }),
+            inactiveColor: createColorProp({
+                label: "Inactive Color",
+                description: "Inactive Color",
+                defaultValue: null,
+            }),
+            pressColor: createColorProp({
+                label: "Press Color",
+                description: "Press Color",
+                defaultValue: null,
+            }),
+            indicatorColor: createColorProp({
+                label: "Indicator Color",
+                description: "Indicator Color",
+                defaultValue: null,
+            }),
+        },
+    },
+    {
+        name: "Tab View Item",
+        tag: "TabViewItem",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            title: createTextProp({
+                label: "Title",
+                description: "Tab Title",
+            }),
+            id: createTextProp({
+                label: "Id",
+                description: "Tab Id",
+            }),
+            accessibilityLabel: createTextProp({
+                label: "Accessibility Label",
+                description: "Accessibility Label",
+            }),
+        },
+    },
+];

package/src/mappings/TabView.ts

@@ -0,0 +1,80 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  createTextEnumProp,
+  createBoolProp,
+  createColorProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Tab View",
+    tag: "TabView",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {
+      tabBarPosition: createTextEnumProp({
+        label: "Tab Bar Position",
+        description: "Tab Bar Position",
+        options: ["top", "bottom"],
+        defaultValue: "top",
+      }),
+      keyboardDismissMode: createTextEnumProp({
+        label: "Keyboard Dismiss Mode",
+        description: "Keyboard Dismiss Mode",
+        options: ["auto", "on-drag", "none"],
+        defaultValue: "auto",
+      }),
+      swipeEnabled: createBoolProp({
+        label: "Swipe Enabled",
+        description: "Swipe Enabled",
+        defaultValue: true,
+      }),
+      scrollEnabled: createBoolProp({
+        label: "Scroll Enabled",
+        description: "Scroll Enabled",
+        defaultValue: true,
+      }),
+      activeColor: createColorProp({
+        label: "Active Color",
+        description: "Active Color",
+        defaultValue: "primary",
+      }),
+      inactiveColor: createColorProp({
+        label: "Inactive Color",
+        description: "Inactive Color",
+        defaultValue: null,
+      }),
+      pressColor: createColorProp({
+        label: "Press Color",
+        description: "Press Color",
+        defaultValue: null,
+      }),
+      indicatorColor: createColorProp({
+        label: "Indicator Color",
+        description: "Indicator Color",
+        defaultValue: null,
+      }),
+    },
+  },
+  {
+    name: "Tab View Item",
+    tag: "TabViewItem",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {
+      title: createTextProp({
+        label: "Title",
+        description: "Tab Title",
+      }),
+      id: createTextProp({
+        label: "Id",
+        description: "Tab Id",
+      }),
+      accessibilityLabel: createTextProp({
+        label: "Accessibility Label",
+        description: "Accessibility Label",
+      }),
+    },
+  },
+];

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

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _bottomSheet = _interopRequireWildcard(require("@gorhom/bottom-sheet"));
-var _utilities = require("../../utilities");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const bottomSheetRef = (0, _react.useRef)(null);
-  const {
-    viewStyles
-  } = (0, _utilities.extractStyles)(style);
-
-  // variables
-  const snapPoints = (0, _react.useMemo)(() => ["25%", "50%", "90%"], []);
-
-  // callbacks
-  const handleSheetChanges = (0, _react.useCallback)(index => {
-    console.log("handleSheetChanges", index);
-  }, []);
-  _react.default.useEffect(() => {
-    if (step === -1) {
-      var _bottomSheetRef$curre;
-      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
-    }
-  }, [step]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [containerStyle.container, viewStyles, {
-      backgroundColor: step !== -1 ? "grey" : "transparent"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.default, {
-    ref: bottomSheetRef,
-    index: step,
-    snapPoints: snapPoints,
-    onChange: handleSheetChanges
-  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetView, null, children)));
-};
-var _default = BottomSheetComponent;
-exports.default = _default;
-const containerStyle = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    flex: 1,
-    alignItems: "center"
-  }
-});

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

@@ -1,83 +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 _reactNativeScrollBottomSheet = _interopRequireDefault(require("react-native-scroll-bottom-sheet"));
-var _utilities = require("../../utilities");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const windowHeight = _reactNative.Dimensions.get("window").height;
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const {
-    viewStyles
-  } = (0, _utilities.extractStyles)(style);
-  const bottomSheetRef = _react.default.useRef();
-  const webStep = _react.default.useMemo(() => step + 1, [step]);
-  const snapPoints = _react.default.useMemo(() => ["25%", "50%", windowHeight - 200], []);
-  _react.default.useEffect(() => {
-    var _bottomSheetRef$curre;
-    bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.snapTo(snapPoints.length - webStep);
-    // bottomSheetRef.current.snapTo(step);
-  }, [webStep, step, snapPoints]);
-  if (step === -1) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  }
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeScrollBottomSheet.default, {
-    ref: bottomSheetRef,
-    componentType: "ScrollView",
-    snapPoints: snapPoints,
-    initialSnapIndex: 0,
-    renderHandle: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.header
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.panelHandle
-    })),
-    contentContainerStyle: styles.contentContainerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ...styles.container,
-      ...viewStyles,
-      backgroundColor: webStep !== -1 ? "grey" : "transparent"
-    }
-  }, children)));
-};
-var _default = BottomSheetComponent;
-exports.default = _default;
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainerStyle: {
-    padding: 16
-  },
-  header: {
-    alignItems: "center",
-    backgroundColor: "white",
-    paddingVertical: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20
-  },
-  panelHandle: {
-    width: 40,
-    height: 2,
-    backgroundColor: "rgba(0,0,0,0.3)",
-    borderRadius: 4
-  },
-  item: {
-    padding: 20,
-    justifyContent: "center",
-    backgroundColor: "white",
-    alignItems: "center",
-    marginVertical: 10
-  }
-});

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BottomSheet", {
-  enumerable: true,
-  get: function () {
-    return _BottomSheet.default;
-  }
-});
-var _BottomSheet = _interopRequireDefault(require("./BottomSheet"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/commonjs/mappings/BottomSheet.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Bottom Sheet",
-  tag: "BottomSheet",
-  category: _types.COMPONENT_TYPES.container,
-  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
-  props: {
-    step: (0, _types.createNumberProp)({
-      label: "Step",
-      description: "Step can be -1, 0, 1, or 2."
-    })
-  }
-};
-exports.SEED_DATA = SEED_DATA;

package/lib/module/components/BottomSheet/BottomSheet.native.js

@@ -1,49 +0,0 @@
-import React, { useCallback, useMemo, useRef } from "react";
-import { View, StyleSheet } from "react-native";
-import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
-import { extractStyles } from "../../utilities";
-const BottomSheetComponent = _ref => {
-  let {
-    style,
-    children,
-    step
-  } = _ref;
-  const bottomSheetRef = useRef(null);
-  const {
-    viewStyles
-  } = extractStyles(style);
-
-  // variables
-  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);
-
-  // callbacks
-  const handleSheetChanges = useCallback(index => {
-    console.log("handleSheetChanges", index);
-  }, []);
-  React.useEffect(() => {
-    if (step === -1) {
-      var _bottomSheetRef$curre;
-      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
-    }
-  }, [step]);
-  return /*#__PURE__*/React.createElement(View, {
-    style: [containerStyle.container, viewStyles, {
-      backgroundColor: step !== -1 ? "grey" : "transparent"
-    }]
-  }, /*#__PURE__*/React.createElement(BottomSheet, {
-    ref: bottomSheetRef,
-    index: step,
-    snapPoints: snapPoints,
-    onChange: handleSheetChanges
-  }, /*#__PURE__*/React.createElement(BottomSheetView, null, children)));
-};
-export default BottomSheetComponent;
-const containerStyle = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    flex: 1,
-    alignItems: "center"
-  }
-});