@draftbit/core 44.1.9-222859.1 → 44.1.9-55c084.1

package/src/components/Picker/Picker.tsx

@@ -6,9 +6,8 @@ import {
   Platform,
   ViewStyle,
   StyleProp,
-  Dimensions,
 } from "react-native";
-import { omit, pick, pickBy, identity } from "lodash";
+import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 
@@ -18,7 +17,12 @@ import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
+import {
+  extractStyles,
+  extractBorderAndMarginStyles,
+  borderStyleNames,
+  marginStyleNames,
+} from "../../utilities";
 
 export interface PickerOption {
   value: string;
@@ -60,7 +64,7 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
   }
 
   if (
-    typeof options[0] === "object" &&
+    isObject(options[0]) &&
     options[0].value !== null &&
     options[0].label !== null
   ) {
@@ -129,24 +133,12 @@ const Picker: React.FC<PickerProps> = ({
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
-  const { viewStyles, textStyles } = extractStyles(style);
-
   const { colors } = theme;
 
-  const borders = [
-    "borderRadius",
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius",
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth",
-    "borderColor",
-    "borderStyle",
-    "backgroundColor",
-  ];
+  const { viewStyles, textStyles } = extractStyles(style);
+
+  const { marginStyles, borderStyles: extractedBorderStyles } =
+    extractBorderAndMarginStyles(viewStyles, ["backgroundColor"]);
 
   const borderStyles = {
     ...{
@@ -165,29 +157,27 @@ const Picker: React.FC<PickerProps> = ({
       borderColor: unstyledColor,
       borderStyle: "solid",
     },
-    ...pick(viewStyles, borders),
+    // ...pick(viewStyles, borders),
+    ...pickBy(extractedBorderStyles, identity),
     ...(error ? { borderColor: errorColor } : {}),
     ...(disabled
       ? { borderColor: "transparent", backgroundColor: disabledColor }
       : {}),
   };
 
-  const margins = ["marginLeft", "marginRight", "marginTop", "marginBottom"];
-
-  const marginStyles = pick(viewStyles, margins);
-
-  const maxHeight =
-    viewStyles?.maxHeight && viewStyles.maxHeight !== "100%"
-      ? viewStyles.maxHeight
-      : Dimensions.get("window").height;
+  const platform = Platform.OS;
 
   const stylesWithoutBordersAndMargins = {
     ...{
       height: 60,
       width: "100%",
+      flex: platform === "web" ? undefined : 1,
     },
-    ...omit(viewStyles, [...borders, ...margins]),
-    ...{ maxHeight },
+    ...omit(viewStyles, [
+      ...borderStyleNames,
+      ...marginStyleNames,
+      "backgroundColor",
+    ]),
   };
 
   const selectedLabel =
@@ -236,7 +226,7 @@ const Picker: React.FC<PickerProps> = ({
     />
   ) : null;
 
-  const width = stylesWithoutBordersAndMargins?.width ?? undefined;
+  const width = stylesWithoutBordersAndMargins?.width;
 
   const textAlign = textStyles?.textAlign;
 
@@ -291,8 +281,7 @@ const Picker: React.FC<PickerProps> = ({
           style={[
             styles.outsetContainer,
             stylesWithoutBordersAndMargins,
-            // @ts-expect-error ... rejects border-related { key: undefined }
-            !leftIconOutset && borderStyles, // set border if Icon is inset
+            !leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
           ]}
         >
           {leftIcon}
@@ -301,8 +290,7 @@ const Picker: React.FC<PickerProps> = ({
           <View
             style={[
               styles.insetContainer,
-              // @ts-expect-error ... rejects border-related { key: undefined }
-              leftIconOutset && borderStyles, // set border if Icon is outset
+              leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
             ]}
           >
             {/* primaryTextContainer */}
@@ -321,7 +309,7 @@ const Picker: React.FC<PickerProps> = ({
       </Touchable>
 
       {/* iosPicker */}
-      {Platform.OS === "ios" && pickerVisible ? (
+      {platform === "ios" && pickerVisible ? (
         <Portal>
           <View
             style={[
@@ -360,7 +348,7 @@ const Picker: React.FC<PickerProps> = ({
       ) : null}
 
       {/* nonIosPicker */}
-      {Platform.OS !== "ios" ? (
+      {platform !== "ios" ? (
         <NativePicker
           enabled={!disabled}
           selectedValue={internalValue}
@@ -383,8 +371,13 @@ const Picker: React.FC<PickerProps> = ({
 export default withTheme(Picker);
 
 const styles = StyleSheet.create({
-  marginsContainer: { alignSelf: "stretch" },
-  touchableContainer: { alignSelf: "stretch", alignItems: "center" },
+  marginsContainer: {
+    alignSelf: "stretch",
+  },
+  touchableContainer: {
+    alignSelf: "stretch",
+    alignItems: "center",
+  },
   outsetContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -399,7 +392,9 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     paddingRight: 12,
   },
-  primaryTextContainer: { flex: 1 },
+  primaryTextContainer: {
+    flex: 1,
+  },
   iosPicker: {
     position: "absolute",
     bottom: 0,
@@ -413,8 +408,12 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     width: "100%",
   },
-  iosButton: { alignSelf: "flex-end" },
-  iosNativePicker: { backgroundColor: "white" },
+  iosButton: {
+    alignSelf: "flex-end",
+  },
+  iosNativePicker: {
+    backgroundColor: "white",
+  },
   nonIosPicker: {
     opacity: 0,
     position: "absolute",

package/src/utilities.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { isString, isNumber } from "lodash";
+import { isString, isNumber, pick } from "lodash";
 export function extractStyles(style) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
     const textStyles = {
@@ -17,6 +17,37 @@ export function extractStyles(style) {
     };
     return { viewStyles, textStyles };
 }
+export const borderStyleNames = [
+    "borderRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderColor",
+    "borderStyle",
+];
+export const marginStyleNames = [
+    "marginLeft",
+    "marginRight",
+    "marginTop",
+    "marginBottom",
+];
+export function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const borderStyles = pick(flatStyle, [
+        ...borderStyleNames,
+        ...(additionalBorderStyles ? additionalBorderStyles : []),
+    ]);
+    const marginStyles = pick(flatStyle, [
+        ...marginStyleNames,
+        ...(additionalMarginStyles ? additionalMarginStyles : []),
+    ]);
+    return { borderStyles, marginStyles };
+}
 /**
  * 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/src/utilities.ts

@@ -1,5 +1,5 @@
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
-import { isString, isNumber } from "lodash";
+import { isString, isNumber, pick } from "lodash";
 
 export function extractStyles(style: StyleProp<any>) {
   const {
@@ -34,6 +34,47 @@ export function extractStyles(style: StyleProp<any>) {
   return { viewStyles, textStyles };
 }
 
+export const borderStyleNames = [
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderColor",
+  "borderStyle",
+];
+
+export const marginStyleNames = [
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBottom",
+];
+
+export function extractBorderAndMarginStyles(
+  style: StyleProp<any>,
+  additionalBorderStyles?: string[],
+  additionalMarginStyles?: string[]
+) {
+  const flatStyle = StyleSheet.flatten(style || {});
+
+  const borderStyles = pick(flatStyle, [
+    ...borderStyleNames,
+    ...(additionalBorderStyles ? additionalBorderStyles : []),
+  ]);
+
+  const marginStyles = pick(flatStyle, [
+    ...marginStyleNames,
+    ...(additionalMarginStyles ? additionalMarginStyles : []),
+  ]);
+
+  return { borderStyles, marginStyles };
+}
+
 /**
  * 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