Function UnitPicker

ui/src/components/Unit.tsx:35–276

({ value, onChange, size = "md" }: Props)

export const UnitPicker = ({ value, onChange, size = "md" }: Props) => {
    const t = useStore(commonMsg)
    const [units, setUnits] = useState<Units>(value)
    if (isEmpty(units)) {
        setUnits(getInitUnits())
        return
    }

    const onAddUnit = () => {
        units.units.push({
            operator: units.units[0]?.operator ?? 'x',
            rhs: 1,
            unit: ''
        })
        setUnits(cloneDeep(units))
    }

    const onRemoveUnit = (i) => {
        units.units.splice(i, 1)
        setUnits(cloneDeep(units))
    }

    const onLiftUnit = (i) => {
        [units.units[i - 1], units.units[i]] = [units.units[i], units.units[i - 1]]

        setUnits(cloneDeep(units))
    }

    const onChangeUnitType = t => {
        switch (t) {
            case "none":
                setUnits({
                    unitsType: t,
                    units: []
                })
                break;
            case "short":
                setUnits({
                    unitsType: t,
                    units: [
                        {
                            operator: "/",
                            rhs: 1,
                            unit: ""
                        },
                        {
                            operator: "/",
                            rhs: 1000,
                            unit: "k"
                        },
                        {
                            operator: "/",
                            rhs: 1000000,
                            unit: "m"
                        },
                    ]
                })
                break;