@jobber/components-native 0.26.0 → 0.27.0

package/dist/types/src/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ButtonGroupActionElement } from "./types";
+export interface ButtonGroupProps {
+    readonly children: ButtonGroupActionElement | ButtonGroupActionElement[];
+    /**
+     * Display a cancel button in the secondary bottom sheet footer.
+     */
+    readonly showCancelInBottomSheet?: boolean;
+    /**
+     * An optional heading to display in the secondary bottom sheet header.
+     */
+    readonly bottomSheetHeading?: string;
+    /**
+     * Callback that is called when the secondary actions bottom sheet is opened.
+     */
+    readonly onOpenBottomSheet?: () => void;
+    /**
+     * Callback that is called when the secondary actions bottom sheet is closed.
+     */
+    readonly onCloseBottomSheet?: () => void;
+    /**
+     * Allows you to Tap the button while offline
+     */
+    readonly allowTapWhenOffline?: boolean;
+}
+export declare function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHeading, onOpenBottomSheet, onCloseBottomSheet, allowTapWhenOffline, }: ButtonGroupProps): JSX.Element;
+export declare namespace ButtonGroup {
+    var PrimaryAction: typeof import("./ButtonGroupAction").PrimaryAction;
+    var SecondaryAction: typeof import("./ButtonGroupAction").SecondaryAction;
+}

package/dist/types/src/ButtonGroup/ButtonGroup.style.d.ts

@@ -0,0 +1,16 @@
+export declare const styles: {
+    buttonGroup: {
+        width: string;
+        flexDirection: "row";
+        justifyContent: "flex-end";
+    };
+    button: {
+        flexBasis: number;
+        flexGrow: number;
+        paddingRight: number;
+    };
+    moreButton: {
+        flexBasis: number;
+        flexGrow: number;
+    };
+};

package/dist/types/src/ButtonGroup/ButtonGroupAction.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { IconColorNames, IconNames } from "@jobber/design";
+import { ButtonType, ButtonVariation } from "../Button";
+export interface ButtonGroupActionProps {
+    /**
+     * Text to be displayed on the action button
+     */
+    label: string;
+    /**
+     * Icon to be displayed on the action button
+     */
+    icon?: IconNames;
+    /**
+     * Determines the color of the icon. If not specified, some icons have a default system colour which will be used
+     * Others that don't have a system colour fall back to greyBlue.
+     * Only applies the iconColor to ButtonGroup.PrimaryAction when it is rendered under the "more" menu.
+     */
+    iconColor?: IconColorNames;
+    /**
+     * Press handler for the action button
+     */
+    onPress: () => void;
+    loading?: boolean;
+}
+export interface ButtonGroupSecondaryActionProps extends ButtonGroupActionProps {
+    /**
+     * Indicates whether the secondary action is destructive in nature.
+     */
+    destructive?: boolean;
+}
+export interface ButtonGroupPrimaryActionProps extends ButtonGroupActionProps {
+    /**
+     * Sets the action button style (default: "primary")
+     */
+    buttonType?: ButtonType;
+    /**
+     * Themes the action button to the type of action it performs (default: "work")
+     */
+    buttonVariation?: ButtonVariation;
+    /**
+     * Optional custom button that can be rendered in place of the primary action button
+     */
+    customButton?: JSX.Element;
+    loading?: boolean;
+}
+export declare function PrimaryAction(_: ButtonGroupPrimaryActionProps): JSX.Element;
+export declare function SecondaryAction(_: ButtonGroupSecondaryActionProps): JSX.Element;

package/dist/types/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+import { ButtonGroupSecondaryActionProps } from "../../types";
+import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
+interface SecondaryActionSheetProps {
+    actions: ButtonGroupSecondaryActionProps[];
+    secondaryActionsRef: RefObject<BottomSheetRef>;
+    showCancel?: boolean;
+    heading?: string;
+    onOpenBottomSheet?: () => void;
+    onCloseBottomSheet?: () => void;
+}
+export declare function SecondaryActionSheet({ actions, secondaryActionsRef, heading, showCancel, onOpenBottomSheet, onCloseBottomSheet, }: SecondaryActionSheetProps): JSX.Element;
+export {};

package/dist/types/src/ButtonGroup/components/SecondaryActionSheet/index.d.ts

@@ -0,0 +1 @@
+export { SecondaryActionSheet } from "./SecondaryActionSheet";

package/dist/types/src/ButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonGroup } from "./ButtonGroup";
+export type { ButtonGroupActionProps, ButtonGroupPrimaryActionProps, ButtonGroupSecondaryActionProps, ButtonGroupActionElement, } from "./types";
+export { usePreventTapWhenOffline } from "./utils";

package/dist/types/src/ButtonGroup/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const messages: {
+    more: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unavailableNetworkTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unavailableNetworkMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/ButtonGroup/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { ButtonGroupActionProps, ButtonGroupPrimaryActionProps, ButtonGroupSecondaryActionProps, PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
+export type ButtonGroupPrimaryActionElement = ReactElement<ButtonGroupPrimaryActionProps, typeof PrimaryAction>;
+export type ButtonGroupSecondaryActionElement = ReactElement<ButtonGroupActionProps, typeof SecondaryAction>;
+export type ButtonGroupActionElement = ButtonGroupPrimaryActionElement | ButtonGroupSecondaryActionElement;
+export type BottomSheetTextTransform = "capitalize" | "none";
+export type { ButtonGroupActionProps, ButtonGroupPrimaryActionProps, ButtonGroupSecondaryActionProps, };

package/dist/types/src/ButtonGroup/utils.d.ts

@@ -0,0 +1,19 @@
+import { ButtonGroupActionElement, ButtonGroupPrimaryActionElement } from "./types";
+import { ButtonGroupActionProps } from "./ButtonGroupAction";
+interface UsePreventTapWhenOfflineShape {
+    readonly handlePress: (callback: ButtonGroupActionProps["onPress"]) => () => void;
+}
+/**
+ * Determine if the onPress should be fired or an alert when the device is
+ * online or offline
+ */
+export declare function usePreventTapWhenOffline(): UsePreventTapWhenOfflineShape;
+interface GetActionShape {
+    readonly primaryActions: ButtonGroupPrimaryActionElement[];
+    readonly secondaryActions: ButtonGroupActionElement[];
+}
+/**
+ * Separate the Primary and Secondary actions into 2 const
+ */
+export declare function getActions(children: ButtonGroupActionElement | ButtonGroupActionElement[]): GetActionShape;
+export {};

package/dist/types/src/index.d.ts

@@ -4,6 +4,7 @@ export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
 export * from "./BottomSheet";
 export * from "./Button";
+export * from "./ButtonGroup";
 export * from "./Card";
 export * from "./Chip";
 export * from "./Content";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -55,5 +55,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "8b036ebea9748a095b6a1d29ea2b45c0958a286b"
+  "gitHead": "4cac408646d885509b88823f5186df1a9534b641"
 }

package/src/ButtonGroup/ButtonGroup.style.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  buttonGroup: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+  button: {
+    flexBasis: tokens["space-largest"],
+    flexGrow: 1,
+    paddingRight: tokens["space-smaller"],
+  },
+  moreButton: {
+    flexBasis: tokens["space-largest"],
+    flexGrow: 0,
+  },
+});

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,325 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { Alert } from "react-native";
+import { messages } from "./messages";
+import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
+import { Button } from "../Button";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+import { defaultValues as contextDefaultValue } from "../AtlantisContext";
+
+const mockOnOpen = jest.fn();
+
+function ButtonGroupForTest(props: ButtonGroupProps) {
+  return (
+    <Host>
+      <ButtonGroup
+        bottomSheetHeading={props.bottomSheetHeading}
+        showCancelInBottomSheet={props.showCancelInBottomSheet}
+        onOpenBottomSheet={mockOnOpen}
+      >
+        {props.children}
+      </ButtonGroup>
+    </Host>
+  );
+}
+
+it("renders a single primary action", () => {
+  const createAction = jest.fn();
+  const { getByText, queryByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  expect(getByText("Create")).not.toBeNull();
+  expect(queryByLabelText(messages.more.defaultMessage)).toBeNull();
+});
+
+it("renders 2 primary actions", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const { getByText, queryByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.PrimaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  expect(getByText("Create")).not.toBeNull();
+  expect(getByText("Edit")).not.toBeNull();
+  expect(queryByLabelText(messages.more.defaultMessage)).toBeNull();
+});
+
+it("does not render more than 2 primary actions but adds a More button", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const mysteryAction = jest.fn();
+  const { getByText, queryByText, getByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.PrimaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+      <ButtonGroup.PrimaryAction
+        label="Mystery"
+        icon="edit"
+        onPress={mysteryAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  expect(getByText("Create")).not.toBeNull();
+  expect(getByText("Edit")).not.toBeNull();
+  expect(queryByText("Mystery")).toBeNull();
+  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+});
+
+it("does not render secondary actions", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const deleteAction = jest.fn();
+  const { getByText, queryByText, getByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Delete"
+        icon="trash"
+        onPress={deleteAction}
+      />
+    </ButtonGroupForTest>,
+  );
+  expect(getByText("Create")).not.toBeNull();
+  expect(queryByText("Edit")).toBeNull();
+  expect(queryByText("Delete")).toBeNull();
+  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+});
+
+it("renders first secondary action as a primary action button if no primary action specified", () => {
+  const editAction = jest.fn();
+  const deleteAction = jest.fn();
+  const { queryByText, getByText, getByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.SecondaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Delete"
+        icon="trash"
+        onPress={deleteAction}
+      />
+    </ButtonGroupForTest>,
+  );
+  expect(getByText("Edit")).not.toBeNull();
+  expect(queryByText("Delete")).toBeNull();
+  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+});
+
+it("fires the press handlers when the primary action buttons are pressed", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const { getByText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.PrimaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  fireEvent.press(getByText("Create"));
+  expect(createAction).toHaveBeenCalled();
+  fireEvent.press(getByText("Edit"));
+  expect(editAction).toHaveBeenCalled();
+});
+
+it("opens the secondary action menu when the More button is pressed", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const deleteAction = jest.fn();
+  const { getByText, queryByText, getByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Delete"
+        icon="trash"
+        onPress={deleteAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  expect(queryByText("Edit")).toBeNull();
+
+  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+
+  expect(getByText("Edit")).not.toBeNull();
+  expect(getByText("Delete")).not.toBeNull();
+});
+
+it("renders heading and cancel options if passed in", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const { getByText, getByLabelText } = render(
+    <ButtonGroupForTest
+      bottomSheetHeading={"Heading"}
+      showCancelInBottomSheet={true}
+    >
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+
+  expect(getByText("Heading")).not.toBeNull();
+  expect(getByText("Cancel")).not.toBeNull();
+});
+
+it("renders custom button for primary action if passed in", () => {
+  const createAction = jest.fn();
+
+  const customCreateButton = (
+    <Button label="CustomCreate" onPress={createAction} />
+  );
+
+  const { queryByText, getByText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+        customButton={customCreateButton}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  expect(getByText("CustomCreate")).not.toBeNull();
+  expect(queryByText("Create")).toBeNull();
+});
+
+it("calls onOpenBottomSheet when the secondary actions are opened", () => {
+  const createAction = jest.fn();
+  const editAction = jest.fn();
+  const deleteAction = jest.fn();
+  const { getByLabelText } = render(
+    <ButtonGroupForTest>
+      <ButtonGroup.PrimaryAction
+        label="Create"
+        icon="plus"
+        onPress={createAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Edit"
+        icon="edit"
+        onPress={editAction}
+      />
+      <ButtonGroup.SecondaryAction
+        label="Delete"
+        icon="trash"
+        onPress={deleteAction}
+      />
+    </ButtonGroupForTest>,
+  );
+
+  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+
+  expect(mockOnOpen).toHaveBeenCalled();
+});
+
+describe("ButtonGroup Offline/Online", () => {
+  const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const handlePress = jest.fn();
+  const label = "Click me";
+  const setup = () =>
+    render(
+      <ButtonGroupForTest>
+        <ButtonGroup.PrimaryAction
+          label={label}
+          icon="plus"
+          onPress={handlePress}
+        />
+      </ButtonGroupForTest>,
+    );
+
+  it("should show an alert and not fire the onPress", () => {
+    const alertSpy = jest.spyOn(Alert, "alert");
+    atlantisContextSpy.mockReturnValue({
+      ...contextDefaultValue,
+      isOnline: false,
+    });
+
+    const { getByText } = setup();
+
+    fireEvent.press(getByText(label));
+
+    expect(alertSpy).toHaveBeenCalled();
+    expect(handlePress).not.toHaveBeenCalled();
+  });
+
+  it("should fire the onPress and not show an alert", () => {
+    const alertSpy = jest.spyOn(Alert, "alert");
+    const { getByText } = setup();
+
+    fireEvent.press(getByText(label));
+
+    expect(handlePress).toHaveBeenCalled();
+    expect(alertSpy).not.toHaveBeenCalled();
+  });
+});

package/src/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,113 @@
+import React, { useRef } from "react";
+import { useIntl } from "react-intl";
+import { View } from "react-native";
+import { PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
+import { messages } from "./messages";
+import { styles } from "./ButtonGroup.style";
+import { SecondaryActionSheet } from "./components/SecondaryActionSheet";
+import { getActions, usePreventTapWhenOffline } from "./utils";
+import { ButtonGroupActionElement } from "./types";
+import { Button } from "../Button";
+import { BottomSheetRef } from "../BottomSheet/BottomSheet";
+
+export interface ButtonGroupProps {
+  readonly children: ButtonGroupActionElement | ButtonGroupActionElement[];
+
+  /**
+   * Display a cancel button in the secondary bottom sheet footer.
+   */
+  readonly showCancelInBottomSheet?: boolean;
+
+  /**
+   * An optional heading to display in the secondary bottom sheet header.
+   */
+  readonly bottomSheetHeading?: string;
+
+  /**
+   * Callback that is called when the secondary actions bottom sheet is opened.
+   */
+  readonly onOpenBottomSheet?: () => void;
+
+  /**
+   * Callback that is called when the secondary actions bottom sheet is closed.
+   */
+  readonly onCloseBottomSheet?: () => void;
+
+  /**
+   * Allows you to Tap the button while offline
+   */
+  readonly allowTapWhenOffline?: boolean;
+}
+
+export function ButtonGroup({
+  children,
+  showCancelInBottomSheet,
+  bottomSheetHeading,
+  onOpenBottomSheet,
+  onCloseBottomSheet,
+  allowTapWhenOffline = false,
+}: ButtonGroupProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const { handlePress } = usePreventTapWhenOffline();
+  const secondaryActionsRef = useRef<BottomSheetRef>();
+  const { primaryActions, secondaryActions } = getActions(children);
+  return (
+    <View style={styles.buttonGroup}>
+      {primaryActions.map((action, index) => {
+        const {
+          label,
+          onPress,
+          buttonType,
+          buttonVariation,
+          icon,
+          customButton,
+          loading,
+        } = action.props;
+
+        return (
+          <View style={styles.button} key={index}>
+            {customButton || (
+              <Button
+                label={label}
+                accessibilityLabel={label}
+                onPress={allowTapWhenOffline ? onPress : handlePress(onPress)}
+                type={buttonType}
+                variation={buttonVariation}
+                fullHeight={true}
+                icon={icon}
+                loading={loading}
+              />
+            )}
+          </View>
+        );
+      })}
+
+      {secondaryActions.length > 0 && (
+        <View style={styles.moreButton}>
+          <Button
+            icon={"more"}
+            accessibilityLabel={formatMessage(messages.more)}
+            onPress={handlePress(openBottomSheet)}
+            fullHeight={true}
+          />
+        </View>
+      )}
+
+      <SecondaryActionSheet
+        heading={bottomSheetHeading}
+        showCancel={showCancelInBottomSheet}
+        secondaryActionsRef={secondaryActionsRef}
+        actions={secondaryActions.map(secondaryAction => secondaryAction.props)}
+        onOpenBottomSheet={onOpenBottomSheet}
+        onCloseBottomSheet={onCloseBottomSheet}
+      />
+    </View>
+  );
+
+  function openBottomSheet() {
+    secondaryActionsRef.current?.open();
+  }
+}
+
+ButtonGroup.PrimaryAction = PrimaryAction;
+ButtonGroup.SecondaryAction = SecondaryAction;