@lookiero/checkout 0.2.28 → 0.2.29

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

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import { StyleProp, TextStyle, TouchableHighlightProps, ViewStyle } from "react-native";
+interface SelectFieldStyle {
+    readonly selectField: StyleProp<ViewStyle>;
+    readonly modalContent: StyleProp<ViewStyle>;
+    readonly option: StyleProp<ViewStyle>;
+    readonly optionText: StyleProp<TextStyle>;
+}
+interface Option {
+    readonly label: string;
+    readonly value: string;
+}
+interface SelectFieldBaseProps {
+    readonly placeholder: string;
+    readonly value: string | undefined;
+    readonly options: Option[];
+    readonly style?: Partial<SelectFieldStyle>;
+    readonly onChange?: (value: string) => void;
+}
+interface SelectFieldProps extends Omit<TouchableHighlightProps, keyof SelectFieldBaseProps>, SelectFieldBaseProps {
+}
+declare const SelectField: FC<SelectFieldProps>;
+export type { Option };
+export { SelectField };

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

@@ -0,0 +1,26 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import React, { useCallback, useMemo, useState } from "react";
+import { TouchableHighlight, View } from "react-native";
+import { theme } from "../../../../theme/theme";
+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 [modalVisible, setModalVisible] = useState(false);
+    const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
+    const handleOnModalClose = useCallback(() => setModalVisible(false), []);
+    const handleOnPressOption = useCallback((value) => {
+        onChange(value);
+        handleOnModalClose();
+    }, [handleOnModalClose, onChange]);
+    const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
+    return (React.createElement(React.Fragment, null,
+        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, 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))))))));
+};
+export { SelectField };

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

@@ -0,0 +1,15 @@
+declare const style: {
+    modalContent: {
+        paddingBottom: number;
+        paddingHorizontal: number;
+    };
+    option: {
+        borderBottomColor: string;
+        borderBottomWidth: number;
+        paddingVertical: number;
+    };
+    optionText: {
+        lineHeight: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { borderSize, colorGrayscaleS, spaceM, spaceXL } = theme();
+const style = StyleSheet.create({
+    modalContent: {
+        paddingBottom: spaceXL,
+        paddingHorizontal: spaceXL,
+    },
+    option: {
+        borderBottomColor: colorGrayscaleS,
+        borderBottomWidth: borderSize,
+        paddingVertical: spaceM,
+    },
+    optionText: {
+        lineHeight: 24,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.js

@@ -1,22 +1,21 @@
 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 { InputField } from "@lookiero/aurora-next/build/components/atoms/InputField/InputField";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { I18nMessages } from "../../../../i18n/i18n";
+import { SelectField } from "../../../../shared/components/molecules/selectField/SelectField";
 import { style } from "./ProductVariantActions.style";
 const ProductVariantActions = ({ sizes, size, onKeep, onReplace, onReturn }) => {
     const sizeSelectorLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
     const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
     const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
-    const sizeSelectorOptions = useMemo(() => sizes.map((size) => ({ name: size.lookiero, value: size.id })), [sizes]);
+    const sizeSelectorOptions = useMemo(() => sizes.map((size) => ({ label: size.lookiero, value: size.id })), [sizes]);
     const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === size.id, [sizeSelectorOptions, size.id]);
     return (React.createElement(View, { style: style.container },
         React.createElement(Button, { onPress: onKeep }, keepButtonText),
         React.createElement(View, { style: style.row },
-            !size.unique && (React.createElement(View, { style: style.dropdownContainer },
-                React.createElement(InputField, { disabled: disabledSizeSelector, icon: "arrow-down", label: sizeSelectorLabelText, name: "size-selector", options: sizeSelectorOptions, testID: "size-selector", value: size.id, onChange: onReplace }))),
+            !size.unique && (React.createElement(SelectField, { disabled: disabledSizeSelector, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", style: { selectField: style.sizeSelector }, testID: "size-selector", value: size.id, onChange: onReplace })),
             React.createElement(View, { style: style.returnButtonContainer },
                 React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText)))));
 };

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.style.d.ts

@@ -2,11 +2,6 @@ declare const style: {
     container: {
         width: string;
     };
-    dropdownContainer: {
-        flex: number;
-        marginRight: number;
-        zIndex: number;
-    };
     returnButtonContainer: {
         flex: number;
     };
@@ -15,5 +10,9 @@ declare const style: {
         flexDirection: "row";
         marginTop: number;
     };
+    sizeSelector: {
+        flex: number;
+        marginRight: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.style.js

@@ -5,11 +5,6 @@ const style = StyleSheet.create({
     container: {
         width: "100%",
     },
-    dropdownContainer: {
-        flex: 1,
-        marginRight: spaceL,
-        zIndex: 4,
-    },
     returnButtonContainer: {
         flex: 1,
     },
@@ -18,5 +13,9 @@ const style = StyleSheet.create({
         flexDirection: "row",
         marginTop: spaceL,
     },
+    sizeSelector: {
+        flex: 1,
+        marginRight: spaceL,
+    },
 });
 export { style };

package/package.json

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