Skip to content

Conversation

@hy993658052
Copy link
Collaborator

这个变动的性质是?

  • [ √] 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化语料改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 其他改动(是关于什么的改动?)

需求背景和解决方案

http://wiki.baidu.com/pages/viewpage.action?pageId=1744160651

更新日志

语言 更新描述
英文 The calendar component adds the display of the schedule, and zoom in mode
中文 日历组件增加日程的展示和放大模式

请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • [ √] 文档已补充或无须补充
  • [ √] 代码演示已提供或无须提供
  • [ √] TypeScript 定义已补充或无须补充
  • [ √] Changelog 已提供或无须提供

@hy993658052 hy993658052 changed the title 日历组件展示日程 feat:日历组件展示日程 Nov 25, 2021
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
| timeConstraints | `object` | `true` | 请参考: [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
| schedules | `object` | | 日历中展示日程 |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的配置项,展开说明下

| timeConstraints | `object` | `true` | 请参考: [react-datetime](https://github.com/YouCanBookMe/react-datetime) |
| schedules | `object` | | 日历中展示日程 |
| scheduleColors | `Array<string>` | `['#0bc286', '#ffb200', '#ea2e2e', '#343a40']` | 日历中展示日程的颜色 |
| scheduleAction | `object` | | 自定义日程展示 |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是不是schemaAction的数据结构

schedules?: Array<{
startTime: Date,
endTime: Date,
content: string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

content 可以支持传reactnode吗

content: string,
color?: string
}>;
scheduleColors?: Array<string>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是不是换成class可扩展性更好?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为了用户使用的时候方便,用color比较好

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

统一叫 level?: 'primary' | 'success' | 'danger' 之类的?

/**
* 日程
*/
schedules?: Array<{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

schedules 需要支持字符串格式比如 schedules: '${xxxData}' 从上下文中取数据,这个数据可能是form initApi 拉取过来的,也可能是上层 service 拉取的。

className?: string
}>;
scheduleClassNames?: Array<string>;
scheduleAction?: React.ReactElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不应该出现在这,应该是 onScheduleClick

this.handlePopOverClick = this.handlePopOverClick.bind(this);
this.renderShortCuts = this.renderShortCuts.bind(this);

if (props.schedules) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props 发生变化,并没有同步到 state 里面,那这个属性就不是一个外部可控制的属性了。

另外并没有看到 setState 语句,意思是后续不需要变动,为何不是直接用 props 就够了。

content: string | React.ReactElement;
color?: string;
}>;
scheduleAction?: React.ReactElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 component 不应该处理 Action 相关逻辑,只有渲染器才需要考虑

content: any,
className?: string
}>;
scheduleAction?: React.ReactElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

if (showSchedule.length > 3) {
break;
}
if (moment(schedule[i].startTime).date() === currentDate.date()) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最好用 moment 的 api isSame 什么的,维度设置成 天,目前这样可能不准

<div className={cx('ScheduleCalendar-large-day-wrap')}>
<div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
{scheduleDiv}
{schedule.length > 3 && <div className={cx('ScheduleCalendar-large-schedule-footer')}>{schedule.length - 3} more</div>}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需要用 translate 来处理 more

strictMode: false,
scheduleAction: {
actionType: 'dialog',
dialog: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最好不要设置,设置了就得支持多语言

});
}

if (anyChanged(['schedules'], prevProps, props) ||
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个判断不够准确,请优化

@2betop 2betop merged commit eac8e7e into baidu:master Dec 6, 2021
movemoving pushed a commit to movemoving/amis that referenced this pull request Dec 20, 2021
* feat:日历组件展示日程

* fix: 修改schema

* fix: schedule参数说明修改

* fix: 修改schedules参数描述

* fix: 代码调整

* fix: 参数color改为classname

* fix: readme文档补充

* feat: 日历组件支持从上下文中获取数据

* fix: 日历组件data获取条件修改

Co-authored-by: hongyang03 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants