@sunggang/ui-lib 0.1.71 → 0.1.73

package/index.esm.css

@@ -897,6 +897,10 @@ video {
 .border-collapse {
   border-collapse: collapse;
 }
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }

package/index.esm.js

@@ -89235,9 +89235,36 @@ var moment = moment$1.exports;
 moment.locale("zh-tw");
 var localizer$1 = moment$2(moment);
 function BigCalender(props) {
-    var events = props.events, handleSelectEvent = props.handleSelectEvent, CustomEventEl = props.CustomEventEl, handleNavigate = props.handleNavigate, handleView = props.handleView;
+    var events = props.events, handleSelectEvent = props.handleSelectEvent, CustomEventEl = props.CustomEventEl, handleNavigate = props.handleNavigate, handleView = props.handleView, messages = props.messages;
+    var eventPropGetter = function(event) {
+        var color = (event === null || event === void 0 ? void 0 : event.color) || "#2389e1";
+        return {
+            style: {
+                backgroundColor: color,
+                border: "1px solid ".concat(color)
+            }
+        };
+    };
+    var formats = useMemo(function() {
+        return {
+            monthHeaderFormat: function(date) {
+                return moment(date).format("YYYY年M月");
+            },
+            dayFormat: function(date) {
+                return moment(date).format("D日 dddd");
+            },
+            dayHeaderFormat: function(date) {
+                return moment(date).format("M月D日 dddd");
+            },
+            dayRangeHeaderFormat: function(param, culture, localizer) {
+                var start = param.start, end = param.end;
+                return moment(start).format("M月D日") + " — " + moment(end).format("M月D日");
+            }
+        };
+    }, []);
     return /*#__PURE__*/ jsx(Calendar$1, {
         localizer: localizer$1,
+        formats: formats,
         events: events,
         startAccessor: "start",
         endAccessor: "end",
@@ -89251,14 +89278,15 @@ function BigCalender(props) {
         components: {
             event: CustomEventEl
         },
+        eventPropGetter: eventPropGetter,
         messages: {
             next: /*#__PURE__*/ jsx("div", {
-                className: "flex items-center h-6",
-                children: "▼"
+                className: "flex items-center h-6 rotate-90",
+                children: "▲"
             }),
             previous: /*#__PURE__*/ jsx("div", {
-                className: "flex items-center h-6",
-                children: "▲"
+                className: "flex items-center h-6 rotate-90",
+                children: "▼"
             }),
             today: /*#__PURE__*/ jsx("div", {
                 className: "flex items-center h-6",
@@ -89267,11 +89295,11 @@ function BigCalender(props) {
             month: "月",
             week: "週",
             day: "日",
-            agenda: "議程",
+            agenda: (messages === null || messages === void 0 ? void 0 : messages.agenda) || "議程",
             date: "日期",
             time: "時間",
-            event: "事件",
-            noEventsInRange: "此範圍內無事件。",
+            event: (messages === null || messages === void 0 ? void 0 : messages.event) || "事件",
+            noEventsInRange: (messages === null || messages === void 0 ? void 0 : messages.noEventsInRange) || "此範圍內無事件。",
             showMore: function(total) {
                 return "+ 顯示更多 (".concat(total, ")");
             }
@@ -92181,7 +92209,7 @@ moment.locale("zh-tw");
 var localizer = moment$2(moment);
 var DnDCalendarWrap = default_1(Calendar$1);
 function DnDCalendar(props) {
-    var events = props.events, setEvents = props.setEvents, handleSelectEvent = props.handleSelectEvent, CustomEventEl = props.CustomEventEl, handleNavigate = props.handleNavigate, handleView = props.handleView;
+    var events = props.events, setEvents = props.setEvents, handleSelectEvent = props.handleSelectEvent, CustomEventEl = props.CustomEventEl, handleNavigate = props.handleNavigate, handleView = props.handleView, messages = props.messages;
     var handleDragStart = function(event) {
         console.log("Drag start:", event);
     };
@@ -92242,7 +92270,7 @@ function DnDCalendar(props) {
         setEvents
     ]);
     var eventPropGetter = function(event) {
-        var backgroundColor = event.color || "#2389e1";
+        var backgroundColor = (event === null || event === void 0 ? void 0 : event.color) || "#2389e1";
         return {
             style: {
                 backgroundColor: backgroundColor
@@ -92290,11 +92318,11 @@ function DnDCalendar(props) {
             month: "月",
             week: "週",
             day: "日",
-            agenda: "議程",
+            agenda: (messages === null || messages === void 0 ? void 0 : messages.agenda) || "議程",
             date: "日期",
             time: "時間",
-            event: "事件",
-            noEventsInRange: "此範圍內無事件。",
+            event: (messages === null || messages === void 0 ? void 0 : messages.event) || "事件",
+            noEventsInRange: (messages === null || messages === void 0 ? void 0 : messages.noEventsInRange) || "此範圍內無事件。",
             showMore: function(total) {
                 return "+ 顯示更多 (".concat(total, ")");
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "dependencies": {
     "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^3.0.1",

package/src/lib/BigCalender/index.stories.d.ts

@@ -6,6 +6,11 @@ export interface Event {
     id?: number;
     color?: string;
 }
+export interface Messages {
+    agenda?: string;
+    event?: string;
+    noEventsInRange?: string;
+}
 export interface BigCalenderProps {
     events: Event[];
     setEvents: React.Dispatch<React.SetStateAction<Event[]>>;
@@ -15,6 +20,7 @@ export interface BigCalenderProps {
     handleSelectEvent: (event: Event) => void;
     handleNavigate: (event: string) => void;
     handleView: (event: string) => void;
+    messages: Messages;
 }
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
 export default _default;