@mailstep/design-system 0.7.25-beta.8 → 0.7.25
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/package.json +1 -1
- package/ui/Blocks/Scheduler/Scheduler.js +2 -3
- package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.js +12 -1
- package/ui/Blocks/Scheduler/components/Groups/styles.js +2 -2
- package/ui/Blocks/Scheduler/components/TimeSlots/styles.js +2 -2
- package/ui/Blocks/Scheduler/index.d.ts +1 -1
- package/ui/Blocks/Scheduler/styles.d.ts +1 -0
- package/ui/Blocks/Scheduler/styles.js +3 -2
- package/ui/Blocks/Scheduler/types.d.ts +1 -1
- package/ui/index.es.js +737 -726
- package/ui/index.umd.js +93 -87
package/package.json
CHANGED
|
@@ -8,8 +8,7 @@ import { TimeSlots } from './components/TimeSlots';
|
|
|
8
8
|
import { useChangeDate } from './hooks/useChangeDate';
|
|
9
9
|
import { generateTimeArray } from './utils/generateTimeArray';
|
|
10
10
|
import { getClosestStep } from './utils/getClosestStep';
|
|
11
|
-
import {
|
|
12
|
-
import { Container } from './styles';
|
|
11
|
+
import { Block, Container } from './styles';
|
|
13
12
|
var timeArray = generateTimeArray();
|
|
14
13
|
export var Scheduler = function (_a) {
|
|
15
14
|
var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading, timeSlotDefinitions = _a.timeSlotDefinitions;
|
|
@@ -24,5 +23,5 @@ export var Scheduler = function (_a) {
|
|
|
24
23
|
}), handlePrevDay = _c.handlePrevDay, handleNextDay = _c.handleNextDay, handleChangeDate = _c.handleChangeDate, date = _c.date, isTodayDate = _c.isTodayDate;
|
|
25
24
|
if (!(groups === null || groups === void 0 ? void 0 : groups.length))
|
|
26
25
|
return null;
|
|
27
|
-
return (_jsxs(
|
|
26
|
+
return (_jsxs(Container, { children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Block, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate, date: date, timeSlotDefinitions: timeSlotDefinitions })] })] }));
|
|
28
27
|
};
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
13
|
var t = {};
|
|
3
14
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -27,7 +38,7 @@ export var BookedTimeSlots = function (_a) {
|
|
|
27
38
|
var endTimeInMinutes = getMinutesFromTime(endTime);
|
|
28
39
|
var totalInMinutes = endTimeInMinutes - startTimeInMinutes;
|
|
29
40
|
var count = (timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) ? get(rest, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) : 0;
|
|
30
|
-
return (_jsxs(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: totalInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(id), children: [_jsxs(Header, { children: [_jsx("div", { children: "".concat(startTime, " - ").concat(endTime, " (").concat(convertMinutesToDuration(totalInMinutes), ")") }), _jsxs(x.div, { display: "flex", gap: "6px", alignItems: "center", children: [!!count && count, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.icon] })] }), _jsx(Body, { children: (_b = timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.data) === null || _b === void 0 ? void 0 : _b.map(function (key) {
|
|
41
|
+
return (_jsxs(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: totalInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(__assign({ id: id, from: from, to: to }, rest)), children: [_jsxs(Header, { children: [_jsx("div", { children: "".concat(startTime, " - ").concat(endTime, " (").concat(convertMinutesToDuration(totalInMinutes), ")") }), _jsxs(x.div, { display: "flex", gap: "6px", alignItems: "center", children: [!!count && count, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.icon] })] }), _jsx(Body, { children: (_b = timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.data) === null || _b === void 0 ? void 0 : _b.map(function (key) {
|
|
31
42
|
var value = get(rest, key);
|
|
32
43
|
return _jsx("span", { children: Array.isArray(value) ? value.join(', ') : value }, "".concat(key, "-").concat(time));
|
|
33
44
|
}) })] }, id));
|
|
@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
|
|
6
6
|
import styled, { th } from '@xstyled/styled-components';
|
|
7
|
-
export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: 100%;\n"], ["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: 100%;\n"])), groupsHeight, th.color('lightGray6'));
|
|
8
|
-
export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n
|
|
7
|
+
export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: 100%;\n flex: 0 0 auto;\n"], ["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: 100%;\n flex: 0 0 auto;\n"])), groupsHeight, th.color('lightGray6'));
|
|
8
|
+
export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n min-width: 350px;\n height: 100%;\n font-size: 14px;\n font-weight: 600;\n padding: 10px;\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n"], ["\n background-color: ", ";\n width: ", ";\n min-width: 350px;\n height: 100%;\n font-size: 14px;\n font-weight: 600;\n padding: 10px;\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n"])), function (_a) {
|
|
9
9
|
var bg = _a.bg;
|
|
10
10
|
return bg || th.color('bgLightGray');
|
|
11
11
|
}, function (_a) {
|
|
@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
|
|
6
6
|
import styled, { th } from '@xstyled/styled-components';
|
|
7
|
-
export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n position: relative;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
8
|
-
export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", "px;\n width: ", ";\n
|
|
7
|
+
export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n flex: 1 1 auto;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n position: relative;\n flex: 1 1 auto;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
8
|
+
export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", "px;\n width: ", ";\n min-width: 350px;\n position: relative;\n background-color: ", ";\n cursor: ", ";\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n height: ", "px;\n width: ", ";\n min-width: 350px;\n position: relative;\n background-color: ", ";\n cursor: ", ";\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), minuteHeight * stepInMinutes, function (_a) {
|
|
9
9
|
var groupsCount = _a.groupsCount;
|
|
10
10
|
return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
|
|
11
11
|
}, function (_a) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Scheduler as default } from './Scheduler';
|
|
2
|
-
export type { GroupType, ActiveHours, TimeSlotType, SelectedTimeSlotType
|
|
2
|
+
export type { GroupType, ActiveHours, TimeSlotType, SelectedTimeSlotType } from './types';
|
|
@@ -3,5 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled, { th } from '@xstyled/styled-components';
|
|
6
|
-
export var
|
|
7
|
-
var
|
|
6
|
+
export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n text-align: center;\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n border: 1px solid ", ";\n user-select: none;\n width: 100%;\n}\n"], ["\n background-color: white;\n color: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n text-align: center;\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n border: 1px solid ", ";\n user-select: none;\n width: 100%;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
|
|
7
|
+
export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n overflow-y: hidden;\n"], ["\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n overflow-y: hidden;\n"])));
|
|
8
|
+
var templateObject_1, templateObject_2;
|
|
@@ -30,7 +30,7 @@ export type SchedulerProps = {
|
|
|
30
30
|
data?: TimeSlotType[];
|
|
31
31
|
handleSelectTimeSlot?: (data: SelectedTimeSlotType) => void;
|
|
32
32
|
handleReloadTimeSlots?: (date: Date) => Promise<void>;
|
|
33
|
-
handleTimeSlotClick?: (
|
|
33
|
+
handleTimeSlotClick?: (data: TimeSlotType) => () => void;
|
|
34
34
|
isLoading?: boolean;
|
|
35
35
|
timeSlotDefinitions?: TimeSlotDefinitionType;
|
|
36
36
|
};
|