All files / src/pages/flowsheet-page/flowsheet/PropertiesSidebar/PropertyPanel/InputFields PropertyDropdown.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
44
45
46
47
48
49
50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18x
 
18x
 
18x
18x
18x
 
18x
1x
 
 
18x
 
 
 
 
 
 
 
 
 
 
 
 
54x
 
 
 
 
 
 
 
 
 
import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import { Label } from "@/ahuora-design-system/ui/label";
import {
  PropertyInfoRead,
  PropertyValueRead
} from "@/api/apiStore.gen";
import { CheckedState } from "@radix-ui/react-checkbox";
 
 
 
export function PropertyDropdown(props: {
  property: PropertyInfoRead;
  onUpdateValue: (value: boolean | "indeterminate", id: number) => void;
  schema: any;
}) {
  const displayName = props.property.displayName;
  // There is only one property value for dropdowns
  const propertyValue: PropertyValueRead = props.property.values[0];
 
  const id = propertyValue.id;
  const disabled = !propertyValue.enabled;
  const value = propertyValue.value;
 
  const handleUpdate = (update: CheckedState) => {
    props.onUpdateValue(update, id);
  };
 
  return (
    <div className="w-full mt-3">
      <div className="flex flex-col items-start gap-0 px-2 py-1">
        {/* Text component for property name */}
        <Label color={disabled ? "disabled" : "default"} className="mb-0.5">
          {displayName}
        </Label>
        {/* Dropdown */}
        <SelectInput
          ariaLabel={`dropdown-${props.property.key}`}
          value={value}
          // disabled={disabled}
          handleChange={handleUpdate}
          data={props?.schema?.options && Object.entries(props?.schema?.options).map(([key, label]) => ({
            label: label,
            value: key,
          }))}
        />
        {!value && !disabled}
      </div>
    </div>
  );
}