@lookiero/checkout 0.7.1 → 0.7.2

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -1,7 +1,7 @@
 import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { size } from "../../../../../../projection/shared/size";
 import { Sticky } from "../../../../../../shared/ui/components/layouts/sticky/Sticky";
@@ -18,14 +18,13 @@ const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoadin
         value: productVariant.id,
     })), [country, productVariants]);
     const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === productVariantSelected.id, [sizeSelectorOptions, productVariantSelected.id]);
-    const handleOnPressSizeSelector = useCallback(() => onSizeSelectorPress(), [onSizeSelectorPress]);
     return (React.createElement(Sticky, { onLayout: onLayout },
         React.createElement(Body, { style: { column: style.container } },
             React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),
             React.createElement(View, { style: style.row },
                 !productVariantSelected.size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
-                        onPress: handleOnPressSizeSelector,
-                    }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", value: productVariantSelected.id, style: {
+                        onPress: onSizeSelectorPress,
+                    }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", title: sizeSelectorLabelText || "", value: productVariantSelected.id, style: {
                         selectField: style.sizeSelector,
                         inputField: { input: (disabledSizeSelector || sizeSelectorDisabled) && style.inputDisabled },
                     }, onChange: onReplace })),

package/dist/shared/ui/components/molecules/selectField/SelectField.d.ts

@@ -13,6 +13,7 @@ interface Option {
     readonly value: string;
 }
 interface SelectFieldBaseProps {
+    readonly title?: string;
     readonly placeholder: string;
     readonly value: string | undefined;
     readonly options: Option[];

package/dist/shared/ui/components/molecules/selectField/SelectField.js

@@ -6,7 +6,7 @@ import { Modal } from "../../layouts/modal/Modal";
 import { InputField } from "../inputField/InputField";
 import { style } from "./SelectField.style";
 const { colorGrayscaleS } = theme();
-const SelectField = ({ placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
+const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -19,8 +19,10 @@ const SelectField = ({ placeholder, value, options, style: customStyle, onChange
         React.createElement(TouchableHighlight, { style: customStyle?.selectField, underlayColor: colorGrayscaleS, onPress: handleOnPressSelectField, ...touchableRestProps },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
-        React.createElement(Modal, { visible: modalVisible, scroll: true, onClose: handleOnModalClose },
-            React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] }, options.map(({ label, value }) => (React.createElement(TouchableHighlight, { key: value, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: () => handleOnPressOption(value) },
-                React.createElement(Text, { level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
+        React.createElement(Modal, { visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
+            React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
+                title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
+                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                    React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.selectedOptionText, customStyle?.optionText] }, label))))))));
 };
 export { SelectField };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.d.ts

@@ -3,6 +3,10 @@ declare const style: {
         paddingBottom: number;
         paddingHorizontal: number;
     };
+    modalTitle: {
+        marginBottom: number;
+        textAlign: "center";
+    };
     option: {
         borderBottomColor: string;
         borderBottomWidth: number;
@@ -11,5 +15,8 @@ declare const style: {
     optionText: {
         lineHeight: number;
     };
+    selectedOptionText: {
+        color: string;
+    };
 };
 export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.js

@@ -1,11 +1,15 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { borderSize, colorGrayscaleS, spaceM, spaceXL } = theme();
+const { borderSize, colorGrayscaleS, colorGrayscaleM, spaceM, spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
     modalContent: {
         paddingBottom: spaceXL,
         paddingHorizontal: spaceXL,
     },
+    modalTitle: {
+        marginBottom: spaceL,
+        textAlign: "center",
+    },
     option: {
         borderBottomColor: colorGrayscaleS,
         borderBottomWidth: borderSize,
@@ -14,5 +18,8 @@ const style = StyleSheet.create({
     optionText: {
         lineHeight: 24,
     },
+    selectedOptionText: {
+        color: colorGrayscaleM,
+    },
 });
 export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [