@draftbit/core 44.1.12 → 44.1.13-6f194c.0

package/lib/typescript/src/components/Picker/PickerComponent.web.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { IconSlot } from "../../interfaces/Icon";
+import { PickerOption } from "./Picker";
+interface PickerComponentProps {
+    Icon: IconSlot["Icon"];
+    androidPickerRef: React.RefObject<any>;
+    togglePickerVisible: () => void;
+    pickerOptions: PickerOption[];
+    internalValue: string | undefined;
+    handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+export declare const PickerComponent: React.FC<PickerComponentProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.1.12",
+  "version": "44.1.13-6f194c.0+6f194c98",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "f30749b7654f36d4801948ae93c620dfae3c0df8"
+  "gitHead": "6f194c9891a5370de170060fbc0a190e14060825"
 }

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,18 @@
+import * as React from "react";
+import { /* StyleSheet, Dimensions, View, */ Text } from "react-native";
+export const PickerComponent = () => {
+    return React.createElement(Text, null, "android");
+};
+// 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,37 @@
+import * as React from "react";
+import { /* StyleSheet, Dimensions, View, */ Text } 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> = () => {
+  return <Text>android</Text>;
+};
+
+// 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.js

@@ -0,0 +1,185 @@
+import * as React from "react";
+import { View, /* StyleSheet, */ Text, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { omit, pick, pickBy, identity } from "lodash";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles } from "../../utilities";
+const Picker = ({ Icon, style, options = [], placeholder = "", value: selectedValue = "", disabled = false, onValueChange = () => { }, theme, assistiveText, label, leftIconMode = "inset", leftIconName, placeholderTextColor, rightIconName, type, }) => {
+    const [pickerVisible, setIsPickerVisible] = React.useState(false);
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { colors } = theme;
+    console.log({
+    // viewStyles,
+    // textStyles,
+    // options,
+    // placeholder,
+    // selectedValue,
+    // theme,
+    // disabled,
+    // onValueChange,
+    // colors,
+    // assistiveText,
+    // label,
+    // leftIconMode,
+    // leftIconName,
+    // placeholderTextColor,
+    // rightIconName,
+    // type,
+    });
+    const borders = [
+        "borderRadius",
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "borderColor",
+        "borderStyle",
+    ];
+    const borderStyles = {
+        ...{
+            ...(type === "solid"
+                ? {
+                    borderTopLeftRadius: 5,
+                    borderTopRightRadius: 5,
+                    borderBottomRightRadius: 5,
+                    borderBottomLeftRadius: 5,
+                    borderTopWidth: 1,
+                    borderRightWidth: 1,
+                    borderLeftWidth: 1,
+                }
+                : {}),
+            borderBottomWidth: 1,
+            borderColor: colors.light,
+            borderStyle: "solid",
+        },
+        ...pick(viewStyles, borders),
+    };
+    const margins = ["marginLeft", "marginRight", "marginTop", "marginBottom"];
+    const marginStyles = pick(viewStyles, margins);
+    const stylesWithoutBordersAndMargins = {
+        ...{
+            height: 60,
+            width: "100%",
+        },
+        ...omit(viewStyles, [...borders, ...margins]),
+    };
+    const selectedLabel = selectedValue &&
+        (options.find((o) => o.value === selectedValue)?.label ??
+            selectedValue);
+    const labelText = label ? (React.createElement(Text, { style: {
+            textAlign: textStyles.textAlign,
+            color: colors.light,
+            fontSize: 12,
+            paddingBottom: 4,
+        } }, label)) : null;
+    const leftIconOutset = leftIconMode === "outset";
+    const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, size: 24, style: {
+            marginRight: 8,
+            marginLeft: -6,
+        } })) : null;
+    const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, size: 24, style: {
+            marginRight: -6,
+            marginLeft: 8,
+        } })) : null;
+    // @ts-ignore
+    const width = stylesWithoutBordersAndMargins?.width ?? undefined;
+    const textAlign = textStyles?.textAlign;
+    const paddingLeft = leftIconOutset &&
+        (!textAlign || textAlign === "left" || textAlign === "justify")
+        ? 28 // icon size + 4
+        : 0;
+    const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
+            textAlign,
+            width,
+            paddingLeft,
+            color: colors.light,
+            fontSize: 12,
+            paddingTop: 4,
+        } }, assistiveText)) : null;
+    const primaryTextStyle = {
+        color: colors.light,
+        fontSize: 14,
+        ...pickBy(textStyles, identity),
+        ...(placeholder === selectedValue
+            ? { color: placeholderTextColor ?? colors.light }
+            : {}),
+    };
+    const toggleVisibility = () => setIsPickerVisible(!pickerVisible);
+    return (React.createElement(View, { style: [
+            {
+                alignSelf: "stretch",
+            },
+            marginStyles,
+        ] },
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility, style: { alignSelf: "stretch", alignItems: "center" } },
+            React.createElement(View, { pointerEvents: "none", style: [
+                    {
+                        //alignSelf: "stretch",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                    },
+                    stylesWithoutBordersAndMargins,
+                    // @ts-ignore
+                    !leftIconOutset && borderStyles,
+                ] },
+                leftIcon,
+                React.createElement(View, { style: [
+                        {
+                            flex: 1,
+                            height: "100%",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                        },
+                        // @ts-ignore
+                        leftIconOutset && borderStyles,
+                    ] },
+                    React.createElement(View, { style: {
+                            flex: 1,
+                            // paddingTop: 0,
+                            // paddingRight: 0, // add inner text paddding settings
+                            // paddingLeft: 0,
+                            // paddingBottom: 0,
+                        } },
+                        labelText,
+                        React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
+                    rightIcon)),
+            assistiveTextLabel),
+        Platform.OS === "ios" && pickerVisible ? (React.createElement(Portal, null,
+            React.createElement(View, { style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    backgroundColor: colors.divider,
+                } },
+                React.createElement(SafeAreaView, { style: {
+                        backgroundColor: "white",
+                        flexDirection: "column",
+                        width: "100%",
+                    } },
+                    React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: { alignSelf: "flex-end" } }, "Close"),
+                    React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))))))) : (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: selectedValue, onValueChange: onValueChange, style: {
+                opacity: 0,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: "100%",
+            } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))))));
+};
+export default withTheme(Picker);