111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
|
|
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
|
|
import { MdKeyboardArrowDown } from "react-icons/md";
|
|
import dayjs from "dayjs";
|
|
|
|
const dateTimeFormatMap = {
|
|
"date": dateFormats,
|
|
"time": timeFormats,
|
|
"date_time": dateTimeFormats,
|
|
"year": yearFormats,
|
|
"month": monthFormats,
|
|
"week": weekFormats
|
|
}
|
|
|
|
interface TemporalDateAttrInt {
|
|
subType: string;
|
|
format: string | undefined;
|
|
dropDownToggle: DROPDOWNTOGGLE | null;
|
|
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
|
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
|
|
}
|
|
|
|
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
|
|
|
|
|
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
|
|
|
const handleIs24HrsClick = (checked: boolean) => {
|
|
if (subType === TEMPORAL.TIME) {
|
|
if (!checked) {
|
|
handlePropertyChange("format", timeFormats[1].format, is24Hrs)
|
|
} else {
|
|
handlePropertyChange("format", timeFormats[0].format, is24Hrs)
|
|
}
|
|
}
|
|
setIs24Hrs(checked)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (format === timeFormats[1].format && is24Hrs) {
|
|
setIs24Hrs(false);
|
|
} else if (format === timeFormats[0].format && !is24Hrs) {
|
|
setIs24Hrs(true);
|
|
}
|
|
}, [format])
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between">
|
|
<label htmlFor="" className="">Formats</label>
|
|
{(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) &&
|
|
<div className="flex justify-center items-center gap-1.5">
|
|
<input
|
|
checked={is24Hrs ? is24Hrs : false}
|
|
onChange={(e) => handleIs24HrsClick(e.target.checked)}
|
|
id="data_time_format"
|
|
type="checkbox" />
|
|
<label className={`text-xs ${is24Hrs ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`} htmlFor="data_time_format">
|
|
24 Hrs
|
|
</label>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
|
|
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
|
<p className="cursor-pointer py-1">
|
|
{format ? format : dateTimeFormatMap['date'][0].format}
|
|
{/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
|
</p>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
{
|
|
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
|
|
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
|
|
{dateTimeFormatMap[subType].map((valObj, indx) => {
|
|
// let val = showFormatEg ? valObj["example"] : valObj["format"]
|
|
let val = valObj["format"]
|
|
if (subType === TEMPORAL.DATE_TIME) {
|
|
if (is24Hrs) {
|
|
val = val + " " + timeFormats[0].format;
|
|
} else {
|
|
val = val + " " + timeFormats[1].format;
|
|
}
|
|
}
|
|
console.log('line 89' , val )
|
|
return (
|
|
<div
|
|
key={indx}
|
|
onClick={() => handlePropertyChange("format", valObj["format"])}
|
|
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
|
>
|
|
{val}
|
|
</div>
|
|
)
|
|
}
|
|
)}
|
|
</div>
|
|
}
|
|
|
|
{format && <div className="pt-4">
|
|
<p className="text-center">{dayjs().format(format)}</p>
|
|
</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TemporalDateAttr |