@draftbit/core 42.2.0 → 42.2.3-428e28.0

package/src/components/Picker/Picker.tsx

@@ -28,12 +28,17 @@ function normalizeOptions(options: Props["options"]): PickerOption[] {
   if (typeof options[0] === "string") {
     return (options as string[]).map((option) => ({
       label: option,
-      value: option,
+      value: String(option),
     }));
   }
 
   if (options[0].label && options[0].value) {
-    return options as PickerOption[];
+    return options.map((option) => {
+      return {
+        label: option.label,
+        value: String(option.value),
+      };
+    });
   }
 
   throw new Error(
@@ -54,7 +59,8 @@ const Picker: React.FC<Props> = ({
       if (placeholder && itemIndex === 0) {
         return;
       }
-      onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);
+      onValueChangeOverride &&
+        onValueChangeOverride(String(itemValue), itemIndex);
     },
     [placeholder, onValueChangeOverride]
   );
@@ -63,7 +69,7 @@ const Picker: React.FC<Props> = ({
 
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
-    if (initialValue !== previousInitialValue) {
+    if (String(initialValue) !== String(previousInitialValue)) {
       const index = normalizedOptions.findIndex(
         (opt) => opt.value === initialValue
       );
@@ -72,7 +78,7 @@ const Picker: React.FC<Props> = ({
         return;
       }
 
-      onValueChange(initialValue, index);
+      onValueChange(String(initialValue), index);
     }
   }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);
 
@@ -83,7 +89,7 @@ const Picker: React.FC<Props> = ({
   return (
     <PickerComponent
       {...props}
-      selectedValue={value}
+      selectedValue={String(value)}
       placeholder={placeholder}
       options={pickerOptions}
       onValueChange={onValueChange}

package/src/components/Picker/PickerComponent.android.js

@@ -41,17 +41,17 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginLeft",
         ]);
     const selectedLabel = selectedValue &&
-        (options.find((opt) => opt.value === selectedValue)?.label ??
-            selectedValue);
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
-            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
                     opacity: 0,
                     position: "absolute",
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
+                    width: "100%",
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 

package/src/components/Picker/PickerComponent.android.tsx

@@ -63,8 +63,7 @@ const Picker: React.FC<PickerComponentProps> = ({
 
   const selectedLabel =
     selectedValue &&
-    (options.find((opt) => opt.value === selectedValue)?.label ??
-      selectedValue);
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
 
   return (
     <Touchable
@@ -76,9 +75,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <NativePicker
           enabled={!disabled}
           selectedValue={selectedValue}
-          onValueChange={(value, index) =>
-            onValueChange(value.toString(), index)
-          }
+          onValueChange={onValueChange}
           style={{
             opacity: 0,
             position: "absolute",
@@ -86,6 +83,7 @@ const Picker: React.FC<PickerComponentProps> = ({
             left: 0,
             right: 0,
             bottom: 0,
+            width: "100%",
           }}
         >
           {options.map((o) => (

package/src/components/Picker/PickerComponent.ios.js

@@ -39,9 +39,11 @@ const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = f
             "marginBottom",
             "marginLeft",
         ]);
+    const selectedLabel = selectedValue &&
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(View, { style: [styles.container, viewStyles] },
         React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
-            React.createElement(TextField, { ...props, value: selectedValue, placeholder: placeholder, 
+            React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder, 
                 // @ts-ignore
                 ref: textField, disabled: disabled, pointerEvents: "none", 
                 // @ts-expect-error
@@ -50,7 +52,7 @@ const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = f
             React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
                 React.createElement(SafeAreaView, { style: styles.pickerContainer },
                     React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close"),
-                    React.createElement(NativePicker, { selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index) }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
+                    React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
 };
 const styles = StyleSheet.create({
     container: {
@@ -64,7 +66,11 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "center",
     },
-    pickerContainer: { flexDirection: "column", width: "100%" },
+    pickerContainer: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+    },
     closeButton: {
         alignSelf: "flex-end",
     },

package/src/components/Picker/PickerComponent.ios.tsx

@@ -64,12 +64,16 @@ const Picker: React.FC<PickerComponentProps & IconSlot> = ({
       "marginLeft",
     ]);
 
+  const selectedLabel =
+    selectedValue &&
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+
   return (
     <View style={[styles.container, viewStyles]}>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
         <TextField
           {...props}
-          value={selectedValue}
+          value={String(selectedLabel)}
           placeholder={placeholder}
           // @ts-ignore
           ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
@@ -92,10 +96,9 @@ const Picker: React.FC<PickerComponentProps & IconSlot> = ({
                 Close
               </Button>
               <NativePicker
+                style={{ backgroundColor: "white" }}
                 selectedValue={selectedValue}
-                onValueChange={(value, index) =>
-                  onValueChange(value.toString(), index)
-                }
+                onValueChange={onValueChange}
               >
                 {options.map((o: any) => (
                   <NativePicker.Item
@@ -125,7 +128,11 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "center",
   },
-  pickerContainer: { flexDirection: "column", width: "100%" },
+  pickerContainer: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%",
+  },
   closeButton: {
     alignSelf: "flex-end",
   },

package/src/components/Picker/PickerComponent.web.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { View, StyleSheet, Picker as NativePicker } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import omit from "lodash.omit";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
@@ -40,11 +41,10 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginLeft",
         ]);
     const selectedLabel = selectedValue &&
-        (options.find((opt) => opt.value === selectedValue)?.label ??
-            selectedValue);
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
-            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
                     flex: 1,
                     opacity: 0,
                     position: "absolute",
@@ -52,6 +52,7 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
                     left: 0,
                     right: 0,
                     bottom: 0,
+                    width: "100%",
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 

package/src/components/Picker/PickerComponent.web.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { View, StyleSheet, Picker as NativePicker } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import omit from "lodash.omit";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
@@ -62,8 +63,7 @@ const Picker: React.FC<PickerComponentProps> = ({
 
   const selectedLabel =
     selectedValue &&
-    (options.find((opt) => opt.value === selectedValue)?.label ??
-      selectedValue);
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
 
   return (
     <Touchable
@@ -75,9 +75,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <NativePicker
           enabled={!disabled}
           selectedValue={selectedValue}
-          onValueChange={(value, index) =>
-            onValueChange(value.toString(), index)
-          }
+          onValueChange={onValueChange}
           style={{
             flex: 1,
             opacity: 0,
@@ -86,6 +84,7 @@ const Picker: React.FC<PickerComponentProps> = ({
             left: 0,
             right: 0,
             bottom: 0,
+            width: "100%",
           }}
         >
           {options.map((o) => (

package/src/components/StarRating.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet, Pressable, } from "react-native";
 import { withTheme } from "../theming";
-import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, GROUPS, } from "@draftbit/types";
 const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
     const [localRating, setLocalRating] = React.useState(rating);
     React.useEffect(() => {
@@ -71,6 +71,7 @@ export const SEED_DATA = {
             step: 1,
         }),
         rating: createStaticNumberProp({
+            group: GROUPS.data,
             label: "Rating",
         }),
         isEditable: createStaticBoolProp({

package/src/components/StarRating.tsx

@@ -17,6 +17,7 @@ import {
   createStaticBoolProp,
   Triggers,
   createColorProp,
+  GROUPS,
 } from "@draftbit/types";
 
 type Props = {
@@ -143,6 +144,7 @@ export const SEED_DATA = {
       step: 1,
     }),
     rating: createStaticNumberProp({
+      group: GROUPS.data,
       label: "Rating",
     }),
     isEditable: createStaticBoolProp({

package/src/components/Swiper/Swiper.js

@@ -1,13 +1,8 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
-const styles = StyleSheet.create({
-    wrapper: {
-        flex: 1,
-    },
-});
-const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", dotsTouchable = true, children, style, }) => (React.createElement(View, { style: [styles.wrapper, style] },
+const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", dotsTouchable = true, children, style, }) => (React.createElement(View, { style: style },
     React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
             prevTitle,
             nextTitle,
@@ -19,30 +14,41 @@ export const SEED_DATA = {
     tag: "Swiper",
     description: "Swiper container",
     category: COMPONENT_TYPES.container,
+    layout: {
+        height: 300,
+        width: "100%",
+    },
     props: {
         from: createNumberProp({
+            group: GROUPS.basic,
             label: "Initial Slide",
         }),
         loop: createBoolProp({
+            group: GROUPS.basic,
             label: "Loop",
         }),
         timeout: createNumberProp({
+            group: GROUPS.basic,
             label: "Timeout",
             defaultValue: 0,
         }),
         vertical: createBoolProp({
+            group: GROUPS.basic,
             label: "Vertical",
             defaultValue: false,
         }),
         prevTitle: createTextProp({
+            group: GROUPS.basic,
             label: "Previous Title",
             defaultValue: "",
         }),
         nextTitle: createTextProp({
+            group: GROUPS.basic,
             label: "Next Title",
             defaultValue: "",
         }),
         dotsTouchable: createBoolProp({
+            group: GROUPS.basic,
             label: "Dots Touchable",
             defaultValue: true,
         }),

package/src/components/Swiper/Swiper.tsx

@@ -3,17 +3,12 @@ import {
   createBoolProp,
   createNumberProp,
   createTextProp,
+  GROUPS,
 } from "@draftbit/types";
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
-});
-
 export interface SwiperProps {
   vertical?: boolean;
   loop?: boolean;
@@ -37,7 +32,7 @@ const Swiper = ({
   children,
   style,
 }: SwiperProps) => (
-  <View style={[styles.wrapper, style]}>
+  <View style={style}>
     <SwiperComponent
       from={from}
       loop={loop}
@@ -61,30 +56,41 @@ export const SEED_DATA = {
   tag: "Swiper",
   description: "Swiper container",
   category: COMPONENT_TYPES.container,
+  layout: {
+    height: 300,
+    width: "100%",
+  },
   props: {
     from: createNumberProp({
+      group: GROUPS.basic,
       label: "Initial Slide",
     }),
     loop: createBoolProp({
+      group: GROUPS.basic,
       label: "Loop",
     }),
     timeout: createNumberProp({
+      group: GROUPS.basic,
       label: "Timeout",
       defaultValue: 0,
     }),
     vertical: createBoolProp({
+      group: GROUPS.basic,
       label: "Vertical",
       defaultValue: false,
     }),
     prevTitle: createTextProp({
+      group: GROUPS.basic,
       label: "Previous Title",
       defaultValue: "",
     }),
     nextTitle: createTextProp({
+      group: GROUPS.basic,
       label: "Next Title",
       defaultValue: "",
     }),
     dotsTouchable: createBoolProp({
+      group: GROUPS.basic,
       label: "Dots Touchable",
       defaultValue: true,
     }),

package/src/components/TextField.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager, } from "react-native";
 import { withTheme } from "../theming";
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, Triggers, createColorProp, createNumberProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, Triggers, createColorProp, createNumberProp, createFieldNameProp, } from "@draftbit/types";
 import { applyStyles, extractStyles } from "../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
@@ -483,7 +483,7 @@ const SEED_DATA_PROPS = {
 const SEED_DATA_TRIGGERS = [Triggers.OnChangeText];
 export const SEED_DATA = [
     {
-        name: "Text Field",
+        name: "Styled Text Field",
         tag: "TextField",
         description: "A text input with a solid border or underline",
         category: COMPONENT_TYPES.input,
@@ -521,7 +521,7 @@ export const SEED_DATA = [
         layout: {},
     },
     {
-        name: "Text Area",
+        name: "Styled Text Area",
         tag: "TextField",
         description: "A text area with a solid border or underline",
         category: COMPONENT_TYPES.input,
@@ -557,6 +557,9 @@ export const SEED_DATA = [
                 defaultValue: 4,
                 group: GROUPS.basic,
             }),
+            fieldName: createFieldNameProp({
+                defaultValue: "textAreaValue",
+            }),
         },
         layout: {},
     },

package/src/components/TextField.tsx

@@ -26,6 +26,7 @@ import {
   Triggers,
   createColorProp,
   createNumberProp,
+  createFieldNameProp,
 } from "@draftbit/types";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
@@ -702,7 +703,7 @@ const SEED_DATA_PROPS = {
 const SEED_DATA_TRIGGERS = [Triggers.OnChangeText];
 export const SEED_DATA = [
   {
-    name: "Text Field",
+    name: "Styled Text Field",
     tag: "TextField",
     description: "A text input with a solid border or underline",
     category: COMPONENT_TYPES.input,
@@ -741,7 +742,7 @@ export const SEED_DATA = [
     layout: {},
   },
   {
-    name: "Text Area",
+    name: "Styled Text Area",
     tag: "TextField",
     description: "A text area with a solid border or underline",
     category: COMPONENT_TYPES.input,
@@ -777,6 +778,9 @@ export const SEED_DATA = [
         defaultValue: 4,
         group: GROUPS.basic,
       }),
+      fieldName: createFieldNameProp({
+        defaultValue: "textAreaValue",
+      }),
     },
     layout: {},
   },

package/src/mappings/TextArea.js

@@ -0,0 +1,46 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  FIELD_NAME,
+  TEXT_INPUT_PROPS,
+  Triggers,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Text Area",
+  tag: "TextInput",
+  description: "An input field that allows for multiple lines.",
+  category: COMPONENT_TYPES.basic,
+  layout: { flex: 1 },
+  triggers: [Triggers.OnChangeText],
+  props: {
+    ...TEXT_INPUT_PROPS,
+    multiline: {
+      label: "Multiline",
+      description: "Multiline",
+      group: GROUPS.uncategorized,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: true,
+      editable: true,
+      required: false,
+    },
+    numberOfLines: {
+      label: "Number Of Lines",
+      description: "Number Of Lines",
+      group: GROUPS.basic,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: 4,
+      editable: true,
+      required: false,
+    },
+    fieldName: {
+      ...FIELD_NAME,
+      defaultValue: "textInputValue",
+      handlerPropName: "onChangeText",
+    },
+  },
+};

package/src/mappings/TextInput.js

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   TEXT_INPUT_PROPS,
+  NUMBER_INPUT_PROPS,
   Triggers,
 } from "@draftbit/types";
 
@@ -222,7 +223,7 @@ export const SEED_DATA = [
     },
     triggers: [Triggers.OnChangeText],
     props: {
-      ...TEXT_INPUT_PROPS,
+      ...NUMBER_INPUT_PROPS,
       ...COMMON_NATIVE_INPUT_PROPS,
     },
   },