Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 51 | 5x 5x 5x 5x 5x 5x 5x 1x 15x 5x 5x 15x 5x 5x 5x 15x 10x 30x 5x 20x | import { CheckedState } from "@radix-ui/react-checkbox";
import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import { Label } from "@/ahuora-design-system/ui/label";
import { PropertyInfoRead, PropertyValueRead } from "@/api/apiStore.gen";
export function PropertyDropdown(props: {
property: PropertyInfoRead;
onUpdateValue: (value: boolean | "indeterminate", id: number) => void;
schema?: {
options?: Record<string, string>;
};
}) {
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>
);
}
|