@draftbit/core 44.1.11 → 44.1.12-8b7606.4

package/src/components/Picker/Picker.tsx

@@ -6,6 +6,7 @@ import {
   Platform,
   ViewStyle,
   StyleProp,
+  Dimensions,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -81,6 +82,8 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
   );
 }
 
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+const isIos = Platform.OS === "ios";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -106,14 +109,17 @@ const Picker: React.FC<PickerProps> = ({
   rightIconName,
   type = "solid",
 }) => {
+  const androidPickerRef = React.useRef<any | undefined>(undefined);
+
   const [internalValue, setInternalValue] = React.useState<string | undefined>(
     value || defaultValue
   );
 
-  const [pickerVisible, togglePickerVisible] = React.useReducer(
-    (state) => !state,
-    false
-  );
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const togglePickerVisible = () => {
+    setPickerVisible(!pickerVisible);
+  };
 
   React.useEffect(() => {
     if (value != null) {
@@ -127,6 +133,12 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [defaultValue]);
 
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      androidPickerRef?.current?.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
+
   const normalizedOptions = normalizeOptions(options);
 
   const pickerOptions = placeholder
@@ -193,8 +205,6 @@ const Picker: React.FC<PickerProps> = ({
     ...extractedMarginStyles,
   };
 
-  const platform = Platform.OS;
-
   const stylesWithoutBordersAndMargins = omit(viewStyles, [
     ...borderStyleNames,
     ...marginStyleNames,
@@ -335,7 +345,7 @@ const Picker: React.FC<PickerProps> = ({
       </Touchable>
 
       {/* iosPicker */}
-      {platform === "ios" && pickerVisible ? (
+      {isIos && pickerVisible ? (
         <Portal>
           <View
             style={[
@@ -374,12 +384,14 @@ const Picker: React.FC<PickerProps> = ({
       ) : null}
 
       {/* nonIosPicker */}
-      {platform !== "ios" ? (
+      {!isIos && pickerVisible ? (
         <NativePicker
-          enabled={!disabled}
+          enabled={pickerVisible}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}
+          ref={androidPickerRef}
+          onBlur={() => setPickerVisible(false)}
         >
           {(pickerOptions as unknown as PickerOption[]).map((option) => (
             <NativePicker.Item
@@ -400,6 +412,8 @@ const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
     alignItems: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
   },
   touchableContainer: {
     flex: 1,
@@ -436,11 +450,15 @@ const styles = StyleSheet.create({
     right: 0,
     flexDirection: "row",
     justifyContent: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
   iosSafeArea: {
     backgroundColor: "white",
     flexDirection: "column",
     width: "100%",
+    maxWidth: deviceWidth,
   },
   iosButton: {
     alignSelf: "flex-end",
@@ -456,5 +474,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
 });

package/src/mappings/KeyboardAwareScrollView.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Keyboard Aware Scroll View",
     tag: "KeyboardAwareScrollView",
@@ -39,5 +39,11 @@ export const SEED_DATA = {
             description: "Show or hide the vertical scroll indicator",
             defaultValue: true,
         }),
+        keyboardShouldPersistTaps: createTextEnumProp({
+            label: "Allow Touch Events",
+            description: "Allows touch events on visible components to be processed while the keyboard is open",
+            defaultValue: "never",
+            options: ["never", "always"],
+        }),
     },
 };

package/src/mappings/KeyboardAwareScrollView.ts

@@ -2,6 +2,7 @@ import {
   COMPONENT_TYPES,
   createStaticBoolProp,
   createStaticNumberProp,
+  createTextEnumProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -49,5 +50,12 @@ export const SEED_DATA = {
       description: "Show or hide the vertical scroll indicator",
       defaultValue: true,
     }),
+    keyboardShouldPersistTaps: createTextEnumProp({
+      label: "Allow Touch Events",
+      description:
+        "Allows touch events on visible components to be processed while the keyboard is open",
+      defaultValue: "never",
+      options: ["never", "always"],
+    }),
   },
 };

package/src/mappings/Picker.js

@@ -131,8 +131,8 @@ export const SEED_DATA = [
                 required: true,
                 group: GROUPS.basic,
             },
-            iconSize: createIconSizeProp(),
-            iconColor: createColorProp(),
+            iconSize: createIconSizeProp({ defaultValue: 24 }),
+            iconColor: createColorProp({ label: "Icon Color" }),
         },
         layout: {},
     },

package/src/mappings/Picker.ts

@@ -145,8 +145,8 @@ export const SEED_DATA = [
         required: true,
         group: GROUPS.basic,
       },
-      iconSize: createIconSizeProp(),
-      iconColor: createColorProp(),
+      iconSize: createIconSizeProp({ defaultValue: 24 }),
+      iconColor: createColorProp({ label: "Icon Color" }),
     },
     layout: {},
   },