Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { NumericArgWithUnit, NumericArgWithUnitProps } from "./NumericArgWithUnit";
interface PropertyIndex {
[key: string]: {
displayName?: string;
value?: string | number;
};
}
export interface IndexedNumericArgWithUnitProps
extends Omit<NumericArgWithUnitProps, "onUpdateValue"> {
indexes: Record<string, PropertyIndex>;
onUpdateValue: (value: string, id: number) => void;
}
export function IndexedNumericArgWithUnit(props: IndexedNumericArgWithUnitProps) {
const indexesArray = Object.keys(props.indexes);
const values = props.values ?? props.property.values;
Iif (indexesArray.length === 0) {
return (
<NumericArgWithUnit
key={values.id}
property={props.property}
displayName={props.displayName}
property_val_key={props.property_val_key}
values={values}
onUpdateValue={(val) => props.onUpdateValue(val, values.id)}
onUpdateUnit={props.onUpdateUnit}
/>
);
}
const objectWithoutIndex0 = Object.fromEntries(
indexesArray.slice(1).map((index) => [index, props.indexes[index]])
);
const displayName = props.displayName ?? props.property.displayName;
return (
<div className="w-full flex flex-col gap-2">
<p>{displayName}</p>
<div className="flex flex-col border-l-[1px] pl-2" aria-label={`indexedNumericArg-${displayName}`}>
{Object.entries(values)
.sort(([key1], [key2]) => key1.localeCompare(key2))
.map(([key]) => {
const idxes = Object.values(props.indexes);
const disName = idxes[0][key]?.displayName || key;
return (
<IndexedNumericArgWithUnit
key={key}
property={props.property}
property_val_key={key}
displayName={disName}
indexes={objectWithoutIndex0}
values={values[key]}
onUpdateValue={props.onUpdateValue}
onUpdateUnit={props.onUpdateUnit}
/>
);
})}
</div>
</div>
);
}
|