2022-06-07 11:41:26 +00:00
|
|
|
import { faChevronRight, faClock } from "@fortawesome/free-solid-svg-icons"
|
|
|
|
import { HTMLProps } from "react"
|
2022-06-08 15:38:30 +00:00
|
|
|
import { EditingContext } from "../contexts/editing"
|
2022-06-07 11:41:26 +00:00
|
|
|
import { useDefinedContext } from "../../utils/definedContext"
|
2022-06-06 01:15:44 +00:00
|
|
|
import { FestaIcon } from "../extensions/FestaIcon"
|
2022-06-08 00:12:03 +00:00
|
|
|
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
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|