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

package/src/components/Picker/Picker.js

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } 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 [];
@@ -31,11 +33,13 @@ 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 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, setPickerVisible] = React.useState(false);
@@ -61,7 +65,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
     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 = [
@@ -181,17 +185,14 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                         React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
                     rightIcon)),
             assistiveTextLabel),
-        isIos && 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,
-        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, 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({
@@ -207,6 +208,7 @@ const styles = StyleSheet.create({
         width: "100%",
         alignSelf: "stretch",
         alignItems: "center",
+        backgroundColor: "pink", // TODO
     },
     outsetContainer: {
         flex: 1,

package/src/components/Picker/Picker.tsx

@@ -3,18 +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";
@@ -24,6 +24,8 @@ import {
   borderStyleNames,
   marginStyleNames,
 } from "../../utilities";
+// @ts-expect-error
+import { PickerComponent } from "./PickerComponent";
 
 export interface PickerOption {
   value: string;
@@ -83,7 +85,7 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
 }
 
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
-const isIos = Platform.OS === "ios";
+// 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)";
@@ -98,7 +100,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholder,
   value,
   disabled = false,
-  theme,
+  // theme,
   assistiveText,
   label,
   iconColor = unstyledColor,
@@ -145,7 +147,7 @@ const Picker: React.FC<PickerProps> = ({
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
-  const { colors } = theme;
+  // const { colors } = theme;
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -344,8 +346,23 @@ const Picker: React.FC<PickerProps> = ({
         {assistiveTextLabel}
       </Touchable>
 
+      <View>
+        {pickerVisible ? (
+          <PickerComponent
+            {...{
+              Icon,
+              androidPickerRef,
+              togglePickerVisible,
+              pickerOptions,
+              internalValue,
+              handleValueChange,
+            }}
+          />
+        ) : null}
+      </View>
+
       {/* iosPicker */}
-      {isIos && pickerVisible ? (
+      {/* isIos && pickerVisible ? (
         <Portal>
           <View
             style={[
@@ -381,10 +398,10 @@ const Picker: React.FC<PickerProps> = ({
             </SafeAreaView>
           </View>
         </Portal>
-      ) : null}
+      ) : null */}
 
       {/* nonIosPicker */}
-      {!isIos && pickerVisible ? (
+      {/* !isIos && pickerVisible ? (
         <NativePicker
           enabled={pickerVisible}
           selectedValue={internalValue}
@@ -401,7 +418,7 @@ const Picker: React.FC<PickerProps> = ({
             />
           ))}
         </NativePicker>
-      ) : null}
+      ) : null */}
     </View>
   );
 };
@@ -421,6 +438,7 @@ const styles = StyleSheet.create({
     width: "100%",
     alignSelf: "stretch",
     alignItems: "center",
+    backgroundColor: "pink", // TODO
   },
   outsetContainer: {
     flex: 1,

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