semi-design
semi-design copied to clipboard
[Calendar] calendar 需要支持最小高度
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的业务场景、上下文、或者你的需求场景