pds-dev-kit-web 2.2.202 → 2.2.203

package/dist/src/desktop/components/Calendar/CalendarContext.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { Schedule, displayAllDayScheduleMode } from './types';
+export interface ScheduleItemExtraProps {
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    [key: string]: unknown;
+}
+interface CalendarContextValue {
+    renderScheduleItem: (schedule: Schedule, extraProps?: ScheduleItemExtraProps) => React.ReactNode;
+    handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+    handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isPastDate: (date: Date) => boolean;
+    getDayTextByDate: (date: Date) => string;
+    selectedSchedules: Schedule[];
+    isDragOverDate: Date | null;
+    selectedDate: Date;
+    displayAllDayScheduleMode: displayAllDayScheduleMode;
+    isDraggable: boolean;
+}
+export declare const useCalendarContext: () => CalendarContextValue;
+interface CalendarProviderProps {
+    children: React.ReactNode;
+    selectedSchedules: Schedule[];
+    isDraggable: boolean;
+    handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+    handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isPastDate: (date: Date) => boolean;
+    getDayTextByDate: (date: Date) => string;
+    isDragOverDate: Date | null;
+    selectedDate: Date;
+    displayAllDayScheduleMode: displayAllDayScheduleMode;
+}
+export declare const CalendarProvider: React.FC<CalendarProviderProps>;
+export {};

package/dist/src/desktop/components/Calendar/CalendarContext.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarProvider = exports.useCalendarContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var calendarUtils_1 = require("./calendarUtils");
+var ScheduleItem_1 = require("./ScheduleItem");
+var CalendarContext = (0, react_1.createContext)(null);
+var useCalendarContext = function () {
+    var context = (0, react_1.useContext)(CalendarContext);
+    if (!context) {
+        throw new Error('useCalendarContext must be used within a CalendarProvider');
+    }
+    return context;
+};
+exports.useCalendarContext = useCalendarContext;
+var CalendarProvider = function (_a) {
+    var children = _a.children, 
+    // 스케줄 관련
+    selectedSchedules = _a.selectedSchedules, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, 
+    // 날짜 관련
+    handleDateClick = _a.handleDateClick, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, 
+    // 유틸리티 함수
+    getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, getDayTextByDate = _a.getDayTextByDate, 
+    // 상태값
+    isDragOverDate = _a.isDragOverDate, selectedDate = _a.selectedDate, displayAllDayScheduleMode = _a.displayAllDayScheduleMode;
+    var renderScheduleItem = (0, react_1.useCallback)(function (schedule, extraProps) {
+        if (extraProps === void 0) { extraProps = {}; }
+        var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
+        var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
+        return ((0, jsx_runtime_1.jsx)(ScheduleItem_1.ScheduleItem, { schedule: schedule, extraProps: extraProps, onDragStart: handleScheduleDragStart, onDragEnd: handleScheduleDragEnd, onClick: handleScheduleClick, isSelected: isSelected, isAllDay: isAllDay, isDraggable: isDraggable }));
+    }, [
+        selectedSchedules,
+        isDraggable,
+        handleScheduleClick,
+        handleScheduleDragStart,
+        handleScheduleDragEnd
+    ]);
+    var value = {
+        // 스케줄 렌더링 관련
+        renderScheduleItem: renderScheduleItem,
+        // 스케줄 이벤트 핸들러
+        handleScheduleClick: handleScheduleClick,
+        handleScheduleDragStart: handleScheduleDragStart,
+        handleScheduleDragEnd: handleScheduleDragEnd,
+        // 날짜 이벤트 핸들러
+        handleDateClick: handleDateClick,
+        handleDateDragOver: handleDateDragOver,
+        handleDateDragLeave: handleDateDragLeave,
+        handleDateDrop: handleDateDrop,
+        // 유틸리티 함수
+        getSchedulesForDate: getSchedulesForDate,
+        isToday: isToday,
+        isPastDate: isPastDate,
+        getDayTextByDate: getDayTextByDate,
+        // 상태값
+        selectedSchedules: selectedSchedules,
+        isDragOverDate: isDragOverDate,
+        selectedDate: selectedDate,
+        displayAllDayScheduleMode: displayAllDayScheduleMode,
+        isDraggable: isDraggable
+    };
+    return (0, jsx_runtime_1.jsx)(CalendarContext.Provider, __assign({ value: value }, { children: children }));
+};
+exports.CalendarProvider = CalendarProvider;

package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+interface CurrentTimeIndicatorProps {
+    show: boolean;
+    leftOffset?: string;
+}
+export declare const CurrentTimeIndicator: React.FC<CurrentTimeIndicatorProps>;
+export {};

package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.js

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentTimeIndicator = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var constants_1 = require("./constants");
+var CurrentTimeIndicator = function (_a) {
+    var show = _a.show, _b = _a.leftOffset, leftOffset = _b === void 0 ? '80px' : _b;
+    var i18n = (0, react_i18next_1.useTranslation)().i18n;
+    var getCurrentTime = (0, react_1.useCallback)(function () {
+        var now = new Date();
+        var locale = (0, constants_1.getLocaleFromLang)(i18n.language);
+        var timeInTimezone = new Date(now.toLocaleString(locale));
+        return {
+            hour: timeInTimezone.getHours(),
+            minute: timeInTimezone.getMinutes(),
+            percentage: ((timeInTimezone.getHours() * 60 + timeInTimezone.getMinutes()) / (24 * 60)) * 100
+        };
+    }, [i18n.language]);
+    var _c = (0, react_1.useState)(getCurrentTime()), currentTime = _c[0], setCurrentTime = _c[1];
+    (0, react_1.useEffect)(function () {
+        var updateTime = function () {
+            setCurrentTime(getCurrentTime());
+        };
+        updateTime();
+        var interval = setInterval(updateTime, 60000);
+        return function () { return clearInterval(interval); };
+    }, [getCurrentTime]);
+    return ((0, jsx_runtime_1.jsx)(S_CurrentTimeIndicator, { "$show": show, "$top": "".concat(currentTime.percentage, "%"), "$leftOffset": leftOffset }));
+};
+exports.CurrentTimeIndicator = CurrentTimeIndicator;
+var S_CurrentTimeIndicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: ", ";\n  height: 2px;\n  left: ", ";\n  position: absolute;\n  right: 0;\n  top: ", ";\n  z-index: 10;\n\n  &::before {\n    background: ", ";\n    border-radius: 50%;\n    content: '';\n    height: 8px;\n    left: -4px;\n    position: absolute;\n    top: -3px;\n    width: 8px;\n  }\n"], ["\n  background: ", ";\n  display: ", ";\n  height: 2px;\n  left: ", ";\n  position: absolute;\n  right: 0;\n  top: ", ";\n  z-index: 10;\n\n  &::before {\n    background: ", ";\n    border-radius: 50%;\n    content: '';\n    height: 8px;\n    left: -4px;\n    position: absolute;\n    top: -3px;\n    width: 8px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_border_07;
+}, function (props) { return (props.$show ? 'block' : 'none'); }, function (props) { return props.$leftOffset; }, function (props) { return props.$top; }, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_border_07;
+});
+var templateObject_1;

package/dist/src/desktop/components/Calendar/DailyView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DailyView: () => JSX.Element;

package/dist/src/desktop/components/Calendar/DailyView.js

@@ -0,0 +1,91 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DailyView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
+var CalendarContext_1 = require("./CalendarContext");
+var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
+var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
+var timeFormatUtils_1 = require("./timeFormatUtils");
+var DailyView = function () {
+    var i18n = (0, react_i18next_1.useTranslation)().i18n;
+    var _a = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, displayAllDayScheduleMode = _a.displayAllDayScheduleMode, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, handleScheduleClick = _a.handleScheduleClick;
+    var currentDateForDaily = [selectedDate][0];
+    var HOURS_IN_DAY = Array.from({ length: 24 }, function (_, i) { return i; });
+    var getTimeSlotDate = function (baseDate, hour) {
+        var date = new Date(baseDate);
+        date.setHours(hour, 0, 0, 0);
+        return date;
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: [selectedDate], displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_DailyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
+                        var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
+                        var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
+                        return ((0, jsx_runtime_1.jsxs)(S_DailyTimeRow, { children: [(0, jsx_runtime_1.jsx)(S_DailyTimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatHour)(hour, i18n.language), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_DailyTimeSlot, __assign({ "$isDragOver": isDragOver, onClick: function () { return handleDateClick(timeSlotDate, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
+                    })] }))] }));
+};
+exports.DailyView = DailyView;
+var S_DailyContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_DailyTimeGrid = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n  ", "\n"], ["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n  ", "\n"])), function (_a) {
+    var $displayAllDayScheduleMode = _a.$displayAllDayScheduleMode;
+    return $displayAllDayScheduleMode === 'none' && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border-top: 1px solid ", ";\n    "], ["\n      border-top: 1px solid ", ";\n    "])), function (_a) {
+        var theme = _a.theme;
+        return theme.ui_cpnt_divider;
+    });
+});
+var S_DailyTimeRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  min-height: 60px;\n"], ["\n  display: flex;\n  min-height: 60px;\n"])));
+var S_DailyTimeLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 80px;\n  padding: 8px;\n"], ["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 80px;\n  padding: 8px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+});
+var S_DailyTimeSlot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_72 : 'transparent'); }, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_72;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/desktop/components/Calendar/MonthlyView.d.ts

@@ -0,0 +1,28 @@
+import type { Schedule } from './types';
+import type React from 'react';
+interface MonthlyViewProps {
+    getDayTextByDate: (date: Date) => string;
+    startOfWeek: 'sunday' | 'monday';
+    selectedDate: Date;
+    selectedDates: Date[];
+    dragStartDate: Date | null;
+    selectedSchedules: Schedule[];
+    dragEndDate: Date | null;
+    isDragOverDate: Date | null;
+    schedules: Schedule[];
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isPastDate: (date: Date) => boolean;
+    handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleScheduleClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleMouseUp: () => void;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    handleScheduleDragStart?: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd?: () => void;
+    isDraggable?: boolean;
+    onSwitchToWeeklyView?: (date: Date) => void;
+}
+export declare const MonthlyView: React.FC<MonthlyViewProps>;
+export {};