@jobber/components-native 0.26.0 → 0.27.0

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,29 @@
+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 { Button } from "../Button";
+export function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHeading, onOpenBottomSheet, onCloseBottomSheet, allowTapWhenOffline = false, }) {
+    const { formatMessage } = useIntl();
+    const { handlePress } = usePreventTapWhenOffline();
+    const secondaryActionsRef = useRef();
+    const { primaryActions, secondaryActions } = getActions(children);
+    return (React.createElement(View, { style: styles.buttonGroup },
+        primaryActions.map((action, index) => {
+            const { label, onPress, buttonType, buttonVariation, icon, customButton, loading, } = action.props;
+            return (React.createElement(View, { style: styles.button, key: index }, customButton || (React.createElement(Button, { label: label, accessibilityLabel: label, onPress: allowTapWhenOffline ? onPress : handlePress(onPress), type: buttonType, variation: buttonVariation, fullHeight: true, icon: icon, loading: loading }))));
+        }),
+        secondaryActions.length > 0 && (React.createElement(View, { style: styles.moreButton },
+            React.createElement(Button, { icon: "more", accessibilityLabel: formatMessage(messages.more), onPress: handlePress(openBottomSheet), fullHeight: true }))),
+        React.createElement(SecondaryActionSheet, { heading: bottomSheetHeading, showCancel: showCancelInBottomSheet, secondaryActionsRef: secondaryActionsRef, actions: secondaryActions.map(secondaryAction => secondaryAction.props), onOpenBottomSheet: onOpenBottomSheet, onCloseBottomSheet: onCloseBottomSheet })));
+    function openBottomSheet() {
+        var _a;
+        (_a = secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    }
+}
+ButtonGroup.PrimaryAction = PrimaryAction;
+ButtonGroup.SecondaryAction = SecondaryAction;

package/dist/src/ButtonGroup/ButtonGroup.style.js

@@ -0,0 +1,18 @@
+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/dist/src/ButtonGroup/ButtonGroupAction.js

@@ -0,0 +1,10 @@
+import React from "react";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function PrimaryAction(_) {
+    return React.createElement(React.Fragment, null);
+}
+export function SecondaryAction(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return React.createElement(React.Fragment, null);
+}

package/dist/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { View } from "react-native";
+import { Portal } from "react-native-portalize";
+import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
+import { BottomSheet } from "../../../BottomSheet/BottomSheet";
+export function SecondaryActionSheet({ actions, secondaryActionsRef, heading, showCancel, onOpenBottomSheet, onCloseBottomSheet, }) {
+    return (React.createElement(Portal, null,
+        React.createElement(BottomSheet, { heading: heading, showCancel: showCancel, ref: secondaryActionsRef, onOpen: onOpenBottomSheet, onClose: onCloseBottomSheet },
+            React.createElement(View, null, actions.map((action, index) => {
+                const { label, onPress, icon, iconColor, destructive } = action;
+                return (React.createElement(BottomSheetOption, { destructive: destructive, key: index, text: label, onPress: () => {
+                        var _a;
+                        (_a = secondaryActionsRef === null || secondaryActionsRef === void 0 ? void 0 : secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                        onPress();
+                    }, icon: icon, iconColor: iconColor }));
+            })))));
+}

package/dist/src/ButtonGroup/components/SecondaryActionSheet/index.js

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

package/dist/src/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { ButtonGroup } from "./ButtonGroup";
+export { usePreventTapWhenOffline } from "./utils";

package/dist/src/ButtonGroup/messages.js

@@ -0,0 +1,18 @@
+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/dist/src/ButtonGroup/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/ButtonGroup/utils.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Alert } from "react-native";
+import { messages } from "./messages";
+import { PrimaryAction, SecondaryAction, } from "./ButtonGroupAction";
+import { useAtlantisContext } from "../AtlantisContext/AtlantisContext";
+/**
+ * Determine if the onPress should be fired or an alert when the device is
+ * online or offline
+ */
+export function usePreventTapWhenOffline() {
+    const { formatMessage } = useIntl();
+    const { isOnline } = useAtlantisContext();
+    const handlePress = useCallback((callback) => {
+        if (isOnline)
+            return callback;
+        return () => Alert.alert(formatMessage(messages.unavailableNetworkTitle), formatMessage(messages.unavailableNetworkMessage));
+    }, [formatMessage, isOnline]);
+    return { handlePress };
+}
+/**
+ * Separate the Primary and Secondary actions into 2 const
+ */
+export function getActions(children) {
+    const childArray = React.Children.toArray(children);
+    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");
+    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/dist/src/index.js

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