@draftbit/core 44.1.12-e30b54.2 → 44.1.13-2d7ff5.0

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,43 @@
+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: deviceWidth,
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+        backgroundColor: "green", // TODO
+        // backgroundColor: "rgba(255, 255, 255, 1)",
+    },
+    iosSafeArea: {
+        backgroundColor: "yellow",
+        // backgroundColor: "white",// TODO
+        flexDirection: "column",
+        width: deviceWidth,
+        maxWidth: deviceWidth,
+    },
+    iosButton: {
+        alignSelf: "flex-end",
+    },
+    iosNativePicker: {
+        //backgroundColor: "white",// TODO
+        backgroundColor: "red",
+    },
+});

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

@@ -0,0 +1,89 @@
+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: deviceWidth, // TODO
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
+    backgroundColor: "green", // TODO
+    // backgroundColor: "rgba(255, 255, 255, 1)",
+  },
+  iosSafeArea: {
+    backgroundColor: "yellow",
+    // backgroundColor: "white",// TODO
+    flexDirection: "column",
+    width: deviceWidth,
+    maxWidth: deviceWidth,
+  },
+  iosButton: {
+    alignSelf: "flex-end",
+  },
+  iosNativePicker: {
+    //backgroundColor: "white",// TODO
+    backgroundColor: "red",
+  },
+});

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

@@ -40,7 +40,7 @@ export const SEED_DATA = {
             defaultValue: true,
         }),
         keyboardShouldPersistTaps: createTextEnumProp({
-            label: "Allow Touch Events With Open Keyboard",
+            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

@@ -51,7 +51,7 @@ export const SEED_DATA = {
       defaultValue: true,
     }),
     keyboardShouldPersistTaps: createTextEnumProp({
-      label: "Allow Touch Events With Open Keyboard",
+      label: "Allow Touch Events",
       description:
         "Allows touch events on visible components to be processed while the keyboard is open",
       defaultValue: "never",