@jobber/components-native 0.30.0 → 0.32.0

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";

package/src/Select/index.ts

@@ -0,0 +1 @@
+export { Select, Option, SelectOption, SelectProps } from "./Select";

package/src/Select/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  a11yHint: {
+    id: "a11yHint",
+    defaultMessage: "Select to open the picker",
+    description: "Accessibility hint on how to interact with the select",
+  },
+  emptyValue: {
+    id: "emptyValue",
+    defaultMessage: "Select an option",
+    description: "Accessibility hint on how to interact with the select",
+  },
+});

package/src/Select/types.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+
+export interface SelectInternalPickerProps {
+  /**
+   * Tapping the children opens the picker
+   */
+  readonly children: ReactNode;
+
+  /**
+   * The list of options that user can choose from
+   */
+  readonly options: SelectInternalPickerOption[];
+
+  /**
+   * Prevents the menu from opening
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Callback to fire when an option is pressed
+   */
+  readonly onChange: (value: string) => void;
+}
+
+export interface SelectInternalPickerOption {
+  /**
+   * The value that gets returned whenever the option is selected
+   */
+  readonly value: string;
+
+  /**
+   * What the user chooses on the UI
+   */
+  readonly label: string;
+
+  /**
+   * Determines if the option is selected or not
+   */
+  readonly isActive?: boolean;
+}
+
+export interface SelectOnOptionPressEvent {
+  readonly nativeEvent: {
+    readonly event: string;
+  };
+}

package/src/index.ts

@@ -17,12 +17,14 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";
+export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";