@lookiero/checkout 0.2.27-beta.7 → 0.2.27-beta.9

package/dist/infrastructure/ui/shared/components/atoms/input/Input.d.ts

@@ -3,6 +3,7 @@ import { StyleProp, TextInputProps, TextStyle } from "react-native";
 declare type InputStyle = StyleProp<TextStyle>;
 interface InputProps extends TextInputProps {
     readonly minHeight?: number;
+    readonly maxHeight?: number;
     readonly style?: InputStyle;
 }
 declare const Input: FC<InputProps>;

package/dist/infrastructure/ui/shared/components/atoms/input/Input.js

@@ -1,29 +1,36 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Platform, TextInput, } from "react-native";
 import { theme } from "../../../../theme/theme";
-import { style } from "./Input.style";
-const DEFAULT_HEIGHT = 56;
+import { style, borderSize, paddingVertical } from "./Input.style";
+const MIN_HEIGHT = 56;
+const MAX_HEIGHT = 242; // 10 lines
 const { colorGrayscaleL } = theme();
-const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, ...restOfProps }) => {
+const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
+const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
         onContentSizeChange?.(event);
-        if (Platform.OS === "web")
+        if (Platform.OS === "web") {
             return;
-        setHeight(Math.max(minHeight, event.nativeEvent.contentSize.height));
-    }, [minHeight, onContentSizeChange]);
-    // It's just update textarea height based on el.scrollHeight
-    const handleOnChange = useCallback((event) => {
-        onChange?.(event);
-        if (Platform.OS !== "web")
+        }
+        setHeight(clamp(minHeight, maxHeight, event.nativeEvent.contentSize.height + borderSize * 2 + paddingVertical * 2));
+    }, [maxHeight, minHeight, onContentSizeChange]);
+    const handleOnContentSizeChangeWeb = useCallback(() => {
+        if (Platform.OS !== "web") {
             return;
+        }
         window.requestAnimationFrame(() => {
-            const element = event.nativeEvent.target;
+            const element = textInputRef.current;
+            if (!element) {
+                return;
+            }
             element.style.height = "0px";
-            element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
+            element.style.height = `${clamp(minHeight, maxHeight, element.scrollHeight + borderSize * 2)}px`;
         });
-    }, [minHeight, onChange]);
-    return (React.createElement(TextInput, { ...restOfProps, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", onChange: handleOnChange, onContentSizeChange: handleOnContentSizeChange }));
+    }, [maxHeight, minHeight]);
+    useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
+    const textInputRef = useRef(null);
+    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
 };
 export { Input };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.d.ts

@@ -1,3 +1,4 @@
+declare const borderSize: number;
 declare const style: {
     input: {
         lineHeight?: number | undefined;
@@ -7,7 +8,6 @@ declare const style: {
         fontSize: number;
         letterSpacing: number;
         outlineStyle: string;
-        overflow: "hidden";
         paddingBottom: number;
         paddingHorizontal: number;
         paddingTop: number;
@@ -15,4 +15,5 @@ declare const style: {
         whiteSpace: string;
     };
 };
-export { style };
+declare const paddingVertical: number;
+export { style, borderSize, paddingVertical };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.js

@@ -10,7 +10,6 @@ const style = StyleSheet.create({
         fontSize: fontBodySize3,
         letterSpacing: fontBodyLetterSpacing3,
         outlineStyle: "none",
-        overflow: "hidden",
         paddingBottom: spaceM,
         paddingHorizontal: spaceM,
         paddingTop: spaceM,
@@ -23,4 +22,5 @@ const style = StyleSheet.create({
         }),
     },
 });
-export { style };
+const paddingVertical = spaceM;
+export { style, borderSize, paddingVertical };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -13,7 +13,7 @@ const { spaceXXL } = theme();
 const TRANSITION_MODAL_SCALE = 0.9;
 const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
 const Modal = ({ children, visible, header, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
-    const { height: screenHeight } = Dimensions.get("screen");
+    const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     // On Android safeAreaInsetTop won't return the actual value.
     const screenSizeWithoutInsets = screenHeight - (Platform.OS === "android" ? DEFAULT_SAFEAREA_INSET_TOP : safeAreaInsetTop);

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.js

@@ -19,7 +19,7 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
                 field: [style.field, customStyle?.field],
                 fieldText: [{ color }, customStyle?.fieldText],
             } }),
-        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon ? { paddingRight: inputPaddingRightWithIcon } : {}, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
+        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
         !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.27-beta.7",
+  "version": "0.2.27-beta.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@lookiero/i18n": "^0.8.0",
-    "@lookiero/i18n-react": "^0.8.0-beta.0",
+    "@lookiero/i18n": "^0.8.1",
+    "@lookiero/i18n-react": "^0.8.1",
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
     "@react-spring/native": "^9.5.5",