@draftbit/core 44.1.15 → 44.1.16

package/src/components/Picker/Picker.tsx

@@ -1,31 +1,77 @@
 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";
+
+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 +82,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 +133,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 +145,336 @@ 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>
+
+      {/* 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",
+  },
+  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/lib/commonjs/components/Picker/PickerComponent.android.js

@@ -1,135 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _lodash = _interopRequireDefault(require("lodash.omit"));
-
-var _theming = require("../../theming");
-
-var _picker = require("@react-native-picker/picker");
-
-var _utilities = require("../../utilities");
-
-var _TextField = _interopRequireDefault(require("../TextField"));
-
-var _Touchable = _interopRequireDefault(require("../Touchable"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const Picker = _ref => {
-  var _options$find$label, _options$find;
-
-  let {
-    style,
-    options,
-    placeholder,
-    selectedValue,
-    disabled = false,
-    onValueChange: onValueChangeOverride = () => {},
-    ...props
-  } = _ref;
-  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
-    }
-  } = (0, _utilities.extractStyles)(style);
-  const textField = React.useRef(undefined);
-
-  const onValueChange = (itemValue, itemIndex) => {
-    toggleFocus();
-    onValueChangeOverride(itemValue, itemIndex);
-  };
-
-  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 && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
-  return /*#__PURE__*/React.createElement(_Touchable.default, {
-    disabled: disabled,
-    onPress: toggleFocus,
-    style: [styles.container, viewStyles]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_picker.Picker, {
-    enabled: !disabled,
-    selectedValue: selectedValue,
-    onValueChange: onValueChange,
-    style: {
-      opacity: 0,
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      width: "100%"
-    }
-  }, options.map(o => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
-    label: o.label,
-    value: o.value,
-    key: o.value
-  }))), /*#__PURE__*/React.createElement(_reactNative.View, {
-    pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, 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
-  })))));
-};
-
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    alignSelf: "stretch"
-  }
-});
-
-var _default = (0, _theming.withTheme)(Picker);
-
-exports.default = _default;
-//# sourceMappingURL=PickerComponent.android.js.map

package/lib/commonjs/components/Picker/PickerComponent.android.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["PickerComponent.android.tsx"],"names":["Picker","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","React","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","StyleSheet","flatten","selectedLabel","find","o","value","label","styles","container","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}