@jobber/components-native 0.38.0 → 0.39.0

package/dist/src/AtlantisContext/AtlantisContext.js

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
 import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 export const defaultValues = {
+    dateFormat: "PP",
     // The system time is "p"
     timeFormat: "p",
     timeZone: RNLocalize.getTimeZone(),
@@ -12,6 +13,7 @@ export const defaultValues = {
     },
     floatSeparators: { group: ",", decimal: "." },
     currencySymbol: DEFAULT_CURRENCY_SYMBOL,
+    headerHeight: 0,
 };
 export const AtlantisContext = createContext(defaultValues);
 export function useAtlantisContext() {

package/dist/src/InputDate/InputDate.js

@@ -0,0 +1,76 @@
+import React, { useMemo, useState } from "react";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import { utcToZonedTime } from "date-fns-tz";
+import { format as formatDate } from "date-fns";
+import { messages } from "./messages";
+import { FormField } from "../FormField";
+import { InputPressable } from "../InputPressable";
+import { useAtlantisContext } from "../AtlantisContext";
+function formatInvalidState(error, invalid) {
+    if (invalid)
+        return invalid;
+    if (error && error.message) {
+        return error.message;
+    }
+    return Boolean(error);
+}
+const display = Platform.OS === "ios" ? "inline" : "default";
+/**
+ * Allow users to select a date using the device date picker.
+ */
+export function InputDate(props) {
+    if (props.name) {
+        return (React.createElement(FormField, { name: props.name, defaultValue: props.defaultValue, validations: props.validations }, ({ value, onChange, onBlur }, error) => (React.createElement(InternalInputDate, Object.assign({}, props, { value: value, onChange: (newValue) => {
+                var _a;
+                onChange(newValue);
+                onBlur();
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+            }, invalid: formatInvalidState(error, props.invalid) })))));
+    }
+    return React.createElement(InternalInputDate, Object.assign({}, props));
+}
+function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, name, onChange, accessibilityLabel, accessibilityHint, }) {
+    const [showPicker, setShowPicker] = useState(false);
+    const { formatMessage } = useIntl();
+    const { timeZone, dateFormat } = useAtlantisContext();
+    const date = useMemo(() => {
+        if (typeof value === "string")
+            return new Date(value);
+        return value;
+    }, [value]);
+    const formattedDate = useMemo(() => {
+        if (date) {
+            const zonedTime = utcToZonedTime(date, timeZone);
+            return formatDate(zonedTime, dateFormat);
+        }
+        return emptyValueLabel;
+    }, [date, emptyValueLabel, timeZone, dateFormat]);
+    const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
+    const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : formatMessage(messages.datePlaceholder);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputPressable, { clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
+        React.createElement(DateTimePicker, { testID: "inputDate-datePicker", date: date || undefined, display: display, isVisible: showPicker, maximumDate: maxDate, minimumDate: minDate, mode: "date", onCancel: handleCancel, onConfirm: handleConfirm })));
+    function showDatePicker() {
+        setShowPicker(true);
+    }
+    function handleConfirm(newVal) {
+        setShowPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+    }
+    function handleCancel() {
+        setShowPicker(false);
+        // Ensure a change happens so we trigger the validation of one exists
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    }
+    function handleClear() {
+        // Returns null only for Form controlled scenarios due to a limitation of react-hook-form that doesn't allow passing undefined to form values.
+        if (name) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        }
+    }
+}

package/dist/src/InputDate/index.js

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

package/dist/src/InputDate/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    datePlaceholder: {
+        id: "datePlaceholder",
+        defaultMessage: "Date",
+        description: "Default input label for the InputDate component",
+    },
+});

package/dist/src/Menu/Menu.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useRef, useState } from "react";
+import { Pressable, View, useWindowDimensions, } from "react-native";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { styles } from "./Menu.style";
+import { messages } from "./messages";
+import { findViewpoint } from "./utils";
+import { MenuOption } from "./components/MenuOption";
+import { Overlay } from "./components/Overlay";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { useAtlantisContext } from "../AtlantisContext";
+export function Menu({ menuOptions, customActivator }) {
+    const [open, setOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState();
+    const activatorLayout = useRef();
+    const menuButtonRef = useRef();
+    const screenInfo = useScreenInformation();
+    const { formatMessage } = useIntl();
+    const findMenuLayout = useCallback(() => {
+        if (activatorLayout.current) {
+            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
+        }
+    }, [screenInfo, activatorLayout]);
+    const activatorOnPress = (onPress) => {
+        var _a;
+        (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
+            activatorLayout.current = {
+                x,
+                y,
+                width,
+                height,
+            };
+            findMenuLayout();
+            setOpen(true);
+            onPress && onPress();
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(View, { ref: ref => {
+                menuButtonRef.current = ref;
+            }, collapsable: false },
+            customActivator && (React.createElement(Pressable, { style: ({ pressed }) => [
+                    {
+                        opacity: pressed ? tokens["opacity-pressed"] : 1,
+                    },
+                ], pointerEvents: "box-only", onPress: () => {
+                    activatorOnPress(customActivator.props.onPress);
+                }, onLongPress: customActivator.props.onLongPress }, customActivator)),
+            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: formatMessage(messages.more), variation: "cancel", type: "tertiary", onPress: () => {
+                    activatorOnPress();
+                } }))),
+        React.createElement(Portal, null, open && (React.createElement(React.Fragment, null,
+            React.createElement(Overlay, { setOpen: setOpen }),
+            React.createElement(View, { style: [open && menuPosition, styles.menu] },
+                React.createElement(Content, { spacing: "none", childSpacing: "small" }, menuOptions === null || menuOptions === void 0 ? void 0 : menuOptions.map((menuOption, index) => {
+                    return (React.createElement(MenuOption, Object.assign({}, menuOption, { key: index, setOpen: setOpen })));
+                }))))))));
+}
+function useScreenInformation() {
+    const { headerHeight } = useAtlantisContext();
+    const windowWidth = useWindowDimensions().width;
+    const { height: windowHeight } = useSafeAreaFrame();
+    return { headerHeight, windowWidth, windowHeight };
+}

package/dist/src/Menu/Menu.style.js

@@ -0,0 +1,6 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const menuWidth = 208;
+export const styles = StyleSheet.create({
+    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-larger"], width: menuWidth }, tokens["shadow-high"]),
+});

package/dist/src/Menu/components/MenuOption/MenuOption.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import capitalize from "lodash/capitalize";
+import { styles } from "./MenuOption.style";
+import { tokens } from "../../../utils/design";
+import { Flex } from "../../../Flex";
+import { Typography } from "../../../Typography";
+import { Icon } from "../../../Icon";
+export function MenuOption({ label, icon, iconColor = "heading", textAlign, destructive, textTransform = "capitalize", onPress, setOpen, }) {
+    const destructiveColor = "critical";
+    const textVariation = destructive ? destructiveColor : "heading";
+    return (React.createElement(View, { testID: "ATL-MENU-OPTIONS" },
+        React.createElement(Pressable, { style: ({ pressed }) => [
+                styles.menuOption,
+                { opacity: pressed ? tokens["opacity-pressed"] : 1 },
+            ], onPress: () => {
+                onPress();
+                setOpen(false);
+            }, accessibilityLabel: label },
+            React.createElement(Flex, { template: ["grow", "shrink"], align: "flex-start", gap: "smaller" },
+                React.createElement(Typography, { selectable: false, color: textVariation, fontWeight: "semiBold", lineHeight: "large", align: textAlign }, textTransform === "capitalize"
+                    ? capitalize(label.toLocaleLowerCase())
+                    : label),
+                icon && (React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))))));
+}

package/dist/src/Menu/components/MenuOption/MenuOption.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    menuOption: {
+        display: "flex",
+        paddingHorizontal: tokens["space-base"],
+        paddingVertical: tokens["space-small"],
+        borderRadius: tokens["radius-large"],
+    },
+});

package/dist/src/Menu/components/MenuOption/index.js

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

package/dist/src/Menu/components/Overlay/Overlay.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./Overlay.style";
+export function Overlay({ setOpen }) {
+    return (React.createElement(Pressable, { onPressIn: () => {
+            setOpen(false);
+        } },
+        React.createElement(View, { style: styles.overlay })));
+}

package/dist/src/Menu/components/Overlay/Overlay.style.js

@@ -0,0 +1,6 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+const { height } = Dimensions.get("window");
+export const styles = StyleSheet.create({
+    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
+});

package/dist/src/Menu/components/Overlay/index.js

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

package/dist/src/Menu/index.js

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

package/dist/src/Menu/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    more: {
+        id: "more",
+        defaultMessage: "Menu",
+        description: "Accessibility label to open the menu",
+    },
+});

package/dist/src/Menu/types.js

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

package/dist/src/Menu/utils.js

@@ -0,0 +1,84 @@
+import { styles } from "./Menu.style";
+export function findViewpoint(screenInfo, activatorLayout) {
+    const { windowHeight, windowWidth, headerHeight } = screenInfo;
+    const pos = {};
+    const menuWidth = styles.menu.width;
+    const windowHalf = (windowHeight - headerHeight) / 2 + headerHeight;
+    const menuPositionVertical = activatorLayout.y + activatorLayout.height > windowHalf
+        ? "menuAbove"
+        : "menuBelow";
+    const menuPositionHorizontal = windowWidth / 2 > activatorLayout.width / 2 + activatorLayout.x
+        ? "menuRight"
+        : "menuLeft";
+    const menuPadding = 36;
+    getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical);
+    getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal);
+    return pos;
+}
+function getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical) {
+    if (menuPositionVertical === "menuAbove") {
+        getAbovePosition(pos, windowHeight, activatorLayout);
+    }
+    if (menuPositionVertical === "menuBelow") {
+        getBelowPosition(pos, activatorLayout);
+    }
+}
+function getBelowPosition(pos, activatorLayout) {
+    pos.top = activatorLayout.y + activatorLayout.height;
+}
+function getAbovePosition(pos, windowHeight, activatorLayout) {
+    pos.bottom = windowHeight - activatorLayout.y;
+}
+function getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal) {
+    if (menuPositionHorizontal === "menuRight") {
+        getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
+    }
+    if (menuPositionHorizontal === "menuLeft") {
+        getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
+    }
+}
+function getLeftPosition(pos, activatorLayout, windowWidth, menuHorizontalPadding, menuWidth) {
+    const overflowLeft = windowWidth -
+        activatorLayout.x -
+        activatorLayout.width +
+        activatorLayout.width / 2 -
+        menuHorizontalPadding +
+        menuWidth >
+        windowWidth;
+    const overflowRight = windowWidth -
+        activatorLayout.x -
+        activatorLayout.width +
+        activatorLayout.width / 2 -
+        menuHorizontalPadding <
+        0;
+    if (overflowLeft) {
+        pos.right = undefined;
+        pos.left = 0;
+    }
+    else if (overflowRight) {
+        pos.right = 0;
+    }
+    else {
+        pos.right =
+            windowWidth -
+                activatorLayout.x -
+                activatorLayout.width +
+                activatorLayout.width / 2 -
+                menuHorizontalPadding;
+    }
+}
+function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth) {
+    const overflowRight = activatorLayout.x + activatorLayout.width / 2 - menuPadding + menuWidth >
+        windowWidth;
+    const overflowLeft = activatorLayout.x + activatorLayout.width / 2 - menuPadding < 0;
+    if (overflowRight) {
+        pos.left = undefined;
+        pos.right = 0;
+    }
+    else if (overflowLeft) {
+        pos.left = 0;
+    }
+    else {
+        pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+    }
+}

package/dist/src/index.js

@@ -22,12 +22,14 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
+export * from "./InputDate";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputTime";
 export * from "./InputText";
+export * from "./Menu";
 export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./Select";