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

59 lines
1.7 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-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)
const startDate = props.startProps
return editing ? (
<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-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={
new Date(Date.parse(props.startProps.value!)).toLocaleString()
}
connector={
<FestaIcon icon={faChevronRight}/>
}
end={
new Date(Date.parse(props.endProps.value!)).toLocaleString()
}
2022-06-06 01:15:44 +00:00
/>
)
}