@draftbit/core 44.1.12-ee6c2c.1 → 44.1.13-cd2af3.0

package/src/components/Picker/Picker.js

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, } from "react-native";
+import { View, StyleSheet, Text, Dimensions, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Picker as NativePicker } from "@react-native-picker/picker";
+// import { SafeAreaView } from "react-native-safe-area-context";
+// import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
-import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+// import Portal from "../Portal/Portal";
+// import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
+// @ts-expect-error
+import { PickerComponent } from "./PickerComponent";
 function normalizeOptions(options) {
     if (options.length === 0) {
         return [];
@@ -30,12 +32,20 @@ function normalizeOptions(options) {
     }
     throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
+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)";
-const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, 
+// theme,
+assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
+    const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(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) {
             setInternalValue(value);
@@ -46,11 +56,16 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
+    React.useEffect(() => {
+        if (pickerVisible && androidPickerRef.current) {
+            androidPickerRef?.current?.focus();
+        }
+    }, [pickerVisible, androidPickerRef]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
-    const { colors } = theme;
+    // const { colors } = theme;
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -96,7 +111,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         height: 60,
         ...extractedMarginStyles,
     };
-    const platform = Platform.OS;
     const stylesWithoutBordersAndMargins = omit(viewStyles, [
         ...borderStyleNames,
         ...marginStyleNames,
@@ -171,23 +185,22 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                         React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
                     rightIcon)),
             assistiveTextLabel),
-        platform === "ios" && pickerVisible ? (React.createElement(Portal, null,
-            React.createElement(View, { style: [
-                    styles.iosPicker,
-                    {
-                        backgroundColor: colors.divider,
-                    },
-                ] },
-                React.createElement(SafeAreaView, { style: styles.iosSafeArea },
-                    React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
-                    React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
-        platform !== "ios" ? (React.createElement(NativePicker, { enabled: !disabled, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+        React.createElement(View, null, pickerVisible ? (React.createElement(PickerComponent, { ...{
+                Icon,
+                androidPickerRef,
+                togglePickerVisible,
+                pickerOptions,
+                internalValue,
+                handleValueChange,
+            } })) : null)));
 };
 export default withTheme(Picker);
 const styles = StyleSheet.create({
     marginsContainer: {
         alignSelf: "stretch",
         alignItems: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
     },
     touchableContainer: {
         flex: 1,
@@ -224,11 +237,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",
@@ -244,5 +261,7 @@ const styles = StyleSheet.create({
         right: 0,
         bottom: 0,
         width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
     },
 });

package/src/components/Picker/Picker.tsx

@@ -3,17 +3,18 @@ import {
   View,
   StyleSheet,
   Text,
-  Platform,
+  // Platform,
   ViewStyle,
   StyleProp,
+  Dimensions,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Picker as NativePicker } from "@react-native-picker/picker";
+// import { SafeAreaView } from "react-native-safe-area-context";
+// import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
-import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+// import Portal from "../Portal/Portal";
+// import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
@@ -23,6 +24,8 @@ import {
   borderStyleNames,
   marginStyleNames,
 } from "../../utilities";
+// @ts-expect-error
+import { PickerComponent } from "./PickerComponent";
 
 export interface PickerOption {
   value: string;
@@ -81,6 +84,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)";
@@ -95,7 +100,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholder,
   value,
   disabled = false,
-  theme,
+  // theme,
   assistiveText,
   label,
   iconColor = unstyledColor,
@@ -106,14 +111,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,13 +135,19 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [defaultValue]);
 
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      androidPickerRef?.current?.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
+
   const normalizedOptions = normalizeOptions(options);
 
   const pickerOptions = placeholder
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
-  const { colors } = theme;
+  // const { colors } = theme;
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -193,8 +207,6 @@ const Picker: React.FC<PickerProps> = ({
     ...extractedMarginStyles,
   };
 
-  const platform = Platform.OS;
-
   const stylesWithoutBordersAndMargins = omit(viewStyles, [
     ...borderStyleNames,
     ...marginStyleNames,
@@ -334,8 +346,23 @@ const Picker: React.FC<PickerProps> = ({
         {assistiveTextLabel}
       </Touchable>
 
+      <View>
+        {pickerVisible ? (
+          <PickerComponent
+            {...{
+              Icon,
+              androidPickerRef,
+              togglePickerVisible,
+              pickerOptions,
+              internalValue,
+              handleValueChange,
+            }}
+          />
+        ) : null}
+      </View>
+
       {/* iosPicker */}
-      {platform === "ios" && pickerVisible ? (
+      {/* isIos && pickerVisible ? (
         <Portal>
           <View
             style={[
@@ -371,15 +398,17 @@ const Picker: React.FC<PickerProps> = ({
             </SafeAreaView>
           </View>
         </Portal>
-      ) : null}
+      ) : 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
@@ -389,7 +418,7 @@ const Picker: React.FC<PickerProps> = ({
             />
           ))}
         </NativePicker>
-      ) : null}
+      ) : null */}
     </View>
   );
 };
@@ -400,6 +429,8 @@ const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
     alignItems: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
   },
   touchableContainer: {
     flex: 1,
@@ -436,11 +467,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 +491,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
 });

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+export const PickerComponent = ({ androidPickerRef, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
+    return (React.createElement(NativePicker, { selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: togglePickerVisible }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
+};
+const styles = StyleSheet.create({
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+});

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+
+import { Picker as NativePicker } from "@react-native-picker/picker";
+
+import type { IconSlot } from "../../interfaces/Icon";
+
+import { PickerOption } from "./Picker";
+
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+
+interface PickerComponentProps {
+  Icon: IconSlot["Icon"];
+  androidPickerRef: React.RefObject<any>;
+  togglePickerVisible: () => void;
+  pickerOptions: PickerOption[];
+  internalValue: string | undefined;
+  handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+
+export const PickerComponent: React.FC<PickerComponentProps> = ({
+  androidPickerRef,
+  togglePickerVisible,
+  pickerOptions,
+  internalValue,
+  handleValueChange,
+}) => {
+  return (
+    <NativePicker
+      selectedValue={internalValue}
+      onValueChange={handleValueChange}
+      style={styles.nonIosPicker}
+      ref={androidPickerRef}
+      onBlur={togglePickerVisible}
+    >
+      {(pickerOptions as unknown as PickerOption[]).map((option) => (
+        <NativePicker.Item
+          label={option.label}
+          value={option.value}
+          key={option.value}
+        />
+      ))}
+    </NativePicker>
+  );
+};
+
+const styles = StyleSheet.create({
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
+  },
+});

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+export const PickerComponent = ({ Icon, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
+    return (React.createElement(Portal, null,
+        React.createElement(View, { style: styles.iosPicker },
+            React.createElement(SafeAreaView, { style: styles.iosSafeArea },
+                React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
+                React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))))));
+};
+const styles = StyleSheet.create({
+    iosPicker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+        backgroundColor: "rgba(234, 237, 242, 1)",
+    },
+    iosSafeArea: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: deviceWidth,
+    },
+    iosButton: {
+        alignSelf: "flex-end",
+    },
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+});

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+
+import type { IconSlot } from "../../interfaces/Icon";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import { PickerOption } from "./Picker";
+
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+
+interface PickerComponentProps {
+  Icon: IconSlot["Icon"];
+  androidPickerRef: React.RefObject<any>;
+  togglePickerVisible: () => void;
+  pickerOptions: PickerOption[];
+  internalValue: string | undefined;
+  handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+
+export const PickerComponent: React.FC<PickerComponentProps> = ({
+  Icon,
+  togglePickerVisible,
+  pickerOptions,
+  internalValue,
+  handleValueChange,
+}) => {
+  return (
+    <Portal>
+      <View style={styles.iosPicker}>
+        <SafeAreaView style={styles.iosSafeArea}>
+          <Button
+            Icon={Icon}
+            type="text"
+            onPress={togglePickerVisible}
+            style={styles.iosButton}
+          >
+            {"Close"}
+          </Button>
+
+          <NativePicker
+            style={styles.iosNativePicker}
+            selectedValue={internalValue}
+            onValueChange={handleValueChange}
+          >
+            {(pickerOptions as unknown as PickerOption[]).map((option) => (
+              <NativePicker.Item
+                label={option.label}
+                value={option.value}
+                key={option.value}
+              />
+            ))}
+          </NativePicker>
+        </SafeAreaView>
+      </View>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  iosPicker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
+    backgroundColor: "rgba(234, 237, 242, 1)",
+  },
+  iosSafeArea: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%",
+    maxWidth: deviceWidth,
+  },
+  iosButton: {
+    alignSelf: "flex-end",
+  },
+  iosNativePicker: {
+    backgroundColor: "white",
+  },
+});

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+export const PickerComponent = ({ androidPickerRef, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
+    return (React.createElement(NativePicker, { selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: togglePickerVisible }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
+};
+const styles = StyleSheet.create({
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+});

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+
+import { Picker as NativePicker } from "@react-native-picker/picker";
+
+import type { IconSlot } from "../../interfaces/Icon";
+
+import { PickerOption } from "./Picker";
+
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+
+interface PickerComponentProps {
+  Icon: IconSlot["Icon"];
+  androidPickerRef: React.RefObject<any>;
+  togglePickerVisible: () => void;
+  pickerOptions: PickerOption[];
+  internalValue: string | undefined;
+  handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+
+export const PickerComponent: React.FC<PickerComponentProps> = ({
+  androidPickerRef,
+  togglePickerVisible,
+  pickerOptions,
+  internalValue,
+  handleValueChange,
+}) => {
+  return (
+    <NativePicker
+      selectedValue={internalValue}
+      onValueChange={handleValueChange}
+      style={styles.nonIosPicker}
+      ref={androidPickerRef}
+      onBlur={togglePickerVisible}
+    >
+      {(pickerOptions as unknown as PickerOption[]).map((option) => (
+        <NativePicker.Item
+          label={option.label}
+          value={option.value}
+          key={option.value}
+        />
+      ))}
+    </NativePicker>
+  );
+};
+
+const styles = StyleSheet.create({
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    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"],
+    }),
   },
 };