working on getting input to respond correctly.

This commit is contained in:
Jordan Hewitt 2024-06-28 17:04:30 -07:00
parent 93c0c25eb5
commit 7c2289098e
8 changed files with 206 additions and 53 deletions

View File

@ -1,37 +1,43 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Provider } from 'react-redux';
import { products as fixtures } from "@/__fixtures__/initialProducts"
import { setupStore } from '../store';
export default function TabLayout() {
const colorScheme = useColorScheme();
const store = setupStore({
products: fixtures
});
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Conversion',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
),
}}
/>
<Tabs.Screen
name="product-editor"
options={{
title: 'Products',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
),
}}
/>
</Tabs>
<Provider store={store}>
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Conversion',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
),
}}
/>
<Tabs.Screen
name="product-editor"
options={{
title: 'Products',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
),
}}
/>
</Tabs>
</Provider>
);
}

View File

@ -1,36 +1,165 @@
import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { MeasurementInput } from '@/components/LengthInput';
import { setupStore, useAppDispatch } from '../store';
import { useAppSelector } from '../store';
import { selectProducts } from '@/features/product/productSlice';
import { Product } from '@/lib/product';
import { Product, dimensions_t } from '@/lib/product';
import { ProductTile } from '@/components/ProductTile';
import { Measure, area, length } from 'enheter';
import { useEffect, useState } from 'react';
import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
export default function HomeScreen() {
const products = useAppDispatch(selectProducts);
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 selectProduct = (product : Product) => {
const onProductSelected = (product: Product) => {
setActiveProduct(product);
calculatePrice();
}
const onUnitPressed = (u : "ft" | "in") => {
setUnits(u);
calculatePrice();
}
const onLengthChanged = (value : string) => {
setLength(value);
calculatePrice();
}
const onWidthChanged = (width : string) => {
setWidth(width);
calculatePrice();
}
return (
<SafeAreaView>
<MeasurementInput onMeasurementSet={calculatePrice} />
<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>
{products.map((product) => {
<ProductTile product={product} onProductSelected={selectProduct} />
return (
<TouchableHighlight onPress={() => setActiveProduct(product)} >
<View
style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
<ProductTile product={product} onProductSelected={onProductSelected} />
</View>
</TouchableHighlight>
)
})}
</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',

View File

@ -1,12 +1,7 @@
import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { MeasurementInput } from '@/components/LengthInput';
import { setupStore, useAppDispatch } from '../store';
import { selectProducts } from '@/features/product/productSlice';
import { Product } from '@/lib/product';
import { ProductTile } from '@/components/ProductTyle';
import { Measure, area, length } from 'enheter';
import { ProductEditor } from '@/components/ProductEditor';
export default function HomeScreen() {

View File

@ -1,3 +1,5 @@
import { dimensions_t, length_t } from "@/lib/product";
import { Length } from "convert";
import { Measure, Unit, length as en_length, area as en_area } from "enheter";
import { useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
@ -7,7 +9,7 @@ export type t_length_unit = "foot" | "inch"
export type mode = "length" | "area"
export type LengthInputProps = {
onMeasurementSet?: (length: Measure<"length" | "area">) => any,
onMeasurementSet?: (d : dimensions_t) => any,
isArea?: boolean,
}
@ -15,7 +17,7 @@ export function MeasurementInput(props: LengthInputProps) {
const [length, setLength] = useState(null as null | number);
const [width, setWidth] = useState(null as null | number);
const [unit, setUnit] = useState("foot" as t_length_unit);
const [unit, setUnit] = useState("foot" as Length);
function doSetLength(text: string) {
const value = parseFloat(text);

View File

@ -20,7 +20,6 @@ export const ProductEditor = ({}) => {
return (
<SafeAreaView>
<Text>Hello</Text>
<FlatList
data={products}
renderItem={

View File

@ -1,8 +1,8 @@
import { Product } from "@/lib/product"
import { useState } from "react"
import { FlatList, StyleSheet, Text, TouchableHighlight, View } from "react-native"
import {ProductAttributeEditor} from "./ProductAttributeEditor";
import React from "react";
import { ProductAttributeEditor } from "./ProductAttributeEditor";
import { TextInput } from "react-native-gesture-handler";
export type ProductUpdatedFunc = (product_id: string, product: Product) => any;
export type ProductDeletedFunc = (product_id: string) => any;
@ -16,6 +16,14 @@ export type ProductEditorItemProps = {
export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted }: ProductEditorItemProps) => {
const [showAttributes, setShowAttributes] = useState(false);
const [doEditName, setDoEditName] = useState(false);
const [newName, setNewName] = useState(product.attributes.name || `Product ${product.id}`);
function updateName(name : string) {
setNewName(name);
product.attributes["name"] = name;
onProductUpdated && onProductUpdated(product.id, product);
}
function onAttributeChanged(product_id: string, key: string, newValue: string) {
product.attributes[key] = newValue;
@ -34,7 +42,7 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
onPress={() => setShowAttributes(!showAttributes)}
aria-label="Product Item"
>
<Text style={styles.product}>{product.attributes.name || `Product ${product.id}`} </Text>
<Text style={styles.product}>{newName}</Text>
</TouchableHighlight>
{showAttributes &&
(

View File

@ -1,7 +1,6 @@
import { Product } from "@/lib/product"
import { ImageBackground, StyleProp, StyleSheet, Text, ViewStyle } from "react-native";
import { ImageBackground, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
import { AnimatedStyle } from "react-native-reanimated";
import { View } from "react-native-reanimated/lib/typescript/Animated";
export type OnProductSelectedFunc = (product : Product) => any;
@ -21,14 +20,14 @@ const FALLBACK_IMAGE = "";
export function ProductTile ({product, onProductSelected, style} : ProductTileProps) {
const src = product.attributes.image || FALLBACK_IMAGE;
return (
<View style={style?.tile}>
<View style={styles.tile}>
<ImageBackground
src={src}
resizeMode="cover"
style={styles.image}
>
<Text style={styles.text}>{product.attributes.name || `Product ${product.id}`}</Text>
<Text style={styles.text}>{ product.pricePerUnit.toString() } / {product.measure.value} {product.measure.unit.symbol} </Text>
<Text style={styles.text}>{ product.priceDisplay } </Text>
</ImageBackground>
</View>
);
@ -40,5 +39,8 @@ const styles = StyleSheet.create({
},
text: {
},
tile: {
},
})

View File

@ -87,6 +87,18 @@ export class Product {
throw new Error(`Invalid dimensions: ${dimensions}`);
}
get priceDisplay() {
const u = this.presentUnits;
if (this.area) {
const w = Math.round(convert(this.area.w, this.area.u).to(this.presentUnits));
const l = Math.round(convert(this.area.l, this.area.u).to(this.presentUnits));
return `$ ${this.pricePerUnit} / ${l} x ${w} ${u}`;
} else if (this.length) {
const l = Math.round(convert(this.length.l, this.length.u).to(this.presentUnits));
return `$ ${this.pricePerUnit} per ${l} ${u}`;
}
}
get attributesAsList() {
return Object.entries(this.attributes).map(([key, value]) => {
return { key, value }