sccoreui
Version:
ui-sccore
165 lines (164 loc) • 10.9 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 svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const DatePicker = (props) => {
const dateRef = (0, react_1.useRef)(null);
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)(() => {
const datePickerProps = {};
for (let key in props) {
switch (key) {
case 'iconPos':
// datePickerProps['iconPos'] = props.iconPos
datePickerProps['icon'] = (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: props.icon });
break;
case 'numberOfMonths':
datePickerProps['numberOfMonths'] = props.numberOfMonths;
break;
case 'dateFormat':
datePickerProps['dateFormat'] = props.dateFormat;
break;
case 'selectionMode':
datePickerProps['selectionMode'] = props.selectionMode;
break;
case 'placeholder':
datePickerProps['placeholder'] = props.placeholder;
break;
case 'maxDate':
datePickerProps['maxDate'] = props.maxDate;
break;
case 'className':
datePickerProps['className'] = props.className;
break;
case 'showIcon':
datePickerProps['showIcon'] = true;
break;
}
}
setPropsState(datePickerProps);
}, []);
(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;