marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 05:59:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Definitely still WIP, this lets you group calc inputs into equivalents

Browse Source
This commit is contained in:
Daniel Dunn
2025-04-04 00:53:21 -06:00
parent 9a55c934fa
commit 9fe703e0f7
5 changed files with 312 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/input/NumericInputWithUnit.tsx
View File

@@ -1,8 +1,10 @@
import React, { useState, useEffect } from 'react';
import { Grid, TextField, Select, MenuItem } from '@mui/material';
import { NumberField } from '@base-ui-components/react/number-field';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import Autocomplete from '@mui/material/Autocomplete';
import Qty from 'js-quantities';
import { isNull, set } from 'lodash';
//
const siPrefixes: { [key: string]: number } = {
@@ -21,12 +23,18 @@ export default function NumericInputWithUnit(props: {
value: { value: number; unit: string };
disabled?: boolean;
disableChangingUnit?: boolean;
onOwnChange: (value: { value: number; unit: string }, ...baseProps) => void;
onOwnChange: (value: { value: number; unit: string }) => void;
defaultPrefix?: string;
}) {
const [inputValue, setInputValue] = useState(props.value.value);
const [prefix, setPrefix] = useState(props.defaultPrefix || '');
const [unit, setUnit] = useState(props.value.unit);
// internal display unit
const [unit, setUnit] = useState('');
// Whether user has overridden the unit
const [userSelectedUnit, setUserSelectedUnit] = useState(false);
const [unitKind, setUnitKind] = useState('');
const [unitOptions, setUnitOptions] = useState<string[]>([]);
const [disabled, setDisabled] = useState(props.disabled);
@@ -38,32 +46,48 @@ export default function NumericInputWithUnit(props: {
setDisabled(props.disabled);
setDisableChangingUnit(props.disableChangingUnit);
}, [props.disabled, props.disableChangingUnit]);
useEffect(() => {
try {
if (unitKind != Qty(props.value.unit).kind()) {
// Update the options for what units similar to this one are available
const kind = Qty(props.value.unit).kind();
const units = Qty.getUnits(kind);
if (!units.includes(props.value.unit)) {
units.push(props.value.unit);
}
setUnitOptions(units);
} catch (error) {
console.error('Invalid unit kind', error);
setInputValue(props.value.value);
setUnit(props.value.unit);
setUnitKind(kind);
setUserSelectedUnit(false);
return;
}
}, [props.value.unit]);
useEffect(() => {
setInputValue(props.value.value);
setUnit(props.value.unit);
}, [props.value]);
if (userSelectedUnit) {
if (!isNaN(props.value.value)) {
const converted = Qty(props.value.value, props.value.unit).to(
unit
).scalar;
setInputValue(converted);
} else {
setInputValue(props.value.value);
}
} else {
setInputValue(props.value.value);
setUnit(props.value.unit);
}
}, [props.value.value, props.value.unit, unit]);
const handleValueChange = (val: { value: number; unit: string }) => {
const newValue = val.value;
const handleUserValueChange = (newValue: number) => {
setInputValue(newValue);
if (props.onOwnChange) {
try {
const qty = Qty(newValue * siPrefixes[prefix], unit).to(val.unit);
props.onOwnChange({ unit: val.unit, value: qty.scalar });
const converted = Qty(newValue * siPrefixes[prefix], unit).to(
props.value.unit
).scalar;
props.onOwnChange({ unit: props.value.unit, value: converted });
} catch (error) {
console.error('Conversion error', error);
}
@@ -75,39 +99,19 @@ export default function NumericInputWithUnit(props: {
const newPrefixValue = siPrefixes[newPrefix];
setPrefix(newPrefix);
// Value does not change, it is just re-formatted for display
// handleValueChange({
// value: (inputValue * oldPrefixValue) / newPrefixValue,
// unit: unit
// });
};
const handleUnitChange = (newUnit: string) => {
const handleUserUnitChange = (newUnit: string) => {
if (!newUnit) return;
const oldInputValue = inputValue;
const oldUnit = unit;
setUnit(newUnit);
setPrefix('');
try {
const convertedValue = Qty(
oldInputValue * siPrefixes[prefix],
oldUnit
).to(newUnit).scalar;
setInputValue(convertedValue);
} 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);
}
}
const convertedValue = Qty(oldInputValue * siPrefixes[prefix], oldUnit).to(
newUnit
).scalar;
setInputValue(convertedValue);
};
return (
@@ -119,17 +123,13 @@ export default function NumericInputWithUnit(props: {
>
<Grid item xs={4}>
<TextFieldWithDesc
{...props.baseProps}
disabled={disabled}
type="number"
fullWidth
value={(inputValue / siPrefixes[prefix])
.toFixed(9)
.replace(/(\d*\.\d+?)0+$/, '$1')}
onOwnChange={(value) =>
handleValueChange({ value: parseFloat(value), unit: unit })
}
label="Value"
onOwnChange={(value) => handleUserValueChange(parseFloat(value))}
/>
</Grid>
@@ -140,8 +140,8 @@ export default function NumericInputWithUnit(props: {
label="Prefix"
title="Prefix"
value={prefix}
onChange={(event, newValue) => {
handlePrefixChange(newValue?.props?.value || '');
onChange={(evt) => {
handlePrefixChange(evt.target.value || '');
}}
>
{Object.keys(siPrefixes).map((key) => (
@@ -159,8 +159,9 @@ export default function NumericInputWithUnit(props: {
label="Unit"
title="Unit"
value={unit}
onChange={(event, newValue) => {
handleUnitChange(newValue?.props?.value || '');
onChange={(event) => {
setUserSelectedUnit(true);
handleUserUnitChange(event.target.value || '');
}}
>
{unitOptions.map((key) => (