@draftbit/core 48.4.12-ec076f.2 → 48.4.12

package/src/components/Picker/Picker.tsx

@@ -0,0 +1,509 @@
+import * as React from "react";
+import {
+  View,
+  StyleSheet,
+  Text,
+  Platform,
+  ViewStyle,
+  StyleProp,
+  Dimensions,
+  Keyboard,
+} 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 "../../deprecated-components/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;
+}
+
+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";
+  autoDismissKeyboard?: boolean;
+  theme: Theme;
+  Icon: IconSlot["Icon"];
+};
+
+function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
+  if (options.length === 0) {
+    return [];
+  }
+
+  if (typeof options[0] === ("string" || "number")) {
+    return (options as string[]).map((option) => ({
+      label: String(option),
+      value: String(option),
+    }));
+  }
+
+  if (
+    isObject(options[0]) &&
+    options[0].value !== null &&
+    options[0].label !== null
+  ) {
+    return (options as PickerOption[]).map((option) => {
+      return {
+        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 { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
+const unstyledColor = "rgba(165, 173, 183, 1)";
+const disabledColor = "rgb(240, 240, 240)";
+const errorColor = "rgba(255, 69, 100, 1)";
+
+//Empty string for 'value' is treated as a non-value
+//reason: Draftbit uses empty string as initial value for string state*/
+const Picker: React.FC<PickerProps> = ({
+  error,
+  options = [],
+  onValueChange,
+  defaultValue,
+  Icon,
+  style,
+  placeholder,
+  value,
+  disabled = false,
+  assistiveText,
+  label,
+  iconColor = unstyledColor,
+  iconSize = 24,
+  leftIconMode = "inset",
+  leftIconName,
+  placeholderTextColor = unstyledColor,
+  rightIconName,
+  type = "solid",
+  autoDismissKeyboard = true,
+}) => {
+  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 && value !== "") {
+      setInternalValue(value);
+    } else if (value === "") {
+      setInternalValue(undefined);
+    }
+  }, [value]);
+
+  React.useEffect(() => {
+    if (defaultValue != null && defaultValue !== "") {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue]);
+
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      androidPickerRef?.current?.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
+
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
+  const normalizedOptions = React.useMemo(
+    () => normalizeOptions(options),
+    [options]
+  );
+
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = React.useMemo(
+    () =>
+      placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions,
+    [placeholder, normalizedOptions]
+  );
+
+  //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (
+    !placeholder &&
+    pickerOptions.length &&
+    !internalValue &&
+    internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+  ) {
+    onValueChange?.(pickerOptions[0].value, 0);
+    setInternalValue(pickerOptions[0].value);
+  }
+
+  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 (newValue !== "" && newValue !== placeholder) {
+      onValueChange?.(newValue, itemIndex);
+      setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange?.("", 0);
+      setInternalValue(undefined);
+    }
+  };
+
+  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>
+
+      {/* iosPicker */}
+      {isIos && pickerVisible ? (
+        <Portal>
+          <SafeAreaView style={styles.iosPicker}>
+            <View style={styles.iosPickerContent}>
+              <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>
+            </View>
+          </SafeAreaView>
+        </Portal>
+      ) : null}
+
+      {/* nonIosPicker */}
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {!isIos && (pickerVisible || isWeb) ? (
+        <NativePicker
+          enabled={!disabled}
+          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>
+  );
+};
+
+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,
+    backgroundColor: "white",
+  },
+  iosPickerContent: {
+    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,
+  },
+});
+
+export default withTheme(Picker);

package/src/components/Picker/PickerComponent.android.js

@@ -0,0 +1,70 @@
+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";
+const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
+    var _a, _b;
+    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);
+    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 &&
+        omit(StyleSheet.flatten(style), [
+            "margin",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+        ]);
+    const selectedLabel = selectedValue &&
+        ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
+    return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
+        React.createElement(View, null,
+            React.createElement(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) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
+                    // @ts-ignore
+                    ref: textField, disabled: disabled, 
+                    // @ts-expect-error
+                    style: stylesWithoutMargin })))));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+});
+export default withTheme(Picker);
+//# sourceMappingURL=PickerComponent.android.js.map

package/src/components/Picker/PickerComponent.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerComponent.android.js","sourceRoot":"","sources":["PickerComponent.android.tsx"],"names":[],"mappings":"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"}

package/src/components/Picker/PickerComponent.android.tsx

@@ -0,0 +1,116 @@
+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);
+
+  const textField = React.useRef<typeof TextField | undefined>(undefined);
+
+  const onValueChange = (itemValue: string, itemIndex: number) => {
+    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 &&
+    omit(StyleSheet.flatten(style), [
+      "margin",
+      "marginTop",
+      "marginRight",
+      "marginBottom",
+      "marginLeft",
+    ]);
+
+  const selectedLabel =
+    selectedValue &&
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={toggleFocus}
+      style={[styles.container, viewStyles]}
+    >
+      <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({
+  container: {
+    alignSelf: "stretch",
+  },
+});
+
+export default withTheme(Picker);