@jobber/components-native 0.26.0 → 0.27.0

package/src/ButtonGroup/ButtonGroupAction.tsx

@@ -0,0 +1,66 @@
+import { IconColorNames, IconNames } from "@jobber/design";
+import React from "react";
+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;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function PrimaryAction(_: ButtonGroupPrimaryActionProps): JSX.Element {
+  return <></>;
+}
+
+export function SecondaryAction(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _: ButtonGroupSecondaryActionProps,
+): JSX.Element {
+  return <></>;
+}

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -0,0 +1,55 @@
+import React, { RefObject } from "react";
+import { View } from "react-native";
+import { Portal } from "react-native-portalize";
+import { ButtonGroupSecondaryActionProps } from "../../types";
+import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
+import { BottomSheet, BottomSheetRef } from "../../../BottomSheet/BottomSheet";
+
+interface SecondaryActionSheetProps {
+  actions: ButtonGroupSecondaryActionProps[];
+  secondaryActionsRef: RefObject<BottomSheetRef>;
+  showCancel?: boolean;
+  heading?: string;
+  onOpenBottomSheet?: () => void;
+  onCloseBottomSheet?: () => void;
+}
+
+export function SecondaryActionSheet({
+  actions,
+  secondaryActionsRef,
+  heading,
+  showCancel,
+  onOpenBottomSheet,
+  onCloseBottomSheet,
+}: SecondaryActionSheetProps): JSX.Element {
+  return (
+    <Portal>
+      <BottomSheet
+        heading={heading}
+        showCancel={showCancel}
+        ref={secondaryActionsRef}
+        onOpen={onOpenBottomSheet}
+        onClose={onCloseBottomSheet}
+      >
+        <View>
+          {actions.map((action, index) => {
+            const { label, onPress, icon, iconColor, destructive } = action;
+            return (
+              <BottomSheetOption
+                destructive={destructive}
+                key={index}
+                text={label}
+                onPress={() => {
+                  secondaryActionsRef?.current?.close();
+                  onPress();
+                }}
+                icon={icon}
+                iconColor={iconColor}
+              />
+            );
+          })}
+        </View>
+      </BottomSheet>
+    </Portal>
+  );
+}

package/src/ButtonGroup/components/SecondaryActionSheet/index.ts

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

package/src/ButtonGroup/index.ts

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

package/src/ButtonGroup/messages.ts

@@ -0,0 +1,19 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  more: {
+    id: "more",
+    defaultMessage: "More",
+    description: "Accessibility label for the More button",
+  },
+  unavailableNetworkTitle: {
+    id: "unavailableNetworkTitle",
+    defaultMessage: "Network unavailable",
+    description: "The title for alert about network unavailable",
+  },
+  unavailableNetworkMessage: {
+    id: "unavailableNetworkMessage",
+    defaultMessage: "Check your internet connection and try again later.",
+    description: "The message for alert about network unavailable",
+  },
+});

package/src/ButtonGroup/types.ts

@@ -0,0 +1,30 @@
+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/src/ButtonGroup/utils.ts

@@ -0,0 +1,86 @@
+import React, { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Alert } from "react-native";
+import { messages } from "./messages";
+import {
+  ButtonGroupActionElement,
+  ButtonGroupPrimaryActionElement,
+} from "./types";
+import {
+  ButtonGroupActionProps,
+  PrimaryAction,
+  SecondaryAction,
+} from "./ButtonGroupAction";
+import { useAtlantisContext } from "../AtlantisContext/AtlantisContext";
+
+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 function usePreventTapWhenOffline(): UsePreventTapWhenOfflineShape {
+  const { formatMessage } = useIntl();
+  const { isOnline } = useAtlantisContext();
+
+  const handlePress = useCallback(
+    (callback: ButtonGroupActionProps["onPress"]) => {
+      if (isOnline) return callback;
+
+      return () =>
+        Alert.alert(
+          formatMessage(messages.unavailableNetworkTitle),
+          formatMessage(messages.unavailableNetworkMessage),
+        );
+    },
+    [formatMessage, isOnline],
+  );
+
+  return { handlePress };
+}
+
+interface GetActionShape {
+  readonly primaryActions: ButtonGroupPrimaryActionElement[];
+  readonly secondaryActions: ButtonGroupActionElement[];
+}
+
+/**
+ * Separate the Primary and Secondary actions into 2 const
+ */
+export function getActions(
+  children: ButtonGroupActionElement | ButtonGroupActionElement[],
+): GetActionShape {
+  const childArray = React.Children.toArray(
+    children,
+  ) as ButtonGroupActionElement[];
+
+  let primaryActions = childArray.filter(
+    action =>
+      /* Checking the component type does not work in dev environments due to
+       * wrapper components used for hot-reload
+       * However, checking the type name does not work in prod due to code minification
+       * Hence 2 different checks here */
+      action.type === PrimaryAction || action.type.name === "PrimaryAction",
+  ) as ButtonGroupPrimaryActionElement[];
+
+  let secondaryActions = childArray.filter(
+    action =>
+      action.type === SecondaryAction || action.type.name === "SecondaryAction",
+  );
+
+  if (primaryActions.length > 2) {
+    secondaryActions = primaryActions.slice(2).concat(secondaryActions);
+    primaryActions = primaryActions.slice(0, 2);
+  }
+
+  if (primaryActions.length === 0) {
+    primaryActions = secondaryActions.slice(0, 1);
+    secondaryActions = secondaryActions.slice(1);
+  }
+
+  return { primaryActions, secondaryActions };
+}

package/src/index.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";