@draftbit/core 46.2.4-463c2c.0 → 46.2.4-47dc09.5

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

@@ -28,68 +28,17 @@ export declare const SEED_DATA: ({
             formType: string;
             propType: string;
         };
-        secureTextEntry: {
-            group: string;
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            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: {
+        activeBorderColor: {
             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: {
+        secureTextEntry: {
             group: string;
             label: string;
             description: string;
@@ -99,18 +48,6 @@ export declare const SEED_DATA: ({
             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;
@@ -288,74 +225,58 @@ export declare const SEED_DATA: ({
             formType: string;
             propType: string;
         };
-    };
-    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;
+        label: {
             group: string;
             label: string;
             description: string;
-            editable: boolean;
-            required: boolean;
             formType: string;
             propType: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
         };
-        type: {
+        assistiveText: {
+            group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
-            options: string[];
+            defaultValue: null;
             editable: boolean;
             required: boolean;
-            group: string;
         };
-        multiline: {
+        error: {
+            group: string;
             label: string;
             description: string;
-            group: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
         };
-        numberOfLines: {
+        leftIconName: {
+            group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            group: string;
             defaultValue: null;
             editable: boolean;
             required: boolean;
-            step: number;
         };
-        fieldName: {
-            handlerPropName: string;
+        leftIconMode: {
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
-            valuePropName: string;
+            defaultValue: null;
+            options: string[];
             editable: boolean;
             required: boolean;
         };
-        label: {
+        rightIconName: {
             group: string;
             label: string;
             description: string;
@@ -365,54 +286,72 @@ export declare const SEED_DATA: ({
             editable: boolean;
             required: boolean;
         };
-        assistiveText: {
+        fieldName: {
+            handlerPropName: string;
+            defaultValue: string;
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            valuePropName: string;
             editable: boolean;
             required: boolean;
         };
-        error: {
-            group: string;
+    };
+    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: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: string;
+            options: string[];
             editable: boolean;
             required: boolean;
-        };
-        leftIconName: {
             group: string;
+        };
+        multiline: {
             label: string;
             description: string;
+            group: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
         };
-        leftIconMode: {
-            group: string;
+        numberOfLines: {
             label: string;
             description: string;
             formType: string;
             propType: string;
+            group: string;
             defaultValue: null;
-            options: string[];
             editable: boolean;
             required: boolean;
+            step: number;
         };
-        rightIconName: {
+        fieldName: {
+            handlerPropName: string;
             group: string;
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: null;
+            defaultValue: string;
+            valuePropName: string;
             editable: boolean;
             required: boolean;
         };
@@ -532,6 +471,16 @@ 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;
@@ -593,6 +542,67 @@ 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-463c2c.0+463c2ce7",
+  "version": "46.2.4-47dc09.5+47dc091f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.2.3",
+    "@draftbit/types": "^46.2.4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -53,10 +53,11 @@
     "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-svg": "^12.3.0",
+    "react-native-tab-view": "^3.0.0",
     "react-native-typography": "^1.4.1",
-    "react-native-web-swiper": "^2.2.3",
-    "react-native-web-webview": "^1.0.2",
-    "react-native-youtube-iframe": "^2.2.2"
+    "react-native-web-swiper": "^2.2.3"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
@@ -81,5 +82,5 @@
       ]
     ]
   },
-  "gitHead": "463c2ce73d4c4a323b75ac066ec2554b252f2658"
+  "gitHead": "47dc091f66a13724fe481e507bc1daee902dcf88"
 }

package/src/components/Config.js

@@ -42,6 +42,7 @@ export default {
     cardIconElevation: 1,
     placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
     getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
+    placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
     squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
     FABSize: 40,
     FABBorderRadius: 20,

package/src/components/Config.ts

@@ -60,6 +60,7 @@ export default {
       { width: size.width, height: size.height },
       "image-placeholder_1"
     ),
+  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
   squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
   FABSize: 40,
   FABBorderRadius: 20,

package/src/components/SVG.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { View, Platform, Image } from "react-native";
+import { SvgUri } from "react-native-svg";
+import Config from "./Config";
+const SVG = ({ source, style }) => {
+    let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
+    return (React.createElement(React.Fragment, null,
+        Platform.OS === "ios" && (React.createElement(View, { style: style },
+            React.createElement(SvgUri, { width: "100%", height: "100%", uri: svgSource }))),
+        Platform.OS === "android" && (React.createElement(View, { style: style },
+            React.createElement(SvgUri, { width: "100%", height: "100%", uri: svgSource }))),
+        Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: svgSource } }))));
+};
+export default SVG;

package/src/components/SVG.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { View, Platform, Image, StyleProp, ImageStyle } from "react-native";
+import { SvgUri } from "react-native-svg";
+
+import Config from "./Config";
+
+type SVGComponentProps = {
+  source: string;
+  style?: StyleProp<ImageStyle>;
+};
+
+const SVG = ({ source, style }: SVGComponentProps) => {
+  let svgSource =
+    source === null || source === undefined ? Config.placeholderSvgURL : source;
+
+  return (
+    <>
+      {Platform.OS === "ios" && (
+        <View style={style}>
+          <SvgUri width="100%" height="100%" uri={svgSource} />
+        </View>
+      )}
+      {Platform.OS === "android" && (
+        <View style={style}>
+          <SvgUri width="100%" height="100%" uri={svgSource} />
+        </View>
+      )}
+      {Platform.OS === "web" && (
+        <Image style={style} source={{ uri: svgSource }} />
+      )}
+    </>
+  );
+};
+
+export default SVG;

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/components/TextField.js

@@ -136,7 +136,7 @@ class TextField extends React.Component {
         return this._root && this._root.blur();
     }
     render() {
-        const { Icon, type = "underline", disabled = false, label, error = false, leftIconName, leftIconMode, rightIconName, assistiveText, underlineColor: underlineColorProp, multiline = false, numberOfLines = 4, style, theme: { colors, typography, roundness, disabledOpacity }, render = (props) => React.createElement(NativeTextInput, { ...props }), ...rest } = this.props;
+        const { Icon, type = "underline", disabled = false, label, error = false, leftIconName, leftIconMode, rightIconName, assistiveText, underlineColor: underlineColorProp, activeBorderColor: activeBorderColorProp, multiline = false, numberOfLines = 4, style, theme: { colors, typography, roundness, disabledOpacity }, render = (props) => React.createElement(NativeTextInput, { ...props }), ...rest } = this.props;
         const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
         const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
         const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
@@ -152,7 +152,7 @@ class TextField extends React.Component {
             backgroundColor = colors.divider;
         }
         else {
-            activeColor = error ? colors.error : colors.primary;
+            activeColor = error ? colors.error : activeBorderColorProp;
             placeholderColor = borderColor = colors.light;
             underlineColor = underlineColorProp;
             backgroundColor = colors.background;

package/src/components/TextField.tsx

@@ -42,6 +42,7 @@ export type Props = {
   multiline?: boolean;
   numberOfLines: number;
   underlineColor?: string;
+  activeBorderColor?: string;
   style?: StyleProp<ViewStyle> & { height?: number };
   theme: Theme;
   render?: (
@@ -237,6 +238,7 @@ class TextField extends React.Component<Props, State> {
       rightIconName,
       assistiveText,
       underlineColor: underlineColorProp,
+      activeBorderColor: activeBorderColorProp,
       multiline = false,
       numberOfLines = 4,
       style,
@@ -269,7 +271,7 @@ class TextField extends React.Component<Props, State> {
       underlineColor = "transparent";
       backgroundColor = colors.divider;
     } else {
-      activeColor = error ? colors.error : colors.primary;
+      activeColor = error ? colors.error : activeBorderColorProp;
       placeholderColor = borderColor = colors.light;
       underlineColor = underlineColorProp;
       backgroundColor = colors.background;