start to refactor components.
This commit is contained in:
parent
408a996fe7
commit
fb68beb1b3
@ -1,202 +1,13 @@
|
||||
import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
|
||||
import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
|
||||
import { SafeAreaView, View } from 'react-native';
|
||||
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useAppSelector } from '../store';
|
||||
import { selectProducts } from '@/features/product/productSlice';
|
||||
import { Product, dimensions_t } from '@/lib/product';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { TouchableHighlight } from 'react-native-gesture-handler';
|
||||
|
||||
const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
|
||||
|
||||
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");
|
||||
|
||||
useEffect(function () {
|
||||
const iv = setInterval(function () {
|
||||
if (!activeProduct) 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 };
|
||||
try {
|
||||
const p = activeProduct.priceFor(d);
|
||||
console.log("set price %s", p);
|
||||
const s = p.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})
|
||||
setPrice(s == "NaN" ? "0.00" : s);
|
||||
} catch (err) {
|
||||
console.log(activeProduct);
|
||||
console.error(err)
|
||||
return null;
|
||||
}
|
||||
}, 50);
|
||||
return function () {
|
||||
clearInterval(iv);
|
||||
}
|
||||
}, [activeProduct, length, width]);
|
||||
|
||||
export const HomeScreen = () => {
|
||||
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}
|
||||
onChangeText={setLength}
|
||||
inputMode='decimal'
|
||||
style={styles.lengthInput}
|
||||
/>
|
||||
<Text style={styles.unitHints}>{units}</Text>
|
||||
{activeProduct.area && (
|
||||
<View>
|
||||
<TextInput
|
||||
clearTextOnFocus={true}
|
||||
defaultValue={width}
|
||||
onChangeText={setWidth}
|
||||
inputMode='decimal'
|
||||
style={styles.widthInput}
|
||||
/>
|
||||
<Text style={styles.unitHints}>{units}</Text>
|
||||
</View>)
|
||||
}
|
||||
<View style={styles.unitSelector}>
|
||||
<Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
|
||||
<Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
|
||||
</View>
|
||||
</View>
|
||||
) : (<Text>Please choose a product</Text>)}
|
||||
</View>
|
||||
</View>
|
||||
<FlatList
|
||||
data={products}
|
||||
style={styles.productSelectorFlatList}
|
||||
renderItem={({ item }) => {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
|
||||
onPress={() => setActiveProduct(item)}>
|
||||
<Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
|
||||
</TouchableHighlight>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
||||
<SafeAreaView>
|
||||
<ProductCalculatorSelector />
|
||||
</SafeAreaView>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
},
|
||||
bigPriceWrapper: {
|
||||
alignContent: "center",
|
||||
},
|
||||
bigPrice: {
|
||||
alignSelf: "center",
|
||||
fontSize: 40,
|
||||
marginTop: 100,
|
||||
marginBottom: 100,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
unitSelector: {
|
||||
},
|
||||
inputAndUnitWrapper: {
|
||||
flexDirection: "row",
|
||||
alignSelf: "center",
|
||||
},
|
||||
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',
|
||||
gap: 8,
|
||||
},
|
||||
stepContainer: {
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
reactLogo: {
|
||||
height: 178,
|
||||
width: 290,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
|
||||
productSelectorFlatList: {
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
},
|
||||
|
||||
productTileTouchable: {
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
backgroundColor: "grey",
|
||||
},
|
||||
|
||||
productTileTouchableActive: {
|
||||
borderWidth: 2,
|
||||
borderStyle: "solid",
|
||||
borderColor: "black",
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
},
|
||||
|
||||
productTileText: {
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
},
|
||||
|
||||
productTileTextActive: {
|
||||
textAlign: "center",
|
||||
color: "black",
|
||||
},
|
||||
|
||||
productTileCover: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
});
|
||||
|
49
components/AreaInput.tsx
Normal file
49
components/AreaInput.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { View } from "react-native-reanimated/lib/typescript/Animated";
|
||||
import { MeasurementInput } from "./MeasurementInput";
|
||||
import { area_t, dimensions_t } from "@/lib/product";
|
||||
import { useState } from "react";
|
||||
|
||||
export type AreaInputProps = {
|
||||
units: "foot" | "inch",
|
||||
onMeasurementSet?: (area : dimensions_t) => any,
|
||||
}
|
||||
|
||||
export function AreaInput({units, onMeasurementSet} : AreaInputProps) {
|
||||
|
||||
const [area, setArea] = useState({
|
||||
l: 0,
|
||||
w: 0,
|
||||
u: "foot",
|
||||
} as area_t)
|
||||
|
||||
function doOnLengthSet(measurement : dimensions_t) {
|
||||
setArea({
|
||||
...area,
|
||||
l: measurement.l
|
||||
});
|
||||
onMeasurementSet && onMeasurementSet(area);
|
||||
}
|
||||
|
||||
function doOnWidthSet(measurement : dimensions_t) {
|
||||
setArea({
|
||||
...area,
|
||||
w: measurement.l
|
||||
});
|
||||
onMeasurementSet && onMeasurementSet(area);
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<MeasurementInput
|
||||
units={units}
|
||||
defaultValue={area.l}
|
||||
onValueSet={doOnLengthSet}
|
||||
/>
|
||||
<MeasurementInput
|
||||
units={units}
|
||||
defaultValue={area.w}
|
||||
onValueSet={doOnWidthSet}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
@ -1,88 +0,0 @@
|
||||
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";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
export type t_length_unit = "foot" | "inch"
|
||||
export type mode = "length" | "area"
|
||||
|
||||
export type LengthInputProps = {
|
||||
onMeasurementSet?: (d : dimensions_t) => any,
|
||||
isArea?: boolean,
|
||||
}
|
||||
|
||||
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 Length);
|
||||
|
||||
function doSetLength(text: string) {
|
||||
const value = parseFloat(text);
|
||||
setLength(value);
|
||||
if (!props.isArea) {
|
||||
const len = en_length(unit, value)
|
||||
props.onMeasurementSet && props.onMeasurementSet(len)
|
||||
} else {
|
||||
const en_unit = unit == "foot" ? "squareFoot" : "squareInch"
|
||||
const ar = en_area(en_unit, value);
|
||||
props.onMeasurementSet && props.onMeasurementSet(ar);
|
||||
}
|
||||
}
|
||||
|
||||
function doSetWidth(text: string) {
|
||||
const value = parseFloat(text);
|
||||
setLength(value);
|
||||
const len = en_length(unit, value)
|
||||
props.onMeasurementSet && props.onMeasurementSet(len)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<View style={styles.inputRow}>
|
||||
<TextInput
|
||||
keyboardType="number-pad"
|
||||
onTouchEnd={() => setLength(null)}
|
||||
value={length?.toString() || ""}
|
||||
onChangeText={doSetLength}
|
||||
style={styles.textInput}
|
||||
/>
|
||||
{props.isArea &&
|
||||
(<TextInput
|
||||
keyboardType="number-pad"
|
||||
onTouchEnd={() => setWidth(null)}
|
||||
value={length?.toString() || ""}
|
||||
onChangeText={doSetWidth}
|
||||
style={styles.textInput}
|
||||
/>)
|
||||
}
|
||||
<Text style={styles.valueHint}>{unit == "foot" ? "ft" : "in"}</Text>
|
||||
<Button
|
||||
title="Ft"
|
||||
onPress={() => setUnit("foot")}
|
||||
color={unit === "foot" ? "blue" : "gray"}
|
||||
/>
|
||||
<Button
|
||||
title="In"
|
||||
onPress={() => setUnit("inch")}
|
||||
color={unit === "inch" ? "blue" : "gray"}
|
||||
/>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
textInput: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
inputRow: {
|
||||
flexDirection: "row"
|
||||
},
|
||||
valueHint: {
|
||||
color: "grey",
|
||||
margin: 5,
|
||||
}
|
||||
})
|
48
components/MeasurementInput.tsx
Normal file
48
components/MeasurementInput.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { dimensions_t, length_t } from "@/lib/product";
|
||||
import { StyleSheet, Text, TextInput, View } from "react-native";
|
||||
|
||||
export type t_length_unit = "foot" | "inch"
|
||||
|
||||
export type MeasurementInputProps = {
|
||||
onValueSet?: (d: dimensions_t) => any,
|
||||
units: t_length_unit,
|
||||
defaultValue: number;
|
||||
}
|
||||
|
||||
export function MeasurementInput({onValueSet, units, defaultValue}: MeasurementInputProps) {
|
||||
|
||||
function doOnValueSet(value : string) {
|
||||
onValueSet && onValueSet({
|
||||
l: (parseInt(value) || parseFloat(value)),
|
||||
u: units,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<TextInput
|
||||
clearTextOnFocus={true}
|
||||
defaultValue={new String(defaultValue).valueOf()}
|
||||
onChangeText={doOnValueSet}
|
||||
inputMode='decimal'
|
||||
style={styles.lengthInput} />
|
||||
<Text style={styles.unitHints}>{units}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
unitHints: {
|
||||
fontSize: 30,
|
||||
padding: 10,
|
||||
},
|
||||
lengthInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
borderColor: "grey",
|
||||
padding: 4,
|
||||
margin: 4,
|
||||
fontSize: 30,
|
||||
width: 200,
|
||||
},
|
||||
})
|
39
components/Price.tsx
Normal file
39
components/Price.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { StyleSheet, Text } from "react-native";
|
||||
import { View } from "react-native-reanimated/lib/typescript/Animated";
|
||||
|
||||
export type PriceDisplayProps = {
|
||||
price: number,
|
||||
currency?: {
|
||||
symbol: string,
|
||||
}
|
||||
}
|
||||
|
||||
export default function PriceDisplay({ price }: PriceDisplayProps) {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<View style={styles.bigPriceWrapper}>
|
||||
<Text style={styles.bigPrice}>$ {price.toLocaleString(
|
||||
undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}
|
||||
)}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
bigPriceWrapper: {
|
||||
alignContent: "center",
|
||||
},
|
||||
bigPrice: {
|
||||
alignSelf: "center",
|
||||
fontSize: 40,
|
||||
marginTop: 100,
|
||||
marginBottom: 100,
|
||||
}
|
||||
});
|
148
components/ProductCalculatorSelector.tsx
Normal file
148
components/ProductCalculatorSelector.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
import { useAppSelector } from '@/app/store';
|
||||
import { selectProducts } from '@/features/product/productSlice';
|
||||
import { Product, dimensions_t } from '@/lib/product';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
|
||||
import { TouchableHighlight } from 'react-native-gesture-handler';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import PriceDisplay from './Price';
|
||||
import { AreaInput } from './AreaInput';
|
||||
import { MeasurementInput } from './MeasurementInput';
|
||||
|
||||
|
||||
export default function ProductCalculatorSelector() {
|
||||
|
||||
const products = useAppSelector(selectProducts);
|
||||
const [activeProduct, setActiveProduct] = useState(null as Product | null);
|
||||
const [price, setPrice] = useState(0);
|
||||
const [measurement, setMeasurement] = useState(null as dimensions_t | null);
|
||||
|
||||
useEffect(function () {
|
||||
const iv = setInterval(function () {
|
||||
if (!(activeProduct && measurement)) return;
|
||||
setPrice(
|
||||
activeProduct.priceFor(measurement)
|
||||
)
|
||||
}, 50);
|
||||
return function () {
|
||||
clearInterval(iv);
|
||||
};
|
||||
}, [activeProduct, measurement]);
|
||||
|
||||
function onMeasurementSet(dimensions: dimensions_t) {
|
||||
setMeasurement(dimensions);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.wrapper}>
|
||||
<PriceDisplay price={price} />
|
||||
<View style={styles.inputAndUnitWrapper}>
|
||||
<View style={styles.inputWrapper}>
|
||||
{
|
||||
activeProduct ? (
|
||||
"w" in activeProduct.dimensions ?
|
||||
<AreaInput
|
||||
units={units}
|
||||
onMeasurementSet={onMeasurementSet}
|
||||
/>
|
||||
:
|
||||
<MeasurementInput
|
||||
defaultValue={activeProduct.dimensions.l}
|
||||
units={units}
|
||||
onValueSet={onMeasurementSet}
|
||||
/>
|
||||
|
||||
) : (
|
||||
<Text>Please select a product</Text>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
},
|
||||
bigPriceWrapper: {
|
||||
alignContent: "center",
|
||||
},
|
||||
bigPrice: {
|
||||
alignSelf: "center",
|
||||
fontSize: 40,
|
||||
marginTop: 100,
|
||||
marginBottom: 100,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
unitSelector: {
|
||||
},
|
||||
inputAndUnitWrapper: {
|
||||
flexDirection: "row",
|
||||
alignSelf: "center",
|
||||
},
|
||||
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',
|
||||
gap: 8,
|
||||
},
|
||||
stepContainer: {
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
reactLogo: {
|
||||
height: 178,
|
||||
width: 290,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
productTileTouchable: {
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
backgroundColor: "grey",
|
||||
},
|
||||
|
||||
productTileTouchableActive: {
|
||||
borderWidth: 2,
|
||||
borderStyle: "solid",
|
||||
borderColor: "black",
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
},
|
||||
|
||||
productTileText: {
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
},
|
||||
|
||||
productTileTextActive: {
|
||||
textAlign: "center",
|
||||
color: "black",
|
||||
},
|
||||
|
||||
productTileCover: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
});
|
47
components/ProductList.tsx
Normal file
47
components/ProductList.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { FlatList, StyleSheet, Text, TouchableHighlight } from "react-native";
|
||||
import { ProductTile } from "./ProductTile";
|
||||
import { Product } from "@/lib/product";
|
||||
import { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { selectProducts } from "@/features/product/productSlice";
|
||||
|
||||
export type ProductSelectionProps = {
|
||||
onProductSelected?: (product : Product) => any;
|
||||
}
|
||||
|
||||
export default function ProductList ({onProductSelected} : ProductSelectionProps) {
|
||||
|
||||
const products = useSelector(selectProducts);
|
||||
|
||||
const [activeProduct, setActiveProduct] = useState(null as null | Product);
|
||||
|
||||
function doOnProductSelected(product : Product) {
|
||||
setActiveProduct(product);
|
||||
onProductSelected && onProductSelected(product);
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={products}
|
||||
style={styles.productSelectorFlatList}
|
||||
renderItem={({ item }) => {
|
||||
return (
|
||||
<ProductTile
|
||||
product={item}
|
||||
onProductSelected={doOnProductSelected}
|
||||
isActive={activeProduct === item}
|
||||
/>
|
||||
);
|
||||
} } />
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
productSelectorFlatList: {
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
},
|
||||
|
||||
})
|
@ -1,5 +1,5 @@
|
||||
import { Product } from "@/lib/product"
|
||||
import { ImageBackground, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
|
||||
import { ImageBackground, StyleProp, StyleSheet, Text, TouchableHighlight, View, ViewStyle } from "react-native";
|
||||
import { AnimatedStyle } from "react-native-reanimated";
|
||||
|
||||
export type OnProductSelectedFunc = (product : Product) => any;
|
||||
@ -9,31 +9,42 @@ type MyStyle = StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
|
||||
export type ProductTileProps = {
|
||||
product: (Product),
|
||||
onProductSelected?: OnProductSelectedFunc,
|
||||
isActive: boolean,
|
||||
style?: {
|
||||
tile?: MyStyle,
|
||||
image?: MyStyle,
|
||||
default?: {
|
||||
highlight?: MyStyle,
|
||||
text?: MyStyle,
|
||||
image?: MyStyle,
|
||||
}
|
||||
active?: {
|
||||
highlight?: MyStyle,
|
||||
text?: MyStyle,
|
||||
image?: MyStyle,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const FALLBACK_IMAGE = "";
|
||||
|
||||
export function ProductTile ({product, onProductSelected, style} : ProductTileProps) {
|
||||
const src = product.attributes.image || FALLBACK_IMAGE;
|
||||
export function ProductTile ({product, onProductSelected, isActive, style} : ProductTileProps) {
|
||||
const _style = (isActive ? style?.active : style?.default) || {};
|
||||
return (
|
||||
<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.priceDisplay } </Text>
|
||||
</ImageBackground>
|
||||
</View>
|
||||
|
||||
<TouchableHighlight
|
||||
style={_style.highlight || styles.highlight}
|
||||
onPress={() => onProductSelected && onProductSelected(product)}>
|
||||
<Text style={_style.text || styles.text}>
|
||||
{product.attributes.name || `Product ${product.id}`}
|
||||
({product.pricePerUnitDisplay})
|
||||
</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
highlight: {
|
||||
|
||||
},
|
||||
image: {
|
||||
|
||||
},
|
||||
|
49
components/UnitChooser.tsx
Normal file
49
components/UnitChooser.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { Length } from "convert";
|
||||
import { useState } from "react";
|
||||
import { Button, StyleSheet, View } from "react-native";
|
||||
|
||||
export type UnitChooserProps = {
|
||||
choices: Length[],
|
||||
onChoicePressed: (l: Length) => any,
|
||||
activeColor?: string,
|
||||
defaultColor?: string,
|
||||
}
|
||||
|
||||
export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor }: UnitChooserProps) {
|
||||
const [value, setValue] = useState(choices[0] as Length);
|
||||
|
||||
activeColor = activeColor || "lightblue";
|
||||
defaultColor = activeColor || "lightgrey";
|
||||
|
||||
function doChoiceClicked(choice: Length) {
|
||||
setValue(choice);
|
||||
onChoicePressed(choice);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.unitChooser}>
|
||||
{choices.map((ci) => {
|
||||
return (
|
||||
<Button
|
||||
title={ci}
|
||||
onPress={() => doChoiceClicked(ci)}
|
||||
color={value === ci ? activeColor : defaultColor}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
unitChooser: {
|
||||
|
||||
},
|
||||
active: {
|
||||
|
||||
},
|
||||
default: {
|
||||
|
||||
}
|
||||
})
|
@ -147,7 +147,7 @@ const productsState = createSlice({
|
||||
});
|
||||
|
||||
export const selectProducts = (state: RootState) => {
|
||||
return state.products.map(Product.fromObject);
|
||||
return state.products.map(obj => Product.fromObject(obj));
|
||||
}
|
||||
|
||||
export const selectProductIds = createSelector([selectProducts], products => {
|
||||
|
@ -20,4 +20,11 @@ describe("Product tests", () => {
|
||||
const comparison = standard.priceFor({l : 24, u: "inch"});
|
||||
expect(comparison).toBeCloseTo(20, 4);
|
||||
});
|
||||
|
||||
it("Can convert to/from object", () => {
|
||||
const standard = new Product(10, {l: 1, u : "feet"});
|
||||
const obj = standard.asObject;
|
||||
const back = Product.fromObject(obj);
|
||||
expect(back).toEqual(standard);
|
||||
})
|
||||
});
|
@ -117,7 +117,7 @@ export class Product {
|
||||
return {
|
||||
id: this.id,
|
||||
pricePerUnit: this.pricePerUnit,
|
||||
dimensions: this.dimensions,
|
||||
dimensions: JSON.parse(JSON.stringify(this.dimensions)),
|
||||
attributes: this.attributes,
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user