@draftbit/core 43.2.1-d3fbb1.0 → 43.2.3-0f04d4.0

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Animated, View, TouchableOpacity, StyleSheet } from "react-native";
+import { TabView, SceneMap } from "react-native-tab-view";
+import Constants from "expo-constants";
+
+import TabViewItem from "./TabViewItem";
+
+interface TabViewProps {
+  children: React.ReactNode;
+}
+
+export default ({ 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,
+            title: child?.props?.title,
+          });
+          scenes[child?.props?.id] = () => child;
+        }
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const _handleIndexChange = (i: any) => setIndex(i);
+
+  const _renderTabBar = (props: any) => {
+    const inputRange = props.navigationState.routes.map(
+      (__: any, i: number) => i
+    );
+
+    return (
+      <View style={styles.tabBar}>
+        {props.navigationState.routes.map((route: any, i: number) => {
+          const opacity = props.position.interpolate({
+            inputRange,
+            outputRange: inputRange.map((inputIndex: any) =>
+              inputIndex === i ? 1 : 0.5
+            ),
+          });
+
+          return (
+            <TouchableOpacity
+              style={styles.tabItem}
+              onPress={() => setIndex(i)}
+            >
+              <Animated.Text style={{ opacity }}>{route.title}</Animated.Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={_renderTabBar}
+      onIndexChange={_handleIndexChange}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabBar: {
+    flexDirection: "row",
+    paddingTop: Constants.statusBarHeight,
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: "center",
+    padding: 16,
+  },
+});

package/src/components/TabView/TabViewItem.js

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

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+interface TabViewItemProps {
+  title: string;
+  id: string;
+  children: React.ReactNode;
+}
+
+const TabViewItem = ({ title, id, children }: TabViewItemProps) => {
+  console.log({ title, id });
+  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

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

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

package/src/mappings/MapCallout.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Map Callout",
     tag: "MapCallout",
     description: "An info window to display on top of a marker when it is clicked",
-    category: COMPONENT_TYPES.container,
+    category: COMPONENT_TYPES.deprecated,
     layout: {},
     props: {
         onPress: createActionProp({

package/src/mappings/MapCallout.ts

@@ -10,7 +10,7 @@ export const SEED_DATA = {
   tag: "MapCallout",
   description:
     "An info window to display on top of a marker when it is clicked",
-  category: COMPONENT_TYPES.container,
+  category: COMPONENT_TYPES.deprecated,
   layout: {},
   props: {
     onPress: createActionProp({

package/src/mappings/MapMarker.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
     description: "A marker to show inside map view",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.deprecated,
     layout: {},
     props: {
         latitude: createNumberProp({

package/src/mappings/MapMarker.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Map Marker",
   tag: "MapMarker",
   description: "A marker to show inside map view",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.deprecated,
   layout: {},
   props: {
     latitude: createNumberProp({

package/src/mappings/TabView.js

@@ -0,0 +1,26 @@
+import { COMPONENT_TYPES, createTextProp } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "TabView",
+        tag: "TabView",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {},
+    },
+    {
+        name: "TabViewItem",
+        tag: "TabViewItem",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            title: createTextProp({
+                label: "Tab Title",
+                description: "Tab Title",
+            }),
+            id: createTextProp({
+                label: "Tab Id",
+                description: "Tab Id",
+            }),
+        },
+    },
+];

package/src/mappings/TabView.ts

@@ -0,0 +1,27 @@
+import { COMPONENT_TYPES, createTextProp } from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "TabView",
+    tag: "TabView",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {},
+  },
+  {
+    name: "TabViewItem",
+    tag: "TabViewItem",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {
+      title: createTextProp({
+        label: "Tab Title",
+        description: "Tab Title",
+      }),
+      id: createTextProp({
+        label: "Tab Id",
+        description: "Tab Id",
+      }),
+    },
+  },
+];