diff --git a/src/components/input/NumericInputWithUnit.tsx b/src/components/input/NumericInputWithUnit.tsx index bef047b..690fa2b 100644 --- a/src/components/input/NumericInputWithUnit.tsx +++ b/src/components/input/NumericInputWithUnit.tsx @@ -1,11 +1,14 @@ import React, { useState, useEffect } from 'react'; -import { TextField, Grid } from '@mui/material'; +import { Grid, TextField } from '@mui/material'; +import TextFieldWithDesc from '@components/options/TextFieldWithDesc'; import Autocomplete from '@mui/material/Autocomplete'; import Qty from 'js-quantities'; +import { parse } from 'path'; +import { b } from 'vitest/dist/suite-IbNSsUWN.js'; export default function NumericInputWithUnit(props: { value: { value: number; unit: string }; - onChange: (value: { value: number; unit: string }) => void; + onOwnChange: (value: { value: number; unit: string }, ...baseProps) => void; }) { const [inputValue, setInputValue] = useState(props.value.value); const [unit, setUnit] = useState(props.value.unit); @@ -26,13 +29,13 @@ export default function NumericInputWithUnit(props: { setUnit(props.value.unit); }, [props.value]); - const handleValueChange = (event: React.ChangeEvent) => { - const newValue = parseFloat(event.target.value) || 0; + const handleValueChange = (val: { value: number; unit: string }) => { + const newValue = val.value; setInputValue(newValue); - if (props.onChange) { + if (props.onOwnChange) { try { - const qty = Qty(newValue, unit).to('meters'); - props.onChange({ unit: 'meters', value: qty.scalar }); + const qty = Qty(newValue, unit).to(val.unit); + props.onOwnChange({ unit: val.unit, value: qty.scalar }); } catch (error) { console.error('Conversion error', error); } @@ -48,16 +51,28 @@ export default function NumericInputWithUnit(props: { } catch (error) { console.error('Unit conversion error', error); } + + if (props.onOwnChange) { + try { + const qty = Qty(inputValue, unit).to(newUnit); + props.onOwnChange({ unit: newUnit, value: qty.scalar }); + } catch (error) { + console.error('Conversion error', error); + } + } }; return ( - + handleValueChange({ value: parseFloat(value), unit: unit }) + } label="Value" /> @@ -65,8 +80,8 @@ export default function NumericInputWithUnit(props: { { - handleUnitChange(unit); + onChange={(event, newValue) => { + handleUnitChange(newValue || ''); }} renderInput={(params) => ( diff --git a/src/pages/tools/number/generic-calc/index.tsx b/src/pages/tools/number/generic-calc/index.tsx index 207a237..c1fe85b 100644 --- a/src/pages/tools/number/generic-calc/index.tsx +++ b/src/pages/tools/number/generic-calc/index.tsx @@ -14,6 +14,7 @@ import ToolContent from '@components/ToolContent'; import { ToolComponentProps } from '@tools/defineTool'; import ToolTextResult from '@components/result/ToolTextResult'; import TextFieldWithDesc from '@components/options/TextFieldWithDesc'; +import NumericInputWithUnit from '@components/input/NumericInputWithUnit'; import { UpdateField } from '@components/options/ToolOptions'; import { InitialValuesType } from './types'; import type { GenericCalcType } from './data/types'; @@ -42,7 +43,7 @@ export default async function makeTool( return function GenericCalc({ title }: ToolComponentProps) { const [result, setResult] = useState(''); - const [shortResult, setShortResult] = useState(''); + const [shortResult, setShortResult] = useState(''); // For UX purposes we need to track what vars are const [valsBoundToPreset, setValsBoundToPreset] = useState<{ @@ -56,6 +57,7 @@ export default async function makeTool( const updateVarField = ( name: string, value: number, + unit: string, values: InitialValuesType, updateFieldFunc: UpdateField ) => { @@ -63,7 +65,7 @@ export default async function makeTool( const newVars = { ...values.vars }; newVars[name] = { value, - unit: values.vars[name]?.unit || '' + unit: unit }; updateFieldFunc('vars', newVars); }; @@ -111,6 +113,9 @@ export default async function makeTool( dataTableLookup(dataTables[selectionData.source], preset)[ selectionData.bind[key] ], + + dataTables[selectionData.source].columns[selectionData.bind[key]] + ?.unit || '', currentValues, updateFieldFunc ); @@ -225,7 +230,6 @@ export default async function makeTool( Variable Value - Unit Solve For @@ -234,15 +238,17 @@ export default async function makeTool( {variable.title} - updateVarField( variable.name, - parseFloat(val), + parseFloat(val.value), + val.unit, values, updateField ) @@ -258,7 +265,6 @@ export default async function makeTool( type="number" /> - {variable.unit}