@jobber/components-native 0.24.1-migrate-te.4 → 0.25.0

package/dist/src/BottomSheet/BottomSheet.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useState } from "react";
+import { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Keyboard, View } from "react-native";
+import { useIntl } from "react-intl";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { styles } from "./BottomSheet.style";
+import { messages } from "./messages";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { Divider } from "../Divider";
+import { Heading } from "../Heading";
+export const BottomSheet = forwardRef(BottomSheetInternal);
+function BottomSheetInternal({ children, showCancel, loading = false, heading, onOpen, onClose, }, ref) {
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const [open, setOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        open && React.createElement(Overlay, null),
+        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
+                    var _a;
+                    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
+                } }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
+            React.createElement(View, { style: !showCancel && !isScreenReaderEnabled ? styles.children : undefined }, children))));
+    function openModal() {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        setOpen(true);
+        dismissKeyboard();
+    }
+    function closeModal() {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setOpen(false);
+    }
+}
+function Header({ heading }) {
+    return (React.createElement(View, { style: styles.header },
+        React.createElement(Heading, { level: "subtitle" }, heading)));
+}
+function Footer({ cancellable, onCancel, }) {
+    const insets = useSafeAreaInsets();
+    const { formatMessage } = useIntl();
+    return (React.createElement(View, { style: { marginBottom: insets.bottom } }, cancellable && (React.createElement(View, { style: styles.children },
+        React.createElement(View, { style: styles.footerDivider },
+            React.createElement(Divider, null)),
+        React.createElement(BottomSheetOption, { text: formatMessage(messages.cancel), icon: "remove", onPress: onCancel })))));
+}
+function dismissKeyboard() {
+    //Dismisses the keyboard before opening the bottom sheet.
+    //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
+    Keyboard.dismiss();
+}
+function Overlay() {
+    return React.createElement(View, { style: styles.overlay });
+}

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -0,0 +1,28 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const { height } = Dimensions.get("window");
+const modalBorderRadius = tokens["radius-larger"];
+export const styles = StyleSheet.create({
+    overlayModalize: {
+        backgroundColor: "transparent",
+    },
+    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
+    modal: {
+        borderTopLeftRadius: modalBorderRadius,
+        borderTopRightRadius: modalBorderRadius,
+        paddingTop: tokens["space-small"],
+    },
+    children: {
+        paddingBottom: tokens["space-small"],
+    },
+    header: {
+        paddingHorizontal: tokens["space-base"],
+        paddingTop: tokens["space-small"],
+        paddingBottom: tokens["space-base"],
+    },
+    footerDivider: {
+        marginHorizontal: tokens["space-base"],
+        marginTop: tokens["space-small"],
+        marginBottom: tokens["space-smaller"],
+    },
+});

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { styles } from "./BottomSheetOption.styles";
+import { capitalize } from "../../../utils/intl";
+import { Text } from "../../../Text";
+import { Icon } from "../../../Icon";
+export function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform = "capitalize", onPress, }) {
+    const destructiveColor = "critical";
+    const textVariation = destructive ? destructiveColor : "subdued";
+    return (React.createElement(TouchableOpacity, { style: styles.bottomSheetOption, onPress: onPress, accessibilityLabel: text },
+        icon && (React.createElement(View, { style: styles.icon },
+            React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))),
+        React.createElement(View, { style: styles.title },
+            React.createElement(Text, { variation: textVariation, emphasis: "strong", align: textAlign }, textTransform === "capitalize"
+                ? capitalize(text.toLocaleLowerCase())
+                : text))));
+}

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    bottomSheetOption: {
+        display: "flex",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+        padding: tokens["space-small"],
+    },
+    icon: {
+        paddingHorizontal: tokens["space-small"],
+    },
+    title: {
+        paddingHorizontal: tokens["space-small"],
+        flexShrink: 1,
+    },
+});

package/dist/src/BottomSheet/components/BottomSheetOption/index.js

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

package/dist/src/BottomSheet/index.js

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

package/dist/src/BottomSheet/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    cancel: {
+        id: "cancel",
+        defaultMessage: "Cancel",
+        description: "Text for the cancel action",
+    },
+});

package/dist/src/hooks/index.js

@@ -1 +1,2 @@
 export * from "./useFormController";
+export * from "./useIsScreenReaderEnabled";

package/dist/src/hooks/useIsScreenReaderEnabled.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+export function useIsScreenReaderEnabled() {
+    const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+    useEffect(() => {
+        function handleScreenReaderToggle(isScreenReaderEnabled) {
+            setScreenReaderEnabled(isScreenReaderEnabled);
+        }
+        AccessibilityInfo.isScreenReaderEnabled()
+            .then(enabled => {
+            setScreenReaderEnabled(enabled);
+        })
+            .catch(() => {
+            setScreenReaderEnabled(false);
+        });
+        const listener = AccessibilityInfo.addEventListener("screenReaderChanged", handleScreenReaderToggle);
+        return () => {
+            listener.remove();
+        };
+    }, []);
+    return screenReaderEnabled;
+}

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./BottomSheet";
 export * from "./Button";
 export * from "./Card";
 export * from "./Chip";
@@ -16,7 +17,6 @@ export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
 export * from "./InputText";
-export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Switch";

package/dist/src/utils/test/wait.js

@@ -0,0 +1,58 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { screen } from "@testing-library/react-native";
+import { act } from "react-test-renderer";
+/**
+ * wait is used in our tests for testing Apollo Mocks
+ * useQuery returns fetching equal to true in the first render
+ * and the second render would return the mock result
+ * using "await act(wait)", we can wait for the next rerender
+ * to get the mock result of the query
+ * @param milliseconds time to wait in milliseconds
+ */
+export function wait(milliseconds = 0) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield new Promise(resolve => setTimeout(resolve, milliseconds));
+    });
+}
+/**
+ * Use this test helper thoughtfully. If you are running into the
+ * "not wrapped in act(...)" warning while running your test it is
+ * recommended that:
+ *
+ * 1. Double check that there are really no layout changes that you can test against.
+ *    waitForUntestableRender will fail your test if it detects layout changes
+ * 2. Re-evalutate your implementation. Maybe the managed state can be deferred to
+ *    to a component further down the hierarchy? This can help prevent renders since
+ *    your managed state isn't being used yet maybe?
+ *
+ * `waitForUntestableRender` is meant to be used as an alternative to
+ *
+ * ```tsx
+ * await act(wait)
+ * ```
+ *
+ * to make tests more readable.
+ *
+ * The `explanation` argument is required to ensure that a developer _thinks_
+ * about why they need use this function. It is _really_ important that devs
+ * understand when _and why_ a component's render cycle is flagged to be untested
+ * So do not put a throwaway explanation here. If you don't know why your test
+ * needs this function, find out!
+
+ */
+export const waitForUntestableRender = (
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_explanation) => __awaiter(void 0, void 0, void 0, function* () {
+    const before = JSON.stringify(screen.toJSON(), null, 2);
+    yield act(wait);
+    const after = JSON.stringify(screen.toJSON(), null, 2);
+    expect(before).toEqual(after);
+});