@secondstaxorg/sscomp 1.0.9 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +289 -42
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DatePicker/style.d.ts +6 -1
- package/dist/components/DatePicker/style.d.ts.map +1 -1
- package/dist/components/DatePicker/style.js +18 -3
- package/dist/components/DatePicker/style.js.map +1 -1
- package/dist/components/DatePicker/type.d.ts +23 -7
- package/dist/components/DatePicker/type.d.ts.map +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +295 -44
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +5 -5
- package/dist/index.min.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -17447,19 +17447,31 @@ var CurrencyPairsTable = function (props) {
|
|
|
17447
17447
|
React$1.createElement("p", null, "Currency pairs will be displayed here when you have any.")))));
|
|
17448
17448
|
};
|
|
17449
17449
|
|
|
17450
|
-
var DatePickerComp = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n \n position: absolute;\n width:
|
|
17450
|
+
var DatePickerComp = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n \n position: absolute;\n width: ", ";\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"], ["\n \n position: absolute;\n width: ", ";\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"])), function (_a) {
|
|
17451
|
+
var range = _a.range;
|
|
17452
|
+
return (range ? "650px" : "300px");
|
|
17453
|
+
}, theme.colors.white, theme.colors["white"], function (_a) {
|
|
17451
17454
|
var calendarPosition = _a.calendarPosition;
|
|
17452
17455
|
return calendarPosition.topOffset < 150 ? "bottom: 421px;" : "top: -100px;";
|
|
17453
17456
|
}, function (_a) {
|
|
17454
17457
|
var calendarPosition = _a.calendarPosition;
|
|
17455
17458
|
return calendarPosition.leftOffset < 150 ? "right: 0px;" : "left: 0px;";
|
|
17456
17459
|
});
|
|
17457
|
-
var DateCellContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n :hover {\n border-color: black;\n }\n ", "\n ", "\n \n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n }\n\n .month {\n color: grey;\n }\n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n :hover {\n border-color: black;\n }\n ", "\n ", "\n \n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n }\n\n .month {\n color: grey;\n }\n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"])), function (_a) {
|
|
17460
|
+
var DateCellContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n ", "\n :hover {\n border-color: black;\n }\n ", "\n ", "\n ", "\n *{\n ", "\n }\n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n &.invalid {\n pointer-events: none;\n }\n }\n\n .month {\n color: grey;\n }\n\n \n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n ", "\n :hover {\n border-color: black;\n }\n ", "\n ", "\n ", "\n *{\n ", "\n }\n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n &.invalid {\n pointer-events: none;\n }\n }\n\n .month {\n color: grey;\n }\n\n \n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"])), function (_a) {
|
|
17461
|
+
var fallsWithinRange = _a.fallsWithinRange;
|
|
17462
|
+
return fallsWithinRange && "background-color: ".concat(theme.colors["black-100"]);
|
|
17463
|
+
}, function (_a) {
|
|
17458
17464
|
var selected = _a.selected;
|
|
17459
17465
|
return selected && "background-color: ".concat(theme.colors["black"], ";");
|
|
17460
17466
|
}, function (_a) {
|
|
17461
17467
|
var selected = _a.selected;
|
|
17462
17468
|
return selected && "border-radius: 50%;";
|
|
17469
|
+
}, function (_a) {
|
|
17470
|
+
var notSelectable = _a.notSelectable;
|
|
17471
|
+
return notSelectable && "cursor: not-allowed !important;";
|
|
17472
|
+
}, function (_a) {
|
|
17473
|
+
var selected = _a.selected;
|
|
17474
|
+
return selected && "color:white !important";
|
|
17463
17475
|
}, function (_a) {
|
|
17464
17476
|
var selected = _a.selected;
|
|
17465
17477
|
return selected && "color:white";
|
|
@@ -17468,7 +17480,10 @@ var DateCellContainer = styled.div(templateObject_2$x || (templateObject_2$x = _
|
|
|
17468
17480
|
return selected ? "white" : "".concat(theme.colors["black"]);
|
|
17469
17481
|
});
|
|
17470
17482
|
var TimePickerComp = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 8px;\n grid-row-gap: 0;\n padding: 10px;\n margin-top: 12px;\n border-top: 1px solid ", ";\n\n .timepicker_hours {\n \n }\n \n .tsc ul{\n border:1px solid ", ";\n border-radius:8px;\n }\n\n ul {\n height: 64px;\n overflow-y: scroll;\n padding: 2px;\n }\n li {\n cursor: pointer;\n list-style: none;\n padding: 3px;\n border-radius: 1px;\n\n &.selected {\n background-color: ", ";\n color: white;\n }\n\n &:hover {\n background-color: ", ";\n color: white;\n }\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 8px;\n grid-row-gap: 0;\n padding: 10px;\n margin-top: 12px;\n border-top: 1px solid ", ";\n\n .timepicker_hours {\n \n }\n \n .tsc ul{\n border:1px solid ", ";\n border-radius:8px;\n }\n\n ul {\n height: 64px;\n overflow-y: scroll;\n padding: 2px;\n }\n li {\n cursor: pointer;\n list-style: none;\n padding: 3px;\n border-radius: 1px;\n\n &.selected {\n background-color: ", ";\n color: white;\n }\n\n &:hover {\n background-color: ", ";\n color: white;\n }\n }\n"])), theme.colors["neutral-200"], theme.colors["neutral-200"], theme.colors["neutral-900"], theme.colors["neutral-400"]);
|
|
17471
|
-
var DatePickerContainer = styled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n position: relative;\n width:
|
|
17483
|
+
var DatePickerContainer = styled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n position: relative;\n width: ", ";\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n padding: 2px 4px;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n \n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"], ["\n display: flex;\n position: relative;\n width: ", ";\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n padding: 2px 4px;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n \n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"])), function (_a) {
|
|
17484
|
+
var width = _a.width;
|
|
17485
|
+
return (width ? "".concat(width, "px") : "100%");
|
|
17486
|
+
}, theme.colors["primary-500"], theme.colors["primary-300"], theme.colors["error-500"], theme.colors["neutral-200"]);
|
|
17472
17487
|
var templateObject_1$E, templateObject_2$x, templateObject_3$p, templateObject_4$m;
|
|
17473
17488
|
|
|
17474
17489
|
var setupDates = function () {
|
|
@@ -17560,16 +17575,16 @@ var setupDates = function () {
|
|
|
17560
17575
|
var final = [];
|
|
17561
17576
|
for (var y = 1; y <= f; y++) {
|
|
17562
17577
|
var h = {
|
|
17563
|
-
|
|
17564
|
-
|
|
17578
|
+
month: Months[curMonth - 1],
|
|
17579
|
+
day: y,
|
|
17565
17580
|
isMonth: new Date().getFullYear() == curYear &&
|
|
17566
17581
|
new Date().getMonth() + 1 == curMonth,
|
|
17567
17582
|
isToday: y == today &&
|
|
17568
17583
|
new Date().getFullYear() == curYear &&
|
|
17569
17584
|
new Date().getMonth() + 1 == curMonth,
|
|
17570
|
-
|
|
17571
|
-
|
|
17572
|
-
|
|
17585
|
+
dayName: days[getDaysOfWeek(new Date(curYear, curMonth - 1, y).getDay(), days)],
|
|
17586
|
+
year: curYear,
|
|
17587
|
+
date: new Date(curYear, curMonth - 1, y),
|
|
17573
17588
|
};
|
|
17574
17589
|
final.push(h);
|
|
17575
17590
|
}
|
|
@@ -17583,25 +17598,24 @@ var setupDates = function () {
|
|
|
17583
17598
|
var final = this.getDateData(year, month);
|
|
17584
17599
|
return final.slice(0, daysToCut);
|
|
17585
17600
|
},
|
|
17586
|
-
renderDateToShow: function (data) {
|
|
17587
|
-
},
|
|
17601
|
+
renderDateToShow: function (data) { },
|
|
17588
17602
|
};
|
|
17589
17603
|
};
|
|
17590
17604
|
var DatePickerCalendar = function (props) {
|
|
17591
17605
|
var _a = React$1.useState(new Date().getMonth() + 1), currentMonth = _a[0], setCurrentMonth = _a[1];
|
|
17592
17606
|
var _b = React$1.useState(new Date().getFullYear()), currentYear = _b[0], setCurrentYear = _b[1];
|
|
17593
|
-
var _c = React$1.useState(new Date())
|
|
17607
|
+
var _c = React$1.useState(new Date().getMonth() + 1), currentMonth2 = _c[0], setCurrentMonth2 = _c[1];
|
|
17608
|
+
var _d = React$1.useState(new Date().getFullYear()), currentYear2 = _d[0], setCurrentYear2 = _d[1];
|
|
17594
17609
|
var calendarRef = reactExports.useRef(null);
|
|
17595
|
-
var parentRef = props.parentRef, showCalendar = props.showCalendar, onDateChange = props.onDateChange, showTime = props.showTime;
|
|
17610
|
+
var parentRef = props.parentRef, showCalendar = props.showCalendar, onDateChange = props.onDateChange, showTime = props.showTime, range = props.range, fromDate = props.fromDate, toDate = props.toDate, dateObject = props.dateObject;
|
|
17596
17611
|
useOutsideAlerter(parentRef, calendarRef, showCalendar);
|
|
17597
|
-
var applyDate = function (date) {
|
|
17598
|
-
};
|
|
17612
|
+
var applyDate = function (date) { };
|
|
17599
17613
|
var g = setupDates();
|
|
17600
17614
|
var renderDate = function (thismonth) {
|
|
17601
17615
|
var refactored = [];
|
|
17602
|
-
var first = g.getDayNamesTrimmed().indexOf(thismonth[0].
|
|
17616
|
+
var first = g.getDayNamesTrimmed().indexOf(thismonth[0].dayName);
|
|
17603
17617
|
var last = g.getDayNames().length -
|
|
17604
|
-
(g.getDayNamesTrimmed().indexOf(thismonth[thismonth.length - 1].
|
|
17618
|
+
(g.getDayNamesTrimmed().indexOf(thismonth[thismonth.length - 1].dayName) +
|
|
17605
17619
|
1);
|
|
17606
17620
|
var prevdays = g.getPreviousMonthDays(currentYear, currentMonth - 1, first);
|
|
17607
17621
|
var nextdays = g.getNextMonthDays(currentYear, currentMonth + 1, last);
|
|
@@ -17614,7 +17628,7 @@ var DatePickerCalendar = function (props) {
|
|
|
17614
17628
|
}
|
|
17615
17629
|
return refactored;
|
|
17616
17630
|
};
|
|
17617
|
-
return (React$1.createElement(DatePickerComp, { ref: calendarRef, showTime: props.showTime, calendarPosition: props.position },
|
|
17631
|
+
return (React$1.createElement(DatePickerComp, { ref: calendarRef, showTime: props.showTime, calendarPosition: props.position, range: range },
|
|
17618
17632
|
React$1.createElement("div", { className: "date" },
|
|
17619
17633
|
React$1.createElement("div", { className: "calendar_head" },
|
|
17620
17634
|
React$1.createElement("svg", { onClick: function () {
|
|
@@ -17657,16 +17671,147 @@ var DatePickerCalendar = function (props) {
|
|
|
17657
17671
|
React$1.createElement("tbody", null, renderDate(g.getDateData(currentYear, currentMonth)).map(function (g, ind) {
|
|
17658
17672
|
return (React$1.createElement("tr", { key: ind }, g.map(function (v, m) {
|
|
17659
17673
|
return (React$1.createElement("td", { key: m },
|
|
17660
|
-
React$1.createElement(Cell, {
|
|
17674
|
+
React$1.createElement(Cell, { endCalendar: false, startCalendar: true, fromDate: fromDate, toDate: toDate, dateObject: dateObject, onDateChange: function (d) {
|
|
17675
|
+
if (range) {
|
|
17676
|
+
onDateChange(d, range, d, undefined);
|
|
17677
|
+
return;
|
|
17678
|
+
}
|
|
17679
|
+
onDateChange(d, range, undefined, undefined);
|
|
17680
|
+
}, selectDate: applyDate, day: v })));
|
|
17661
17681
|
})));
|
|
17662
17682
|
}))))),
|
|
17663
|
-
|
|
17664
|
-
React$1.createElement("div", { className: "
|
|
17665
|
-
React$1.createElement(
|
|
17683
|
+
range && (React$1.createElement("div", { className: "date2" },
|
|
17684
|
+
React$1.createElement("div", { className: "calendar_head" },
|
|
17685
|
+
React$1.createElement("svg", { onClick: function () {
|
|
17686
|
+
if (currentMonth2 === 1) {
|
|
17687
|
+
setCurrentMonth2(12);
|
|
17688
|
+
setCurrentYear2(currentYear2 - 1);
|
|
17689
|
+
}
|
|
17690
|
+
else {
|
|
17691
|
+
setCurrentMonth2(currentMonth2 - 1);
|
|
17692
|
+
}
|
|
17693
|
+
}, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
17694
|
+
React$1.createElement("g", { clipPath: "url(#clip0_783_5845)" },
|
|
17695
|
+
React$1.createElement("path", { d: "M11.29 12L14.83 8.46001C15.0163 8.27265 15.1208 8.0192 15.1208 7.75501C15.1208 7.49082 15.0163 7.23737 14.83 7.05001C14.737 6.95628 14.6264 6.88189 14.5046 6.83112C14.3827 6.78035 14.252 6.75421 14.12 6.75421C13.988 6.75421 13.8573 6.78035 13.7354 6.83112C13.6136 6.88189 13.503 6.95628 13.41 7.05001L9.17 11.29C9.07628 11.383 9.00188 11.4936 8.95111 11.6154C8.90035 11.7373 8.87421 11.868 8.87421 12C8.87421 12.132 8.90035 12.2627 8.95111 12.3846C9.00188 12.5064 9.07628 12.617 9.17 12.71L13.41 17C13.5034 17.0927 13.6143 17.166 13.7361 17.2158C13.8579 17.2655 13.9884 17.2908 14.12 17.29C14.2516 17.2908 14.3821 17.2655 14.5039 17.2158C14.6257 17.166 14.7366 17.0927 14.83 17C15.0163 16.8126 15.1208 16.5592 15.1208 16.295C15.1208 16.0308 15.0163 15.7774 14.83 15.59L11.29 12Z", fill: "#070B12" })),
|
|
17696
|
+
React$1.createElement("defs", null,
|
|
17697
|
+
React$1.createElement("clipPath", { id: "clip0_783_5845" },
|
|
17698
|
+
React$1.createElement("rect", { width: "24", height: "24", fill: "white" })))),
|
|
17699
|
+
React$1.createElement("div", { className: "calendar_head_month_year" },
|
|
17700
|
+
React$1.createElement("h5", { className: "calendar_head_month_name" }, g.getMonthName(currentMonth2 - 1)),
|
|
17701
|
+
React$1.createElement("h5", { className: "calendar_head_year" }, currentYear)),
|
|
17702
|
+
React$1.createElement("svg", { onClick: function () {
|
|
17703
|
+
if (currentMonth == 12) {
|
|
17704
|
+
setCurrentMonth2(1);
|
|
17705
|
+
setCurrentYear2(currentYear2 + 1);
|
|
17706
|
+
}
|
|
17707
|
+
else {
|
|
17708
|
+
setCurrentMonth2(currentMonth2 + 1);
|
|
17709
|
+
}
|
|
17710
|
+
}, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
17711
|
+
React$1.createElement("g", { clipPath: "url(#clip0_783_5847)" },
|
|
17712
|
+
React$1.createElement("path", { d: "M14.83 11.29L10.59 7.05001C10.497 6.95628 10.3864 6.88189 10.2646 6.83112C10.1427 6.78035 10.012 6.75421 9.88 6.75421C9.74799 6.75421 9.61729 6.78035 9.49543 6.83112C9.37357 6.88189 9.26297 6.95628 9.17 7.05001C8.98375 7.23737 8.87921 7.49082 8.87921 7.75501C8.87921 8.0192 8.98375 8.27265 9.17 8.46001L12.71 12L9.17 15.54C8.98375 15.7274 8.87921 15.9808 8.87921 16.245C8.87921 16.5092 8.98375 16.7626 9.17 16.95C9.26344 17.0427 9.37426 17.116 9.4961 17.1658C9.61794 17.2155 9.7484 17.2408 9.88 17.24C10.0116 17.2408 10.1421 17.2155 10.2639 17.1658C10.3857 17.116 10.4966 17.0427 10.59 16.95L14.83 12.71C14.9237 12.617 14.9981 12.5064 15.0489 12.3846C15.0997 12.2627 15.1258 12.132 15.1258 12C15.1258 11.868 15.0997 11.7373 15.0489 11.6154C14.9981 11.4936 14.9237 11.383 14.83 11.29Z", fill: "#070B12" })),
|
|
17713
|
+
React$1.createElement("defs", null,
|
|
17714
|
+
React$1.createElement("clipPath", { id: "clip0_783_5847" },
|
|
17715
|
+
React$1.createElement("rect", { width: "24", height: "24", fill: "white" }))))),
|
|
17716
|
+
React$1.createElement("div", { className: "datepicker_main" },
|
|
17717
|
+
React$1.createElement("table", null,
|
|
17718
|
+
React$1.createElement("thead", null,
|
|
17719
|
+
React$1.createElement("tr", null, g.getDayNames().map(function (day, index) {
|
|
17720
|
+
return React$1.createElement("th", { key: index }, day.substring(0, 3));
|
|
17721
|
+
}))),
|
|
17722
|
+
React$1.createElement("tbody", null, renderDate(g.getDateData(currentYear2, currentMonth2)).map(function (g, ind) {
|
|
17723
|
+
return (React$1.createElement("tr", { key: ind }, g.map(function (v, m) {
|
|
17724
|
+
return (React$1.createElement("td", { key: m },
|
|
17725
|
+
React$1.createElement(Cell, { startCalendar: false, endCalendar: true, fromDate: fromDate, toDate: toDate, dateObject: dateObject, onDateChange: function (d) {
|
|
17726
|
+
if (range) {
|
|
17727
|
+
onDateChange(d, range, undefined, d);
|
|
17728
|
+
return;
|
|
17729
|
+
}
|
|
17730
|
+
onDateChange(d, undefined, undefined, undefined);
|
|
17731
|
+
}, selectDate: applyDate, day: v })));
|
|
17732
|
+
})));
|
|
17733
|
+
})))))),
|
|
17734
|
+
showTime && (React$1.createElement("div", { className: "time" },
|
|
17735
|
+
React$1.createElement(TimePicker, { onTimeChange: props.onTimeChange })))));
|
|
17666
17736
|
};
|
|
17667
17737
|
var TimePicker = function (props) {
|
|
17668
|
-
var _a = React$1.useState([
|
|
17669
|
-
|
|
17738
|
+
var _a = React$1.useState([
|
|
17739
|
+
"00",
|
|
17740
|
+
"01",
|
|
17741
|
+
"02",
|
|
17742
|
+
"03",
|
|
17743
|
+
"04",
|
|
17744
|
+
"05",
|
|
17745
|
+
"06",
|
|
17746
|
+
"07",
|
|
17747
|
+
"08",
|
|
17748
|
+
"09",
|
|
17749
|
+
"10",
|
|
17750
|
+
"11",
|
|
17751
|
+
"12",
|
|
17752
|
+
]), hours = _a[0]; _a[1];
|
|
17753
|
+
var _b = React$1.useState([
|
|
17754
|
+
"00",
|
|
17755
|
+
"01",
|
|
17756
|
+
"02",
|
|
17757
|
+
"03",
|
|
17758
|
+
"04",
|
|
17759
|
+
"05",
|
|
17760
|
+
"06",
|
|
17761
|
+
"07",
|
|
17762
|
+
"08",
|
|
17763
|
+
"09",
|
|
17764
|
+
"10",
|
|
17765
|
+
"11",
|
|
17766
|
+
"12",
|
|
17767
|
+
"13",
|
|
17768
|
+
"14",
|
|
17769
|
+
"15",
|
|
17770
|
+
"16",
|
|
17771
|
+
"17",
|
|
17772
|
+
"18",
|
|
17773
|
+
"19",
|
|
17774
|
+
"20",
|
|
17775
|
+
"21",
|
|
17776
|
+
"22",
|
|
17777
|
+
"23",
|
|
17778
|
+
"24",
|
|
17779
|
+
"25",
|
|
17780
|
+
"26",
|
|
17781
|
+
"27",
|
|
17782
|
+
"28",
|
|
17783
|
+
"29",
|
|
17784
|
+
"30",
|
|
17785
|
+
"31",
|
|
17786
|
+
"32",
|
|
17787
|
+
"33",
|
|
17788
|
+
"34",
|
|
17789
|
+
"35",
|
|
17790
|
+
"36",
|
|
17791
|
+
"37",
|
|
17792
|
+
"38",
|
|
17793
|
+
"39",
|
|
17794
|
+
"40",
|
|
17795
|
+
"41",
|
|
17796
|
+
"42",
|
|
17797
|
+
"43",
|
|
17798
|
+
"44",
|
|
17799
|
+
"45",
|
|
17800
|
+
"46",
|
|
17801
|
+
"47",
|
|
17802
|
+
"48",
|
|
17803
|
+
"49",
|
|
17804
|
+
"50",
|
|
17805
|
+
"51",
|
|
17806
|
+
"52",
|
|
17807
|
+
"53",
|
|
17808
|
+
"54",
|
|
17809
|
+
"55",
|
|
17810
|
+
"56",
|
|
17811
|
+
"57",
|
|
17812
|
+
"58",
|
|
17813
|
+
"59",
|
|
17814
|
+
]), minutes = _b[0]; _b[1];
|
|
17670
17815
|
var _c = React$1.useState("00"), selectedHour = _c[0], setSelectedHour = _c[1];
|
|
17671
17816
|
var _d = React$1.useState("00"), selectedMinute = _d[0], setSelectedMinute = _d[1];
|
|
17672
17817
|
var _e = React$1.useState(""), selectedAmPm = _e[0], setSelectedAmPm = _e[1];
|
|
@@ -17707,14 +17852,44 @@ var TimePicker = function (props) {
|
|
|
17707
17852
|
} }, "PM"))))));
|
|
17708
17853
|
};
|
|
17709
17854
|
var Cell = function (props) {
|
|
17710
|
-
var
|
|
17711
|
-
var
|
|
17712
|
-
|
|
17713
|
-
|
|
17855
|
+
var selectDate = props.selectDate, day = props.day, onDateChange = props.onDateChange, fromDate = props.fromDate, toDate = props.toDate, startCalendar = props.startCalendar, endCalendar = props.endCalendar, dateObject = props.dateObject;
|
|
17856
|
+
var st = (startCalendar && toDate && new Date(toDate) < day.date ? true : false) ||
|
|
17857
|
+
(startCalendar && fromDate && new Date(fromDate) < day.date ? true : false);
|
|
17858
|
+
var fal = (fromDate &&
|
|
17859
|
+
toDate &&
|
|
17860
|
+
day.date > new Date(fromDate) &&
|
|
17861
|
+
day.date < new Date(toDate)) ? true : false;
|
|
17862
|
+
var selected = dateObject.date && !dateObject.range && dateObject.date == day.date;
|
|
17863
|
+
selected = function (v) {
|
|
17864
|
+
if (dateObject.range) {
|
|
17865
|
+
if (startCalendar && dateObject.fromDate) {
|
|
17866
|
+
var y = new Date(dateObject.fromDate).valueOf() - new Date(day.date).valueOf();
|
|
17867
|
+
if (!y) {
|
|
17868
|
+
return true;
|
|
17869
|
+
}
|
|
17870
|
+
else {
|
|
17871
|
+
return false;
|
|
17872
|
+
}
|
|
17873
|
+
}
|
|
17874
|
+
if (endCalendar && dateObject.toDate) {
|
|
17875
|
+
var y = new Date(dateObject.toDate).valueOf() - new Date(day.date).valueOf();
|
|
17876
|
+
if (!y) {
|
|
17877
|
+
return true;
|
|
17878
|
+
}
|
|
17879
|
+
else {
|
|
17880
|
+
return false;
|
|
17881
|
+
}
|
|
17882
|
+
}
|
|
17883
|
+
}
|
|
17884
|
+
return v;
|
|
17885
|
+
}(selected);
|
|
17886
|
+
return (React$1.createElement(DateCellContainer, { fallsWithinRange: fal, notSelectable: st, selected: selected, onClick: function () {
|
|
17714
17887
|
selectDate(props.day);
|
|
17715
|
-
onDateChange(props.day.
|
|
17888
|
+
onDateChange(props.day.date);
|
|
17716
17889
|
} },
|
|
17717
|
-
React$1.createElement("p", { className: "".concat(props.day.isToday ? "today" : "").concat(props.day.isMonth ? "" : "month")
|
|
17890
|
+
React$1.createElement("p", { className: "".concat(props.day.isToday ? "today" : "").concat(props.day.isMonth ? "" : "month", " ").concat(startCalendar && toDate && new Date(toDate) < day.date
|
|
17891
|
+
? "invalid"
|
|
17892
|
+
: "") }, props.day.day)));
|
|
17718
17893
|
};
|
|
17719
17894
|
function useOutsideAlerter(ref, refSec, setActiveCalendar) {
|
|
17720
17895
|
reactExports.useEffect(function () {
|
|
@@ -17723,7 +17898,10 @@ function useOutsideAlerter(ref, refSec, setActiveCalendar) {
|
|
|
17723
17898
|
*/
|
|
17724
17899
|
function handleClickOutside(event) {
|
|
17725
17900
|
// console.log(event.target, refSec.current, refSec.current.contains(event.target));
|
|
17726
|
-
if (ref.current &&
|
|
17901
|
+
if (ref.current &&
|
|
17902
|
+
!ref.current.contains(event.target) &&
|
|
17903
|
+
refSec.current &&
|
|
17904
|
+
!refSec.current.contains(event.target)) {
|
|
17727
17905
|
setActiveCalendar(false);
|
|
17728
17906
|
}
|
|
17729
17907
|
}
|
|
@@ -17736,44 +17914,117 @@ function useOutsideAlerter(ref, refSec, setActiveCalendar) {
|
|
|
17736
17914
|
}, [ref]);
|
|
17737
17915
|
}
|
|
17738
17916
|
var DatePicker = function (props) {
|
|
17739
|
-
var active = props.active, _a = props.placeholder, placeholder = _a === void 0 ? "Select date" : _a, showTime = props.showTime, onDateChange = props.onDateChange;
|
|
17917
|
+
var active = props.active, _a = props.placeholder, placeholder = _a === void 0 ? "Select date" : _a, showTime = props.showTime, onDateChange = props.onDateChange, width = props.width, range = props.range;
|
|
17740
17918
|
// const [dateSelected, setDateSelected] = React.useState(new Date());
|
|
17741
|
-
var _b = React$1.useState(
|
|
17742
|
-
|
|
17743
|
-
|
|
17744
|
-
|
|
17745
|
-
|
|
17746
|
-
|
|
17919
|
+
var _b = React$1.useState({
|
|
17920
|
+
year: new Date().getFullYear(),
|
|
17921
|
+
month: new Date().getMonth().toLocaleString(),
|
|
17922
|
+
date: new Date(),
|
|
17923
|
+
isToday: true,
|
|
17924
|
+
isMonth: true,
|
|
17925
|
+
day: new Date().getDate(),
|
|
17926
|
+
dayName: "",
|
|
17927
|
+
}), dateObject = _b[0], setDateObject = _b[1];
|
|
17928
|
+
var _c = React$1.useState(""), dateSelected = _c[0], setDateSelected = _c[1];
|
|
17929
|
+
var _d = React$1.useState(""), formattedDate = _d[0], setFormattedDate = _d[1];
|
|
17930
|
+
var _e = React$1.useState(""), fromDate = _e[0], setFromDate = _e[1];
|
|
17931
|
+
var _f = React$1.useState(""), toDate = _f[0], setToDate = _f[1];
|
|
17932
|
+
var _g = React$1.useState(""), userInput = _g[0], setUserInput = _g[1];
|
|
17933
|
+
var _h = React$1.useState(false), activeCalendar = _h[0], setActiveCalendar = _h[1];
|
|
17934
|
+
var _j = React$1.useState(""), localTime = _j[0], setLocalTime = _j[1];
|
|
17935
|
+
var _k = React$1.useState(false); _k[0]; _k[1];
|
|
17936
|
+
var _l = React$1.useState({
|
|
17747
17937
|
topOffset: 0,
|
|
17748
17938
|
leftOffset: 0,
|
|
17749
|
-
}), position =
|
|
17939
|
+
}), position = _l[0], setPosition = _l[1];
|
|
17750
17940
|
var wrapperRef = reactExports.useRef(null);
|
|
17751
17941
|
var formatDateAndTime = function (date, time) {
|
|
17752
17942
|
if (!showTime)
|
|
17753
17943
|
time = "";
|
|
17944
|
+
if (range && fromDate && toDate) {
|
|
17945
|
+
return "".concat(fromDate.getMonth() + 1, "/").concat(fromDate.getDate(), "/").concat(fromDate.getFullYear(), " - ").concat(toDate.getMonth() + 1, "/").concat(toDate.getDate(), "/").concat(toDate.getFullYear());
|
|
17946
|
+
}
|
|
17947
|
+
if (range && fromDate && !toDate) {
|
|
17948
|
+
return "".concat(fromDate.getMonth() + 1, "/").concat(fromDate.getDate(), "/").concat(fromDate.getFullYear());
|
|
17949
|
+
}
|
|
17754
17950
|
return new Date("".concat(date.getMonth() + 1, "/").concat(date.getDate(), "/").concat(date.getFullYear(), " ").concat(time));
|
|
17755
17951
|
};
|
|
17756
|
-
var
|
|
17757
|
-
|
|
17952
|
+
var formatDateRange = function (fromDate, toDate) {
|
|
17953
|
+
return "".concat(fromDate.getMonth() + 1, "/").concat(fromDate.getDate(), "/").concat(fromDate.getFullYear(), " - ").concat(toDate.getMonth() + 1, "/").concat(toDate.getDate(), "/").concat(toDate.getFullYear());
|
|
17954
|
+
};
|
|
17955
|
+
var dateChanged = function (date, range, fd, td) {
|
|
17956
|
+
if (range) {
|
|
17957
|
+
if (fd) {
|
|
17958
|
+
setFromDate(fd);
|
|
17959
|
+
}
|
|
17960
|
+
if (td) {
|
|
17961
|
+
setToDate(td);
|
|
17962
|
+
}
|
|
17963
|
+
}
|
|
17964
|
+
var obj = __assign$1(__assign$1(__assign$1(__assign$1(__assign$1({}, dateObject), { range: range }), (fd && { fromDate: fd })), (td && { toDate: td })), (date && { date: date }));
|
|
17965
|
+
setDateObject(obj);
|
|
17966
|
+
if (fromDate && toDate && range) {
|
|
17967
|
+
setActiveCalendar(false);
|
|
17968
|
+
}
|
|
17969
|
+
else if (range && (!fromDate || !toDate)) {
|
|
17970
|
+
return;
|
|
17971
|
+
}
|
|
17758
17972
|
if (!showTime)
|
|
17759
17973
|
setActiveCalendar(false);
|
|
17760
17974
|
};
|
|
17975
|
+
// useEffect(()=>{
|
|
17976
|
+
// if(!fromSelect && fromDate && toDate){
|
|
17977
|
+
// setActiveCalendar(false)
|
|
17978
|
+
// setFromDate('')
|
|
17979
|
+
// setToDate('')
|
|
17980
|
+
// }
|
|
17981
|
+
// },[fromSelect])
|
|
17982
|
+
reactExports.useEffect(function () {
|
|
17983
|
+
if (fromDate && toDate && range) {
|
|
17984
|
+
setDateSelected("".concat(fromDate.getMonth() + 1, "/").concat(fromDate.getDate(), "/").concat(fromDate.getFullYear(), " - ").concat(toDate.getMonth() + 1, "/").concat(toDate.getDate(), "/").concat(toDate.getFullYear()));
|
|
17985
|
+
setActiveCalendar(false);
|
|
17986
|
+
}
|
|
17987
|
+
}, [toDate, fromDate]);
|
|
17761
17988
|
var timeChanged = function (hour, minute, ampm) {
|
|
17762
17989
|
setLocalTime(" ".concat(hour, ":").concat(minute, " ").concat(ampm));
|
|
17763
17990
|
if (ampm) {
|
|
17764
17991
|
setActiveCalendar(false);
|
|
17765
17992
|
}
|
|
17766
17993
|
};
|
|
17994
|
+
var clearDates = function () {
|
|
17995
|
+
setFromDate('');
|
|
17996
|
+
setToDate('');
|
|
17997
|
+
setDateSelected('');
|
|
17998
|
+
setFormattedDate('');
|
|
17999
|
+
setDateObject({
|
|
18000
|
+
year: new Date().getFullYear(),
|
|
18001
|
+
month: new Date().getMonth().toLocaleString(),
|
|
18002
|
+
date: new Date(),
|
|
18003
|
+
isToday: true,
|
|
18004
|
+
isMonth: true,
|
|
18005
|
+
day: new Date().getDate(),
|
|
18006
|
+
dayName: "",
|
|
18007
|
+
});
|
|
18008
|
+
};
|
|
17767
18009
|
// dateInput function which is an input event
|
|
17768
18010
|
var dateInput = function (e) {
|
|
17769
18011
|
setUserInput(e.target.value);
|
|
17770
18012
|
};
|
|
17771
18013
|
var inputFocused = function (event) {
|
|
17772
18014
|
setActiveCalendar(true);
|
|
18015
|
+
clearDates();
|
|
17773
18016
|
};
|
|
18017
|
+
React$1.useEffect(function () { }, [userInput]);
|
|
17774
18018
|
React$1.useEffect(function () {
|
|
17775
|
-
|
|
17776
|
-
|
|
18019
|
+
if (fromDate && toDate && range) {
|
|
18020
|
+
// onDateChange(
|
|
18021
|
+
// formatDateAndTime(dateSelected, localTime),
|
|
18022
|
+
// new Date(fromDate),
|
|
18023
|
+
// new Date(toDate)
|
|
18024
|
+
// );
|
|
18025
|
+
setFormattedDate(formatDateRange(fromDate, toDate));
|
|
18026
|
+
return;
|
|
18027
|
+
}
|
|
17777
18028
|
if (dateSelected) {
|
|
17778
18029
|
onDateChange(formatDateAndTime(dateSelected, localTime));
|
|
17779
18030
|
setFormattedDate(formatDateAndTime(dateSelected, localTime).toLocaleString());
|
|
@@ -17784,7 +18035,7 @@ var DatePicker = function (props) {
|
|
|
17784
18035
|
setActiveCalendar(true);
|
|
17785
18036
|
}
|
|
17786
18037
|
}, []);
|
|
17787
|
-
return (React$1.createElement(DatePickerContainer,
|
|
18038
|
+
return (React$1.createElement(DatePickerContainer, { width: width },
|
|
17788
18039
|
React$1.createElement("div", { ref: function (element) {
|
|
17789
18040
|
if (element) {
|
|
17790
18041
|
var rect = element.getBoundingClientRect();
|
|
@@ -17806,7 +18057,7 @@ var DatePicker = function (props) {
|
|
|
17806
18057
|
React$1.createElement("defs", null,
|
|
17807
18058
|
React$1.createElement("clipPath", { id: "clip0_1118_153" },
|
|
17808
18059
|
React$1.createElement("rect", { width: "24", height: "24", fill: "white" })))))),
|
|
17809
|
-
activeCalendar && (React$1.createElement(DatePickerCalendar, { showTime: showTime, onTimeChange: timeChanged, parentRef: wrapperRef, showCalendar: setActiveCalendar, position: position, onDateChange: dateChanged, selectedDate: dateSelected }))));
|
|
18060
|
+
activeCalendar && (React$1.createElement(DatePickerCalendar, { showTime: showTime, onTimeChange: timeChanged, parentRef: wrapperRef, showCalendar: setActiveCalendar, position: position, onDateChange: dateChanged, selectedDate: dateSelected, fromDate: fromDate, toDate: toDate, dateObject: dateObject, range: range }))));
|
|
17810
18061
|
};
|
|
17811
18062
|
|
|
17812
18063
|
var FieldContainer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n"])));
|