srcrr/PliWould
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

did some more cleanup of the interface and UI interactions.

Browse Source
This commit is contained in:
Jordan
2024-07-02 08:34:23 -07:00
parent 466e005e4e
commit bf3923b4b9
10 changed files with 112 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/AreaInput.tsx
View File

@ -1,18 +1,21 @@
import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/product";
import { Length } from "convert";
import { useState } from "react";
import { StyleSheet, View } from "react-native";
import { StyleSheet, Text, View } from "react-native";
export type AreaInputProps = {
onMeasurementSet?: (area : dimensions_t) => any,
defaultValue?: area_t,
lengthLabel?: string,
widthLabel?: string,
units?: Length,
}
export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultValue} : AreaInputProps) {
export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultValue, units} : AreaInputProps) {
defaultValue = defaultValue || {l: 0, w: 0, u: "ft"}
units = units || "ft"
const [area, setArea] = useState(defaultValue)
@ -44,11 +47,14 @@ export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultVal
defaultValue={{l: area.l, u: area.u}}
onValueSet={doOnLengthSet}
label={lengthLabel}
units={units}
/>
<Text style={{fontSize: 30,}} > x </Text>
<MeasurementInput
defaultValue={{l: area.w, u: area.u}}
onValueSet={doOnWidthSet}
label={widthLabel}
units={units}
/>
</View>
)
@ -56,6 +62,7 @@ export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultVal
const styles = StyleSheet.create({
areaInputWrapper: {
flexDirection: "row"
flexDirection: "row",
verticalAlign: "middle",
}
})

12
components/MeasurementInput.tsx
View File

@ -9,13 +9,16 @@ export type MeasurementInputProps = {
onValueSet?: (d: dimensions_t) => any,
defaultValue: length_t;
label?: string,
units?: Length,
}
export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementInputProps) {
export function MeasurementInput({onValueSet, defaultValue, label, units}: MeasurementInputProps) {
const [mValue, setMValue] = useState(defaultValue)
const defValue = Number.isNaN(defaultValue.l) ? 0 : defaultValue.l
units = units || "ft";
function doOnValueSet(value : string) {
setMValue(mValue);
const iVal = parseFloat(value) || parseInt(value);
@ -37,7 +40,7 @@ export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementI
style={styles.lengthInput}
aria-label={label || "Enter measurement"}
/>
<Text style={styles.unitHints}>{mValue.u}</Text>
<Text style={styles.unitHints}>{units}</Text>
</View>
)
}
@ -45,10 +48,13 @@ export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementI
const styles = StyleSheet.create({
inputWrapper: {
alignItems: "flex-start",
flexDirection: "row"
flexDirection: "row",
verticalAlign: "middle"
},
unitHints: {
padding: 10,
fontSize: 20,
verticalAlign: "middle",
},
lengthInput: {
borderWidth: 1,

29
components/PercentDamange.tsx
View File

@ -1,27 +1,36 @@
import { StyleSheet, Text, TextInput, View } from "react-native";
import Slider from '@react-native-community/slider';
import { useState } from "react";
import { useEffect, useState } from "react";
type PercentDamageProps = {
onSetPercentage: (percent: number) => any;
}
export default function PercentDamage ({onSetPercentage} : PercentDamageProps) {
function getDamangeColor(damage : number) {
if (damage === 0) return "black";
if (damage <= 20) return "blue";
if (damage <= 50) return "orange";
return "red";
}
export default function PercentDamage({ onSetPercentage }: PercentDamageProps) {
const [damage, setDamage] = useState(0);
function doOnChangeText (val : number) {
setDamage(val);
onSetPercentage(val / 100);
const [damageColor, setDamageColor] = useState("black");
function doOnChangeText(val: number) {
setDamage(val || 0);
onSetPercentage((val / 100) || 0);
setDamageColor(getDamangeColor(val || 0));
}
return (
<View style={styles.wrapper}>
<Slider
value={damage}
minimumValue={0}
maximumValue={100}
step={5}
onValueChange={doOnChangeText}
/>
<Text style={styles.label}> {damage}% Damage</Text>
/>
<Text style={{ ...styles.label, color: damageColor }}> {damage}% Damage</Text>
</View>
)
}
@ -40,5 +49,9 @@ const styles = StyleSheet.create({
},
label: {
margin: 5,
alignSelf: "center",
fontSize: 20,
fontWeight: "bold",
fontStyle: "italic",
}
})

10
components/ProductCalculatorSelector.tsx
View File

@ -83,12 +83,14 @@ export default function ProductCalculatorSelector() {
onMeasurementSet={onMeasurementSet}
widthLabel='enter width'
lengthLabel='enter length'
units={measurement.u}
/>
:
<MeasurementInput
defaultValue={activeProduct.dimensions}
onValueSet={onMeasurementSet}
label="enter length"
units={measurement.u}
/>
) : (
@ -101,7 +103,7 @@ export default function ProductCalculatorSelector() {
</View>
</View>
{activeProduct &&
(<View >
(<View style={styles.damageWrapper}>
<PercentDamage
onSetPercentage={onSetPercentDamage}
/>
@ -129,6 +131,7 @@ export const styles = StyleSheet.create({
inputWrapper: {
flexDirection: "row",
alignItems: "flex-start",
verticalAlign: "middle",
},
unitSelector: {
},
@ -195,4 +198,9 @@ export const styles = StyleSheet.create({
padding: 4,
},
damageWrapper: {
paddingVertical: 10,
paddingHorizontal: 10,
},
});

47
components/UnitChooser.tsx
View File

@ -1,16 +1,17 @@
import { Length } from "convert";
import { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import { Button, StyleSheet, Text, TouchableHighlight, View } from "react-native";
export type UnitChooserProps = {
choices: Length[],
onChoicePressed: (l: Length) => any,
activeColor?: string,
defaultColor?: string,
defaultValue? : Length,
}
export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor }: UnitChooserProps) {
const [value, setValue] = useState(choices[0] as Length);
export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor, defaultValue }: UnitChooserProps) {
const [value, setValue] = useState(defaultValue || choices[0] as Length);
activeColor = activeColor || "lightblue";
defaultColor = defaultColor || "lightgrey";
@ -24,11 +25,13 @@ export default function UnitChooser({ choices, onChoicePressed, activeColor, def
<View style={styles.unitChooser}>
{choices.map((ci) => {
return (
<Button
title={ci}
<TouchableHighlight
onPress={() => doChoiceClicked(ci)}
color={value === ci ? activeColor : defaultColor}
/>
style={value === ci ? styles.active : styles.default }
key={ci}
>
<Text style={value === ci ? styles.textActive : styles.textDefault}>{ci}</Text>
</TouchableHighlight>
)
})
}
@ -38,12 +41,34 @@ export default function UnitChooser({ choices, onChoicePressed, activeColor, def
const styles = StyleSheet.create({
unitChooser: {
flexDirection: "row",
verticalAlign: "middle",
},
active: {
backgroundColor: "skyblue",
padding: 5,
borderRadius: 5,
},
default: {
}
backgroundColor: "lightgray",
padding: 5,
borderRadius: 5,
verticalAlign: "middle",
},
textActive: {
marginTop: 2,
marginBottom: 2,
marginLeft: 10,
marginRight: 10,
fontSize: 40,
},
textDefault: {
marginTop: 2,
marginBottom: 2,
marginLeft: 10,
marginRight: 10,
fontSize: 40,
},
unitButton: {
},
})