@jobber/components-native 0.29.0 → 0.31.0

package/README.md

@@ -15,6 +15,9 @@ run:
 
 ```sh
 npm install @jobber/components-native
+# iOS Linking
+cd ios
+pod install
 ```
 
 ## Usage

package/dist/src/FormField/FormField.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { useFormController } from "../hooks";
+export function FormField({ name, children, defaultValue: value, validations, }) {
+    const { error, field } = useFormController({
+        name,
+        value,
+        validations,
+    });
+    return React.createElement(React.Fragment, null, children(Object.assign({}, field), error));
+}

package/dist/src/FormField/index.js

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

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 @@
+export { Select, Option } from "./Select";

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

@@ -12,6 +12,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
@@ -22,6 +23,7 @@ export * from "./InputSearch";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";
+export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";