sccoreui
Version:
ui-sccore
220 lines (219 loc) • 14.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const calendar_1 = require("primereact/calendar");
const react_1 = require("react");
const button_1 = require("primereact/button");
const dropdown_1 = require("primereact/dropdown");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const DatePicker = (props) => {
const dateRef = (0, react_1.useRef)(null);
const monthCallCount = (0, react_1.useRef)(0);
const yearCallCount = (0, react_1.useRef)(0);
const masterMonthRef = (0, react_1.useRef)(0);
const today = new Date();
const options = { year: 'numeric', month: 'short', day: 'numeric' };
const oneWeekFromToday = new Date(today);
oneWeekFromToday.setDate(today.getDate());
const formattedDate = today.toLocaleDateString('en-US', options);
const [fromDate, setFromDate] = (0, react_1.useState)([]);
const [fromDateFormate, setFromDateFormate] = (0, react_1.useState)(formattedDate);
const [toDateFormate, setToDateFormate] = (0, react_1.useState)('-');
const [propsState, setPropsState] = (0, react_1.useState)({});
// const defaultDate = new Date(2023, 0, 1);
let dateFromTo = [];
const selecteDateOption = (dateType) => {
switch (dateType) {
case 'Today':
dateFromTo.push(today);
// Default date
break;
case 'Yesterday':
dateFromTo.push(today);
const yesterdayFromToday = new Date(today);
yesterdayFromToday.setDate(today.getDate() - 1);
dateFromTo.unshift(yesterdayFromToday);
break;
case 'This week': {
const startWeek = new Date(today);
const endWeek = new Date(today);
startWeek.setDate(today.getDate() - today.getDay());
endWeek.setDate(today.getDate() + (6 - today.getDay()));
dateFromTo.push(startWeek);
dateFromTo.push(endWeek);
break;
}
case 'Last week': {
const startWeek = new Date(today);
const endWeek = new Date(today);
startWeek.setDate(today.getDate() - today.getDay() - 7);
endWeek.setDate(today.getDate() - today.getDay() - 1);
dateFromTo.push(startWeek);
dateFromTo.push(endWeek);
break;
}
case 'This month':
const startMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const endMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
dateFromTo.push(startMonth);
dateFromTo.push(endMonth);
break;
case 'Last month':
const startLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
const endLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
dateFromTo.push(startLastMonth);
dateFromTo.push(endLastMonth);
break;
case 'This year':
const startOfYear = new Date(today.getFullYear(), 0, 1); // January 1st of the current year
const endOfYear = new Date(today.getFullYear(), 11, 31); // December 31st of the current year
dateFromTo.push(startOfYear);
dateFromTo.push(endOfYear);
break;
case 'Last year':
const startOfLastYear = new Date(today.getFullYear() - 1, 0, 1); // January 1st of the last year
const endOfLastYear = new Date(today.getFullYear() - 1, 11, 31); // December 31st of the last year
dateFromTo.push(startOfLastYear);
dateFromTo.push(endOfLastYear);
break;
case 'Custom':
// Default date
dateFromTo.push(today);
break;
}
setFromDate(dateFromTo);
const formatFromDate = dateFromTo[0].toLocaleDateString('en-US', options);
setFromDateFormate(formatFromDate);
if (dateFromTo[1]) {
const formatToDate = dateFromTo[1].toLocaleDateString('en-US', options);
setToDateFormate(formatToDate);
}
else {
setToDateFormate('-');
}
if (props.onChange)
props.onChange(dateFromTo);
};
const template = () => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-end" }, { children: [(0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "list-none date_filter" }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Today') }, { children: "Today" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Yesterday') }, { children: "Yesterday" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This week') }, { children: "This week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last week') }, { children: "Last week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This month') }, { children: "This month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last month') }, { children: "Last month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This year') }, { children: "This year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last year') }, { children: "Last year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Custom') }, { children: "Custom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bottom_date_filters pt-4 px-6 pb-2 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Today", className: "bg-white text-gray-900 border-1 border-gray-300", onClick: () => selecteDateOption('Today') }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: `${fromDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 mr-2 w-7rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-xl" }, { children: "-" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: `${toDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 ml-2 w-7rem" })] }))] }))] })) }));
};
const onChangeDate = (e) => {
if (props.onChange)
props.onChange(e);
};
(0, react_1.useEffect)(() => {
// Pass through every prop to the underlying PrimeReact Calendar, except
// the ones this wrapper handles itself (value/onChange/onClear/clear/
// footerTemplate/iconPos — those are wired explicitly below). This way
// any PrimeReact Calendar prop (monthNavigator, yearNavigator, yearRange,
// minDate, viewDate, inline, readOnlyInput, touchUI, showButtonBar, etc.)
// works without updating the wrapper for each new field.
const EXCLUDE = new Set([
'value', 'onChange', 'onClear', 'clear',
'footerTemplate', 'iconPos', 'icon', 'ref',
]);
const datePickerProps = {};
for (const key in props) {
if (EXCLUDE.has(key))
continue;
datePickerProps[key] = props[key];
}
// Keep the custom SvgComponent icon behaviour for iconPos consumers.
if (props.iconPos) {
datePickerProps['icon'] = (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: props.icon });
}
if (props.showIcon) {
datePickerProps['showIcon'] = true;
}
// Use PrimeReact's monthNavigator/yearNavigator and render PrimeReact
// Dropdowns (styled as plain text) so the user can change month/year
// without switching to a separate picker view. Each navigator template
// is called once per pane in render order, so we use a render counter
// to give pane 2 its actual month/year (PrimeReact otherwise reads
// viewDate.getMonth() for both panes). Consumer values always win.
if (datePickerProps.monthNavigator === undefined) {
datePickerProps.monthNavigator = true;
}
if (datePickerProps.yearNavigator === undefined) {
datePickerProps.yearNavigator = true;
}
if (datePickerProps.yearRange === undefined) {
const cy = new Date().getFullYear();
datePickerProps.yearRange = `${cy - 50}:${cy + 50}`;
}
const numberOfMonths = datePickerProps.numberOfMonths || 1;
if (datePickerProps.monthNavigatorTemplate === undefined) {
datePickerProps.monthNavigatorTemplate = (e) => {
const paneIndex = monthCallCount.current % numberOfMonths;
if (paneIndex === 0)
masterMonthRef.current = e.value;
monthCallCount.current++;
const displayMonth = (e.value + paneIndex) % 12;
const monthOptions = (e.options || []).map((o) => ({
label: String(o.label),
value: o.value,
}));
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: displayMonth, options: monthOptions, onChange: (ev) => {
const newViewMonth = (ev.value - paneIndex + 12) % 12;
e.onChange(ev.originalEvent, newViewMonth);
}, className: "date_nav_dropdown date_nav_dropdown--month", style: { width: 'auto', marginRight: '0.25rem' }, appendTo: "self" }));
};
}
if (datePickerProps.yearNavigatorTemplate === undefined) {
datePickerProps.yearNavigatorTemplate = (e) => {
const paneIndex = yearCallCount.current % numberOfMonths;
yearCallCount.current++;
// Pane 2 rolls into next year only when master month is December.
const displayYear = paneIndex > 0 && masterMonthRef.current + paneIndex > 11
? e.value + 1
: e.value;
const yearOptions = (e.options || []).map((o) => {
const raw = typeof o === 'object' ? o.value : o;
return { label: String(raw), value: raw };
});
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: displayYear, options: yearOptions, onChange: (ev) => {
const newViewYear = paneIndex > 0 && masterMonthRef.current + paneIndex > 11
? ev.value - 1
: ev.value;
e.onChange(ev.originalEvent, newViewYear);
}, className: "date_nav_dropdown date_nav_dropdown--year", style: { width: 'auto' }, appendTo: "self" }));
};
}
// Reset render counters at start of each render cycle so the modulo
// pane index stays correct across re-renders.
monthCallCount.current = 0;
yearCallCount.current = 0;
setPropsState(datePickerProps);
}, [props]);
(0, react_1.useEffect)(() => {
if (props.value !== undefined) {
if (props.value === null) {
setFromDate(null);
return;
}
setFromDate(props.value);
const frmD = props.value[0].toLocaleDateString('en-US', options);
setFromDateFormate(frmD);
if (props.value[1]) {
const toD = props.value[1].toLocaleDateString('en-US', options);
setToDateFormate(toD);
}
else {
setToDateFormate('-');
}
}
}, [props.value]);
const clearIcon = () => {
const onClear = () => {
if (props.onClear)
props.onClear();
};
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center absolute right-20 clear_icon_sec cursor-pointer" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
};
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex justify-content-center w-full relative align-items-center custom_date_picker_sec` }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ ref: dateRef, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: `custom_date_picker ${(!JSON.stringify(fromDate).includes('null') && JSON.stringify(fromDate).includes(',')) ? 'multiple' : ''}` }, propsState, { iconPos: props.iconPos })), (props.clear && JSON.stringify(fromDate).split(',').length > 1) &&
clearIcon()] })));
};
exports.DatePicker = DatePicker;
exports.default = exports.DatePicker;