@jobber/components-native 0.77.0 → 0.78.0

package/dist/src/Flex/Flex.styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { spacing } from "./types";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
 export const styles = StyleSheet.create({
     row: { flexDirection: "row" },
 });
@@ -18,7 +18,7 @@ export const columnStyles = StyleSheet.create({
 export const gapStyles = StyleSheet.create(spacing.reduce((gapObj, space) => {
     let paddingLeft = 0;
     if (space !== "none")
-        paddingLeft = tokens[`space-${space}`];
+        paddingLeft = staticTokens[`space-${space}`];
     gapObj[space] = { paddingLeft };
     return gapObj;
 }, {}));

package/dist/src/Form/Form.js

@@ -22,7 +22,7 @@ import React, { useState } from "react";
 import { FormProvider } from "react-hook-form";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { Keyboard, Platform, View, findNodeHandle, } from "react-native";
-import { styles } from "./Form.style";
+import { useStyles } from "./Form.style";
 import { FormErrorBanner } from "./components/FormErrorBanner";
 import { KEYBOARD_SAVE_BUTTON_DISTANCE } from "./constants";
 import { FormMessageBanner } from "./components/FormMessageBanner";
@@ -101,6 +101,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
     const onLayout = (event) => {
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
+    const styles = useStyles();
     return (React.createElement(FormProvider, Object.assign({}, formMethods),
         React.createElement(React.Fragment, null,
             (isSubmitting || isSecondaryActionLoading) && React.createElement(FormMask, null),

package/dist/src/Form/Form.style.js

@@ -1,33 +1,34 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexGrow: 1,
-        width: "100%",
-    },
-    safeArea: {
-        backgroundColor: tokens["color-surface"],
-    },
-    scrollContentContainer: {
-        flexGrow: 1,
-    },
-    scrollView: {
-        flexGrow: 1,
-    },
-    formChildContainer: {
-        flexGrow: 1,
-        justifyContent: "flex-start",
-    },
-    formContent: {
-        paddingVertical: tokens["space-small"],
-    },
-    fixedSaveButton: {
-        padding: tokens["space-base"],
-        backgroundColor: tokens["color-surface"],
-    },
-    activityIndicator: {
-        marginVertical: tokens["space-base"],
-        flex: 1,
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            flex: 1,
+            flexGrow: 1,
+            width: "100%",
+        },
+        safeArea: {
+            backgroundColor: tokens["color-surface"],
+        },
+        scrollContentContainer: {
+            flexGrow: 1,
+        },
+        scrollView: {
+            flexGrow: 1,
+        },
+        formChildContainer: {
+            flexGrow: 1,
+            justifyContent: "flex-start",
+        },
+        formContent: {
+            paddingVertical: tokens["space-small"],
+        },
+        fixedSaveButton: {
+            padding: tokens["space-base"],
+            backgroundColor: tokens["color-surface"],
+        },
+        activityIndicator: {
+            marginVertical: tokens["space-base"],
+            flex: 1,
+        },
+    };
 });

package/dist/src/Form/components/FormActionBar/FormActionBar.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
-import { styles } from "./FormActionBar.style";
+import { useStyles } from "./FormActionBar.style";
 import { FormSaveButton } from "../FormSaveButton";
 const ReanimatedView = Reanimated.View;
 export function FormActionBar({ keyboardHeight, submit, isFormSubmitting, saveButtonLabel, renderStickySection, setSaveButtonHeight, secondaryActions, setSecondaryActionLoading, }) {
+    const styles = useStyles();
     const buttonStyle = StyleSheet.flatten([
         styles.saveButton,
         {

package/dist/src/Form/components/FormActionBar/FormActionBar.style.js

@@ -1,5 +1,6 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    saveButton: Object.assign({ padding: tokens["space-base"], backgroundColor: tokens["color-surface"], width: "100%" }, tokens["shadow-high"]),
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        saveButton: Object.assign({ padding: tokens["space-base"], backgroundColor: tokens["color-surface"], width: "100%" }, tokens["shadow-high"]),
+    };
 });

package/dist/src/Form/components/FormBody/FormBody.js

@@ -1,12 +1,13 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { styles } from "./FormBody.style";
+import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
 import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 export function FormBody({ isFormSubmitting, submit, keyboardHeight, children, saveButtonLabel, renderStickySection, shouldRenderActionBar = true, secondaryActions, setSecondaryActionLoading, setSaveButtonHeight, saveButtonOffset, }) {
     const paddingBottom = useBottomPadding();
     const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
+    const styles = useStyles();
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: [styles.container] },
             children,

package/dist/src/Form/components/FormBody/FormBody.style.js

@@ -1,26 +1,27 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexGrow: 1,
-        width: "100%",
-    },
-    safeArea: {
-        backgroundColor: tokens["color-surface"],
-    },
-    scrollContentContainer: {
-        flexGrow: 1,
-    },
-    scrollView: {
-        flexGrow: 1,
-    },
-    formChildContainer: {
-        flexGrow: 1,
-        justifyContent: "flex-start",
-    },
-    activityIndicator: {
-        marginVertical: tokens["space-base"],
-        flex: 1,
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            flex: 1,
+            flexGrow: 1,
+            width: "100%",
+        },
+        safeArea: {
+            backgroundColor: tokens["color-surface"],
+        },
+        scrollContentContainer: {
+            flexGrow: 1,
+        },
+        scrollView: {
+            flexGrow: 1,
+        },
+        formChildContainer: {
+            flexGrow: 1,
+            justifyContent: "flex-start",
+        },
+        activityIndicator: {
+            marginVertical: tokens["space-base"],
+            flex: 1,
+        },
+    };
 });

package/dist/src/Form/components/FormMask/FormMask.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./FormMask.style";
+import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormMask() {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     return (React.createElement(View, { style: styles.mask, accessibilityLabel: t("loading") },
         React.createElement(ActivityIndicator, null)));
 }

package/dist/src/Form/components/FormMask/FormMask.style.js

@@ -1,15 +1,16 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    mask: {
-        zIndex: tokens["elevation-modal"],
-        width: "100%",
-        height: "100%",
-        position: "absolute",
-        top: 0,
-        left: 0,
-        backgroundColor: tokens["color-overlay--dimmed"],
-        padding: tokens["space-base"],
-        justifyContent: "center",
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        mask: {
+            zIndex: tokens["elevation-modal"],
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            backgroundColor: tokens["color-overlay--dimmed"],
+            padding: tokens["space-base"],
+            justifyContent: "center",
+        },
+    };
 });

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.js

@@ -2,11 +2,12 @@ import React, { useMemo } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Modal, StatusBar, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { styles } from "./InternalFormMessage.style";
+import { useStyles } from "./InternalFormMessage.style";
 import { EmptyState } from "../../../../../EmptyState";
 import { useAtlantisI18n } from "../../../../../hooks/useAtlantisI18n";
 export function InternalFormMessage({ data, onRequestClose, }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const emptyStateData = useMemo(() => {
         if (data.secondaryAction) {
             return data;

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.style.js

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../../../utils/design";
-export const styles = StyleSheet.create({
-    wrapper: {
-        backgroundColor: tokens["color-surface"],
-        flex: 1,
-        justifyContent: "center",
-    },
-    closeAction: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        zIndex: 1,
-    },
-    scrollWrapper: { height: "100%" },
-    scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+import { buildThemedStyles } from "../../../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        wrapper: {
+            backgroundColor: tokens["color-surface"],
+            flex: 1,
+            justifyContent: "center",
+        },
+        closeAction: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            zIndex: 1,
+        },
+        scrollWrapper: { height: "100%" },
+        scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+    };
 });

package/dist/src/FormatFile/FormatFile.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { createRef, useCallback, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { styles } from "./FormatFile.style";
+import { useStyles } from "./FormatFile.style";
 import { MediaView } from "./components/MediaView";
 import { FormatFileBottomSheet, } from "./components/FormatFileBottomSheet";
 import { FileView } from "./components/FileView";
@@ -19,6 +19,7 @@ import { AtlantisFormatFileContext } from "./context/FormatFileContext";
 import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.thumbnailContainer,
             styleInGrid && styles.thumbnailContainerGrid,

package/dist/src/FormatFile/FormatFile.style.js

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    thumbnailContainer: {
-        backgroundColor: tokens["color-surface--background"],
-        borderWidth: tokens["border-base"],
-        borderColor: tokens["color-border"],
-        borderRadius: tokens["radius-base"],
-        marginBottom: tokens["space-small"],
-    },
-    thumbnailContainerGrid: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-        marginRight: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        thumbnailContainer: {
+            backgroundColor: tokens["color-surface--background"],
+            borderWidth: tokens["border-base"],
+            borderColor: tokens["color-border"],
+            borderRadius: tokens["radius-base"],
+            marginBottom: tokens["space-small"],
+        },
+        thumbnailContainerGrid: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+            marginRight: tokens["space-small"],
+        },
+    };
 });

package/dist/src/FormatFile/components/ErrorIcon/ErrorIcon.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ErrorIcon.style";
+import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 export function ErrorIcon() {
+    const styles = useStyles();
     return (React.createElement(View, { testID: "format-file-error-icon", style: styles.circle },
         React.createElement(Icon, { name: "alert", color: "critical" })));
 }

package/dist/src/FormatFile/components/ErrorIcon/ErrorIcon.style.js

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    circle: {
-        width: tokens["space-large"],
-        height: tokens["space-large"],
-        borderRadius: tokens["radius-circle"],
-        backgroundColor: tokens["color-surface"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        circle: {
+            width: tokens["space-large"],
+            height: tokens["space-large"],
+            borderRadius: tokens["radius-circle"],
+            backgroundColor: tokens["color-surface"],
+        },
+    };
 });

package/dist/src/FormatFile/components/FileView/FileView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./FileView.style";
+import { useStyles } from "./FileView.style";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
 import { StatusCode } from "../../types";
@@ -10,6 +10,7 @@ import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const a11yLabel = computeA11yLabel({
         accessibilityLabel,
         showOverlay,

package/dist/src/FormatFile/components/FileView/FileView.style.js

@@ -1,64 +1,65 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    overlay: {
-        backgroundColor: tokens["color-overlay--dimmed"],
-    },
-    overlayError: {
-        backgroundColor: tokens["color-overlay--dimmed"],
-        borderColor: tokens["color-critical"],
-        borderWidth: tokens["border-base"],
-    },
-    iconCenter: {
-        marginBottom: tokens["space-large"],
-    },
-    fileBackground: {
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-    },
-    fileBackgroundGrid: {
-        height: "100%",
-    },
-    fileBackgroundFlat: {
-        justifyContent: "center",
-        height: tokens["space-extravagant"],
-    },
-    fileIconGrid: {
-        top: tokens["space-small"],
-    },
-    fileIconFlat: {
-        top: tokens["space-smaller"],
-    },
-    fileNameError: {
-        alignItems: "center",
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-        width: "100%",
-        marginTop: tokens["space-base"],
-    },
-    fileName: {
-        alignItems: "center",
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-        width: "100%",
-    },
-    fileNameGrid: {
-        position: "absolute",
-        right: 0,
-        bottom: 0,
-        left: 0,
-    },
-    fileNameFlat: {
-        top: tokens["space-small"],
-    },
-    fileOverlay: {
-        position: "absolute",
-        justifyContent: "center",
-        right: 0,
-        bottom: 0,
-        left: 0,
-        height: "100%",
-        paddingHorizontal: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        overlay: {
+            backgroundColor: tokens["color-overlay--dimmed"],
+        },
+        overlayError: {
+            backgroundColor: tokens["color-overlay--dimmed"],
+            borderColor: tokens["color-critical"],
+            borderWidth: tokens["border-base"],
+        },
+        iconCenter: {
+            marginBottom: tokens["space-large"],
+        },
+        fileBackground: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+        },
+        fileBackgroundGrid: {
+            height: "100%",
+        },
+        fileBackgroundFlat: {
+            justifyContent: "center",
+            height: tokens["space-extravagant"],
+        },
+        fileIconGrid: {
+            top: tokens["space-small"],
+        },
+        fileIconFlat: {
+            top: tokens["space-smaller"],
+        },
+        fileNameError: {
+            alignItems: "center",
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+            width: "100%",
+            marginTop: tokens["space-base"],
+        },
+        fileName: {
+            alignItems: "center",
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+            width: "100%",
+        },
+        fileNameGrid: {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        fileNameFlat: {
+            top: tokens["space-small"],
+        },
+        fileOverlay: {
+            position: "absolute",
+            justifyContent: "center",
+            right: 0,
+            bottom: 0,
+            left: 0,
+            height: "100%",
+            paddingHorizontal: tokens["space-small"],
+        },
+    };
 });

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ImageBackground, View } from "react-native";
-import { styles } from "./MediaView.style";
+import { useStyles } from "./MediaView.style";
 import { StatusCode } from "../../types";
 import { computeA11yLabel } from "../../utils";
 import { ActivityIndicator } from "../../../ActivityIndicator";
@@ -22,32 +22,33 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
     });
     const hasError = showError || error;
     const uri = thumbnail || file.thumbnailUrl || file.source;
+    const styles = useStyles();
     return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
             ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(true), onLoadEnd: () => setIsLoading(false) },
-            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete }))));
+            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
 }
-function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, }) {
+function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {
     if (isLoading)
         return React.createElement(ActivityIndicator, null);
     if (hasError)
-        return React.createElement(ErrorOverlay, null);
+        return React.createElement(ErrorOverlay, { styles: styles });
     if (showOverlay) {
-        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete }));
+        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete, styles: styles }));
     }
     if (isVideo(file.type) && file.showFileTypeIndicator) {
         return React.createElement(Icon, { name: "video", color: "white" });
     }
     return React.createElement(React.Fragment, null);
 }
-function ProgressOverlay({ status, progress, onUploadComplete, }) {
+function ProgressOverlay({ status, progress, onUploadComplete, styles, }) {
     const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
     return (React.createElement(View, { style: [styles.imageBackground, styles.overlay], testID: "format-file-progress-bar-container" },
         React.createElement(ProgressBar, { status: status, progress: freezeProgressBar ? 0.9 : progress, onComplete: onUploadComplete })));
 }
-function ErrorOverlay() {
+function ErrorOverlay({ styles, }) {
     return (React.createElement(View, { style: [styles.imageBackground, styles.overlayError], testID: "format-file-error-container" },
         React.createElement(ErrorIcon, null)));
 }

package/dist/src/FormatFile/components/MediaView/MediaView.style.js

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    imageBackground: {
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    imageBackgroundFlat: {
-        aspectRatio: 375 / 150,
-    },
-    imageBackgroundGrid: {
-        height: "100%",
-    },
-    overlay: {
-        height: "100%",
-        backgroundColor: tokens["color-overlay--dimmed"],
-        paddingHorizontal: tokens["space-small"],
-    },
-    overlayError: {
-        height: "100%",
-        backgroundColor: tokens["color-overlay--dimmed"],
-        paddingHorizontal: tokens["space-small"],
-        borderColor: tokens["color-critical"],
-        borderWidth: tokens["border-base"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        imageBackground: {
+            width: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        imageBackgroundFlat: {
+            aspectRatio: 375 / 150,
+        },
+        imageBackgroundGrid: {
+            height: "100%",
+        },
+        overlay: {
+            height: "100%",
+            backgroundColor: tokens["color-overlay--dimmed"],
+            paddingHorizontal: tokens["space-small"],
+        },
+        overlayError: {
+            height: "100%",
+            backgroundColor: tokens["color-overlay--dimmed"],
+            paddingHorizontal: tokens["space-small"],
+            borderColor: tokens["color-critical"],
+            borderWidth: tokens["border-base"],
+        },
+    };
 });