[Calendar] calendar 需要支持最小高度

[DaiQiangReal]

Which Component 出现bug的组件

• Calendar

semi-ui version

• latest

Expected result 期望的结果是什么

• event 当 start 和 end 非常接近时，event dom 结构存在, 有最小高度

Actual result 实际的结果是什么

• event dom 结构不存在

Steps to reproduce 复现步骤

• 将 key 为 6 的 event 的 end 改为 new Date(2019, 6, 23, 8, 23, 0), event 对应 dom 消失

Reproducible code 复现代码

import React from 'react';
import { Calendar, RadioGroup, Radio } from '@douyinfe/semi-ui';

class Demo extends React.Component {
    constructor() {
        super();
        this.state = {
            mode: 'week',
        };
    }

    onSelect(e) {
        this.setState({
            mode: e.target.value,
        });
    }
    render() {
        const { mode } = this.state;
        const isMonthView = mode === 'month';
        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 allDayStyle = {
            borderRadius: '3px',
            boxSizing: 'border-box',
            border: 'var(--semi-color-bg-1) 1px solid',
            padding: '2px 4px',
            backgroundColor: 'var(--semi-color-primary-light-active)',
            height: '100%',
            overflow: 'hidden',
        };
        const dailyStyle = isMonthView ? allDayStyle : dailyEventStyle;
        const events = [
            {
                key: '6',
                start: new Date(2019, 6, 23, 8, 22, 0),
                end: new Date(2019, 6, 23, 8, 24, 0),
                children: <div style={dailyStyle}>7月23日 8:32</div>,
            },
            {
                key: '7',
                start: new Date(2019, 6, 23, 8, 50, 0),
                end: new Date(2019, 6, 23, 8, 59, 0),
                children: <div style={dailyStyle}>7月23日 8:32</div>,
            },
        ];
        const displayValue = new Date(2019, 6, 23, 8, 32, 0);
        return (
            <>
                <RadioGroup onChange={e => this.onSelect(e)} value={mode}>
                    <Radio value={'day'}>日视图</Radio>
                    <Radio value={'week'}>周视图</Radio>
                    <Radio value={'month'}>月视图</Radio>
                    <Radio value={'range'}>多日视图</Radio>
                </RadioGroup>
                <br />
                <br />
                <Calendar
                    height={400}
                    mode={mode}
                    displayValue={displayValue}
                    events={events}
                    range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}
                ></Calendar>
            </>
        );
    }
}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

[aizk]

有结论么？

[aizk]

有结论么？

我能想到的就是暂时这样处理了：

useEffect(() => {
        setTimeout(() => {
            const parentElements = document.querySelectorAll('.semi-calendar-event-item');

            parentElements.forEach(parentElement => {
                parentElement.style.height = 'auto';
            });
        }, 1000)
    }, []);

[YannLynn]

有结论么？

目前考虑开放一个 api 让用户定义 minEventHeight，当计算出来的 event 高度小于 minEventHeight 时，将 style 赋值为 auto，否则就用计算出的 height 值。

顺利的话这个 feature 会跟下周一的版，同学可以先按照你的临时处理方案绕过一下。

[pointhalo]

support v2.49.0-beta.0