83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
import {
|
|
bitwiseDecode,
|
|
bitwiseEncode,
|
|
enumLike
|
|
} from "@app/core/utils/bitwise.js";
|
|
import { Listbox } from "@headlessui/react";
|
|
import { Protobuf } from "@meshtastic/meshtasticjs";
|
|
|
|
import { InfoWrapper } from "./InfoWrapper.js";
|
|
|
|
export interface BitwiseSelectProps {
|
|
label?: string;
|
|
description?: string;
|
|
error?: string;
|
|
selected: number;
|
|
decodeEnun: enumLike;
|
|
onChange: (value: number) => void;
|
|
}
|
|
|
|
export const BitwiseSelect = ({
|
|
label,
|
|
description,
|
|
error,
|
|
selected,
|
|
decodeEnun,
|
|
onChange
|
|
}: BitwiseSelectProps): JSX.Element => {
|
|
const [decodedSelected, setDecodedSelected] = useState<string[]>([]);
|
|
|
|
const options = Object.entries(decodeEnun)
|
|
.filter((value) => typeof value[1] !== "number")
|
|
.map((value) => {
|
|
return {
|
|
value: parseInt(value[0]),
|
|
label: value[1]
|
|
.toString()
|
|
.replace("POS_", "")
|
|
.toLowerCase()
|
|
.toLocaleUpperCase() //TODO: Investigate
|
|
};
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
setDecodedSelected(
|
|
bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map(
|
|
(flag) =>
|
|
Protobuf.Config_PositionConfig_PositionFlags[flag]
|
|
.replace("POS_", "")
|
|
.toLowerCase()
|
|
)
|
|
);
|
|
}, [selected]);
|
|
|
|
return (
|
|
<InfoWrapper label={label} description={description} error={error}>
|
|
<Listbox
|
|
value={bitwiseDecode(selected, decodeEnun)}
|
|
onChange={(value) => {
|
|
onChange(bitwiseEncode(value));
|
|
}}
|
|
multiple
|
|
>
|
|
<Listbox.Button
|
|
className={`flex h-10 w-full items-center gap-2 rounded-md border-transparent bg-orange-100 px-3 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500`}
|
|
>
|
|
{decodedSelected.map((option) => (
|
|
<span className="rounded-md bg-orange-300 p-1">{option}</span>
|
|
))}
|
|
</Listbox.Button>
|
|
<Listbox.Options>
|
|
{options.map((option) => (
|
|
<Listbox.Option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</Listbox.Option>
|
|
))}
|
|
</Listbox.Options>
|
|
</Listbox>
|
|
</InfoWrapper>
|
|
);
|
|
};
|