working on getting input to respond correctly.
This commit is contained in:
parent
93c0c25eb5
commit
7c2289098e
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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',
|
||||
|
@ -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() {
|
||||
|
||||
|
@ -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);
|
||||
|
@ -20,7 +20,6 @@ export const ProductEditor = ({}) => {
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Text>Hello</Text>
|
||||
<FlatList
|
||||
data={products}
|
||||
renderItem={
|
||||
|
@ -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 &&
|
||||
(
|
||||
|
@ -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: {
|
||||
|
||||
},
|
||||
})
|
@ -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 }
|
||||
|
Loading…
Reference in New Issue
Block a user