@draftbit/core 44.1.12 → 44.1.13-91822a.0

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,
+  },
+});