@jobber/components-native 0.30.0 → 0.32.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/InputNumber/InputNumber.js

@@ -0,0 +1,82 @@
+import React, { forwardRef, useState } from "react";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import flow from "lodash/flow";
+import identity from "lodash/identity";
+import { messages } from "./messages";
+import { InputText } from "../InputText";
+const NUMBER_VALIDATION_REGEX = /^[-+]?(([0-9]*\.[0-9]+)|([0-9]+)|([0-9]+(\.?[0-9]+)?e[-+]?[0-9]+))$/;
+export const InputNumber = forwardRef(InputNumberInternal);
+function InputNumberInternal(props, ref) {
+    var _a, _b, _c, _d;
+    const getKeyboard = () => {
+        var _a;
+        if (Platform.OS === "ios") {
+            //since we are checking for which keyboard to use here here, just implement default keyboard here instead of in params
+            return (_a = props.keyboard) !== null && _a !== void 0 ? _a : "numbers-and-punctuation";
+        }
+        else {
+            return "numeric";
+        }
+    };
+    const { formatMessage } = useIntl();
+    const handleChange = (newValue) => {
+        var _a;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+    };
+    const { inputTransform: convertToString, outputTransform: convertToNumber } = useNumberTransform(props.value);
+    return (React.createElement(InputText, Object.assign({}, props, { keyboard: getKeyboard(), transform: {
+            input: flow(convertToString, ((_a = props.transform) === null || _a === void 0 ? void 0 : _a.input) || identity),
+            output: flow(convertToNumber, ((_b = props.transform) === null || _b === void 0 ? void 0 : _b.output) || identity),
+        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: Object.assign({ pattern: {
+                value: NUMBER_VALIDATION_REGEX,
+                message: formatMessage(messages.notANumberError),
+            } }, props.validations) })));
+}
+function hasPeriodAtEnd(value) {
+    // matches patterns like ".", "0.", "12.", "+1.", and "-0."
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]*\.$/));
+}
+function hasScientificNotationAtEnd(value) {
+    // matches patterns like "1e", "+2e", "1.2e" and "-3e"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/));
+}
+function hasPlusMinusAtEnd(value) {
+    // matches "+" and "-"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]+$/));
+}
+function hasZeroDecimalAtEnd(value) {
+    // matches patterns like "0.0", "+0.00000", "-3.00000", "2.100", ".0", and ".00000"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]*\.[0-9]*0+$/));
+}
+export function shouldShowUserValue(value) {
+    const specialCasesFn = [
+        hasPeriodAtEnd,
+        hasScientificNotationAtEnd,
+        hasPlusMinusAtEnd,
+        hasZeroDecimalAtEnd,
+    ];
+    const isSpecial = (v) => specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+    return isSpecial(value);
+}
+export function useNumberTransform(controlledValue) {
+    const [typedValue, setTypedValue] = useState((controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.toString()) || "");
+    const convertToNumber = (newValue) => {
+        var _a;
+        setTypedValue(newValue);
+        if ((_a = newValue === null || newValue === void 0 ? void 0 : newValue.match) === null || _a === void 0 ? void 0 : _a.call(newValue, NUMBER_VALIDATION_REGEX)) {
+            return parseFloat(newValue);
+        }
+        return newValue;
+    };
+    const convertToString = (internalValue) => {
+        if (shouldShowUserValue(typedValue)) {
+            return typedValue;
+        }
+        return (internalValue === null || internalValue === void 0 ? void 0 : internalValue.toString()) || undefined;
+    };
+    return {
+        inputTransform: convertToString,
+        outputTransform: convertToNumber,
+    };
+}

package/dist/src/InputNumber/index.js

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

package/dist/src/InputNumber/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    notANumberError: {
+        id: "notANumberError",
+        defaultMessage: "Enter a number",
+        description: "Error message shown when a non-numeric value is typed in number input",
+    },
+});

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

@@ -17,12 +17,14 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";
+export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";