@draftbit/core 44.1.13-c10e64.0 → 44.1.14

package/src/components/Picker/Picker.tsx

@@ -1,31 +1,79 @@
 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";
-//@ts-ignore
-import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
-import { PickerComponentProps, PickerOption } from "./PickerTypes";
+// 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;
+}
 
-type Props = PickerComponentProps & {
+export type PickerProps = {
+  error?: any;
   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: Props["options"]): PickerOption[] {
+function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
   if (options.length === 0) {
     return [];
   }
 
-  if (typeof options[0] === "string") {
+  if (typeof options[0] === ("string" || "number")) {
     return (options as string[]).map((option) => ({
-      label: option,
+      label: String(option),
       value: String(option),
     }));
   }
 
-  if (options[0].label && options[0].value) {
-    return options.map((option) => {
+  if (
+    isObject(options[0]) &&
+    options[0].value !== null &&
+    options[0].label !== null
+  ) {
+    return (options as PickerOption[]).map((option) => {
       return {
-        label: option.label,
+        label: String(option.label),
         value: String(option.value),
       };
     });
@@ -36,18 +84,45 @@ function normalizeOptions(options: Props["options"]): PickerOption[] {
   );
 }
 
-const Picker: React.FC<Props> = ({
+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,
   options = [],
+  onValueChange,
+  defaultValue,
+  Icon,
+  style,
   placeholder,
-  onValueChange: onValueChangeOverride,
   value,
-  defaultValue,
-  ...props
+  disabled = false,
+  // theme,
+  assistiveText,
+  label,
+  iconColor = unstyledColor,
+  iconSize = 24,
+  leftIconMode = "inset",
+  leftIconName,
+  placeholderTextColor = unstyledColor,
+  rightIconName,
+  type = "solid",
 }) => {
+  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);
@@ -60,16 +135,11 @@ const Picker: React.FC<Props> = ({
     }
   }, [defaultValue]);
 
-  const onValueChange = React.useCallback(
-    (itemValue: string, itemIndex: number) => {
-      if (placeholder && itemIndex === 0) {
-        return;
-      }
-      onValueChangeOverride &&
-        onValueChangeOverride(String(itemValue), itemIndex);
-    },
-    [placeholder, onValueChangeOverride]
-  );
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      androidPickerRef?.current?.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
 
   const normalizedOptions = normalizeOptions(options);
 
@@ -77,22 +147,352 @@ const Picker: React.FC<Props> = ({
     ? [{ 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) => {
-    setInternalValue(newValue);
-    if (onValueChange) {
-      onValueChange(newValue, itemIndex);
+    if (!placeholder || itemIndex > 0) {
+      onValueChange?.(newValue, itemIndex);
     }
+    setInternalValue(newValue);
   };
 
   return (
-    <PickerComponent
-      {...props}
-      selectedValue={String(internalValue)}
-      placeholder={placeholder}
-      options={pickerOptions}
-      onValueChange={handleValueChange}
-    />
+    /* 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>
   );
 };
 
 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",
+    backgroundColor: "pink", // TODO
+  },
+  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,116 +1,59 @@
 import * as React from "react";
-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";
-
-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 { StyleSheet, Dimensions } from "react-native";
 
-  const textField = React.useRef<typeof TextField | undefined>(undefined);
+import { Picker as NativePicker } from "@react-native-picker/picker";
 
-  const onValueChange = (itemValue: string, itemIndex: number) => {
-    toggleFocus();
-    onValueChangeOverride(itemValue, itemIndex);
-  };
+import type { IconSlot } from "../../interfaces/Icon";
 
-  const toggleFocus = () => {
-    if (!disabled) {
-      // @ts-ignore
-      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-    }
-  };
+import { PickerOption } from "./Picker";
 
-  const stylesWithoutMargin =
-    style &&
-    omit(StyleSheet.flatten(style), [
-      "margin",
-      "marginTop",
-      "marginRight",
-      "marginBottom",
-      "marginLeft",
-    ]);
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 
-  const selectedLabel =
-    selectedValue &&
-    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+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 (
-    <Touchable
-      disabled={disabled}
-      onPress={toggleFocus}
-      style={[styles.container, viewStyles]}
+    <NativePicker
+      selectedValue={internalValue}
+      onValueChange={handleValueChange}
+      style={styles.nonIosPicker}
+      ref={androidPickerRef}
+      onBlur={togglePickerVisible}
     >
-      <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>
+      {(pickerOptions as unknown as PickerOption[]).map((option) => (
+        <NativePicker.Item
+          label={option.label}
+          value={option.value}
+          key={option.value}
+        />
+      ))}
+    </NativePicker>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    alignSelf: "stretch",
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
 });
-
-export default withTheme(Picker);