semi-design icon indicating copy to clipboard operation
semi-design copied to clipboard

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

Open DaiQiangReal opened this issue 2 years ago • 0 comments

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的业务场景、上下文、或者你的需求场景

DaiQiangReal avatar Mar 15 '22 06:03 DaiQiangReal