@draftbit/core 46.2.3 → 46.2.4-00bad7.0

package/lib/module/components/Portal/PortalHost.js

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import PortalManager from "./PortalManager";
@@ -33,11 +31,11 @@ export default class PortalHost extends React.Component {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "setManager", manager => {
+    this.setManager = manager => {
       this.manager = manager;
-    });
+    };
 
-    _defineProperty(this, "mount", children => {
+    this.mount = children => {
       const key = this.nextKey++;
 
       if (this.manager) {
@@ -51,9 +49,9 @@ export default class PortalHost extends React.Component {
       }
 
       return key;
-    });
+    };
 
-    _defineProperty(this, "update", (key, children) => {
+    this.update = (key, children) => {
       if (this.manager) {
         this.manager.update(key, children);
       } else {
@@ -71,9 +69,9 @@ export default class PortalHost extends React.Component {
           this.queue.push(op);
         }
       }
-    });
+    };
 
-    _defineProperty(this, "unmount", key => {
+    this.unmount = key => {
       if (this.manager) {
         this.manager.unmount(key);
       } else {
@@ -82,13 +80,10 @@ export default class PortalHost extends React.Component {
           key
         });
       }
-    });
-
-    _defineProperty(this, "nextKey", 0);
-
-    _defineProperty(this, "queue", []);
+    };
 
-    _defineProperty(this, "manager", void 0);
+    this.nextKey = 0;
+    this.queue = [];
   }
 
   componentDidMount() {
@@ -132,6 +127,22 @@ export default class PortalHost extends React.Component {
     }));
   }
 
+}
+PortalHost.displayName = "Portal.Host";
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});   }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.container,
+      collapsable: false,
+      pointerEvents: "box-none"
+    }, this.props.children), /*#__PURE__*/React.createElement(PortalManager, {
+      ref: this.setManager
+    }));
+  }
+
 }
 
 _defineProperty(PortalHost, "displayName", "Portal.Host");

package/lib/module/components/RadioButton/RadioButton.js

@@ -1,5 +1,3 @@
-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); }
-
 import * as React from "react";
 import Config from "../Config";
 import IconButton from "../IconButton";
@@ -34,6 +32,21 @@ const RadioButton = _ref => {
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
   };
 
+  return /*#__PURE__*/React.createElement(IconButton, {
+    Icon: Icon,
+    icon: isSelected ? selectedIcon : unselectedIcon,
+    color: isSelected ? color : unselectedColor,
+    disabled: disabled,
+    onPress: handlePress,
+    size: size,
+    style: style,
+    ...rest
+  });
+};
+
+export default RadioButton; onValueChange(realValue);
+  };
+
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     Icon: Icon,
     icon: isSelected ? selectedIcon : unselectedIcon,

package/lib/module/components/RadioButton/RadioButtonGroup.js

@@ -1,5 +1,3 @@
-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); }
-
 import * as React from "react";
 import { View } from "react-native";
 import { getValueForRadioButton } from "../../utilities";
@@ -48,7 +46,23 @@ const RadioButtonGroup = _ref => {
     });
   }
 
-  return /*#__PURE__*/React.createElement(View, _extends({
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      minHeight: 40
+    }, style],
+    ...rest
+  }, /*#__PURE__*/React.createElement(Provider, {
+    value: {
+      value: internalValue,
+      onValueChange: handleValueChange,
+      direction
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: _containerStyle
+  }, children)));
+};
+
+export default RadioButtonGroup;xtends({
     style: [{
       minHeight: 40
     }, style]

package/lib/module/components/ScreenContainer.js

@@ -1,5 +1,3 @@
-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); }
-
 import * as React from "react";
 import { StyleSheet, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -27,12 +25,13 @@ function ScreenContainer(_ref) {
     edges.push("bottom");
   }
 
-  return /*#__PURE__*/React.createElement(SafeAreaView, _extends({
+  return /*#__PURE__*/React.createElement(SafeAreaView, {
     edges: edges,
     style: [styles.container, {
       backgroundColor
-    }]
-  }, rest), scrollable ? /*#__PURE__*/React.createElement(ScrollView, {
+    }],
+    ...rest
+  }, scrollable ? /*#__PURE__*/React.createElement(ScrollView, {
     contentContainerStyle: [styles.scrollViewContainer, {
       backgroundColor
     }, style]
@@ -43,6 +42,24 @@ function ScreenContainer(_ref) {
   }, children));
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scrollViewContainer: {
+    flexGrow: 1,
+    flex: undefined
+  }
+});
+export default withTheme(ScreenContainer);olor
+    }, style]
+  }, children) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor
+    }, style]
+  }, children));
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1

package/lib/module/components/TabView/TabView.js

@@ -0,0 +1,87 @@
+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); }
+
+import * as React from "react";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view"; // import { withTheme } from "../../theming";
+
+import TabViewItem from "./TabViewItem";
+
+const TabViewComponent = _ref => {
+  let {
+    Icon,
+    tabBarPosition,
+    keyboardDismissMode,
+    swipeEnabled,
+    scrollEnabled,
+    activeColor,
+    inactiveColor,
+    pressColor,
+    indicatorColor,
+    style,
+    children
+  } = _ref;
+  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 _child$props;
+
+      if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
+        var _child$props2, _child$props3;
+
+        newRoutes.push({
+          key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
+          ...(child === null || child === void 0 ? void 0 : child.props)
+        });
+
+        scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
+      }
+    });
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = i => setIndex(i);
+
+  const renderTabBar = props => {
+    console.log(props);
+    return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
+      activeColor: activeColor,
+      inactiveColor: inactiveColor,
+      pressColor: pressColor,
+      scrollEnabled: scrollEnabled,
+      indicatorStyle: {
+        backgroundColor: indicatorColor
+      },
+      renderIcon: _ref2 => {
+        let {
+          route,
+          color
+        } = _ref2;
+        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
+          name: route.icon,
+          color: color,
+          size: 36
+        }) : null;
+      },
+      style: style
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(TabView, {
+    navigationState: {
+      index,
+      routes
+    },
+    renderScene: SceneMap(tabScenes),
+    renderTabBar: renderTabBar,
+    onIndexChange: indexChangeHandler,
+    tabBarPosition: tabBarPosition,
+    keyboardDismissMode: keyboardDismissMode,
+    swipeEnabled: swipeEnabled
+  });
+};
+
+export default TabViewComponent;

package/lib/module/components/TabView/TabViewItem.js

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

package/lib/module/components/TabView/index.js

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

package/lib/module/components/ToggleButton.js

@@ -1,5 +1,3 @@
-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); }
-
 import * as React from "react";
 import { withTheme } from "../theming";
 import { StyleSheet } from "react-native";
@@ -42,13 +40,29 @@ const ToggleButton = _ref => {
     onPress(!internalValue);
   };
 
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: icon,
     size: iconSize,
     color: internalValue ? colors[color] : colors[colorSecondary],
     onPress: handlePress,
     disabled: disabled,
+    style: [styles.mainContainer, {
+      width,
+      height,
+      backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
+      borderColor: colors[borderColor]
+    }, style],
+    ...rest
+  });
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    borderWidth: 1
+  }
+});
+export default withTheme(ToggleButton);: disabled,
     style: [styles.mainContainer, {
       width,
       height,

package/lib/module/constants.js

@@ -5,4 +5,5 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
 export const APPROX_STATUSBAR_HEIGHT = Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
+});PO : 0
 });

package/lib/module/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/lib/module/mappings/TabView.js

@@ -0,0 +1,70 @@
+import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "TabView",
+  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: "TabViewItem",
+  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/typescript/src/components/TabView/TabView.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { IconSlot } from "../../interfaces/Icon";
+declare type TabBarPosition = "top" | "bottom";
+declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
+declare 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;
+declare const TabViewComponent: ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }: TabViewProps) => JSX.Element;
+export default TabViewComponent;

package/lib/typescript/src/components/TabView/TabViewItem.d.ts

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

package/lib/typescript/src/components/TabView/index.d.ts

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

package/lib/typescript/src/index.d.ts

@@ -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";
 export { default as Button } from "./components/DeprecatedButton";

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

@@ -0,0 +1,111 @@
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    category: string;
+    layout: {};
+    props: {
+        tabBarPosition: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        keyboardDismissMode: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        swipeEnabled: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        scrollEnabled: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        activeColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        inactiveColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        pressColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        indicatorColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        title?: undefined;
+        id?: undefined;
+        accessibilityLabel?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    layout: {};
+    props: {
+        title: any;
+        id: any;
+        accessibilityLabel: any;
+        tabBarPosition?: undefined;
+        keyboardDismissMode?: undefined;
+        swipeEnabled?: undefined;
+        scrollEnabled?: undefined;
+        activeColor?: undefined;
+        inactiveColor?: undefined;
+        pressColor?: undefined;
+        indicatorColor?: undefined;
+    };
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.2.3",
+  "version": "46.2.4-00bad7.0+00bad7e6",
   "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": "^6.0.0",
+    "react-native-tab-view": "^3.1.1",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -79,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "9a0a65dfc2aff945da5cbe7db48d07114c8cea7c"
+  "gitHead": "00bad7e6fdce245389c03225aefe001e6b72db05"
 }

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;