feat: add minEventHeight api to support min height in day level event render (#1964)

* feat: add minEventHeight api to support min height in day level event render

* feat: add minEventHeight api to support min height in day level event render

* feat: make minEventHeight default value equal to Number.MIN_SAFE_INTEGER

---------

Co-authored-by: pointhalo <[email protected]>

content/show/calendar/index-en-US.md

@@ -190,6 +190,7 @@ class Demo extends React.Component {
             {
                 key: '6',
                 start: new Date(2019, 6, 23, 8, 32, 0),
+                end: new Date(2019, 6, 23, 8,42, 0),
                 children: <div style={dailyStyle}>July 23 8:32</div>,
             },
             {
@@ -229,6 +230,7 @@ class Demo extends React.Component {
                     mode={mode}
                     displayValue={displayValue}
                     events={events}
+                    minEventHeight={40}
                     range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}
                 ></Calendar>
             </>
@@ -356,6 +358,7 @@ import { Avatar, Calendar } from '@douyinfe/semi-ui';
 | header       | Header                                                                                                 | React.Node            | -            |
 | height       | Height                                                                                                 | string\|number        | 600          |
 | markWeekend  | Toggle whether to distinguish weekend column with grey background from weekdays                        | boolean               | false        |
+| minEventHeight | The minimum height of events in daily view, multi-day view and weekly view(**>=2.49.0**) | number | Number.MIN_SAFE_INTEGER |
 | mode         | Mode, one of `day`, `week`, `month`, `range`(**>=1.5.0**)                                         | "day" \| "week" \| "month" \| "range" | `week` |
 | onClick      | Callback invoked when clicking on date, basic unit for day and week mode is 0.5h, for month mode is 1d | function(e: Event, date: Date） | -            |
 | onClose | Callback invoked when event display card close in the month mode | function(e: Event） | - |

content/show/calendar/index.md

@@ -182,6 +182,7 @@ class Demo extends React.Component {
             {
                 key: '6',
                 start: new Date(2019, 6, 23, 8, 32, 0),
+                end: new Date(2019, 6, 23, 8, 42, 0),
                 children: <div style={dailyStyle}>7月23日 8:32</div>,
             },
             {
@@ -221,6 +222,7 @@ class Demo extends React.Component {
                     mode={mode}
                     displayValue={displayValue}
                     events={events}
+                    minEventHeight={40}
                     range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}
                 ></Calendar>
             </>
@@ -333,6 +335,7 @@ import { Avatar, Calendar } from '@douyinfe/semi-ui';
 | header | 自定义头部内容 | ReactNode | - |
 | height | 日历高度 | string\|number | 600 |
 | markWeekend | 区分周末列和工作日，以灰色显示 | boolean | false |
+| minEventHeight | 日视图、多日视图以及周视图下事件的最小高度(**>=2.49.0**) | number | Number.MIN_SAFE_INTEGER |
 | mode | 初始模式，`day`, `week`, `month`, `range`(**>=1.5.0**) | "day" \| "week" \| "month" \| "range" | `week` |
 | onClick | 单击日期格的回调，日视图和周视图以半小时为单位，月视图以日为单位 | function(e: Event, date: Date） | - |
 | onClose | 月视图下，展示所有 event 的卡片关闭时的回调 | function(e: Event） | - |

packages/semi-ui/calendar/_story/calendar.stories.jsx

@@ -720,3 +720,60 @@ export const Fix1892 = () => {
             </>
         );
     }
+// When event start and end are very close, the event dom structure exists and has a minimum height
+export const DayEventMinHeight = () => {
+
+  const [mode, setMode] = useState('day');
+
+  const dailyEventStyle = {
+    borderRadius: '3px',
+    boxSizing: 'border-box',
+    border: 'var(--semi-color-primary) 1px solid',
+    padding: '10px',
+    backgroundColor: 'var(--semi-color-primary-light-default)',
+    height: '100%',
+    overflow: 'hidden',
+  };  
+
+  const events = [
+    {
+      key: '1',
+      start: new Date(2019, 6, 23, 8, 22, 0),
+      end: new Date(2019, 6, 23, 8, 23, 0),
+      children: <div style={dailyEventStyle}>7月23日 8:32</div>,
+    },
+    {
+      key: '2',
+      start: new Date(2019, 6, 23, 8, 50, 0),
+      end: new Date(2019, 6, 23, 9, 30, 0),
+      children: <div style={dailyEventStyle}>7月23日 8:50</div>,
+    },
+    {
+      key: '3',
+      start: new Date(2019, 6, 23, 9, 50, 0),
+      end: new Date(2019, 6, 23, 11, 30, 0),
+      children: <div style={dailyEventStyle}>7月23日 9:50</div>,
+    },
+  ];
+
+  const displayValue = new Date(2019, 6, 23, 8, 32, 0);
+
+  return (
+    <>
+      <RadioGroup onChange={e => {setMode(e.target.value)}} value={mode}>
+        <Radio value={'day'}>日视图</Radio>
+        <Radio value={'week'}>周视图</Radio>
+        <Radio value={'range'}>多日视图</Radio>
+      </RadioGroup>
+      <br />
+      <br />
+      <Calendar
+        height={400}
+        mode={mode}
+        displayValue={displayValue}
+        events={events}
+        minEventHeight={50}
+        range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}></Calendar>
+    </>
+  )
+} 

packages/semi-ui/calendar/dayCalendar.tsx

@@ -31,6 +31,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
         mode: PropTypes.string,
         renderTimeDisplay: PropTypes.func,
         markWeekend: PropTypes.bool,
+        minEventHeight: PropTypes.number,
         scrollTop: PropTypes.number,
         width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -154,7 +155,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
     };
 
     render() {
-        const { dateGridRender, displayValue, showCurrTime, renderTimeDisplay, markWeekend, className, height, width, style, header } = this.props;
+        const { dateGridRender, displayValue, showCurrTime, renderTimeDisplay, markWeekend, className, height, width, style, header, minEventHeight } = this.props;
         const dayCls = cls(prefixCls, className);
         const dayStyle = {
             height,
@@ -182,6 +183,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
                             handleClick={this.handleClick}
                             showCurrTime={showCurrTime}
                             isWeekend={this.isWeekend}
+                            minEventHeight={minEventHeight}
                             dateGridRender={dateGridRender}
                         />
                     </div>

packages/semi-ui/calendar/dayCol.tsx

@@ -13,7 +13,7 @@ import '@douyinfe/semi-foundation/calendar/calendar.scss';
 const prefixCls = `${cssClasses.PREFIX}-grid`;
 
 function pad(d: number) {
-    return (d < 10) ? `0${ d.toString()}` : d.toString();
+    return (d < 10) ? `0${d.toString()}` : d.toString();
 }
 
 export interface DayColState {
@@ -30,6 +30,7 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
         currPos: PropTypes.number,
         handleClick: PropTypes.func,
         mode: PropTypes.string,
+        minEventHeight: PropTypes.number,
         isWeekend: PropTypes.bool,
         dateGridRender: PropTypes.func,
     };
@@ -39,7 +40,8 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
         showCurrTime: true,
         scrollHeight: 0,
         currPos: 0,
-        mode: 'dayCol'
+        mode: 'dayCol',
+        minEventHeight: Number.MIN_SAFE_INTEGER
     };
 
     static contextType = localeContext;
@@ -76,17 +78,14 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
     }
 
     renderEvents = () => {
-        const { events, scrollHeight } = this.props;
+        const { events, scrollHeight, minEventHeight } = this.props;
         const list = events.map((event, ind) => {
             const { startPos, endPos, children, key } = event;
             const top = startPos * scrollHeight;
             const height = (endPos - startPos) * scrollHeight;
-            if (!height) {
-                return undefined;
-            }
             const style = {
                 top: `${top}px`,
-                height: `${height}px`,
+                height: `${Math.max(minEventHeight, height)}px`,
             };
             return (
                 <li className={`${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-day`} style={style} key={key || `${top}-${ind}`}>

packages/semi-ui/calendar/index.tsx

@@ -31,6 +31,7 @@ class Calendar extends BaseComponent<CalendarProps, {}> {
         renderTimeDisplay: PropTypes.func,
         renderDateDisplay: PropTypes.func,
         markWeekend: PropTypes.bool,
+        minEventHeight: PropTypes.number,
         width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         style: PropTypes.object,

packages/semi-ui/calendar/interface.ts

@@ -16,6 +16,7 @@ export interface CalendarProps extends BaseProps {
     onClose?: (e: React.MouseEvent) => void;
     renderTimeDisplay?: (time: number) => React.ReactNode;
     markWeekend?: boolean;
+    minEventHeight?: number;
     width?: number | string;
     height?: number | string;
     renderDateDisplay?: (date: Date) => React.ReactNode;
@@ -25,7 +26,7 @@ export interface CalendarProps extends BaseProps {
 
 export type DayCalendarProps = Omit<CalendarProps, 'mode'>;
 
-type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender';
+type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender' | 'minEventHeight';
 export interface DayColProps extends Pick<CalendarProps, DayCalendarPropsKeys>, BaseProps {
     scrollHeight: number;
     currPos: number;

packages/semi-ui/calendar/rangeCalendar.tsx

@@ -130,7 +130,7 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
         const { parsedEvents } = this.state;
         const events = parsedEvents.day;
         const { week } = this.RangeData;
-        const { markWeekend, dateGridRender } = this.props;
+        const { markWeekend, dateGridRender, minEventHeight } = this.props;
         const inner = week.map(day => {
             const dateString = day.date.toString();
             const dayEvents = events.has(dateString) ? events.get(dateString) : [];
@@ -145,6 +145,7 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
                     showCurrTime={this.props.showCurrTime}
                     isWeekend={markWeekend && day.isWeekend}
                     dateGridRender={dateGridRender}
+                    minEventHeight={minEventHeight}
                 />
             );
         });
@@ -217,7 +218,7 @@ export default class RangeCalendar extends BaseComponent<RangeCalendarProps, Ran
         const { allDay } = this.state.parsedEvents;
         const parsed = this.foundation.parseRangeAllDayEvents(allDay);
         const style = allDayEventsRender ? null : {
-            height: `${calcRowHeight(parsed) }em`
+            height: `${calcRowHeight(parsed)}em`
         };
         const { markWeekend } = this.props;
         const { week } = this.RangeData;

packages/semi-ui/calendar/weekCalendar.tsx

@@ -132,7 +132,7 @@ export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekC
         const { parsedEvents } = this.state;
         const events = parsedEvents.day;
         const { week } = this.weeklyData;
-        const { markWeekend, dateGridRender } = this.props;
+        const { markWeekend, dateGridRender, minEventHeight } = this.props;
         const inner = week.map(day => {
             const dateString = day.date.toString();
             const dayEvents = events.has(dateString) ? events.get(dateString) : [];
@@ -147,6 +147,7 @@ export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekC
                     showCurrTime={this.props.showCurrTime}
                     isWeekend={markWeekend && day.isWeekend}
                     dateGridRender={dateGridRender}
+                    minEventHeight={minEventHeight}
                 />
             );
         });