@draftbit/core 44.1.13-cd2af3.0 → 44.1.15

package/src/components/Picker/Picker.tsx

@@ -1,79 +1,31 @@
 import * as React from "react";
-import {
-  View,
-  StyleSheet,
-  Text,
-  // 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 { withTheme } from "../../theming";
-// 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";
-import {
-  extractStyles,
-  extractBorderAndMarginStyles,
-  borderStyleNames,
-  marginStyleNames,
-} from "../../utilities";
-// @ts-expect-error
-import { PickerComponent } from "./PickerComponent";
-
-export interface PickerOption {
-  value: string;
-  label: string;
-}
+//@ts-ignore
+import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
+import { PickerComponentProps, PickerOption } from "./PickerTypes";
 
-export type PickerProps = {
-  error?: any;
+type Props = PickerComponentProps & {
   placeholder?: string;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle> & { height?: number };
   value?: string;
   options: PickerOption[] | string[];
-  onValueChange: (value: string, index: number) => void;
-  defaultValue?: string;
-  assistiveText?: string;
-  label?: string;
-  iconColor?: string;
-  iconSize?: number;
-  leftIconMode?: "inset" | "outset";
-  leftIconName?: string;
-  placeholderTextColor?: string;
-  rightIconName?: string;
-  type?: "solid" | "underline";
-  theme: Theme;
-  Icon: IconSlot["Icon"];
 };
 
-function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
+function normalizeOptions(options: Props["options"]): PickerOption[] {
   if (options.length === 0) {
     return [];
   }
 
-  if (typeof options[0] === ("string" || "number")) {
+  if (typeof options[0] === "string") {
     return (options as string[]).map((option) => ({
-      label: String(option),
+      label: option,
       value: String(option),
     }));
   }
 
-  if (
-    isObject(options[0]) &&
-    options[0].value !== null &&
-    options[0].label !== null
-  ) {
-    return (options as PickerOption[]).map((option) => {
+  if (options[0].label && options[0].value) {
+    return options.map((option) => {
       return {
-        label: String(option.label),
+        label: option.label,
         value: String(option.value),
       };
     });
@@ -84,45 +36,18 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
   );
 }
 
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
-// 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: React.FC<PickerProps> = ({
-  error,
+const Picker: React.FC<Props> = ({
   options = [],
-  onValueChange,
-  defaultValue,
-  Icon,
-  style,
   placeholder,
+  onValueChange: onValueChangeOverride,
   value,
-  disabled = false,
-  // theme,
-  assistiveText,
-  label,
-  iconColor = unstyledColor,
-  iconSize = 24,
-  leftIconMode = "inset",
-  leftIconName,
-  placeholderTextColor = unstyledColor,
-  rightIconName,
-  type = "solid",
+  defaultValue,
+  ...props
 }) => {
-  const androidPickerRef = React.useRef<any | undefined>(undefined);
-
   const [internalValue, setInternalValue] = React.useState<string | undefined>(
     value || defaultValue
   );
 
-  const [pickerVisible, setPickerVisible] = React.useState(false);
-
-  const togglePickerVisible = () => {
-    setPickerVisible(!pickerVisible);
-  };
-
   React.useEffect(() => {
     if (value != null) {
       setInternalValue(value);
@@ -135,11 +60,16 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [defaultValue]);
 
-  React.useEffect(() => {
-    if (pickerVisible && androidPickerRef.current) {
-      androidPickerRef?.current?.focus();
-    }
-  }, [pickerVisible, androidPickerRef]);
+  const onValueChange = React.useCallback(
+    (itemValue: string, itemIndex: number) => {
+      if (placeholder && itemIndex === 0) {
+        return;
+      }
+      onValueChangeOverride &&
+        onValueChangeOverride(String(itemValue), itemIndex);
+    },
+    [placeholder, onValueChangeOverride]
+  );
 
   const normalizedOptions = normalizeOptions(options);
 
@@ -147,351 +77,22 @@ const Picker: React.FC<PickerProps> = ({
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
-  // const { colors } = theme;
-
-  const { viewStyles, textStyles } = extractStyles(style);
-
-  const additionalBorderStyles = ["backgroundColor"];
-
-  const additionalMarginStyles = [
-    "bottom",
-    "height",
-    "left",
-    "maxHeight",
-    "maxWidth",
-    "minHeight",
-    "minWidth",
-    "overflow",
-    "position",
-    "right",
-    "top",
-    "width",
-    "zIndex",
-  ];
-
-  const {
-    borderStyles: extractedBorderStyles,
-    marginStyles: extractedMarginStyles,
-  } = extractBorderAndMarginStyles(
-    viewStyles,
-    additionalBorderStyles,
-    additionalMarginStyles
-  );
-
-  const borderStyles = {
-    ...{
-      ...(type === "solid"
-        ? {
-            borderTopLeftRadius: 5,
-            borderTopRightRadius: 5,
-            borderBottomRightRadius: 5,
-            borderBottomLeftRadius: 5,
-            borderTopWidth: 1,
-            borderRightWidth: 1,
-            borderLeftWidth: 1,
-          }
-        : {}),
-      borderBottomWidth: 1,
-      borderColor: unstyledColor,
-      borderStyle: "solid",
-    },
-    ...extractedBorderStyles,
-    ...(error ? { borderColor: errorColor } : {}),
-    ...(disabled
-      ? { borderColor: "transparent", backgroundColor: disabledColor }
-      : {}),
-  };
-
-  const marginStyles = {
-    height: 60,
-    ...extractedMarginStyles,
-  };
-
-  const stylesWithoutBordersAndMargins = omit(viewStyles, [
-    ...borderStyleNames,
-    ...marginStyleNames,
-    ...additionalBorderStyles,
-    ...additionalMarginStyles,
-  ]);
-
-  const selectedLabel =
-    internalValue &&
-    ((pickerOptions as unknown as PickerOption[]).find(
-      (option) => option.value === internalValue
-    )?.label ??
-      internalValue);
-
-  const labelText = label ? (
-    <Text
-      style={{
-        textAlign: textStyles.textAlign,
-        color: unstyledColor,
-        fontSize: 12,
-        paddingBottom: 4,
-      }}
-    >
-      {label}
-    </Text>
-  ) : null;
-
-  const leftIconOutset = leftIconMode === "outset";
-
-  const leftIcon = leftIconName ? (
-    <Icon
-      name={leftIconName}
-      color={disabled ? unstyledColor : iconColor}
-      size={iconSize}
-      style={{
-        marginRight: 4,
-        marginLeft: 4,
-      }}
-    />
-  ) : null;
-
-  const rightIcon = rightIconName ? (
-    <Icon
-      name={rightIconName}
-      color={disabled ? unstyledColor : iconColor}
-      size={iconSize}
-      style={{
-        marginRight: -10,
-        marginLeft: 8,
-      }}
-    />
-  ) : null;
-
-  const textAlign = textStyles?.textAlign;
-
-  const calculateLeftPadding = () => {
-    if (leftIconOutset) {
-      if (textAlign === "center") {
-        return iconSize - Math.abs(8 - iconSize);
-      }
-
-      return iconSize + 8;
-    }
-
-    return 0;
-  };
-
-  const assistiveTextLabel = assistiveText ? (
-    <Text
-      style={{
-        textAlign,
-        width: "100%",
-        paddingLeft: calculateLeftPadding(),
-        color: unstyledColor,
-        fontSize: 12,
-        paddingTop: 4,
-      }}
-    >
-      {assistiveText}
-    </Text>
-  ) : null;
-
-  const primaryTextStyle = {
-    color: unstyledColor,
-    fontSize: 14,
-    ...pickBy(textStyles, identity),
-    ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
-    ...(disabled ? { color: unstyledColor } : {}),
-  };
-
   const handleValueChange = (newValue: string, itemIndex: number) => {
-    if (!placeholder || itemIndex > 0) {
-      onValueChange?.(newValue, itemIndex);
-    }
     setInternalValue(newValue);
+    if (onValueChange) {
+      onValueChange(newValue, itemIndex);
+    }
   };
 
   return (
-    /* marginsContainer */
-    <View style={[styles.marginsContainer, marginStyles]}>
-      {/* touchableContainer */}
-      <Touchable
-        disabled={disabled}
-        onPress={togglePickerVisible}
-        style={styles.touchableContainer}
-      >
-        {/* outsetContainer */}
-        <View
-          pointerEvents="none"
-          style={[
-            styles.outsetContainer,
-            stylesWithoutBordersAndMargins,
-            !leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
-          ]}
-        >
-          {leftIcon}
-
-          {/* insetContainer */}
-          <View
-            style={[
-              styles.insetContainer,
-              leftIconOutset ? (borderStyles as PickerProps["style"]) : {},
-            ]}
-          >
-            {/* primaryTextContainer */}
-            <View style={styles.primaryTextContainer}>
-              {labelText}
-
-              <Text style={primaryTextStyle}>
-                {String(selectedLabel ?? placeholder)}
-              </Text>
-            </View>
-
-            {rightIcon}
-          </View>
-        </View>
-        {assistiveTextLabel}
-      </Touchable>
-
-      <View>
-        {pickerVisible ? (
-          <PickerComponent
-            {...{
-              Icon,
-              androidPickerRef,
-              togglePickerVisible,
-              pickerOptions,
-              internalValue,
-              handleValueChange,
-            }}
-          />
-        ) : null}
-      </View>
-
-      {/* iosPicker */}
-      {/* isIos && pickerVisible ? (
-        <Portal>
-          <View
-            style={[
-              styles.iosPicker,
-              {
-                backgroundColor: colors.divider,
-              },
-            ]}
-          >
-            <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>
-      ) : null */}
-
-      {/* nonIosPicker */}
-      {/* !isIos && pickerVisible ? (
-        <NativePicker
-          enabled={pickerVisible}
-          selectedValue={internalValue}
-          onValueChange={handleValueChange}
-          style={styles.nonIosPicker}
-          ref={androidPickerRef}
-          onBlur={() => setPickerVisible(false)}
-        >
-          {(pickerOptions as unknown as PickerOption[]).map((option) => (
-            <NativePicker.Item
-              label={option.label}
-              value={option.value}
-              key={option.value}
-            />
-          ))}
-        </NativePicker>
-      ) : null */}
-    </View>
+    <PickerComponent
+      {...props}
+      selectedValue={String(internalValue)}
+      placeholder={placeholder}
+      options={pickerOptions}
+      onValueChange={handleValueChange}
+    />
   );
 };
 
 export default withTheme(Picker);
-
-const styles = StyleSheet.create({
-  marginsContainer: {
-    alignSelf: "stretch",
-    alignItems: "center",
-    width: "100%",
-    maxWidth: deviceWidth,
-  },
-  touchableContainer: {
-    flex: 1,
-    height: "100%",
-    width: "100%",
-    alignSelf: "stretch",
-    alignItems: "center",
-  },
-  outsetContainer: {
-    flex: 1,
-    height: "100%",
-    width: "100%",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  insetContainer: {
-    flex: 1,
-    height: "100%",
-    width: "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",
-    width: "100%",
-    maxWidth: deviceWidth,
-    maxHeight: deviceHeight,
-  },
-  iosSafeArea: {
-    backgroundColor: "white",
-    flexDirection: "column",
-    width: "100%",
-    maxWidth: deviceWidth,
-  },
-  iosButton: {
-    alignSelf: "flex-end",
-  },
-  iosNativePicker: {
-    backgroundColor: "white",
-  },
-  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

@@ -1,59 +1,116 @@
 import * as React from "react";
-import { StyleSheet, Dimensions } from "react-native";
-
+import { View, StyleSheet } from "react-native";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
 import { Picker as NativePicker } from "@react-native-picker/picker";
+import { extractStyles } from "../../utilities";
+
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+import { PickerComponentProps } from "./PickerTypes";
 
-import type { IconSlot } from "../../interfaces/Icon";
+const Picker: React.FC<PickerComponentProps> = ({
+  style,
+  options,
+  placeholder,
+  selectedValue,
+  disabled = false,
+  onValueChange: onValueChangeOverride = () => {},
+  ...props
+}) => {
+  const {
+    viewStyles: {
+      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+      padding, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...viewStyles
+    },
+  } = extractStyles(style);
 
-import { PickerOption } from "./Picker";
+  const textField = React.useRef<typeof TextField | undefined>(undefined);
 
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+  const onValueChange = (itemValue: string, itemIndex: number) => {
+    toggleFocus();
+    onValueChangeOverride(itemValue, itemIndex);
+  };
 
-interface PickerComponentProps {
-  Icon: IconSlot["Icon"];
-  androidPickerRef: React.RefObject<any>;
-  togglePickerVisible: () => void;
-  pickerOptions: PickerOption[];
-  internalValue: string | undefined;
-  handleValueChange: (newValue: string, itemIndex: number) => void;
-}
+  const toggleFocus = () => {
+    if (!disabled) {
+      // @ts-ignore
+      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+    }
+  };
+
+  const stylesWithoutMargin =
+    style &&
+    omit(StyleSheet.flatten(style), [
+      "margin",
+      "marginTop",
+      "marginRight",
+      "marginBottom",
+      "marginLeft",
+    ]);
+
+  const selectedLabel =
+    selectedValue &&
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
 
-export const PickerComponent: React.FC<PickerComponentProps> = ({
-  androidPickerRef,
-  togglePickerVisible,
-  pickerOptions,
-  internalValue,
-  handleValueChange,
-}) => {
   return (
-    <NativePicker
-      selectedValue={internalValue}
-      onValueChange={handleValueChange}
-      style={styles.nonIosPicker}
-      ref={androidPickerRef}
-      onBlur={togglePickerVisible}
+    <Touchable
+      disabled={disabled}
+      onPress={toggleFocus}
+      style={[styles.container, viewStyles]}
     >
-      {(pickerOptions as unknown as PickerOption[]).map((option) => (
-        <NativePicker.Item
-          label={option.label}
-          value={option.value}
-          key={option.value}
-        />
-      ))}
-    </NativePicker>
+      <View>
+        <NativePicker
+          enabled={!disabled}
+          selectedValue={selectedValue}
+          onValueChange={onValueChange}
+          style={{
+            opacity: 0,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+          }}
+        >
+          {options.map((o) => (
+            <NativePicker.Item label={o.label} value={o.value} key={o.value} />
+          ))}
+        </NativePicker>
+        <View pointerEvents="none">
+          <TextField
+            {...props}
+            value={selectedLabel}
+            placeholder={placeholder}
+            // @ts-ignore
+            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+            disabled={disabled}
+            // @ts-expect-error
+            style={stylesWithoutMargin}
+          />
+        </View>
+      </View>
+    </Touchable>
   );
 };
 
 const styles = StyleSheet.create({
-  nonIosPicker: {
-    opacity: 0,
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: "100%",
-    maxWidth: deviceWidth,
-    maxHeight: deviceHeight,
+  container: {
+    alignSelf: "stretch",
   },
 });
+
+export default withTheme(Picker);