@quillsql/react 2.8.4 → 2.8.6
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/AddToDashboardModal.js +146 -180
- package/dist/BarList.js +36 -43
- package/dist/Chart.js +99 -131
- package/dist/ChartBuilder.js +80 -88
- package/dist/ChartEditor.js +14 -20
- package/dist/Context.js +52 -56
- package/dist/Dashboard.d.ts.map +1 -1
- package/dist/Dashboard.js +246 -305
- package/dist/DateRangePicker/Calendar.js +41 -45
- package/dist/DateRangePicker/DateRangePicker.js +32 -60
- package/dist/DateRangePicker/DateRangePickerButton.js +14 -16
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts +6 -0
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
- package/dist/DateRangePicker/dateRangePickerUtils.js +89 -89
- package/dist/DateRangePicker/index.js +1 -8
- package/dist/PieChart.js +35 -69
- package/dist/QuillProvider.js +4 -6
- package/dist/ReportBuilder.js +120 -128
- package/dist/SQLEditor.js +56 -64
- package/dist/Table.d.ts +2 -1
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +64 -68
- package/dist/TableChart.js +17 -44
- package/dist/assets/ArrowDownHeadIcon.js +3 -5
- package/dist/assets/ArrowDownIcon.js +3 -5
- package/dist/assets/ArrowDownRightIcon.js +3 -5
- package/dist/assets/ArrowLeftHeadIcon.js +3 -5
- package/dist/assets/ArrowRightHeadIcon.js +3 -5
- package/dist/assets/ArrowRightIcon.js +3 -5
- package/dist/assets/ArrowUpHeadIcon.js +3 -5
- package/dist/assets/ArrowUpIcon.js +3 -5
- package/dist/assets/ArrowUpRightIcon.js +3 -5
- package/dist/assets/CalendarIcon.js +3 -5
- package/dist/assets/CalendarNormalIcon.js +3 -5
- package/dist/assets/DoubleArrowLeftHeadIcon.js +3 -5
- package/dist/assets/DoubleArrowRightHeadIcon.js +3 -5
- package/dist/assets/ExclamationFilledIcon.js +3 -5
- package/dist/assets/FilterIcon.js +3 -5
- package/dist/assets/LoadingSpinner.js +3 -5
- package/dist/assets/RefreshIcon.js +3 -5
- package/dist/assets/SearchIcon.js +3 -5
- package/dist/assets/UpLeftArrowsIcon.js +3 -5
- package/dist/assets/XCircleIcon.js +3 -5
- package/dist/assets/XIcon.js +3 -5
- package/dist/assets/index.js +21 -48
- package/dist/components/BigModal/BigModal.js +13 -38
- package/dist/components/Dropdown/Dropdown.js +24 -52
- package/dist/components/Dropdown/DropdownItem.js +9 -34
- package/dist/components/Dropdown/index.js +2 -10
- package/dist/components/Modal/Modal.js +13 -38
- package/dist/components/Modal/index.js +1 -8
- package/dist/components/QuillCard.js +8 -12
- package/dist/components/SqlTextEditor.d.ts +7 -0
- package/dist/components/SqlTextEditor.d.ts.map +1 -0
- package/dist/components/SqlTextEditor.js +14 -0
- package/dist/components/UiComponents.js +37 -50
- package/dist/components/selectUtils.js +6 -16
- package/dist/contexts/BaseColorContext.js +3 -5
- package/dist/contexts/HoveredValueContext.js +3 -5
- package/dist/contexts/RootStylesContext.js +3 -5
- package/dist/contexts/SelectedValueContext.js +3 -5
- package/dist/contexts/index.js +4 -14
- package/dist/hooks/index.js +4 -14
- package/dist/hooks/useDashboard.d.ts +7 -0
- package/dist/hooks/useDashboard.d.ts.map +1 -0
- package/dist/hooks/useDashboard.js +48 -0
- package/dist/hooks/useInternalState.js +3 -5
- package/dist/hooks/useOnClickOutside.js +3 -5
- package/dist/hooks/useOnWindowResize.js +4 -6
- package/dist/hooks/useQuill.js +11 -15
- package/dist/hooks/useSelectOnKeyDown.js +4 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -28
- package/dist/internals/ReportBuilder/PivotList.js +14 -19
- package/dist/internals/ReportBuilder/PivotModal.js +84 -91
- package/dist/internals/ReportBuilder/PivotModal.spec.js +70 -72
- package/dist/lib/font.js +2 -5
- package/dist/lib/index.js +3 -19
- package/dist/lib/inputTypes.js +1 -2
- package/dist/lib/utils.js +8 -18
- package/dist/utils/aggregate.js +28 -34
- package/dist/utils/colorToHex.js +1 -4
- package/dist/utils/dataFetcher.js +2 -7
- package/dist/utils/downloadCSV.js +1 -5
- package/package.json +2 -4
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.Calendar = exports.colStartClasses = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useContext, useState } from 'react';
|
|
6
3
|
// import { twMerge } from 'tailwind-merge';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
import { add, eachDayOfInterval, endOfMonth, format, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, } from 'date-fns';
|
|
5
|
+
import { BaseColorContext } from '../contexts';
|
|
6
|
+
import { ArrowLeftHeadIcon, ArrowRightHeadIcon, } from '../assets';
|
|
7
|
+
import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
|
|
8
|
+
export const colStartClasses = [
|
|
12
9
|
'',
|
|
13
10
|
'col-start-2',
|
|
14
11
|
'col-start-3',
|
|
@@ -18,36 +15,36 @@ exports.colStartClasses = [
|
|
|
18
15
|
'col-start-7',
|
|
19
16
|
];
|
|
20
17
|
const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth, locale, theme, }) => {
|
|
21
|
-
const firstDayOfMonth =
|
|
18
|
+
const firstDayOfMonth = startOfMonth(anchorDate);
|
|
22
19
|
const handlePaginationClick = (type) => {
|
|
23
20
|
switch (type) {
|
|
24
21
|
case 'nextMonth':
|
|
25
|
-
setStartOfCurrMonth(
|
|
22
|
+
setStartOfCurrMonth(add(firstDayOfMonth, { months: 1 }));
|
|
26
23
|
break;
|
|
27
24
|
case 'prevMonth':
|
|
28
|
-
setStartOfCurrMonth(
|
|
25
|
+
setStartOfCurrMonth(add(firstDayOfMonth, { months: -1 }));
|
|
29
26
|
break;
|
|
30
27
|
case 'nextYear':
|
|
31
|
-
setStartOfCurrMonth(
|
|
28
|
+
setStartOfCurrMonth(add(firstDayOfMonth, { years: 1 }));
|
|
32
29
|
break;
|
|
33
30
|
case 'prevYear':
|
|
34
|
-
setStartOfCurrMonth(
|
|
31
|
+
setStartOfCurrMonth(add(firstDayOfMonth, { years: -1 }));
|
|
35
32
|
break;
|
|
36
33
|
}
|
|
37
34
|
};
|
|
38
|
-
const displayedTitle =
|
|
39
|
-
return ((
|
|
35
|
+
const displayedTitle = capitalize(format(firstDayOfMonth, 'MMMM yyyy', { locale }), locale);
|
|
36
|
+
return (_jsxs("div", { style: {
|
|
40
37
|
display: 'flex',
|
|
41
38
|
justifyContent: 'space-between',
|
|
42
39
|
alignItems: 'center',
|
|
43
40
|
padding: '0.125rem',
|
|
44
41
|
paddingTop: '0.25rem',
|
|
45
42
|
paddingBottom: '0.25rem',
|
|
46
|
-
}, children: [(
|
|
43
|
+
}, children: [_jsx("div", { style: {
|
|
47
44
|
display: 'flex',
|
|
48
45
|
alignItems: 'center',
|
|
49
46
|
gap: '0.25rem',
|
|
50
|
-
}, children: (
|
|
47
|
+
}, children: _jsx("button", { style: {
|
|
51
48
|
borderStyle: 'solid',
|
|
52
49
|
borderBottomWidth: 1,
|
|
53
50
|
borderBottomColor: theme?.borderColor || '#E5E7EB',
|
|
@@ -65,21 +62,21 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
|
|
|
65
62
|
outline: enableYearPagination ? 'none' : '2px solid transparent',
|
|
66
63
|
outlineOffset: '2px',
|
|
67
64
|
cursor: 'pointer',
|
|
68
|
-
}, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: (
|
|
65
|
+
}, type: "button", name: "prevMonth", onClick: () => handlePaginationClick('prevMonth'), children: _jsx(ArrowLeftHeadIcon, { style: {
|
|
69
66
|
height: '1.25rem',
|
|
70
67
|
width: '1.25rem',
|
|
71
68
|
color: theme?.primaryTextColor || '#364153',
|
|
72
|
-
}, "aria-hidden": "true" }) }) }), (
|
|
69
|
+
}, "aria-hidden": "true" }) }) }), _jsx("h2", { style: {
|
|
73
70
|
color: theme?.textColor || '#364153',
|
|
74
71
|
fontSize: '14px',
|
|
75
72
|
fontFamily: theme?.fontFamily,
|
|
76
73
|
fontWeight: '700',
|
|
77
|
-
}, children: displayedTitle }), (
|
|
74
|
+
}, children: displayedTitle }), _jsx("div", { style: {
|
|
78
75
|
display: 'flex',
|
|
79
76
|
alignItems: 'center',
|
|
80
77
|
marginRight: '0.25rem',
|
|
81
78
|
marginLeft: '0.25rem',
|
|
82
|
-
}, children: (
|
|
79
|
+
}, children: _jsx("button", { style: {
|
|
83
80
|
borderStyle: 'solid',
|
|
84
81
|
borderBottomWidth: 1,
|
|
85
82
|
borderBottomColor: theme?.borderColor || '#E5E7EB',
|
|
@@ -97,25 +94,25 @@ const CalendarHeader = ({ enableYearPagination, anchorDate, setStartOfCurrMonth,
|
|
|
97
94
|
outline: enableYearPagination ? 'none' : '2px solid transparent',
|
|
98
95
|
outlineOffset: '2px',
|
|
99
96
|
cursor: 'pointer',
|
|
100
|
-
}, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: (
|
|
97
|
+
}, type: "button", name: "nextMonth", onClick: () => handlePaginationClick('nextMonth'), children: _jsx(ArrowRightHeadIcon, { style: {
|
|
101
98
|
height: '1.25rem',
|
|
102
99
|
width: '1.25rem',
|
|
103
100
|
color: theme?.primaryTextColor || '#364153',
|
|
104
101
|
}, "aria-hidden": "true" }) }) })] }));
|
|
105
102
|
};
|
|
106
103
|
const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateClick, minDate, maxDate, locale, theme, }) => {
|
|
107
|
-
const [hoveredDate, setHoveredDate] =
|
|
108
|
-
const color =
|
|
109
|
-
const firstDayOfDisplayedMonth =
|
|
110
|
-
const lastDayOfDisplayedMonth =
|
|
111
|
-
const weekdays =
|
|
112
|
-
const displayedDates =
|
|
113
|
-
start:
|
|
104
|
+
const [hoveredDate, setHoveredDate] = useState();
|
|
105
|
+
const color = useContext(BaseColorContext);
|
|
106
|
+
const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
|
|
107
|
+
const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
|
|
108
|
+
const weekdays = getWeekdays(locale).map(dayName => capitalize(dayName, locale));
|
|
109
|
+
const displayedDates = eachDayOfInterval({
|
|
110
|
+
start: isSunday(firstDayOfDisplayedMonth)
|
|
114
111
|
? firstDayOfDisplayedMonth
|
|
115
|
-
:
|
|
116
|
-
end:
|
|
112
|
+
: previousSunday(firstDayOfDisplayedMonth),
|
|
113
|
+
end: isSaturday(lastDayOfDisplayedMonth)
|
|
117
114
|
? lastDayOfDisplayedMonth
|
|
118
|
-
:
|
|
115
|
+
: nextSaturday(lastDayOfDisplayedMonth),
|
|
119
116
|
});
|
|
120
117
|
const isDateDisabled = (date, minDate, maxDate, firstDayDisplayedMonth, lastDayDisplayedMonth) => {
|
|
121
118
|
const isDateInDisplayedMonth = date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
|
|
@@ -123,27 +120,27 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
|
|
|
123
120
|
(maxDate !== null && date > maxDate) ||
|
|
124
121
|
!isDateInDisplayedMonth);
|
|
125
122
|
};
|
|
126
|
-
return ((
|
|
123
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
|
|
127
124
|
color: theme?.primaryTextColor || '#364153',
|
|
128
125
|
textAlign: 'center',
|
|
129
126
|
fontSize: '0.75rem',
|
|
130
127
|
fontWeight: '500',
|
|
131
128
|
display: 'grid',
|
|
132
129
|
gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
|
|
133
|
-
}, children: weekdays.map(dayName => ((
|
|
130
|
+
}, children: weekdays.map(dayName => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
|
|
134
131
|
display: 'flex',
|
|
135
132
|
alignItems: 'center',
|
|
136
133
|
justifyContent: 'center',
|
|
137
134
|
width: '100%',
|
|
138
135
|
height: '2.25rem',
|
|
139
136
|
fontFamily: theme?.fontFamily,
|
|
140
|
-
}, children: dayName }) }, dayName))) }), (
|
|
137
|
+
}, children: dayName }) }, dayName))) }), _jsx("div", { style: {
|
|
141
138
|
display: 'grid',
|
|
142
139
|
gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
|
|
143
140
|
paddingBottom: 8,
|
|
144
141
|
}, children: displayedDates.map(date => {
|
|
145
142
|
const isCurrentDateDisabled = isDateDisabled(date, minDate, maxDate, firstDayOfDisplayedMonth, lastDayOfDisplayedMonth);
|
|
146
|
-
return ((
|
|
143
|
+
return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
|
|
147
144
|
border: 'none',
|
|
148
145
|
height: '1.5rem',
|
|
149
146
|
display: 'flex',
|
|
@@ -151,21 +148,20 @@ const CalendarBody = ({ anchorDate, selectedStartDate, selectedEndDate, onDateCl
|
|
|
151
148
|
alignItems: 'center',
|
|
152
149
|
justifyContent: 'center',
|
|
153
150
|
fontFamily: theme?.fontFamily,
|
|
154
|
-
...
|
|
151
|
+
...getDateStyles(theme, date, selectedStartDate, selectedEndDate, hoveredDate, isCurrentDateDisabled),
|
|
155
152
|
}, type: "button", onClick: () => {
|
|
156
153
|
onDateClick(date);
|
|
157
154
|
}, onPointerEnter: () => setHoveredDate?.(date), onPointerLeave: () => setHoveredDate?.(undefined),
|
|
158
155
|
// className={twMerge(fontSize.sm)}
|
|
159
|
-
disabled: isCurrentDateDisabled, children: (
|
|
156
|
+
disabled: isCurrentDateDisabled, children: _jsx("time", { dateTime: format(date, 'yyyy-MM-dd', { locale }), children: format(date, 'd', { locale }) }) }) }, date.toString()));
|
|
160
157
|
}) })] }));
|
|
161
158
|
};
|
|
162
|
-
function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
|
|
163
|
-
return ((
|
|
159
|
+
export function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }) {
|
|
160
|
+
return (_jsxs("div", { style: {
|
|
164
161
|
paddingLeft: '0.75rem',
|
|
165
162
|
paddingRight: '0.75rem',
|
|
166
163
|
paddingTop: '0.25rem',
|
|
167
164
|
paddingBottom: '0.25rem',
|
|
168
|
-
}, children: [(
|
|
165
|
+
}, children: [_jsx(CalendarHeader, { enableYearPagination: enableYearPagination, anchorDate: anchorDate, setStartOfCurrMonth: setStartOfCurrMonth, locale: locale, theme: theme }), _jsx(CalendarBody, { anchorDate: anchorDate, selectedStartDate: startDate, selectedEndDate: endDate, onDateClick: onDateClick, minDate: minDate, maxDate: maxDate, locale: locale, theme: theme })] }));
|
|
169
166
|
}
|
|
170
|
-
|
|
171
|
-
exports.default = Calendar;
|
|
167
|
+
export default Calendar;
|
|
@@ -1,59 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
2
|
/* eslint-disable react/display-name */
|
|
31
3
|
// @ts-nocheck
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const DateRangePicker =
|
|
43
|
-
const { dateRange, preset, onChangeDateRange, onChangePreset, presetOptions, enableDropdown = true, options, minDate = null, maxDate = null, placeholder = 'Select', dropdownPlaceholder = 'Select', disabled = false, color = 'blue', enableYearPagination = false, locale =
|
|
44
|
-
const TODAY =
|
|
45
|
-
const calendarRef =
|
|
46
|
-
const dropdownRef =
|
|
47
|
-
const [selectedValue, setSelectedValue] =
|
|
4
|
+
import React, { useRef, useState } from 'react';
|
|
5
|
+
import { startOfMonth, startOfToday } from 'date-fns';
|
|
6
|
+
import { enUS } from 'date-fns/locale';
|
|
7
|
+
import { BaseColorContext, HoveredValueContext, SelectedValueContext, } from '../contexts';
|
|
8
|
+
import { useSelectOnKeyDown } from '../hooks';
|
|
9
|
+
import { getEndDateByDropdownValue, getStartDateByDropdownValue, parseEndDate, parseStartDate, } from './dateRangePickerUtils';
|
|
10
|
+
import Calendar from './Calendar';
|
|
11
|
+
import DateRangePickerButton from './DateRangePickerButton';
|
|
12
|
+
import { DropdownItem } from '../components/Dropdown';
|
|
13
|
+
import Modal from '../components/Modal';
|
|
14
|
+
const DateRangePicker = React.forwardRef((props, ref) => {
|
|
15
|
+
const { dateRange, preset, onChangeDateRange, onChangePreset, presetOptions, enableDropdown = true, options, minDate = null, maxDate = null, placeholder = 'Select', dropdownPlaceholder = 'Select', disabled = false, color = 'blue', enableYearPagination = false, locale = enUS, className, theme, ...other } = props;
|
|
16
|
+
const TODAY = startOfToday();
|
|
17
|
+
const calendarRef = useRef(null);
|
|
18
|
+
const dropdownRef = useRef(null);
|
|
19
|
+
const [selectedValue, setSelectedValue] = useState([
|
|
48
20
|
dateRange[0],
|
|
49
21
|
dateRange[1],
|
|
50
22
|
preset || null,
|
|
51
23
|
]);
|
|
52
|
-
const [startOfCurrMonth, setStartOfCurrMonth] =
|
|
53
|
-
const [showCalendar, setShowCalendar] =
|
|
54
|
-
const [showDropdown, setShowDropdown] =
|
|
55
|
-
const [startDateInCalendar, setStartDateInCalendar] =
|
|
56
|
-
const [endDateInCalendar, setEndDateInCalendar] =
|
|
24
|
+
const [startOfCurrMonth, setStartOfCurrMonth] = useState(null);
|
|
25
|
+
const [showCalendar, setShowCalendar] = useState(false);
|
|
26
|
+
const [showDropdown, setShowDropdown] = useState(false);
|
|
27
|
+
const [startDateInCalendar, setStartDateInCalendar] = useState(null);
|
|
28
|
+
const [endDateInCalendar, setEndDateInCalendar] = useState(null);
|
|
57
29
|
// const dropdownOptions = [
|
|
58
30
|
// {
|
|
59
31
|
// value: 'placeholder',
|
|
@@ -65,10 +37,10 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
|
|
|
65
37
|
? selectedValue[2] ?? null
|
|
66
38
|
: null;
|
|
67
39
|
const selectedStartDate = selectedValue
|
|
68
|
-
?
|
|
40
|
+
? parseStartDate(selectedValue[0], minDate, selectedDropdownValue, presetOptions)
|
|
69
41
|
: null;
|
|
70
42
|
const selectedEndDate = selectedValue
|
|
71
|
-
?
|
|
43
|
+
? parseEndDate(selectedValue[1], maxDate, selectedDropdownValue, presetOptions)
|
|
72
44
|
: null;
|
|
73
45
|
const anchorDate = startOfCurrMonth ?? selectedEndDate ?? selectedStartDate ?? TODAY;
|
|
74
46
|
const handleDateClick = (date) => {
|
|
@@ -131,20 +103,20 @@ const DateRangePicker = react_1.default.forwardRef((props, ref) => {
|
|
|
131
103
|
setShowDropdown(false);
|
|
132
104
|
return;
|
|
133
105
|
}
|
|
134
|
-
const selectedStartDate =
|
|
135
|
-
const selectedEndDate =
|
|
106
|
+
const selectedStartDate = getStartDateByDropdownValue(dropdownValue, presetOptions);
|
|
107
|
+
const selectedEndDate = getEndDateByDropdownValue(dropdownValue, presetOptions);
|
|
136
108
|
setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
|
|
137
109
|
// onChangeDateRange([selectedStartDate, selectedEndDate]);
|
|
138
110
|
onChangePreset(presetOptions?.find(elem => elem.value === dropdownValue));
|
|
139
|
-
setStartOfCurrMonth(
|
|
111
|
+
setStartOfCurrMonth(startOfMonth(selectedEndDate));
|
|
140
112
|
setShowDropdown(false);
|
|
141
113
|
};
|
|
142
|
-
const [hoveredDropdownValue, handleDropdownKeyDown] =
|
|
143
|
-
return ((
|
|
114
|
+
const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, presetOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
|
|
115
|
+
return (_jsx(BaseColorContext.Provider, { value: color, children: _jsxs("div", { ref: ref, style: { position: 'relative', width: '100%' }, ...other, children: [_jsx(DateRangePickerButton, { value: [selectedStartDate, selectedEndDate, selectedDropdownValue], options: presetOptions, placeholder: placeholder, disabled: disabled, calendarRef: calendarRef, showCalendar: showCalendar, setShowCalendar: setShowCalendar, onCalendarKeyDown: handleCalendarKeyDown, enableDropdown: enableDropdown, dropdownRef: dropdownRef, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownKeyDown: handleDropdownKeyDown, locale: locale, dropdownPlaceholder: dropdownPlaceholder, theme: theme }), _jsx(Modal, { theme: theme, showModal: showCalendar, setShowModal: setShowCalendar, parentRef: calendarRef, width: 288, maxHeight: "fit-content", children: _jsx(Calendar, { enableYearPagination: enableYearPagination, anchorDate: anchorDate,
|
|
144
116
|
// setAnchorDate={setAnchorDate}
|
|
145
|
-
startDate: startDateInCalendar, endDate: endDateInCalendar, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth, theme: theme }) }), (
|
|
117
|
+
startDate: startDateInCalendar, endDate: endDateInCalendar, minDate: minDate, maxDate: maxDate, onDateClick: handleDateClick, locale: locale, setStartOfCurrMonth: setStartOfCurrMonth, theme: theme }) }), _jsx(Modal, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: _jsx(SelectedValueContext.Provider, { value: {
|
|
146
118
|
selectedValue: selectedDropdownValue,
|
|
147
119
|
handleValueChange: handleDropdownOptionClick,
|
|
148
|
-
}, children: (
|
|
120
|
+
}, children: _jsx(HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: presetOptions.map(({ value, text }, index) => (_jsx(DropdownItem, { value: value, text: text, theme: theme, lastItem: presetOptions.length - 1 === index }, value))) }) }) })] }) }));
|
|
149
121
|
});
|
|
150
|
-
|
|
122
|
+
export default DateRangePicker;
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const dateRangePickerUtils_1 = require("./dateRangePickerUtils");
|
|
6
|
-
const selectUtils_1 = require("../components/selectUtils");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
|
|
3
|
+
import { formatSelectedDates } from './dateRangePickerUtils';
|
|
4
|
+
import { hasValue } from '../components/selectUtils';
|
|
7
5
|
const DateRangePickerButton = ({ value, options, placeholder, disabled, calendarRef, showCalendar, setShowCalendar, onCalendarKeyDown, enableDropdown, dropdownRef, showDropdown, setShowDropdown, onDropdownKeyDown, locale, dropdownPlaceholder = 'Select', theme, }) => {
|
|
8
6
|
const [startDate, endDate, dropdownValue] = value;
|
|
9
7
|
const hasDateSelection = (startDate || endDate) !== null && (startDate || endDate) !== undefined;
|
|
10
|
-
const hasDropdownSelection =
|
|
8
|
+
const hasDropdownSelection = hasValue(dropdownValue);
|
|
11
9
|
const calendarText = hasDateSelection
|
|
12
|
-
?
|
|
10
|
+
? formatSelectedDates(startDate, endDate, locale)
|
|
13
11
|
: placeholder;
|
|
14
12
|
const dropdownText = dropdownValue
|
|
15
13
|
? String(options.find(option => option.value === dropdownValue)?.text)
|
|
16
14
|
: dropdownPlaceholder;
|
|
17
|
-
return ((
|
|
15
|
+
return (_jsxs("div", { style: {
|
|
18
16
|
display: 'flex',
|
|
19
17
|
alignItems: 'center',
|
|
20
18
|
justifyContent: 'space-between',
|
|
@@ -22,7 +20,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
22
20
|
background: theme?.backgroundColor,
|
|
23
21
|
fontFamily: theme?.fontFamily,
|
|
24
22
|
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
25
|
-
}, children: [(
|
|
23
|
+
}, children: [_jsxs("button", { type: "button", style: {
|
|
26
24
|
fontFamily: theme?.fontFamily,
|
|
27
25
|
borderColor: theme?.borderColor || '#E5E7EB',
|
|
28
26
|
borderStyle: 'solid',
|
|
@@ -63,14 +61,14 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
63
61
|
// borderRadius.md.left,
|
|
64
62
|
// border.sm.all
|
|
65
63
|
// )}
|
|
66
|
-
disabled: disabled, children: [(
|
|
64
|
+
disabled: disabled, children: [_jsx(CalendarIcon, { style: {
|
|
67
65
|
flex: 'none',
|
|
68
66
|
color: theme?.secondaryTextColor,
|
|
69
67
|
height: '1.25rem',
|
|
70
68
|
width: '1.25rem',
|
|
71
69
|
// marginLeft: '0.125rem',
|
|
72
70
|
marginRight: '0.75rem',
|
|
73
|
-
}, "aria-hidden": "true" }), (
|
|
71
|
+
}, "aria-hidden": "true" }), _jsx("p", { style: {
|
|
74
72
|
margin: 0,
|
|
75
73
|
fontFamily: theme?.fontFamily,
|
|
76
74
|
color: theme?.primaryTextColor,
|
|
@@ -79,7 +77,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
79
77
|
whiteSpace: 'nowrap',
|
|
80
78
|
fontWeight: theme?.fontWeightMedium || '500',
|
|
81
79
|
fontSize: theme?.fontSizeSmall || '14px',
|
|
82
|
-
}, children: calendarText })] }), enableDropdown ? ((
|
|
80
|
+
}, children: calendarText })] }), enableDropdown ? (_jsxs("button", { type: "button", style: {
|
|
83
81
|
// fontFamily: theme?.fontFamily,
|
|
84
82
|
borderColor: theme?.borderColor || '#E5E7EB',
|
|
85
83
|
borderStyle: 'solid',
|
|
@@ -116,7 +114,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
116
114
|
// borderRadius.md.right,
|
|
117
115
|
// border.sm.all
|
|
118
116
|
// )}
|
|
119
|
-
onKeyDown: onDropdownKeyDown, disabled: disabled, children: [(
|
|
117
|
+
onKeyDown: onDropdownKeyDown, disabled: disabled, children: [_jsx("p", { style: {
|
|
120
118
|
margin: 0,
|
|
121
119
|
fontFamily: theme?.fontFamily,
|
|
122
120
|
// fontFamily: 'Avenir',
|
|
@@ -127,7 +125,7 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
127
125
|
fontWeight: theme?.fontWeightMedium || '500',
|
|
128
126
|
fontSize: theme?.fontSizeSmall || '14px',
|
|
129
127
|
// background: 'red',
|
|
130
|
-
}, children: dropdownText }), (
|
|
128
|
+
}, children: dropdownText }), _jsx(ArrowDownHeadIcon, { style: {
|
|
131
129
|
height: '20px',
|
|
132
130
|
width: '20px',
|
|
133
131
|
flex: 'none',
|
|
@@ -135,4 +133,4 @@ const DateRangePickerButton = ({ value, options, placeholder, disabled, calendar
|
|
|
135
133
|
marginRight: '-4px',
|
|
136
134
|
}, "aria-hidden": "true" })] })) : null] }));
|
|
137
135
|
};
|
|
138
|
-
|
|
136
|
+
export default DateRangePickerButton;
|
|
@@ -19,6 +19,12 @@ type QuillDateRange = {
|
|
|
19
19
|
export declare const PRIMARY_RANGE: {
|
|
20
20
|
[key: string]: QuillDateRange | null;
|
|
21
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* Maps between the keys of primary range and the short code.
|
|
24
|
+
*/
|
|
25
|
+
export declare const PRIMARY_CODES: {
|
|
26
|
+
[key: keyof typeof PRIMARY_RANGE]: string;
|
|
27
|
+
};
|
|
22
28
|
/**
|
|
23
29
|
* A helpful map between comparison range keys and a function that takes the
|
|
24
30
|
* start date of the primary range (which is also the end date for our
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;CASjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,cAAc,GAAG,IAAI,CAAC;CAmBjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAGhD,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}
|
|
1
|
+
{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../src/DateRangePicker/dateRangePickerUtils.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;CASjE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,cAAc,GAAG,IAAI,CAAC;CAmBjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAGhD,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC;;AAEF,yEAAyE"}
|