PliWould/app/(tabs)/index.tsx

180 lines
4.6 KiB
TypeScript
Raw Normal View History

import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useAppSelector } from '../store';
2024-06-27 23:31:59 +02:00
import { selectProducts } from '@/features/product/productSlice';
import { Product, dimensions_t } from '@/lib/product';
2024-06-28 04:00:29 +02:00
import { ProductTile } from '@/components/ProductTile';
import { useEffect, useState } from 'react';
import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
export default function HomeScreen() {
const products = useAppSelector(selectProducts);
const [activeProduct, setActiveProduct] = useState(null as Product | null);
const [price, setPrice] = useState("0.00");
const [length, setLength] = useState("0");
const [width, setWidth] = useState("0");
const [units, setUnits] = useState("in" as "ft" | "in");
function calculatePrice() {
if (!activeProduct) {
setPrice("0.00");
return;
}
const l = Number.parseInt(length);
const w = Number.parseInt(width);
console.log("l=%d, w=%d", l, w);
const u = units;
const d : dimensions_t = activeProduct.area ? {l, w, u} : {l, u};
const p = activeProduct.priceFor(d);
console.log("set price %s", p);
const s = p.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
setPrice(s);
}
const onProductSelected = (product: Product) => {
setActiveProduct(product);
calculatePrice();
}
const onUnitPressed = (u : "ft" | "in") => {
setUnits(u);
calculatePrice();
}
2024-06-27 23:31:59 +02:00
const onLengthChanged = (value : string) => {
setLength(value);
calculatePrice();
}
const onWidthChanged = (width : string) => {
setWidth(width);
calculatePrice();
2024-06-27 23:31:59 +02:00
}
return (
<SafeAreaView style={styles.wrapper}>
<View style={styles.bigPriceWrapper}>
<Text style={styles.bigPrice}>$ { price }</Text>
</View>
<View style={styles.inputAndUnitWrapper}>
<View style={styles.inputWrapper}>
{activeProduct ? (
<View>
<TextInput
clearTextOnFocus={true}
defaultValue={length}
onChangeText={onLengthChanged}
inputMode='decimal'
style={styles.lengthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
{activeProduct.area &&
(<View><TextInput
clearTextOnFocus={true}
defaultValue={width}
onPressIn={() => calculatePrice()}
onChangeText={setWidth}
inputMode='decimal'
style={styles.widthInput}
/>
<Text style={styles.unitHints}>{units}</Text>
</View>)
}
</View>
) : (<Text>Please choose a product</Text>)}
</View>
<View style={styles.unitSelector}>
<Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
<Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
</View>
</View>
2024-06-27 23:31:59 +02:00
{products.map((product) => {
return (
<TouchableHighlight onPress={() => setActiveProduct(product)} >
<View
style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
<ProductTile product={product} onProductSelected={onProductSelected} />
</View>
</TouchableHighlight>
)
2024-06-27 23:31:59 +02:00
})}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
wrapper: {
padding: 10,
alignItems: "center",
},
bigPriceWrapper: {
alignContent: "center",
},
bigPrice: {
alignSelf: "center",
fontSize: 40,
marginTop: 100,
marginBottom: 100,
},
inputWrapper: {
flexDirection: "row",
},
unitSelector: {
},
inputAndUnitWrapper: {
flexDirection: "row",
},
unitHints: {
fontSize: 30,
padding: 10,
},
lengthInput: {
borderWidth: 1,
borderRadius: 4,
borderColor: "grey",
padding: 4,
margin: 4,
fontSize: 30,
width: 200,
},
widthInput: {
width: 200,
borderWidth: 1,
borderRadius: 4,
borderColor: "grey",
padding: 4,
margin: 4,
fontSize: 30,
},
activeProduct: {
borderWidth: 2,
borderColor: "black",
borderStyle: "solid",
},
inactiveProduct: {
},
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});