@jobber/components-native 0.22.0 → 0.23.0

package/dist/src/Switch/Switch.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { BaseSwitch } from "./components/BaseSwitch";
+import { styles } from "./Switch.styles";
+import { Text } from "../Text";
+export function Switch(props) {
+    const switchProps = Object.assign(Object.assign({}, props), { accessibilityLabel: props.accessibilityLabel || props.label });
+    const [labelWidth, setLabelWidth] = useState();
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(View, { style: styles.row },
+            props.label && (React.createElement(View, { style: styles.label, onLayout: event => setLabelWidth(event.nativeEvent.layout.width), testID: "switch-label-view" },
+                React.createElement(Text, { variation: props.disabled ? "disabled" : "base" }, props.label))),
+            React.createElement(BaseSwitch, Object.assign({}, switchProps))),
+        props.description && (React.createElement(View, { style: [styles.description, { maxWidth: labelWidth }], testID: "switch-description-view" },
+            React.createElement(Text, { level: "textSupporting", variation: "subdued" }, props.description)))));
+}

package/dist/src/Switch/Switch.styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        marginTop: tokens["space-base"],
+        marginBottom: tokens["space-base"],
+    },
+    row: {
+        flexDirection: "row",
+        width: "100%",
+    },
+    label: {
+        flex: 1,
+        justifyContent: "center",
+        marginRight: tokens["space-small"],
+    },
+    description: {
+        marginTop: tokens["space-smaller"],
+    },
+});

package/dist/src/Switch/components/BaseSwitch/BaseSwitch.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Platform } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useFormController } from "../../../hooks";
+import { tokens } from "../../../utils/design";
+export function BaseSwitch({ value, defaultValue, onValueChange, disabled = false, accessibilityLabel, name, }) {
+    const { field } = useFormController({
+        name,
+        value: value !== null && value !== void 0 ? value : defaultValue,
+    });
+    const internalValue = value !== null && value !== void 0 ? value : field.value;
+    function getThumbColor() {
+        if (Platform.OS === "android") {
+            if (disabled) {
+                return tokens["color-disabled"];
+            }
+            else if (internalValue) {
+                return tokens["color-interactive"];
+            }
+            else {
+                return tokens["color-surface--background"];
+            }
+        }
+        return undefined; //use default iOS
+    }
+    function getTrackColors() {
+        if (Platform.OS === "android") {
+            return {
+                true: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-green--lighter"],
+                false: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-disabled"],
+            };
+        }
+        else {
+            //iOS
+            return {
+                true: tokens["color-interactive"],
+                false: tokens["color-surface--background"],
+            };
+        }
+    }
+    return (React.createElement(Switch, { value: internalValue, onValueChange: (val) => {
+            if (!disabled) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
+                field.onChange(val);
+            }
+        }, disabled: disabled, thumbColor: getThumbColor(), trackColor: getTrackColors(), ios_backgroundColor: tokens["color-surface--background"], accessibilityLabel: accessibilityLabel, accessibilityRole: "switch", accessibilityState: {
+            disabled: disabled,
+            checked: internalValue,
+        } }));
+}

package/dist/src/Switch/components/BaseSwitch/index.js

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

package/dist/src/Switch/index.js

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

package/dist/src/index.js

@@ -18,5 +18,6 @@ export * from "./InputPressable";
 export * from "./InputText";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
+export * from "./Switch";
 export * from "./Text";
 export * from "./Typography";