84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Select from "@/components/TempDesignSystem/Select"
|
|
|
|
import {
|
|
Child,
|
|
ChildBed,
|
|
} from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
type ChildSelectorProps = {
|
|
child: Child
|
|
index: number
|
|
availableBedTypes?: ChildBed[]
|
|
updateChild: (child: Child, index: number) => void
|
|
}
|
|
|
|
export default function ChildInfoSelector({
|
|
child = { age: -1, bed: -1 },
|
|
index = 0,
|
|
availableBedTypes = [
|
|
{ label: "In adults bed", value: 0 },
|
|
{ label: "In crib", value: 1 },
|
|
{ label: "In extra bed", value: 2 },
|
|
],
|
|
updateChild = (child: Child, index: number) => {},
|
|
}: ChildSelectorProps) {
|
|
const intl = useIntl()
|
|
const ageLabel = intl.formatMessage({ id: "Age" })
|
|
const bedLabel = intl.formatMessage({ id: "Bed" })
|
|
|
|
const ageList = [
|
|
{ label: "0", value: 0 },
|
|
{ label: "1", value: 1 },
|
|
{ label: "2", value: 2 },
|
|
{ label: "3", value: 3 },
|
|
{ label: "4", value: 4 },
|
|
{ label: "5", value: 5 },
|
|
{ label: "6", value: 6 },
|
|
{ label: "7", value: 7 },
|
|
{ label: "8", value: 8 },
|
|
{ label: "9", value: 9 },
|
|
{ label: "10", value: 10 },
|
|
{ label: "11", value: 11 },
|
|
{ label: "12", value: 12 },
|
|
]
|
|
|
|
function handleOnSelect(selectedKey: any, childInfo: string) {
|
|
if (childInfo == "age") {
|
|
child.age = selectedKey
|
|
} else if (childInfo == "bed") {
|
|
child.bed = selectedKey
|
|
}
|
|
updateChild(child, index)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Select
|
|
size={2}
|
|
items={ageList}
|
|
label={ageLabel}
|
|
aria-label={ageLabel}
|
|
value={child.age}
|
|
onSelect={(key) => {
|
|
handleOnSelect(key, "age")
|
|
}}
|
|
name="age"
|
|
/>
|
|
{child.age !== -1 ? (
|
|
<Select
|
|
items={availableBedTypes}
|
|
label={bedLabel}
|
|
aria-label={bedLabel}
|
|
value={child.bed}
|
|
onSelect={(key) => {
|
|
handleOnSelect(key, "bed")
|
|
}}
|
|
name="bed"
|
|
/>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|