All files / src/pages/flowsheet-page/flowsheet/PropertiesSidebar/PropertyPanel/InputFields PropertyCheckbox.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76x
76x
76x
 
76x
3x
 
 
76x
 
76x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Checkbox } from "@/ahuora-design-system/ui/checkbox";
import { Label } from "@/ahuora-design-system/ui/label";
import {
    PropertyInfoRead
} from "@/api/apiStore.gen";
import { CheckedState } from "@radix-ui/react-checkbox";
 
 
 
interface PropertyCheckboxProps {
  property: PropertyInfoRead;
  onUpdateValue: (value: boolean | "indeterminate", id: number) => void;
}
 
export function PropertyCheckbox(props: PropertyCheckboxProps) {
  const displayName = props.property.displayName;
  const id = props.property.values.id;
  const disabled = !props.property.values.enabled;
 
  const handleUpdate = (update: CheckedState) => {
    props.onUpdateValue(update, id);
  };
 
  const value = props.property.values.value;
 
  return (
    <div className="w-full h-8 mt-1">
      <div className="flex flex-row justify-between">
        {/* Container for each property */}
        {/* Text component for property name */}
        <Label color={disabled ? "disabled" : "default"}>{displayName}</Label>
        {/* Checkbox column */}
        <Checkbox
          id={`checkbox-${props.property.key}`}
          checked={value}
          disabled={disabled}
          onCheckedChange={handleUpdate}
        />
        {!value && !disabled}
      </div>
    </div>
  );
}