@jobber/components-native 0.30.0 → 0.31.0

package/src/Select/Select.tsx

@@ -0,0 +1,240 @@
+import React, { ReactElement } from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { RegisterOptions } from "react-hook-form";
+import { styles } from "./Select.style";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+import { messages } from "./messages";
+import { InputFieldWrapper } from "../InputFieldWrapper";
+import { Icon } from "../Icon";
+import { TextVariation } from "../Typography";
+import { Text } from "../Text";
+import { useFormController } from "../hooks";
+
+export interface SelectOption {
+  /**
+   * Text that shows up as the option
+   */
+  readonly children: string;
+
+  /**
+   * The value that gets returned when an option is selected
+   */
+  readonly value: string;
+}
+
+export interface SelectProps {
+  /**
+   * Current value of the component
+   */
+  readonly value?: string;
+
+  /**
+   * Default value for when the component is uncontrolled
+   */
+  readonly defaultValue?: string;
+
+  /**
+   * Adds a first option to let users select a "no value".
+   * Placeholder item selected by default until a selection is made.
+   */
+  readonly placeholder?: string;
+
+  /**
+   * Label text shown above the selection.
+   */
+  readonly label?: string;
+
+  /**
+   * Help text shown below the control.
+   */
+  readonly assistiveText?: string;
+
+  /**
+   * Callback that provides the new value when the selection changes
+   */
+  readonly onChange?: (newValue?: string) => void;
+
+  /**
+   * Disables input selection
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Indicates the current selection is invalid
+   */
+  readonly invalid?: boolean;
+
+  /**
+   * VoiceOver will read this string when a user selects the element
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Helps users understand what will happen when they perform an action
+   */
+  readonly accessibilityHint?: string;
+
+  /**
+   * Name of the input.
+   */
+  readonly name?: string;
+
+  /**
+   * The options to select from
+   */
+  readonly children: ReactElement<SelectOption>[];
+
+  /**
+   * The validations that will mark this component as invalid
+   */
+  readonly validations?: RegisterOptions;
+}
+
+export function Select({
+  value,
+  defaultValue,
+  onChange,
+  children,
+  placeholder,
+  label,
+  assistiveText,
+  disabled,
+  invalid,
+  validations,
+  accessibilityLabel,
+  name,
+}: SelectProps): JSX.Element {
+  const { field, error } = useFormController({
+    name,
+    validations,
+    value: value ?? defaultValue,
+  });
+
+  const { formatMessage } = useIntl();
+  const internalValue = value ?? field.value;
+  const textVariation = getTextVariation({
+    disabled,
+    invalid: invalid || !!error,
+  });
+  const valueTextVariation = disabled ? "disabled" : undefined;
+  const hasValue = internalValue && internalValue?.length > 0;
+
+  return (
+    <InputFieldWrapper
+      error={error}
+      invalid={invalid || !!error}
+      hasValue={hasValue}
+      styleOverride={{
+        container: { borderBottomWidth: undefined },
+      }}
+    >
+      <View
+        testID="ATL-Select"
+        accessible={true}
+        accessibilityLabel={getA11yLabel()}
+        accessibilityValue={{ text: getValue() }}
+        accessibilityHint={formatMessage(messages.a11yHint)}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: disabled }}
+      >
+        <SelectInternalPicker
+          disabled={disabled}
+          options={getOptions()}
+          onChange={handleChange}
+        >
+          <View
+            style={[styles.container, (invalid || !!error) && styles.invalid]}
+          >
+            {label && (
+              <Text
+                level="textSupporting"
+                variation={textVariation}
+                hideFromScreenReader={true}
+              >
+                {label}
+              </Text>
+            )}
+
+            <View style={styles.input}>
+              <View style={styles.value}>
+                <Text
+                  variation={disabled ? "disabled" : "base"}
+                  hideFromScreenReader={true}
+                >
+                  {getValue()}
+                </Text>
+              </View>
+              <View style={styles.icon}>
+                <Icon name="arrowDown" color={valueTextVariation} />
+              </View>
+            </View>
+          </View>
+        </SelectInternalPicker>
+
+        {assistiveText && (
+          <Text
+            level="textSupporting"
+            variation={textVariation}
+            hideFromScreenReader={true}
+          >
+            {assistiveText}
+          </Text>
+        )}
+      </View>
+    </InputFieldWrapper>
+  );
+
+  function getA11yLabel(): string | undefined {
+    let text = [accessibilityLabel || label, assistiveText];
+    text = text.filter(Boolean);
+    return text.join(", ");
+  }
+
+  function handleChange(val: string) {
+    onChange?.(val);
+    // need this onBlur for validations to occur
+    field.onBlur();
+    field.onChange(val);
+  }
+
+  function getOptions() {
+    const options = children.map(({ props }) => ({
+      label: props.children,
+      value: props.value,
+      isActive: props.value === internalValue,
+    }));
+
+    if (!internalValue || placeholder) {
+      options.unshift({
+        label: placeholder || formatMessage(messages.emptyValue),
+        value: "",
+        isActive: !internalValue,
+      });
+    }
+
+    return options;
+  }
+
+  function getValue() {
+    const options = getOptions();
+
+    const activeValue = options.find(option => option.isActive);
+    return (
+      activeValue?.label || placeholder || formatMessage(messages.emptyValue)
+    );
+  }
+}
+
+function getTextVariation({
+  invalid,
+  disabled,
+}: Pick<SelectProps, "invalid" | "disabled">): TextVariation {
+  if (invalid) return "error";
+  if (disabled) return "disabled";
+  return "subdued";
+}
+
+export function Option({ children }: SelectOption): JSX.Element {
+  return <>{children}</>;
+}

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import {
+  // Need to use iOS style button
+  Button,
+  Modal,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useIntl } from "react-intl";
+import { styles } from "./SelectDefaultPicker.style";
+import { messages } from "./messages";
+import { SelectInternalPickerProps } from "../../types";
+import { SelectPressable } from "../SelectPressable/SelectPressable";
+
+type SelectDefaultPickerProps = SelectInternalPickerProps;
+
+export function SelectDefaultPicker({
+  children,
+  options,
+  onChange,
+}: SelectDefaultPickerProps): JSX.Element {
+  const [show, setShow] = useState(false);
+  const { formatMessage } = useIntl();
+  const selectedLanguage = options.find(option => option.isActive);
+
+  return (
+    <>
+      <SelectPressable onPress={showPicker}>{children}</SelectPressable>
+      <Modal
+        visible={show}
+        transparent
+        animationType="slide"
+        onRequestClose={hidePicker}
+      >
+        <TouchableOpacity style={styles.overlay} onPress={hidePicker} />
+        <View style={styles.actionBar}>
+          <Button title={formatMessage(messages.done)} onPress={hidePicker} />
+        </View>
+        <View style={styles.pickerContainer} testID="select-wheel-picker">
+          <SafeAreaView edges={["bottom"]}>
+            <Picker
+              selectedValue={selectedLanguage?.value}
+              onValueChange={onChange}
+            >
+              {options.map(({ label, value }, i) => (
+                <Picker.Item key={i} label={label} value={value} />
+              ))}
+            </Picker>
+          </SafeAreaView>
+        </View>
+      </Modal>
+    </>
+  );
+
+  function showPicker() {
+    setShow(true);
+  }
+
+  function hidePicker() {
+    setShow(false);
+  }
+}

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  overlay: { flex: 1 },
+  actionBar: {
+    flexDirection: "row",
+    height: 45,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    backgroundColor: "#f8f8f8",
+    borderTopWidth: 1,
+    borderTopColor: "#dedede",
+    zIndex: 2,
+  },
+  pickerContainer: {
+    justifyContent: "center",
+    backgroundColor: "#d0d4da",
+  },
+  androidPickerContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    color: "transparent",
+    backgroundColor: "transparent",
+    opacity: 0,
+  },
+});

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.test.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { cleanup, fireEvent, render } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { SelectDefaultPicker } from "./SelectDefaultPicker";
+import { messages } from "./messages";
+import { Text } from "../../../Text";
+
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+const handleChange = jest.fn();
+
+function MockPicker() {
+  return React.createElement("MockPicker");
+}
+const MockPickerItem = () => <></>;
+jest.mock("@react-native-picker/picker", () => ({ Picker: MockPicker }));
+MockPicker.Item = MockPickerItem;
+
+beforeEach(() => {
+  A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+const childText = "Click me";
+function setup() {
+  return render(
+    <View testID="SelectDefaultPicker">
+      <SelectDefaultPicker
+        onChange={handleChange}
+        options={[
+          { value: "1", label: "First option" },
+          { value: "2", label: "Second option" },
+        ]}
+      >
+        <Text>{childText}</Text>
+      </SelectDefaultPicker>
+    </View>,
+  );
+}
+
+describe("SelectDefaultPicker", () => {
+  it("opens the picker", () => {
+    const screen = setup();
+
+    fireEvent.press(screen.getByText(childText));
+    expect(
+      screen.getByTestId("SelectDefaultPicker").findByType(MockPicker),
+    ).toBeDefined();
+  });
+
+  it("closes the picker", () => {
+    const screen = setup();
+
+    fireEvent.press(screen.getByText(childText));
+    fireEvent.press(screen.getByText(messages.done.defaultMessage));
+    expect(
+      screen.getByTestId("SelectDefaultPicker").findAllByType(MockPicker),
+    ).toEqual([]);
+  });
+
+  it("fires the onChange", () => {
+    const screen = setup();
+
+    fireEvent.press(screen.getByText(childText));
+    const menu = screen
+      .getByTestId("SelectDefaultPicker")
+      .findByType(MockPicker);
+
+    expect(menu).toBeDefined();
+    fireEvent(menu, "onValueChange", "2");
+    expect(handleChange).toHaveBeenCalledWith("2");
+  });
+});

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from "react";
+import { Picker } from "@react-native-picker/picker";
+import { styles } from "./SelectDefaultPicker.style";
+import { SelectInternalPickerProps } from "../../types";
+import { SelectPressable } from "../SelectPressable";
+import { tokens } from "../../../utils/design";
+
+type SelectDefaultPickerProps = SelectInternalPickerProps;
+
+export function SelectDefaultPicker({
+  children,
+  options,
+  disabled,
+  onChange,
+}: SelectDefaultPickerProps): JSX.Element {
+  const selectedItem = options.find(option => option.isActive);
+  const pickerRef = useRef<Picker<string>>(null);
+
+  return (
+    <SelectPressable onPress={pickerRef.current?.focus}>
+      {children}
+      <Picker
+        ref={pickerRef}
+        selectedValue={selectedItem?.value}
+        onValueChange={onChange}
+        mode="dropdown"
+        enabled={!disabled}
+        style={styles.androidPickerContainer}
+      >
+        {options.map(({ label, value, isActive }, i) => (
+          <Picker.Item
+            key={i}
+            label={label}
+            value={value}
+            color={isSelected(isActive)}
+          />
+        ))}
+      </Picker>
+    </SelectPressable>
+  );
+
+  function isSelected(isActive: boolean | undefined): string {
+    return isActive ? tokens["color-interactive"] : tokens["color-text"];
+  }
+}

package/src/Select/components/SelectDefaultPicker/index.ts

@@ -0,0 +1 @@
+export * from "./SelectDefaultPicker";

package/src/Select/components/SelectDefaultPicker/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  done: {
+    id: "done",
+    defaultMessage: "Done",
+    description: "Done action",
+  },
+});

package/src/Select/components/SelectIOSPicker/SelectIOSPicker.tsx

@@ -0,0 +1,16 @@
+import { HostComponent, requireNativeComponent } from "react-native";
+import {
+  SelectInternalPickerProps,
+  SelectOnOptionPressEvent,
+} from "../../types";
+
+interface NativeSelectIOSPickerProps
+  extends Pick<SelectInternalPickerProps, "options" | "children"> {
+  /**
+   * Callback when one of the option is pressed
+   */
+  readonly onOptionPress: (event: SelectOnOptionPressEvent) => void;
+}
+
+export const SelectIOSPicker: HostComponent<NativeSelectIOSPickerProps> =
+  requireNativeComponent?.<NativeSelectIOSPickerProps>("RCTATLPicker");

package/src/Select/components/SelectIOSPicker/index.ts

@@ -0,0 +1 @@
+export * from "./SelectIOSPicker";

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.test.tsx

@@ -0,0 +1,100 @@
+import React, { ElementType } from "react";
+import { cleanup, fireEvent, render } from "@testing-library/react-native";
+import { View } from "react-native";
+import { SelectInternalPicker } from ".";
+import { SelectInternalPickerProps } from "../../types";
+import { Text } from "../../../Text";
+
+let Platform: { OS: "ios" | "android"; Version: string | number };
+beforeEach(() => {
+  Platform = require("react-native").Platform;
+  Object.defineProperty(Platform, "Version", { get: () => undefined });
+});
+
+function MockPicker() {
+  return React.createElement("MockPicker");
+}
+const MockPickerItem = () => <></>;
+jest.mock("@react-native-picker/picker", () => ({ Picker: MockPicker }));
+MockPicker.Item = MockPickerItem;
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+const RCTPicker = "RCTATLPicker" as ElementType;
+const childText = "Click me";
+const handleChange = jest.fn();
+
+function setup(props?: Partial<SelectInternalPickerProps>) {
+  return render(
+    <View testID="SelectInternalPicker">
+      <SelectInternalPicker
+        onChange={handleChange}
+        disabled={props?.disabled}
+        options={[
+          { value: "1", label: "First option" },
+          { value: "2", label: "Second option" },
+        ]}
+      >
+        <Text>{childText}</Text>
+      </SelectInternalPicker>
+    </View>,
+  );
+}
+
+describe("SelectInternalPicker", () => {
+  it("fires the onChange", () => {
+    const screen = setup();
+    fireEvent.press(screen.getByText(childText));
+    const menu = screen
+      .getByTestId("SelectInternalPicker")
+      .findByType(MockPicker);
+
+    expect(menu).toBeDefined();
+    fireEvent(menu, "onChange", "1");
+    expect(handleChange).toHaveBeenCalledWith("1");
+  });
+
+  describe("iOS 13 and below fallback", () => {
+    it("renders the iOS 14 native menu picker", () => {
+      Platform.OS = "ios";
+      Object.defineProperty(Platform, "Version", { get: () => "14.1" });
+
+      const screen = setup();
+
+      const menu = screen
+        .getByTestId("SelectInternalPicker")
+        .findByType(RCTPicker);
+
+      expect(menu).toBeDefined();
+    });
+
+    it.each<[typeof Platform.OS, typeof Platform.Version]>([
+      ["ios", "13.1"],
+      ["android", 100],
+    ])("renders the menu picker on %s", (os, version) => {
+      Platform.OS = os;
+      Object.defineProperty(Platform, "Version", { get: () => version });
+      const screen = setup();
+
+      fireEvent.press(screen.getByText(childText));
+      expect(
+        screen.getByTestId("SelectInternalPicker").findByType(MockPicker),
+      ).toBeDefined();
+    });
+  });
+
+  describe("Disabled", () => {
+    it("should not render the picker", () => {
+      const screen = setup({ disabled: true });
+
+      const menu = screen
+        .getByTestId("SelectInternalPicker")
+        .findAllByType(RCTPicker);
+
+      expect(menu).toEqual([]);
+    });
+  });
+});

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { handlePress, isIOS14AndUp } from "./utils";
+import { SelectInternalPickerProps } from "../../types";
+import { SelectIOSPicker } from "../SelectIOSPicker";
+import { SelectPressable } from "../SelectPressable";
+import { SelectDefaultPicker } from "../SelectDefaultPicker";
+
+export function SelectInternalPicker({
+  children,
+  options,
+  disabled,
+  onChange,
+}: SelectInternalPickerProps): JSX.Element {
+  if (disabled) return <>{children}</>;
+  if (isIOS14AndUp()) {
+    return (
+      <SelectPressable>
+        <SelectIOSPicker
+          options={options}
+          onOptionPress={handlePress(onChange)}
+        >
+          {children}
+        </SelectIOSPicker>
+      </SelectPressable>
+    );
+  }
+
+  return (
+    <SelectDefaultPicker options={options} onChange={onChange}>
+      {children}
+    </SelectDefaultPicker>
+  );
+}

package/src/Select/components/SelectInternalPicker/index.ts

@@ -0,0 +1 @@
+export * from "./SelectInternalPicker";

package/src/Select/components/SelectInternalPicker/utils.ts

@@ -0,0 +1,20 @@
+import { Platform } from "react-native";
+import {
+  SelectInternalPickerProps,
+  SelectOnOptionPressEvent,
+} from "../../types";
+
+export function handlePress(onChange: SelectInternalPickerProps["onChange"]) {
+  return ({ nativeEvent: { event } }: SelectOnOptionPressEvent): void => {
+    return onChange(event);
+  };
+}
+
+export function isIOS14AndUp(): boolean {
+  if (Platform.OS === "ios") {
+    const majorVersionIOS = parseInt(Platform.Version, 10);
+    return majorVersionIOS >= 14;
+  }
+
+  return false;
+}

package/src/Select/components/SelectPressable/SelectPressable.style.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+});

package/src/Select/components/SelectPressable/SelectPressable.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Keyboard, Pressable, PressableProps } from "react-native";
+import { styles } from "./SelectPressable.style";
+import { SelectInternalPickerProps } from "../../types";
+import { useIsScreenReaderEnabled } from "../../../hooks";
+
+type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> &
+  Pick<PressableProps, "onPress">;
+
+/**
+ * Switches between Pressable with pressed styling and a fragment when a
+ * screen-reader is being used to avoid screen-readers from ignoring the press
+ * on the MenuView
+ */
+export function SelectPressable({
+  children,
+  onPress,
+}: SelectPressableProps): JSX.Element {
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+
+  if (isScreenReaderEnabled) return <>{children}</>;
+
+  return (
+    <Pressable
+      style={({ pressed }) => [pressed && styles.pressed]}
+      onPressIn={Keyboard.dismiss}
+      onPress={onPress}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/Select/components/SelectPressable/index.ts

@@ -0,0 +1 @@
+export * from "./SelectPressable";