@kne/react-calendar 1.0.4 → 1.0.6

package/dist/index.modern.js

@@ -782,7 +782,7 @@ const EventItem = ({
   });
 };
 
-var panelStyle = {"panel-card":"kne-react-calendar_uQsUE","panel-scroll-body":"kne-react-calendar_ujAl5","panel-scroll-content":"kne-react-calendar_t2e0j","panel-spin":"kne-react-calendar_tLux2","panel-spin-container":"kne-react-calendar_iW4mn","panel-title":"kne-react-calendar_C6NB3","panel-scroll-shadow":"kne-react-calendar_3ecxf","panel-scroll-shadow-visible":"kne-react-calendar_TvxhV","detail-card":"kne-react-calendar_3sEou"};
+var panelStyle = {"panel-card":"kne-react-calendar_uQsUE","panel-scroll-body":"kne-react-calendar_ujAl5","panel-scroll-content":"kne-react-calendar_t2e0j","panel-spin":"kne-react-calendar_tLux2","panel-spin-container":"kne-react-calendar_iW4mn","panel-card-expanded":"kne-react-calendar_OzKbW","panel-scroll-body-expanded":"kne-react-calendar_jmktP","panel-title":"kne-react-calendar_C6NB3","panel-scroll-shadow":"kne-react-calendar_3ecxf","panel-scroll-shadow-visible":"kne-react-calendar_TvxhV","detail-card":"kne-react-calendar_3sEou"};
 
 const PanelTitle = ({
   date,
@@ -840,7 +840,8 @@ const ViewPanel = ({
   loading,
   renderEventItem,
   renderPanelHeader,
-  onEventClick
+  onEventClick,
+  scrollable: _scrollable = true
 }) => {
   const {
     formatMessage
@@ -862,7 +863,7 @@ const ViewPanel = ({
       date: date,
       count: sortedEvents.length
     }),
-    className: panelStyle['panel-card'],
+    className: classNames(panelStyle['panel-card'], !_scrollable && panelStyle['panel-card-expanded']),
     children: /*#__PURE__*/jsx(Spin, {
       spinning: !!loading,
       classNames: {
@@ -871,11 +872,11 @@ const ViewPanel = ({
       },
       children: /*#__PURE__*/jsxs("div", {
         ref: scrollRef,
-        className: panelStyle['panel-scroll-body'],
-        onScroll: onScroll,
-        children: [/*#__PURE__*/jsx(PanelScrollShadow, {
+        className: classNames(panelStyle['panel-scroll-body'], !_scrollable && panelStyle['panel-scroll-body-expanded']),
+        onScroll: _scrollable ? onScroll : undefined,
+        children: [_scrollable ? /*#__PURE__*/jsx(PanelScrollShadow, {
           visible: scrolled
-        }), /*#__PURE__*/jsx("div", {
+        }) : null, /*#__PURE__*/jsx("div", {
           className: panelStyle['panel-scroll-content'],
           children: sortedEvents.length ? /*#__PURE__*/jsx(List, {
             dataSource: sortedEvents,
@@ -1695,7 +1696,7 @@ const SchedulePanel = ({
   });
 };
 
-var style = {"schedule-calendar-shell":"kne-react-calendar_csu63","schedule-calendar":"kne-react-calendar_5p1TK","calendar-side":"kne-react-calendar_nd7DK","panel-side":"kne-react-calendar_rWvHE","schedule-calendar-stacked":"kne-react-calendar_zGXr5"};
+var style = {"schedule-calendar-shell":"kne-react-calendar_csu63","schedule-calendar":"kne-react-calendar_5p1TK","calendar-side":"kne-react-calendar_nd7DK","panel-side":"kne-react-calendar_rWvHE","schedule-calendar-event-list-expanded":"kne-react-calendar_Av0q4","schedule-calendar-stacked":"kne-react-calendar_zGXr5"};
 
 dayjs.extend(customParseFormat);
 const buildMonthRuleCache = ({
@@ -1750,13 +1751,15 @@ const ScheduleCalendarInner = props => {
     className,
     style: propsStyle,
     stackAt = LAYOUT_STACK_BREAKPOINT,
+    eventListScrollable = true,
     calendarProps,
     panelProps
   } = props;
   const rootRef = useRef(null);
   const calendarRef = useRef(null);
   const stacked = useStackedLayout(rootRef, stackAt);
-  const stackedLayoutStyle = useStackedPanelLayout(rootRef, calendarRef, stacked);
+  const eventListExpanded = mode === 'view' && !eventListScrollable;
+  const stackedLayoutStyle = useStackedPanelLayout(rootRef, calendarRef, stacked && !eventListExpanded);
   const [value, setValue] = useControlValue(props);
   const selectedDate = useMemo(() => toDayjs(value) || dayjs(), [value]);
   const [current, setCurrent] = useControlledState({
@@ -1837,9 +1840,9 @@ const ScheduleCalendarInner = props => {
     style: propsStyle,
     children: /*#__PURE__*/jsxs("div", {
       ref: rootRef,
-      className: classNames(style['schedule-calendar'], stacked && style['schedule-calendar-stacked'], className),
+      className: classNames(style['schedule-calendar'], stacked && style['schedule-calendar-stacked'], eventListExpanded && style['schedule-calendar-event-list-expanded'], className),
       "data-schedule-layout": stacked ? 'stacked' : 'row',
-      style: stacked ? stackedLayoutStyle : undefined,
+      style: stacked && !eventListExpanded ? stackedLayoutStyle : undefined,
       children: [/*#__PURE__*/jsx("div", {
         ref: calendarRef,
         className: style['calendar-side'],
@@ -1896,7 +1899,8 @@ const ScheduleCalendarInner = props => {
           loading: loading,
           renderEventItem: renderEventItem,
           renderPanelHeader: renderPanelHeader,
-          onEventClick: onEventClick
+          onEventClick: onEventClick,
+          scrollable: eventListScrollable
         })
       }))]
     })