@tap-payments/os-micro-frontend-shared 0.1.170-test.2 → 0.1.171-test.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/build/components/RangeCalender/RangeCalender.js +17 -8
- package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.d.ts +2 -6
- package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js +24 -22
- package/build/components/RangeCalender/components/CustomTimepicker/style.d.ts +1 -1
- package/build/components/RangeCalender/utils.d.ts +3 -1
- package/build/components/RangeCalender/utils.js +2 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.js +1 -3
- package/package.json +2 -2
|
@@ -13,8 +13,10 @@ import QuickFilters from './components/QuickFilters';
|
|
|
13
13
|
import RangeDatePicker from './components/RangeDatepicker';
|
|
14
14
|
import CustomTimezone from './components/Timezone';
|
|
15
15
|
import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
|
|
16
|
+
import CustomTimepicker from './components/CustomTimepicker';
|
|
17
|
+
import { getEndOfDate, getStartOfDate } from './utils';
|
|
16
18
|
function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }) {
|
|
17
|
-
const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
|
|
19
|
+
const [dates, setDates] = useState([new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[0]), new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[1])]);
|
|
18
20
|
const [values, setValues] = useState(dates);
|
|
19
21
|
const [selectedTimezone, setSelectedTimezone] = useState(timezone);
|
|
20
22
|
const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
|
|
@@ -35,7 +37,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
35
37
|
if (!open) {
|
|
36
38
|
if (numberOfMonths === 1)
|
|
37
39
|
return;
|
|
38
|
-
setValues([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
|
|
40
|
+
setValues([new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[0]), new DateObject(defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate[1])]);
|
|
39
41
|
}
|
|
40
42
|
}, [open]);
|
|
41
43
|
useEffect(() => {
|
|
@@ -45,13 +47,20 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
45
47
|
onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(newTimezone);
|
|
46
48
|
onChangeTimezoneHistory === null || onChangeTimezoneHistory === void 0 ? void 0 : onChangeTimezoneHistory(newTimezone);
|
|
47
49
|
};
|
|
48
|
-
const formatDate = (date) => new Date(date.
|
|
50
|
+
const formatDate = (date) => new Date(date.toDate().toLocaleString('en-us', {
|
|
49
51
|
timeZone: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone,
|
|
50
52
|
}));
|
|
51
53
|
const submitDate = () => {
|
|
52
54
|
setDates(values);
|
|
53
55
|
onCloseCalender();
|
|
54
|
-
|
|
56
|
+
let newDates;
|
|
57
|
+
if (values[0].dayOfYear === values[1].dayOfYear) {
|
|
58
|
+
newDates = [formatDate(values[0]), formatDate(values[1])];
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
newDates = [formatDate(getStartOfDate(values[0])), formatDate(getEndOfDate(values[1]))];
|
|
62
|
+
}
|
|
63
|
+
onDateChange([newDates[0], newDates[1]], timezone === null || timezone === void 0 ? void 0 : timezone.offset);
|
|
55
64
|
onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
|
|
56
65
|
updateTimezone(selectedTimezone);
|
|
57
66
|
};
|
|
@@ -65,8 +74,8 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
65
74
|
setValues(newDate);
|
|
66
75
|
return;
|
|
67
76
|
}
|
|
68
|
-
const startDate = newDate[0].toDate();
|
|
69
|
-
const endDate = newDate[1].toDate();
|
|
77
|
+
const startDate = getStartOfDate(newDate[0]).toDate();
|
|
78
|
+
const endDate = getEndOfDate(newDate[1]).toDate();
|
|
70
79
|
const numberOfDays = dayjs(endDate).diff(startDate, 'day');
|
|
71
80
|
if (numberOfDays <= maxDateRange) {
|
|
72
81
|
setValues(newDate);
|
|
@@ -79,7 +88,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
79
88
|
}, 3000);
|
|
80
89
|
};
|
|
81
90
|
const onChangeQuickFilter = (newValues) => {
|
|
82
|
-
setValues(newValues);
|
|
91
|
+
setValues([getStartOfDate(newValues[0]), getEndOfDate(newValues[1])]);
|
|
83
92
|
if (calendarRef.current)
|
|
84
93
|
calendarRef.current.set({ date: newValues[0] });
|
|
85
94
|
};
|
|
@@ -88,6 +97,6 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
88
97
|
onCloseCalender();
|
|
89
98
|
} })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end" }, popperProps, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
|
|
90
99
|
setSelectedGroupBy(group);
|
|
91
|
-
} })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
|
|
100
|
+
} })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsx(CustomTimepicker, { values: values, setValues: setValues }), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
|
|
92
101
|
}
|
|
93
102
|
export default RangeCalender;
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import { DateObject } from 'react-multi-date-picker';
|
|
2
1
|
import { Dates } from '../../type';
|
|
3
2
|
interface CustomTimePickerProps {
|
|
4
3
|
values: Dates;
|
|
5
|
-
|
|
6
|
-
endTime: DateObject;
|
|
7
|
-
onChangeStartTime: (value: DateObject) => void;
|
|
8
|
-
onChangeEndTime: (value: DateObject) => void;
|
|
4
|
+
setValues: (values: Dates) => void;
|
|
9
5
|
}
|
|
10
|
-
declare function CustomTimePicker({ values,
|
|
6
|
+
declare function CustomTimePicker({ values, setValues, }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
7
|
export default CustomTimePicker;
|
|
@@ -1,33 +1,35 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { useTranslation } from 'react-i18next';
|
|
4
4
|
import DatePicker, { DateObject } from 'react-multi-date-picker';
|
|
5
5
|
import TimePicker from 'react-multi-date-picker/plugins/time_picker';
|
|
6
6
|
import { IOSSwitch } from '../../../index.js';
|
|
7
7
|
import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const [
|
|
8
|
+
import { getEndOfDate } from '../../utils';
|
|
9
|
+
function CustomTimePicker({ values, setValues, }) {
|
|
10
|
+
const [isAllDay, setIsAllDay] = useState();
|
|
11
|
+
// const [lastTime, setLastTime] = useState<DateObject[]>(values)
|
|
12
|
+
const fromDate = new DateObject(values[0]);
|
|
13
|
+
const toDate = new DateObject(values[1] || values[0]);
|
|
11
14
|
const { t } = useTranslation();
|
|
12
15
|
useEffect(() => {
|
|
13
|
-
if (
|
|
14
|
-
setIsAllDay(
|
|
16
|
+
if (values)
|
|
17
|
+
setIsAllDay(fromDate.dayOfYear === toDate.dayOfYear && fromDate.hour === 0 && fromDate.minute === 0 && toDate.hour === 23 && toDate.minute === 59);
|
|
15
18
|
}, [values]);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] })] }))] }) })) }));
|
|
19
|
+
if (new DateObject(values[0]).dayOfYear !== new DateObject(values[1]).dayOfYear)
|
|
20
|
+
return null;
|
|
21
|
+
return (_jsx(TimeArea, { children: _jsxs(TimeAreaInner, { children: [_jsxs(AllDayStyled, Object.assign({ isAllDay: isAllDay }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('allDay') })), _jsx(IOSSwitch, { checked: isAllDay, onChange: (e) => {
|
|
22
|
+
setIsAllDay(!isAllDay);
|
|
23
|
+
if (e.target.checked) {
|
|
24
|
+
setValues([getEndOfDate(values[0]), getEndOfDate(values[1])]);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
setValues(values);
|
|
28
|
+
}
|
|
29
|
+
} })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: values[0], onChange: (time) => {
|
|
30
|
+
setValues([time, values[1]]);
|
|
31
|
+
}, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] }), _jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: values[1], onChange: (time) => {
|
|
32
|
+
setValues([values[0], time]);
|
|
33
|
+
}, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] })] }))] }) }));
|
|
32
34
|
}
|
|
33
35
|
export default CustomTimePicker;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export declare const AllDayStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
4
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
5
|
-
isAllDay
|
|
5
|
+
isAllDay?: boolean | undefined;
|
|
6
6
|
}, {}, {}>;
|
|
7
7
|
export declare const TimeArea: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import DateObject from 'react-date-object';
|
|
2
2
|
export declare const getLocale: ({ isHijri, isAr }: {
|
|
3
3
|
isHijri: boolean;
|
|
4
4
|
isAr?: boolean | undefined;
|
|
5
5
|
}) => import("react-date-object").Locale;
|
|
6
6
|
export declare const getCalender: (isHijri: boolean) => import("react-date-object").Calendar;
|
|
7
|
+
export declare const getStartOfDate: (date: DateObject) => DateObject;
|
|
8
|
+
export declare const getEndOfDate: (date: DateObject) => DateObject;
|
|
@@ -13,3 +13,5 @@ export const getLocale = ({ isHijri, isAr = false }) => {
|
|
|
13
13
|
export const getCalender = (isHijri) => {
|
|
14
14
|
return isHijri ? arabic : gregorian;
|
|
15
15
|
};
|
|
16
|
+
export const getStartOfDate = (date) => date.setHour(0).setMinute(0).setSecond(0);
|
|
17
|
+
export const getEndOfDate = (date) => date.setHour(23).setMinute(59).setSecond(59);
|
|
@@ -19,7 +19,6 @@ import { TableCell } from '../../../TableCells';
|
|
|
19
19
|
import { segmentsIcons } from './constant';
|
|
20
20
|
import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
|
|
21
21
|
import IconWithBadge from '../../../IconWithBadge';
|
|
22
|
-
import { getSegmentTooltip } from './utils';
|
|
23
22
|
function SegmentsCell(_a) {
|
|
24
23
|
var { isTextShown, segments } = _a, props = __rest(_a, ["isTextShown", "segments"]);
|
|
25
24
|
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
|
@@ -27,10 +26,9 @@ function SegmentsCell(_a) {
|
|
|
27
26
|
const ReferenceSources = useMemo(() => segments === null || segments === void 0 ? void 0 : segments.filter((segment) => !!segment.name).map((segment, index) => {
|
|
28
27
|
var _a, _b;
|
|
29
28
|
const isPlatformSegment = (_b = (_a = segment.type) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a).includes('platform');
|
|
30
|
-
const sourceTooltip = segment.tooltip ||
|
|
29
|
+
const sourceTooltip = segment.tooltip || segment.name;
|
|
31
30
|
const segmentType = segment.type;
|
|
32
31
|
const icon = isPlatformSegment ? segmentsIcons.platform : segmentsIcons[segmentType];
|
|
33
|
-
console.log(segment.icon, icon);
|
|
34
32
|
return (_jsx(Tooltip, Object.assign({ onOpen: () => {
|
|
35
33
|
setIsTooltipOpen(true);
|
|
36
34
|
}, onClose: () => {
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.171-test.1",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|