@draftbit/core 46.2.4-f941fc.0 → 46.2.4

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-f941fc.0+f941fce3",
+  "version": "46.2.4",
   "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,8 +53,7 @@
     "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-svg": "^12.3.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -81,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "f941fce333cbde99353912ffe850983d835bbd1e"
+  "gitHead": "36679318e61f7e848ffc65bd0fe7cd93016a2f56"
 }

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.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/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;

package/src/index.tsx

@@ -18,6 +18,7 @@ export { default as FAB } from "./components/FAB";
 export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
 export { default as IconButton } from "./components/IconButton";
 export { default as Image } from "./components/Image";
+export { default as SVG } from "./components/SVG";
 export { default as NumberInput } from "./components/NumberInput";
 export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as StarRating } from "./components/StarRating";
@@ -33,7 +34,6 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { TabView, TabViewItem } from "./components/TabView";
 
 export {
   Center,

package/src/mappings/Image.ts

@@ -17,8 +17,8 @@ export const SEED_DATA = {
     StylesPanelSections.Effects,
   ],
   layout: {
-    width: 250,
-    height: 250,
+    width: 100,
+    height: 100,
   },
   props: {
     source: createImageProp(),