feat: add multi select component. feat: add multi select to position flags section

This commit is contained in:
Dan Ditomaso
2025-01-31 16:11:10 -05:00
parent c7e2baea1b
commit 3d3b59686c
6 changed files with 293 additions and 8 deletions
@@ -1,25 +1,39 @@
import {
type FlagName,
usePositionFlags,
} from "@app/core/hooks/usePositionFlags";
import type { PositionValidation } from "@app/validation/config/position.tsx";
import { DynamicForm } from "@components/Form/DynamicForm.tsx";
import { useDevice } from "@core/stores/deviceStore.ts";
import { Protobuf } from "@meshtastic/js";
export const Position = (): JSX.Element => {
const { config, nodes, hardware, setWorkingConfig } = useDevice();
export const Position = () => {
const { config, setWorkingConfig } = useDevice();
const { flagsValue, activeFlags, toggleFlag } = usePositionFlags(
config.position.positionFlags ?? 0,
);
const onSubmit = (data: PositionValidation) => {
setWorkingConfig(
return setWorkingConfig(
new Protobuf.Config.Config({
payloadVariant: {
case: "position",
value: data,
value: { ...data, positionFlags: flagsValue },
},
}),
);
};
const onPositonFlagChange = (name: string) => {
return toggleFlag(name as FlagName);
};
return (
<DynamicForm<PositionValidation>
onSubmit={onSubmit}
onSubmit={(data) => {
data.positionFlags = flagsValue;
return onSubmit(data);
}}
defaultValues={config.position}
fieldGroups={[
{
@@ -53,7 +67,12 @@ export const Position = (): JSX.Element => {
{
type: "multiSelect",
name: "positionFlags",
value: activeFlags,
isChecked: (name: string) =>
activeFlags.includes(name as FlagName),
onValueChange: onPositonFlagChange,
label: "Position Flags",
placeholder: "Select position flags...",
description: "Configuration options for Position messages",
properties: {
enumValue: Protobuf.Config.Config_PositionConfig_PositionFlags,