@draftbit/core 44.1.8-8983ea.1 → 44.1.9-55c084.1

package/lib/typescript/src/utilities.d.ts

@@ -3,6 +3,12 @@ export declare function extractStyles(style: StyleProp<any>): {
     viewStyles: any;
     textStyles: TextStyle;
 };
+export declare const borderStyleNames: string[];
+export declare const marginStyleNames: string[];
+export declare function extractBorderAndMarginStyles(style: StyleProp<any>, additionalBorderStyles?: string[], additionalMarginStyles?: string[]): {
+    borderStyles: Pick<any, string>;
+    marginStyles: Pick<any, string>;
+};
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.1.8-8983ea.1+8983ea38",
+  "version": "44.1.9-55c084.1+55c0842b",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "8983ea38122305cf0e4d72a309d0c8ac4786a20f"
+  "gitHead": "55c0842b1f44bb4cdef4af999f179bdbd0a4d23f"
 }

package/src/components/Picker/Picker.js

@@ -1,29 +1,41 @@
 import * as React from "react";
+import { View, StyleSheet, Text, Platform, } 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 { withTheme } from "../../theming";
-//@ts-ignore
-import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
 function normalizeOptions(options) {
     if (options.length === 0) {
         return [];
     }
-    if (typeof options[0] === "string") {
+    if (typeof options[0] === ("string" || "number")) {
         return options.map((option) => ({
-            label: option,
+            label: String(option),
             value: String(option),
         }));
     }
-    if (options[0].label && options[0].value) {
+    if (isObject(options[0]) &&
+        options[0].value !== null &&
+        options[0].label !== null) {
         return options.map((option) => {
             return {
-                label: option.label,
+                label: String(option.label),
                 value: String(option.value),
             };
         });
     }
     throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
-const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverride, value, defaultValue, ...props }) => {
+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 [internalValue, setInternalValue] = React.useState(value || defaultValue);
+    const [pickerVisible, togglePickerVisible] = React.useReducer((state) => !state, false);
     React.useEffect(() => {
         if (value != null) {
             setInternalValue(value);
@@ -34,23 +46,178 @@ const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverrid
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
-    const onValueChange = React.useCallback((itemValue, itemIndex) => {
-        if (placeholder && itemIndex === 0) {
-            return;
-        }
-        onValueChangeOverride &&
-            onValueChangeOverride(String(itemValue), itemIndex);
-    }, [placeholder, onValueChangeOverride]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
+    const { colors } = theme;
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { marginStyles, borderStyles: extractedBorderStyles } = extractBorderAndMarginStyles(viewStyles, ["backgroundColor"]);
+    const borderStyles = {
+        ...{
+            ...(type === "solid"
+                ? {
+                    borderTopLeftRadius: 5,
+                    borderTopRightRadius: 5,
+                    borderBottomRightRadius: 5,
+                    borderBottomLeftRadius: 5,
+                    borderTopWidth: 1,
+                    borderRightWidth: 1,
+                    borderLeftWidth: 1,
+                }
+                : {}),
+            borderBottomWidth: 1,
+            borderColor: unstyledColor,
+            borderStyle: "solid",
+        },
+        // ...pick(viewStyles, borders),
+        ...pickBy(extractedBorderStyles, identity),
+        ...(error ? { borderColor: errorColor } : {}),
+        ...(disabled
+            ? { borderColor: "transparent", backgroundColor: disabledColor }
+            : {}),
+    };
+    const platform = Platform.OS;
+    const stylesWithoutBordersAndMargins = {
+        ...{
+            height: 60,
+            width: "100%",
+            flex: platform === "web" ? undefined : 1,
+        },
+        ...omit(viewStyles, [
+            ...borderStyleNames,
+            ...marginStyleNames,
+            "backgroundColor",
+        ]),
+    };
+    const selectedLabel = internalValue &&
+        (pickerOptions.find((option) => option.value === internalValue)?.label ??
+            internalValue);
+    const labelText = label ? (React.createElement(Text, { style: {
+            textAlign: textStyles.textAlign,
+            color: unstyledColor,
+            fontSize: 12,
+            paddingBottom: 4,
+        } }, label)) : null;
+    const leftIconOutset = leftIconMode === "outset";
+    const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: 4,
+            marginLeft: 4,
+        } })) : null;
+    const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: -10,
+            marginLeft: 8,
+        } })) : null;
+    const width = stylesWithoutBordersAndMargins?.width;
+    const textAlign = textStyles?.textAlign;
+    const paddingLeft = leftIconOutset &&
+        (!textAlign || textAlign === "left" || textAlign === "justify")
+        ? iconSize + 4
+        : 0;
+    const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
+            textAlign,
+            width,
+            paddingLeft,
+            color: unstyledColor,
+            fontSize: 12,
+            paddingTop: 4,
+        } }, assistiveText)) : null;
+    const primaryTextStyle = {
+        color: unstyledColor,
+        fontSize: 14,
+        ...pickBy(textStyles, identity),
+        ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
+        ...(disabled ? { color: unstyledColor } : {}),
+    };
     const handleValueChange = (newValue, itemIndex) => {
-        setInternalValue(newValue);
-        if (onValueChange) {
-            onValueChange(newValue, itemIndex);
+        if (!placeholder || itemIndex > 0) {
+            onValueChange?.(newValue, itemIndex);
         }
+        setInternalValue(newValue);
     };
-    return (React.createElement(PickerComponent, { ...props, selectedValue: String(internalValue), placeholder: placeholder, options: pickerOptions, onValueChange: handleValueChange }));
+    return (
+    /* marginsContainer */
+    React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
+        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+            React.createElement(View, { pointerEvents: "none", style: [
+                    styles.outsetContainer,
+                    stylesWithoutBordersAndMargins,
+                    !leftIconOutset ? borderStyles : {},
+                ] },
+                leftIcon,
+                React.createElement(View, { style: [
+                        styles.insetContainer,
+                        leftIconOutset ? borderStyles : {},
+                    ] },
+                    React.createElement(View, { style: styles.primaryTextContainer },
+                        labelText,
+                        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));
 };
 export default withTheme(Picker);
+const styles = StyleSheet.create({
+    marginsContainer: {
+        alignSelf: "stretch",
+    },
+    touchableContainer: {
+        alignSelf: "stretch",
+        alignItems: "center",
+    },
+    outsetContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    insetContainer: {
+        flex: 1,
+        height: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingLeft: 12,
+        paddingRight: 12,
+    },
+    primaryTextContainer: {
+        flex: 1,
+    },
+    iosPicker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    iosSafeArea: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+    },
+    iosButton: {
+        alignSelf: "flex-end",
+    },
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+    },
+});