1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-23 07:04:22 +00:00
festa/components/editable/EditableDateRange.tsx

72 lines
2 KiB
TypeScript
Raw Normal View History

2022-06-07 11:41:26 +00:00
import { faChevronRight, faClock } from "@fortawesome/free-solid-svg-icons"
import { HTMLProps } from "react"
import { EditingContext } from "../../contexts/editing"
import { useDefinedContext } from "../../utils/definedContext"
2022-06-06 01:15:44 +00:00
import { FestaIcon } from "../extensions/FestaIcon"
import { FormDateRange } from "../form/FormDateRange"
2022-06-08 15:31:34 +00:00
import { HumanDate } from "../HumanDate"
2022-06-06 01:15:44 +00:00
2022-06-07 11:41:26 +00:00
type EditableDateRangeProps = {
startProps: HTMLProps<HTMLInputElement> & {value?: string},
endProps: HTMLProps<HTMLInputElement> & {value?: string},
}
2022-06-06 01:15:44 +00:00
2022-06-07 11:41:26 +00:00
export function EditableDateRange(props: EditableDateRangeProps) {
const [editing,] = useDefinedContext(EditingContext)
2022-06-08 15:31:34 +00:00
if(editing) {
return (
<FormDateRange
preview={false}
icon={
<FestaIcon icon={faClock}/>
}
start={
<input
type="datetime-local"
{...props.startProps}
/>
}
connector={
<FestaIcon icon={faChevronRight}/>
}
end={
<input
type="datetime-local"
{...props.endProps}
/>
}
/>
)
}
2022-06-07 11:41:26 +00:00
2022-06-08 15:31:34 +00:00
const startTime = Date.parse(props.startProps.value!)
const endTime = Date.parse(props.endProps.value!)
if(Number.isNaN(startTime) && Number.isNaN(endTime)) {
return null
}
const startDate = new Date(startTime)
const endDate = new Date(endTime)
return (
2022-06-06 01:15:44 +00:00
<FormDateRange
2022-06-07 11:41:26 +00:00
preview={true}
2022-06-06 01:15:44 +00:00
icon={
<FestaIcon icon={faClock}/>
}
2022-06-07 11:41:26 +00:00
start={
2022-06-08 15:31:34 +00:00
<HumanDate date={startDate}/>
2022-06-07 11:41:26 +00:00
}
connector={
<FestaIcon icon={faChevronRight}/>
}
end={
2022-06-08 15:31:34 +00:00
<HumanDate date={endDate}/>
2022-06-07 11:41:26 +00:00
}
2022-06-06 01:15:44 +00:00
/>
)
}