@tap-payments/os-micro-frontend-shared 0.1.178-test.1 → 0.1.179-test.1-test.2
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/LICENSE +21 -21
- package/README.md +12 -12
- package/build/components/LanguageDropdown/style.js +1 -1
- package/build/components/MenuItem/MenuItem.d.ts +2 -1
- package/build/components/MenuItem/MenuItem.js +2 -2
- 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/Timepicker/Timepicker.d.ts +1 -2
- package/build/components/Timepicker/Timepicker.js +2 -2
- 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/package.json +2 -2
- package/build/components/RangeCalender/components/RangeDatepicker/type.d.ts +0 -9
- package/build/components/RangeCalender/components/RangeDatepicker/type.js +0 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Tap Payments
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Tap Payments
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# os-micro-frontend-shared
|
|
2
|
-
|
|
3
|
-
## Publishing Workflow
|
|
4
|
-
|
|
5
|
-
1. Update version in package.json
|
|
6
|
-
2. Commit changes
|
|
7
|
-
3. Create and push a tag:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm version patch # or minor, major
|
|
11
|
-
git push origin main --tags
|
|
12
|
-
```
|
|
1
|
+
# os-micro-frontend-shared
|
|
2
|
+
|
|
3
|
+
## Publishing Workflow
|
|
4
|
+
|
|
5
|
+
1. Update version in package.json
|
|
6
|
+
2. Commit changes
|
|
7
|
+
3. Create and push a tag:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm version patch # or minor, major
|
|
11
|
+
git push origin main --tags
|
|
12
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Box from '@mui/material/Box';
|
|
2
2
|
import { styled } from '@mui/material/styles';
|
|
3
|
-
export const Button = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, fontSize: '11px', color: theme.palette.text.primary, padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', height: 32, gap: '4px' }, (open && {
|
|
3
|
+
export const Button = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, fontSize: '11px', color: theme.palette.text.primary, padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', height: 32, gap: '4px', cursor: 'pointer' }, (open && {
|
|
4
4
|
borderColor: theme.palette.info.dark,
|
|
5
5
|
}))));
|
|
@@ -4,7 +4,8 @@ interface MenuItemProps extends BoxProps {
|
|
|
4
4
|
isSelected?: boolean;
|
|
5
5
|
isDisabled?: boolean;
|
|
6
6
|
isIndeterminate?: boolean;
|
|
7
|
+
hideCheckbox?: boolean;
|
|
7
8
|
}
|
|
8
|
-
declare function MenuItem({ isSelected, isDisabled, isIndeterminate, onClick, children, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function MenuItem({ isSelected, isDisabled, isIndeterminate, hideCheckbox, onClick, children, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
declare const _default: import("react").MemoExoticComponent<typeof MenuItem>;
|
|
10
11
|
export default _default;
|
|
@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { memo } from 'react';
|
|
14
14
|
import { CheckboxStyled, MenuItemStyled } from './style';
|
|
15
15
|
function MenuItem(_a) {
|
|
16
|
-
var { isSelected, isDisabled, isIndeterminate, onClick, children } = _a, props = __rest(_a, ["isSelected", "isDisabled", "isIndeterminate", "onClick", "children"]);
|
|
17
|
-
return (_jsxs(MenuItemStyled, Object.assign({ className: isDisabled ? 'disabled menu-item' : 'menu-item', onClick: onClick, disabled: isDisabled }, props, { children: [
|
|
16
|
+
var { isSelected, isDisabled, isIndeterminate, hideCheckbox, onClick, children } = _a, props = __rest(_a, ["isSelected", "isDisabled", "isIndeterminate", "hideCheckbox", "onClick", "children"]);
|
|
17
|
+
return (_jsxs(MenuItemStyled, Object.assign({ className: isDisabled ? 'disabled menu-item' : 'menu-item', onClick: onClick, disabled: isDisabled }, props, { children: [!hideCheckbox && _jsx(CheckboxStyled, { size: "small", checked: isSelected, indeterminate: isIndeterminate, disabled: isDisabled }), children] })));
|
|
18
18
|
}
|
|
19
19
|
export default memo(MenuItem);
|
|
@@ -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([new DateObject(defaultDate
|
|
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
|
-
};
|
|
@@ -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 {};
|
|
@@ -8,7 +8,7 @@ import { greyUpArrowIcon, greyDownArrowIcon } from '../../constants/index.js';
|
|
|
8
8
|
import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input } from './style';
|
|
9
9
|
import { getDefaultHour, getDefaultMinute } from './utils';
|
|
10
10
|
import { maxHour, maxMinute, periodList } from './constant';
|
|
11
|
-
export function TimePicker({ onChange, defaultTime, enableRealTimeChange
|
|
11
|
+
export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
|
|
12
12
|
var _a, _b, _c;
|
|
13
13
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
14
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'));
|
|
@@ -80,7 +80,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size =
|
|
|
80
80
|
});
|
|
81
81
|
};
|
|
82
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({
|
|
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: () => {
|
|
84
84
|
onClickPeriod(item);
|
|
85
85
|
}, selected: period === item }, { children: item }), item))) })] }) }))] }) })));
|
|
86
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.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.179-test.1-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -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 {};
|