@draftbit/core 46.2.3 → 46.2.4-2fc21b.3

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.3",
+  "version": "46.2.4-2fc21b.3+2fc21b45",
   "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-2fc21b.3+2fc21b45",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -53,6 +53,7 @@
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
+    "react-native-svg": "^12.3.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -79,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "9a0a65dfc2aff945da5cbe7db48d07114c8cea7c"
+  "gitHead": "2fc21b450f5dc6abb219668f9795e8805d444bc9"
 }

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

package/src/index.js

@@ -17,6 +17,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";

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";

package/src/mappings/Image.js

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

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(),