@jobber/components-native 0.26.0 → 0.26.1-pre.10

package/android/build.gradle

@@ -0,0 +1,77 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["ComponentsNative_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ComponentsNative_" + name]).toInteger()
+}
+
+android {
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "ComponentsNative"
+    codegenJavaPackageName = "com.jobber.componentsnative"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+ComponentsNative_kotlinVersion=1.7.0
+ComponentsNative_minSdkVersion=21
+ComponentsNative_targetSdkVersion=31
+ComponentsNative_compileSdkVersion=31
+ComponentsNative_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.jobber.componentsnative">
+
+</manifest>

package/android/src/main/java/com/jobber/componentsnative/ComponentsNativeModule.java

@@ -0,0 +1,32 @@
+package com.jobber.componentsnative;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+
+@ReactModule(name = ComponentsNativeModule.NAME)
+public class ComponentsNativeModule extends ReactContextBaseJavaModule {
+  public static final String NAME = "ComponentsNative";
+
+  public ComponentsNativeModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  @NonNull
+  public String getName() {
+    return NAME;
+  }
+
+
+  // Example method
+  // See https://reactnative.dev/docs/native-modules-android
+  @ReactMethod
+  public void multiply(double a, double b, Promise promise) {
+    promise.resolve(a * b);
+  }
+}

package/android/src/main/java/com/jobber/componentsnative/ComponentsNativePackage.java

@@ -0,0 +1,28 @@
+package com.jobber.componentsnative;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class ComponentsNativePackage implements ReactPackage {
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new ComponentsNativeModule(reactContext));
+    return modules;
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

package/dist/src/Select/Select.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./Select.style";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+import { messages } from "./messages";
+import { InputFieldWrapper } from "../InputFieldWrapper";
+import { Icon } from "../Icon";
+import { Text } from "../Text";
+import { useFormController } from "../hooks";
+export function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, }) {
+    const { field, error } = useFormController({
+        name,
+        validations,
+        value: value !== null && value !== void 0 ? value : defaultValue,
+    });
+    const { formatMessage } = useIntl();
+    const internalValue = value !== null && value !== void 0 ? value : field.value;
+    const textVariation = getTextVariation({
+        disabled,
+        invalid: invalid || !!error,
+    });
+    const valueTextVariation = disabled ? "disabled" : undefined;
+    const hasValue = internalValue && (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) > 0;
+    return (React.createElement(InputFieldWrapper, { error: error, invalid: invalid || !!error, hasValue: hasValue, styleOverride: {
+            container: { borderBottomWidth: undefined },
+        } },
+        React.createElement(View, { testID: "ATL-Select", accessible: true, accessibilityLabel: getA11yLabel(), accessibilityValue: { text: getValue() }, accessibilityHint: formatMessage(messages.a11yHint), accessibilityRole: "button", accessibilityState: { disabled: disabled } },
+            React.createElement(SelectInternalPicker, { disabled: disabled, options: getOptions(), onChange: handleChange },
+                React.createElement(View, { style: [styles.container, (invalid || !!error) && styles.invalid] },
+                    label && (React.createElement(Text, { level: "textSupporting", variation: textVariation, hideFromScreenReader: true }, label)),
+                    React.createElement(View, { style: styles.input },
+                        React.createElement(View, { style: styles.value },
+                            React.createElement(Text, { variation: disabled ? "disabled" : "base", hideFromScreenReader: true }, getValue())),
+                        React.createElement(View, { style: styles.icon },
+                            React.createElement(Icon, { name: "arrowDown", color: valueTextVariation }))))),
+            assistiveText && (React.createElement(Text, { level: "textSupporting", variation: textVariation, hideFromScreenReader: true }, assistiveText)))));
+    function getA11yLabel() {
+        let text = [accessibilityLabel || label, assistiveText];
+        text = text.filter(Boolean);
+        return text.join(", ");
+    }
+    function handleChange(val) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+        // need this onBlur for validations to occur
+        field.onBlur();
+        field.onChange(val);
+    }
+    function getOptions() {
+        const options = children.map(({ props }) => ({
+            label: props.children,
+            value: props.value,
+            isActive: props.value === internalValue,
+        }));
+        if (!internalValue || placeholder) {
+            options.unshift({
+                label: placeholder || formatMessage(messages.emptyValue),
+                value: "",
+                isActive: !internalValue,
+            });
+        }
+        return options;
+    }
+    function getValue() {
+        const options = getOptions();
+        const activeValue = options.find(option => option.isActive);
+        return ((activeValue === null || activeValue === void 0 ? void 0 : activeValue.label) || placeholder || formatMessage(messages.emptyValue));
+    }
+}
+function getTextVariation({ invalid, disabled, }) {
+    if (invalid)
+        return "error";
+    if (disabled)
+        return "disabled";
+    return "subdued";
+}
+export function Option({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}

package/dist/src/Select/Select.style.js

@@ -0,0 +1,45 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "../InputFieldWrapper";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: StyleSheet.flatten([
+        commonInputStyles.container,
+        {
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            minHeight: tokens["space-largest"] + tokens["border-base"],
+        },
+    ]),
+    input: StyleSheet.flatten([
+        commonInputStyles.input,
+        {
+            flexDirection: "row",
+            flexGrow: 0,
+            paddingBottom: tokens["space-smaller"],
+            minHeight: 0,
+            minWidth: "100%",
+        },
+    ]),
+    value: {
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    icon: {
+        flexGrow: 0,
+        flexShrink: 0,
+    },
+    invalid: {
+        color: tokens["color-critical"],
+        borderColor: tokens["color-critical"],
+    },
+    errorMessageWrapperIcon: {
+        flex: 0,
+        flexBasis: "auto",
+        paddingTop: tokens["space-minuscule"],
+        paddingRight: tokens["space-smaller"],
+    },
+    messageWrapper: {
+        paddingTop: tokens["space-smaller"],
+        flexDirection: "row",
+    },
+});

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.js

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { 
+// Need to use iOS style button
+Button, Modal, TouchableOpacity, View, } from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useIntl } from "react-intl";
+import { styles } from "./SelectDefaultPicker.style";
+import { messages } from "./messages";
+import { SelectPressable } from "../SelectPressable/SelectPressable";
+export function SelectDefaultPicker({ children, options, onChange, }) {
+    const [show, setShow] = useState(false);
+    const { formatMessage } = useIntl();
+    const selectedLanguage = options.find(option => option.isActive);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SelectPressable, { onPress: showPicker }, children),
+        React.createElement(Modal, { visible: show, transparent: true, animationType: "slide", onRequestClose: hidePicker },
+            React.createElement(TouchableOpacity, { style: styles.overlay, onPress: hidePicker }),
+            React.createElement(View, { style: styles.actionBar },
+                React.createElement(Button, { title: formatMessage(messages.done), onPress: hidePicker })),
+            React.createElement(View, { style: styles.pickerContainer, testID: "select-wheel-picker" },
+                React.createElement(SafeAreaView, { edges: ["bottom"] },
+                    React.createElement(Picker, { selectedValue: selectedLanguage === null || selectedLanguage === void 0 ? void 0 : selectedLanguage.value, onValueChange: onChange }, options.map(({ label, value }, i) => (React.createElement(Picker.Item, { key: i, label: label, value: value })))))))));
+    function showPicker() {
+        setShow(true);
+    }
+    function hidePicker() {
+        setShow(false);
+    }
+}

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.js

@@ -0,0 +1,16 @@
+import React, { useRef } from "react";
+import { Picker } from "@react-native-picker/picker";
+import { styles } from "./SelectDefaultPicker.style";
+import { SelectPressable } from "../SelectPressable";
+import { tokens } from "../../../utils/design";
+export function SelectDefaultPicker({ children, options, disabled, onChange, }) {
+    var _a;
+    const selectedItem = options.find(option => option.isActive);
+    const pickerRef = useRef(null);
+    return (React.createElement(SelectPressable, { onPress: (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus },
+        children,
+        React.createElement(Picker, { ref: pickerRef, selectedValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, onValueChange: onChange, mode: "dropdown", enabled: !disabled, style: styles.androidPickerContainer }, options.map(({ label, value, isActive }, i) => (React.createElement(Picker.Item, { key: i, label: label, value: value, color: isSelected(isActive) }))))));
+    function isSelected(isActive) {
+        return isActive ? tokens["color-interactive"] : tokens["color-text"];
+    }
+}

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+export const styles = StyleSheet.create({
+    overlay: { flex: 1 },
+    actionBar: {
+        flexDirection: "row",
+        height: 45,
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingHorizontal: 10,
+        backgroundColor: "#f8f8f8",
+        borderTopWidth: 1,
+        borderTopColor: "#dedede",
+        zIndex: 2,
+    },
+    pickerContainer: {
+        justifyContent: "center",
+        backgroundColor: "#d0d4da",
+    },
+    androidPickerContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        color: "transparent",
+        backgroundColor: "transparent",
+        opacity: 0,
+    },
+});

package/dist/src/Select/components/SelectDefaultPicker/index.js

@@ -0,0 +1 @@
+export * from "./SelectDefaultPicker";

package/dist/src/Select/components/SelectDefaultPicker/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    done: {
+        id: "done",
+        defaultMessage: "Done",
+        description: "Done action",
+    },
+});

package/dist/src/Select/components/SelectIOSPicker/SelectIOSPicker.js

@@ -0,0 +1,2 @@
+import { requireNativeComponent } from "react-native";
+export const SelectIOSPicker = requireNativeComponent === null || requireNativeComponent === void 0 ? void 0 : requireNativeComponent("RCTATLPicker");

package/dist/src/Select/components/SelectIOSPicker/index.js

@@ -0,0 +1 @@
+export * from "./SelectIOSPicker";

package/dist/src/Select/components/SelectInternalPicker/SelectInternalPicker.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { handlePress, isIOS14AndUp } from "./utils";
+import { SelectIOSPicker } from "../SelectIOSPicker";
+import { SelectPressable } from "../SelectPressable";
+import { SelectDefaultPicker } from "../SelectDefaultPicker";
+export function SelectInternalPicker({ children, options, disabled, onChange, }) {
+    if (disabled)
+        return React.createElement(React.Fragment, null, children);
+    if (isIOS14AndUp()) {
+        return (React.createElement(SelectPressable, null,
+            React.createElement(SelectIOSPicker, { options: options, onOptionPress: handlePress(onChange) }, children)));
+    }
+    return (React.createElement(SelectDefaultPicker, { options: options, onChange: onChange }, children));
+}

package/dist/src/Select/components/SelectInternalPicker/index.js

@@ -0,0 +1 @@
+export * from "./SelectInternalPicker";

package/dist/src/Select/components/SelectInternalPicker/utils.js

@@ -0,0 +1,13 @@
+import { Platform } from "react-native";
+export function handlePress(onChange) {
+    return ({ nativeEvent: { event } }) => {
+        return onChange(event);
+    };
+}
+export function isIOS14AndUp() {
+    if (Platform.OS === "ios") {
+        const majorVersionIOS = parseInt(Platform.Version, 10);
+        return majorVersionIOS >= 14;
+    }
+    return false;
+}

package/dist/src/Select/components/SelectPressable/SelectPressable.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Keyboard, Pressable } from "react-native";
+import { styles } from "./SelectPressable.style";
+import { useIsScreenReaderEnabled } from "../../../hooks";
+/**
+ * Switches between Pressable with pressed styling and a fragment when a
+ * screen-reader is being used to avoid screen-readers from ignoring the press
+ * on the MenuView
+ */
+export function SelectPressable({ children, onPress, }) {
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    if (isScreenReaderEnabled)
+        return React.createElement(React.Fragment, null, children);
+    return (React.createElement(Pressable, { style: ({ pressed }) => [pressed && styles.pressed], onPressIn: Keyboard.dismiss, onPress: onPress }, children));
+}

package/dist/src/Select/components/SelectPressable/SelectPressable.style.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    pressed: {
+        opacity: tokens["opacity-pressed"],
+    },
+});

package/dist/src/Select/components/SelectPressable/index.js

@@ -0,0 +1 @@
+export * from "./SelectPressable";

package/dist/src/Select/index.js

@@ -0,0 +1,16 @@
+export { Select, Option } from "./Select";
+import { NativeModules, Platform } from "react-native";
+const LINKING_ERROR = `The package '@jobber/components-native' doesn't seem to be linked. Make sure: \n\n` +
+    Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
+    "- You rebuilt the app after installing the package\n" +
+    "- You are not using Expo Go\n";
+const ComponentsNative = NativeModules.ComponentsNative
+    ? NativeModules.ComponentsNative
+    : new Proxy({}, {
+        get() {
+            throw new Error(LINKING_ERROR);
+        },
+    });
+export function multiply(a, b) {
+    return ComponentsNative.multiply(a, b);
+}

package/dist/src/Select/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    a11yHint: {
+        id: "a11yHint",
+        defaultMessage: "Select to open the picker",
+        description: "Accessibility hint on how to interact with the select",
+    },
+    emptyValue: {
+        id: "emptyValue",
+        defaultMessage: "Select an option",
+        description: "Accessibility hint on how to interact with the select",
+    },
+});

package/dist/src/Select/types.js

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

package/dist/src/index.js

@@ -19,6 +19,7 @@ export * from "./InputPressable";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";
+export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";