@draftbit/core 46.2.4-dedb7a.0 → 46.2.4-f941fc.0

package/lib/typescript/src/mappings/TextField.d.ts

@@ -38,6 +38,79 @@ export declare const SEED_DATA: ({
             editable: boolean;
             required: boolean;
         };
+        label: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+        };
+        assistiveText: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+        };
+        error: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+        };
+        leftIconName: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+        };
+        leftIconMode: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: string[];
+            editable: boolean;
+            required: boolean;
+        };
+        rightIconName: {
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+        };
+        fieldName: {
+            handlerPropName: string;
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            valuePropName: string;
+            editable: boolean;
+            required: boolean;
+        };
         allowFontScaling: {
             group: string;
             label: string;
@@ -215,58 +288,74 @@ export declare const SEED_DATA: ({
             formType: string;
             propType: string;
         };
-        label: {
+    };
+    layout: {};
+    stylesPanelSections?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    preview_image_url: string;
+    supports_list_render: boolean;
+    triggers: string[];
+    props: {
+        placeholder: {
+            defaultValue: string;
             group: string;
             label: string;
             description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
             editable: boolean;
             required: boolean;
+            formType: string;
+            propType: string;
         };
-        assistiveText: {
-            group: string;
+        type: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: string;
+            options: string[];
             editable: boolean;
             required: boolean;
-        };
-        error: {
             group: string;
+        };
+        multiline: {
             label: string;
             description: string;
+            group: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
         };
-        leftIconName: {
-            group: string;
+        numberOfLines: {
             label: string;
             description: string;
             formType: string;
             propType: string;
+            group: string;
             defaultValue: null;
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        leftIconMode: {
+        fieldName: {
+            handlerPropName: string;
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
-            options: string[];
+            defaultValue: string;
+            valuePropName: string;
             editable: boolean;
             required: boolean;
         };
-        rightIconName: {
+        label: {
             group: string;
             label: string;
             description: string;
@@ -276,72 +365,54 @@ export declare const SEED_DATA: ({
             editable: boolean;
             required: boolean;
         };
-        fieldName: {
-            handlerPropName: string;
-            defaultValue: string;
+        assistiveText: {
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            valuePropName: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
         };
-    };
-    layout: {};
-    stylesPanelSections?: undefined;
-} | {
-    name: string;
-    tag: string;
-    description: string;
-    category: string;
-    stylesPanelSections: string[];
-    preview_image_url: string;
-    supports_list_render: boolean;
-    triggers: string[];
-    props: {
-        type: {
+        error: {
+            group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
-            options: string[];
+            defaultValue: null;
             editable: boolean;
             required: boolean;
-            group: string;
         };
-        multiline: {
+        leftIconName: {
+            group: string;
             label: string;
             description: string;
-            group: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
         };
-        numberOfLines: {
+        leftIconMode: {
+            group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            group: string;
             defaultValue: null;
+            options: string[];
             editable: boolean;
             required: boolean;
-            step: number;
         };
-        fieldName: {
-            handlerPropName: string;
+        rightIconName: {
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
-            valuePropName: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
         };
@@ -461,16 +532,6 @@ export declare const SEED_DATA: ({
             formType: string;
             propType: string;
         };
-        placeholder: {
-            group: string;
-            label: string;
-            description: string;
-            editable: boolean;
-            required: boolean;
-            defaultValue: string;
-            formType: string;
-            propType: string;
-        };
         placeholderTextColor: {
             group: string;
             label: string;
@@ -532,67 +593,6 @@ export declare const SEED_DATA: ({
             formType: string;
             propType: string;
         };
-        label: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-        };
-        assistiveText: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-        };
-        error: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-        };
-        leftIconName: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-        };
-        leftIconMode: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            options: string[];
-            editable: boolean;
-            required: boolean;
-        };
-        rightIconName: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-        };
     };
     layout: {};
 })[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.2.4-dedb7a.0+dedb7a5d",
+  "version": "46.2.4-f941fc.0+f941fce3",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -53,6 +53,8 @@
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
+    "react-native-pager-view": "5.4.24",
+    "react-native-tab-view": "^3.0.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -79,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "dedb7a5ddf0c05da6f0df9e49b2a927b6ec0a69d"
+  "gitHead": "f941fce333cbde99353912ffe850983d835bbd1e"
 }

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.ts

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

package/src/index.js

@@ -28,6 +28,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 { 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

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