@tap-payments/os-micro-frontend-shared 0.1.185-test.1 → 0.1.185
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/Chip/style.d.ts +1 -0
- package/build/components/CountBadge/style.d.ts +1 -0
- package/build/components/Dialog/style.d.ts +1 -0
- package/build/components/FlippingCard/style.d.ts +1 -0
- package/build/components/ImageWrapper/ImageWrapper.d.ts +1 -0
- package/build/components/JSONViewer/style.d.ts +1 -0
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +1 -0
- package/build/components/RangeCalender/RangeCalender.d.ts +2 -2
- package/build/components/RangeCalender/RangeCalender.js +8 -17
- package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.d.ts +6 -2
- package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js +27 -33
- package/build/components/RangeCalender/components/CustomTimepicker/style.d.ts +1 -1
- package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.d.ts +9 -1
- package/build/components/RangeCalender/components/RangeDatepicker/index.d.ts +0 -1
- package/build/components/RangeCalender/components/RangeDatepicker/index.js +0 -1
- package/build/components/RangeCalender/utils.d.ts +1 -5
- package/build/components/RangeCalender/utils.js +0 -11
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +1 -0
- package/build/components/SearchButton/styles.d.ts +1 -0
- package/build/components/StatusIcons/AuthIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +1 -0
- package/build/components/StatusIcons/SourceIcons/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/style.d.ts +1 -0
- package/build/components/Timepicker/Timepicker.d.ts +1 -2
- package/build/components/Timepicker/Timepicker.js +7 -8
- package/build/components/Timepicker/index.d.ts +0 -1
- package/build/components/Timepicker/index.js +0 -1
- package/build/components/Timepicker/style.d.ts +0 -1
- package/build/components/Timepicker/style.js +1 -1
- package/build/components/VirtualTables/components/style.d.ts +1 -0
- package/package.json +3 -3
- package/build/components/RangeCalender/components/RangeDatepicker/type.d.ts +0 -9
- package/build/components/RangeCalender/components/RangeDatepicker/type.js +0 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { GetSourceAnimationFunction } from './type';
|
|
3
4
|
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
5
|
variant?: import("./type").ChipVariant | undefined;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { MouseEvent } from 'react';
|
|
2
2
|
import { PopperProps } from '@mui/material/Popper';
|
|
3
|
-
import { SxProps } from '@mui/system';
|
|
4
3
|
import type { CalenderMode, Timezone } from '../../types/index.js';
|
|
5
|
-
import {
|
|
4
|
+
import { SxProps } from '@mui/system';
|
|
5
|
+
import { RangeDatepickerProps } from './components/RangeDatepicker/RangeDatepicker';
|
|
6
6
|
interface RangeCalendarProps {
|
|
7
7
|
defaultDate: [Date, Date];
|
|
8
8
|
onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
|
|
@@ -13,10 +13,8 @@ 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 { getDateRange, getEndOfDate, getStartOfDate } from './utils';
|
|
18
16
|
function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }) {
|
|
19
|
-
const [dates, setDates] = useState(
|
|
17
|
+
const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
|
|
20
18
|
const [values, setValues] = useState(dates);
|
|
21
19
|
const [selectedTimezone, setSelectedTimezone] = useState(timezone);
|
|
22
20
|
const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
|
|
@@ -37,7 +35,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
37
35
|
if (!open) {
|
|
38
36
|
if (numberOfMonths === 1)
|
|
39
37
|
return;
|
|
40
|
-
setValues(
|
|
38
|
+
setValues([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
|
|
41
39
|
}
|
|
42
40
|
}, [open]);
|
|
43
41
|
useEffect(() => {
|
|
@@ -47,20 +45,13 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
47
45
|
onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(newTimezone);
|
|
48
46
|
onChangeTimezoneHistory === null || onChangeTimezoneHistory === void 0 ? void 0 : onChangeTimezoneHistory(newTimezone);
|
|
49
47
|
};
|
|
50
|
-
const formatDate = (date) => new Date(date.toDate().toLocaleString('en-us', {
|
|
48
|
+
const formatDate = (date) => new Date(date.setHour(new Date().getHours()).setMinute(new Date().getMinutes()).setSecond(new Date().getSeconds()).toDate().toLocaleString('en-us', {
|
|
51
49
|
timeZone: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone,
|
|
52
50
|
}));
|
|
53
51
|
const submitDate = () => {
|
|
54
52
|
setDates(values);
|
|
55
53
|
onCloseCalender();
|
|
56
|
-
|
|
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);
|
|
54
|
+
onDateChange([formatDate(values[0]), formatDate(values[1] || values[0])], timezone === null || timezone === void 0 ? void 0 : timezone.offset);
|
|
64
55
|
onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
|
|
65
56
|
updateTimezone(selectedTimezone);
|
|
66
57
|
};
|
|
@@ -74,8 +65,8 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
74
65
|
setValues(newDate);
|
|
75
66
|
return;
|
|
76
67
|
}
|
|
77
|
-
const startDate =
|
|
78
|
-
const endDate =
|
|
68
|
+
const startDate = newDate[0].toDate();
|
|
69
|
+
const endDate = newDate[1].toDate();
|
|
79
70
|
const numberOfDays = dayjs(endDate).diff(startDate, 'day');
|
|
80
71
|
if (numberOfDays <= maxDateRange) {
|
|
81
72
|
setValues(newDate);
|
|
@@ -88,7 +79,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
88
79
|
}, 3000);
|
|
89
80
|
};
|
|
90
81
|
const onChangeQuickFilter = (newValues) => {
|
|
91
|
-
setValues(
|
|
82
|
+
setValues(newValues);
|
|
92
83
|
if (calendarRef.current)
|
|
93
84
|
calendarRef.current.set({ date: newValues[0] });
|
|
94
85
|
};
|
|
@@ -97,6 +88,6 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
97
88
|
onCloseCalender();
|
|
98
89
|
} })), _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) => {
|
|
99
90
|
setSelectedGroupBy(group);
|
|
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", {})),
|
|
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') }))] })] }))] }))] }) }))] })));
|
|
101
92
|
}
|
|
102
93
|
export default RangeCalender;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
import { DateObject } from 'react-multi-date-picker';
|
|
1
2
|
import { Dates } from '../../type';
|
|
2
3
|
interface CustomTimePickerProps {
|
|
3
4
|
values: Dates;
|
|
4
|
-
|
|
5
|
+
startTime: DateObject;
|
|
6
|
+
endTime: DateObject;
|
|
7
|
+
onChangeStartTime: (value: DateObject) => void;
|
|
8
|
+
onChangeEndTime: (value: DateObject) => void;
|
|
5
9
|
}
|
|
6
|
-
declare function CustomTimePicker({ values,
|
|
10
|
+
declare function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
11
|
export default CustomTimePicker;
|
|
@@ -1,39 +1,33 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
3
|
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import { DateObject } from 'react-multi-date-picker';
|
|
4
|
+
import DatePicker, { DateObject } from 'react-multi-date-picker';
|
|
5
|
+
import TimePicker from 'react-multi-date-picker/plugins/time_picker';
|
|
5
6
|
import { IOSSwitch } from '../../../index.js';
|
|
6
|
-
import TimePicker, { convertTo12Hour, maxHour } from '../../../Timepicker';
|
|
7
7
|
import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }) {
|
|
9
|
+
const [isAllDay, setIsAllDay] = useState(false);
|
|
10
|
+
const [lastTime, setLastTime] = useState([startTime, endTime]);
|
|
10
11
|
const { t } = useTranslation();
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
minute: startDate.minute,
|
|
32
|
-
period: startDate.hour >= maxHour ? 'PM' : 'AM',
|
|
33
|
-
}, size: "small", onChange: onChangeStartTime, enableRealTimeChange: true }, `${values[0].toString()}-start`), _jsx(TimePicker, { defaultTime: {
|
|
34
|
-
hour: convertTo12Hour(endDate.hour),
|
|
35
|
-
minute: endDate.minute,
|
|
36
|
-
period: endDate.hour >= maxHour ? 'PM' : 'AM',
|
|
37
|
-
}, size: "small", onChange: onChangeEndTime, enableRealTimeChange: true }, `${values[1].toString()}-end`)] }))] }) }));
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (isAllDay)
|
|
14
|
+
setIsAllDay(new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear);
|
|
15
|
+
}, [values]);
|
|
16
|
+
return (_jsx(_Fragment, { children: new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_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) => {
|
|
17
|
+
setIsAllDay(!isAllDay);
|
|
18
|
+
if (e.target.checked) {
|
|
19
|
+
setLastTime([startTime, endTime]);
|
|
20
|
+
onChangeStartTime(new DateObject().setHour(0).setMinute(0));
|
|
21
|
+
onChangeEndTime(new DateObject().setHour(23).setMinute(59));
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
onChangeStartTime(lastTime[0]);
|
|
25
|
+
onChangeEndTime(lastTime[1]);
|
|
26
|
+
}
|
|
27
|
+
} })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: startTime, onChange: (time) => {
|
|
28
|
+
onChangeStartTime(time);
|
|
29
|
+
}, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] }), _jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: endTime, onChange: (time) => {
|
|
30
|
+
onChangeEndTime(time);
|
|
31
|
+
}, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] })] }))] }) })) }));
|
|
38
32
|
}
|
|
39
33
|
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;
|
|
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,4 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { CalendarProps } from 'react-multi-date-picker';
|
|
3
|
+
import { Dates } from '../../type';
|
|
4
|
+
export interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
|
|
5
|
+
isAr?: boolean;
|
|
6
|
+
isHijri: boolean;
|
|
7
|
+
values: Dates;
|
|
8
|
+
onChange: (v: Dates) => void;
|
|
9
|
+
numberOfMonths?: number;
|
|
10
|
+
}
|
|
3
11
|
declare const _default: React.ForwardRefExoticComponent<Omit<RangeDatepickerProps, "ref"> & React.RefAttributes<unknown>>;
|
|
4
12
|
export default _default;
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import { Dates } from './type';
|
|
1
|
+
/// <reference types="react-date-object" />
|
|
3
2
|
export declare const getLocale: ({ isHijri, isAr }: {
|
|
4
3
|
isHijri: boolean;
|
|
5
4
|
isAr?: boolean | undefined;
|
|
6
5
|
}) => import("react-date-object").Locale;
|
|
7
6
|
export declare const getCalender: (isHijri: boolean) => import("react-date-object").Calendar;
|
|
8
|
-
export declare const getStartOfDate: (date: DateObject) => DateObject;
|
|
9
|
-
export declare const getEndOfDate: (date: DateObject) => DateObject;
|
|
10
|
-
export declare const getDateRange: (dates: [Date, Date]) => Dates;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import DateObject from 'react-date-object';
|
|
2
1
|
import arabic from 'react-date-object/calendars/arabic';
|
|
3
2
|
import gregorian from 'react-date-object/calendars/gregorian';
|
|
4
3
|
import arabicAr from 'react-date-object/locales/arabic_ar';
|
|
5
4
|
import arabicEn from 'react-date-object/locales/arabic_en';
|
|
6
5
|
import gregorianAr from 'react-date-object/locales/gregorian_ar';
|
|
7
6
|
import gregorianEn from 'react-date-object/locales/gregorian_en';
|
|
8
|
-
import { getDefaultDateRange } from '../../utils/index.js';
|
|
9
7
|
export const getLocale = ({ isHijri, isAr = false }) => {
|
|
10
8
|
if (isHijri) {
|
|
11
9
|
return isAr ? arabicAr : arabicEn;
|
|
@@ -15,12 +13,3 @@ export const getLocale = ({ isHijri, isAr = false }) => {
|
|
|
15
13
|
export const getCalender = (isHijri) => {
|
|
16
14
|
return isHijri ? arabic : gregorian;
|
|
17
15
|
};
|
|
18
|
-
export const getStartOfDate = (date) => date.setHour(0).setMinute(0).setSecond(0);
|
|
19
|
-
export const getEndOfDate = (date) => date.setHour(23).setMinute(59).setSecond(59);
|
|
20
|
-
export const getDateRange = (dates) => {
|
|
21
|
-
if (!((dates === null || dates === void 0 ? void 0 : dates[0]) instanceof Date) || !((dates === null || dates === void 0 ? void 0 : dates[1]) instanceof Date)) {
|
|
22
|
-
const [startDate, endDate] = getDefaultDateRange();
|
|
23
|
-
return [new DateObject(startDate), new DateObject(endDate)];
|
|
24
|
-
}
|
|
25
|
-
return [new DateObject(dates === null || dates === void 0 ? void 0 : dates[0]), new DateObject(dates === null || dates === void 0 ? void 0 : dates[1])];
|
|
26
|
-
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { TableMode } from '../../../../types/index.js';
|
|
3
4
|
export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
4
5
|
tableMode?: TableMode | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
3
4
|
export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
3
4
|
variant?: "Global" | "Regional" | "Local" | undefined;
|
|
4
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -7,7 +7,6 @@ interface TimePickerProps {
|
|
|
7
7
|
defaultTime?: Time;
|
|
8
8
|
onChange?: (time: Time) => void;
|
|
9
9
|
enableRealTimeChange?: boolean;
|
|
10
|
-
size?: 'large' | 'small';
|
|
11
10
|
}
|
|
12
|
-
export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange
|
|
11
|
+
export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
13
12
|
export {};
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useEffect } from 'react';
|
|
2
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
3
3
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
4
4
|
import Box from '@mui/material/Box';
|
|
5
5
|
import Menu from '../Menu';
|
|
6
6
|
import Text from '../Text';
|
|
7
7
|
import { greyUpArrowIcon, greyDownArrowIcon } from '../../constants/index.js';
|
|
8
|
-
import { convertToNumber } from '../../utils/index.js';
|
|
9
8
|
import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input } from './style';
|
|
10
9
|
import { getDefaultHour, getDefaultMinute } from './utils';
|
|
11
10
|
import { maxHour, maxMinute, periodList } from './constant';
|
|
12
|
-
export function TimePicker({ onChange, defaultTime, enableRealTimeChange
|
|
11
|
+
export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
|
|
13
12
|
var _a, _b, _c;
|
|
14
13
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
15
14
|
const [period, setPeriod] = useState((_a = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.period) !== null && _a !== void 0 ? _a : (new Date().getHours() >= maxHour ? 'PM' : 'AM'));
|
|
@@ -32,14 +31,13 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size =
|
|
|
32
31
|
const onClickPeriod = (selectedPeriod) => {
|
|
33
32
|
setPeriod(selectedPeriod);
|
|
34
33
|
};
|
|
35
|
-
const formatTime = (time) => (time < 10 ? `0${time}` : time.toString());
|
|
36
34
|
const onChangeHours = (e) => {
|
|
37
|
-
const value =
|
|
35
|
+
const value = Number(e.target.value);
|
|
38
36
|
if (value > maxHour) {
|
|
39
37
|
e.preventDefault();
|
|
40
38
|
return;
|
|
41
39
|
}
|
|
42
|
-
setHours(value);
|
|
40
|
+
setHours(Number(e.target.value));
|
|
43
41
|
};
|
|
44
42
|
const onIncreaseHours = () => {
|
|
45
43
|
setHours((prev) => {
|
|
@@ -56,7 +54,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size =
|
|
|
56
54
|
});
|
|
57
55
|
};
|
|
58
56
|
const onChangeMinutes = (e) => {
|
|
59
|
-
const value =
|
|
57
|
+
const value = Number(e.target.value);
|
|
60
58
|
if (value > maxMinute) {
|
|
61
59
|
e.preventDefault();
|
|
62
60
|
return;
|
|
@@ -81,7 +79,8 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size =
|
|
|
81
79
|
return prev - 1;
|
|
82
80
|
});
|
|
83
81
|
};
|
|
84
|
-
|
|
82
|
+
const formatTime = useCallback((time) => (time < 10 ? `0${time}` : time), []);
|
|
83
|
+
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
|
|
85
84
|
onClickPeriod(item);
|
|
86
85
|
}, selected: period === item }, { children: item }), item))) })] }) }))] }) })));
|
|
87
86
|
}
|
|
@@ -8,7 +8,6 @@ export declare const Button: import("@emotion/styled").StyledComponent<import("@
|
|
|
8
8
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
9
9
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
10
10
|
open: boolean;
|
|
11
|
-
size: 'large' | 'small';
|
|
12
11
|
}, {}, {}>;
|
|
13
12
|
export declare const Arrow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
13
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -10,7 +10,7 @@ export const Wrapper = styled(Box)(() => ({
|
|
|
10
10
|
justifyContent: 'center',
|
|
11
11
|
gap: '16px',
|
|
12
12
|
}));
|
|
13
|
-
export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open'
|
|
13
|
+
export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: 32, width: 74, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
|
|
14
14
|
export const Arrow = styled(Box)(() => ({
|
|
15
15
|
textAlign: 'center',
|
|
16
16
|
cursor: 'pointer',
|
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.185
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.185",
|
|
5
|
+
"testVersion": 0,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -163,4 +163,4 @@
|
|
|
163
163
|
"publishConfig": {
|
|
164
164
|
"registry": "https://registry.npmjs.org/"
|
|
165
165
|
}
|
|
166
|
-
}
|
|
166
|
+
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { CalendarProps } from 'react-multi-date-picker';
|
|
2
|
-
import { Dates } from '../../type';
|
|
3
|
-
export interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
|
|
4
|
-
isAr?: boolean;
|
|
5
|
-
isHijri: boolean;
|
|
6
|
-
values: Dates;
|
|
7
|
-
onChange: (v: Dates) => void;
|
|
8
|
-
numberOfMonths?: number;
|
|
9
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|