-
Notifications
You must be signed in to change notification settings - Fork 2.7k
feat:日历组件展示日程 #3058
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat:日历组件展示日程 #3058
Conversation
| | clearable | `boolean` | `true` | 是否可清除 | | ||
| | embed | `boolean` | `false` | 是否内联模式 | | ||
| | timeConstraints | `object` | `true` | 请参考: [react-datetime](https://github.com/YouCanBookMe/react-datetime) | | ||
| | schedules | `object` | | 日历中展示日程 | |
There was a problem hiding this comment.
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` | | 自定义日程展示 | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个是不是schemaAction的数据结构
src/components/DatePicker.tsx
Outdated
| schedules?: Array<{ | ||
| startTime: Date, | ||
| endTime: Date, | ||
| content: string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
content 可以支持传reactnode吗
src/components/DatePicker.tsx
Outdated
| content: string, | ||
| color?: string | ||
| }>; | ||
| scheduleColors?: Array<string>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个是不是换成class可扩展性更好?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
为了用户使用的时候方便,用color比较好
There was a problem hiding this comment.
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<{ |
There was a problem hiding this comment.
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 拉取的。
src/components/DatePicker.tsx
Outdated
| className?: string | ||
| }>; | ||
| scheduleClassNames?: Array<string>; | ||
| scheduleAction?: React.ReactElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个不应该出现在这,应该是 onScheduleClick
src/components/DatePicker.tsx
Outdated
| this.handlePopOverClick = this.handlePopOverClick.bind(this); | ||
| this.renderShortCuts = this.renderShortCuts.bind(this); | ||
|
|
||
| if (props.schedules) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
props 发生变化,并没有同步到 state 里面,那这个属性就不是一个外部可控制的属性了。
另外并没有看到 setState 语句,意思是后续不需要变动,为何不是直接用 props 就够了。
src/components/calendar/Calendar.tsx
Outdated
| content: string | React.ReactElement; | ||
| color?: string; | ||
| }>; | ||
| scheduleAction?: React.ReactElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 component 不应该处理 Action 相关逻辑,只有渲染器才需要考虑
src/components/calendar/DaysView.tsx
Outdated
| content: any, | ||
| className?: string | ||
| }>; | ||
| scheduleAction?: React.ReactElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
src/components/calendar/DaysView.tsx
Outdated
| if (showSchedule.length > 3) { | ||
| break; | ||
| } | ||
| if (moment(schedule[i].startTime).date() === currentDate.date()) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
最好用 moment 的 api isSame 什么的,维度设置成 天,目前这样可能不准
src/components/calendar/DaysView.tsx
Outdated
| <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>} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要用 translate 来处理 more
src/renderers/Form/InputDate.tsx
Outdated
| strictMode: false, | ||
| scheduleAction: { | ||
| actionType: 'dialog', | ||
| dialog: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
最好不要设置,设置了就得支持多语言
src/renderers/Form/InputDate.tsx
Outdated
| }); | ||
| } | ||
|
|
||
| if (anyChanged(['schedules'], prevProps, props) || |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个判断不够准确,请优化
* feat:日历组件展示日程 * fix: 修改schema * fix: schedule参数说明修改 * fix: 修改schedules参数描述 * fix: 代码调整 * fix: 参数color改为classname * fix: readme文档补充 * feat: 日历组件支持从上下文中获取数据 * fix: 日历组件data获取条件修改 Co-authored-by: hongyang03 <[email protected]>
这个变动的性质是?
需求背景和解决方案
http://wiki.baidu.com/pages/viewpage.action?pageId=1744160651
更新日志
请求合并前的自查清单