@draftbit/core 48.4.11 → 48.4.12-8fa8f1.2

package/src/components/Picker/Picker.tsx

@@ -1,509 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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

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

@@ -1,116 +0,0 @@
-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);