From e8bc6f58ba0f1a19d36e2ee37ee4f4ac8ad8f526 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 13 Nov 2015 19:56:34 +0800 Subject: [PATCH] rm NoteList, it should be in demo --- components/calendar/Header.jsx | 2 + components/calendar/NoteList.jsx | 27 ------ components/calendar/Notes.jsx | 44 ---------- components/calendar/demo/basic.md | 39 +-------- components/calendar/demo/card.md | 39 +-------- components/calendar/demo/custom-render.md | 6 +- components/calendar/demo/notice-example.md | 0 components/calendar/index.jsx | 99 +++++----------------- components/calendar/index.md | 21 ++--- 9 files changed, 45 insertions(+), 232 deletions(-) delete mode 100644 components/calendar/NoteList.jsx delete mode 100644 components/calendar/Notes.jsx create mode 100644 components/calendar/demo/notice-example.md diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index 97c94b4a12..ec960ae02a 100644 --- a/components/calendar/Header.jsx +++ b/components/calendar/Header.jsx @@ -87,6 +87,7 @@ class Header extends Component { ); } } + Header.propTypes = { value: PropTypes.object, locale: PropTypes.object, @@ -98,6 +99,7 @@ Header.propTypes = { selectPrefixCls: PropTypes.string, type: PropTypes.string, }; + Header.defaultProps = { prefixCls: `${PREFIX_CLS}-header`, yearSelectOffset: 10, diff --git a/components/calendar/NoteList.jsx b/components/calendar/NoteList.jsx deleted file mode 100644 index 51b38e4121..0000000000 --- a/components/calendar/NoteList.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, {PropTypes, Component} from 'react'; -import {PREFIX_CLS} from './Constants'; - -class NoteList extends Component { - render() { - const {listData, prefixCls} = this.props; - - if (!listData || listData === 0) return null; - - return ( - - ); - } -} -NoteList.propTypes = { - listData: PropTypes.array, - prefixCls: PropTypes.string, -}; -NoteList.defaultProps = { - prefixCls: `${PREFIX_CLS}-note-list`, -}; - -export default NoteList; diff --git a/components/calendar/Notes.jsx b/components/calendar/Notes.jsx deleted file mode 100644 index b67f149e73..0000000000 --- a/components/calendar/Notes.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, {PropTypes, Component} from 'react'; -import NoteList from './NoteList'; -import Popover from '../popover'; -import {PREFIX_CLS} from './Constants'; - -class Notes extends Component { - render() { - const {listData, threshold, prefixCls} = this.props; - - const classNames = [prefixCls]; - let items; - if (listData.length > threshold) { - items = new Array(threshold).fill('gray'); - classNames.push(`${prefixCls}-overflow`); - } else { - items = listData.map(item => item.type); - } - const el = (
- { - items.map((type, i) => ( - ● - ) - ) - } -
); - - return ( - }>{el} - ); - } -} -Notes.propTypes = { - listData: PropTypes.array, - threshold: PropTypes.number, - prefixCls: PropTypes.string, -}; -Notes.defaultProps = { - listData: null, - threshold: 3, - prefixCls: `${PREFIX_CLS}-notes`, -}; - -export default Notes; diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md index 3f74e61343..97a398f8ac 100644 --- a/components/calendar/demo/basic.md +++ b/components/calendar/demo/basic.md @@ -9,44 +9,11 @@ ````jsx import { Calendar } from 'antd'; -function getDateData(value) { - let listData; - switch (value.getDayOfMonth()) { - case 8: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' } - ]; - break; - case 10: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' }, - { type: 'error', content: '这里是错误事项.' } - ]; - break; - case 15: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项好长啊。。....' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' } - ]; - break; - } - return listData; -} - -function getMonthData(value) { - if (value.getMonth() === 8) { - return 1394; - } - return 0; +function onChange(value) { + console.log(value); } ReactDOM.render( - + , document.getElementById('components-calendar-demo-basic')); ```` diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md index b61db9b4fd..fe30ef7aaf 100644 --- a/components/calendar/demo/card.md +++ b/components/calendar/demo/card.md @@ -1,6 +1,6 @@ # 卡片模式 -- order: 0 +- order: 10 用于嵌套在空间有限的容器中。 @@ -9,45 +9,14 @@ ````jsx import { Calendar } from 'antd'; -function getDateData(value) { - let listData; - switch (value.getDayOfMonth()) { - case 8: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' } - ]; - break; - case 10: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' }, - { type: 'error', content: '这里是错误事项.' } - ]; - break; - case 15: - listData = [ - { type: 'warn', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' }, - { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' } - ]; - break; - } - return listData; -} - function onChange(value) { - console.log('change'); -} - -function onTypeChange(type) { - console.log('Type change: %s.', type); + console.log(value); } ReactDOM.render(
- +
, document.getElementById('components-calendar-demo-card')); ```` + diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md index 8fb46671fd..d81be5f13d 100644 --- a/components/calendar/demo/custom-render.md +++ b/components/calendar/demo/custom-render.md @@ -10,14 +10,14 @@ import { Calendar } from 'antd'; function dateCellRender(value) { - return date; + return
date
; } function monthCellRender(value) { - return month; + return
month
; } ReactDOM.render( - + , document.getElementById('components-calendar-demo-custom-render')); ```` diff --git a/components/calendar/demo/notice-example.md b/components/calendar/demo/notice-example.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index e48679b317..f6dc475e99 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -2,8 +2,6 @@ import React, {PropTypes, Component} from 'react'; import GregorianCalendar from 'gregorian-calendar'; import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; import FullCalendar from 'rc-calendar/lib/FullCalendar'; -import Notes from './Notes'; -import NoteList from './NoteList'; import {PREFIX_CLS} from './Constants'; import Header from './Header'; @@ -13,22 +11,14 @@ function zerofixed (v) { if (v < 10) return '0' + v; return v + ''; } + function getNow() { const value = new GregorianCalendar(); value.setTime(Date.now()); return value; } -const MonthCellNoteNum = ({num, prefixCls}) => { - return ( -
-
{num}
- 待办事项数 -
- ); -}; - -class NoticeCalendar extends Component { +class Calendar extends Component { constructor(props) { super(); this.state = { @@ -38,69 +28,27 @@ class NoticeCalendar extends Component { } monthCellRender(value, locale) { const prefixCls = this.props.prefixCls; - const render = this.props.monthCellRender; - let content; - if (render) { - content =
- {render(value)} -
; - } else { - const month = value.getMonth(); - const noteNum = this.props.getMonthData(value); - if (noteNum > 0) { - content = ( -
- {locale.format.shortMonths[month]} - -
- ); - } else { - content =
- {locale.format.shortMonths[month]} -
; - } - } - return content; + const month = value.getMonth(); + return
+ {locale.format.shortMonths[month]} + {this.props.monthCellRender(value)} +
; } fullscreenDateCellRender(value) { const prefixCls = this.props.prefixCls; - const render = this.props.dateCellRender; - let content; - if (render) { - content = - {render(value)} - ; - } else { - content = - { zerofixed(value.getDayOfMonth()) } -
- -
- ; - } - return content; + return + { zerofixed(value.getDayOfMonth()) } + {this.props.dateCellRender(value)} + ; } dateCellRender(value) { const prefixCls = this.props.prefixCls; - const render = this.props.dateCellRender; - let content; - if (render) { - content =
- {render(value)} -
; - } else { - const listData = this.props.getDateData(value); - content =
- - {zerofixed(value.getDayOfMonth())} - - {(listData && listData.length > 0) ? -
- -
: null} -
; - } - return content; + return
+ + {zerofixed(value.getDayOfMonth())} + + {this.props.dateCellRender(value)} +
; } setValue(value) { if (this.state.value !== value) { @@ -150,12 +98,9 @@ class NoticeCalendar extends Component { } } -NoticeCalendar.propTypes = { +Calendar.propTypes = { monthCellRender: PropTypes.func, dateCellRender: PropTypes.func, - fullDateCellRender: PropTypes.func, - getMonthData: PropTypes.func, - getDateData: PropTypes.func, fullscreen: PropTypes.bool, locale: PropTypes.object, prefixCls: PropTypes.string, @@ -165,10 +110,10 @@ NoticeCalendar.propTypes = { onTypeChange: PropTypes.func, }; -NoticeCalendar.defaultProps = { +Calendar.defaultProps = { + monthCellRender: noop, + dateCellRender: noop, locale: CalendarLocale, - getMonthData: noop, - getDateData: noop, fullscreen: true, prefixCls: PREFIX_CLS, onChange: noop, @@ -176,4 +121,4 @@ NoticeCalendar.defaultProps = { type: 'date', }; -export default NoticeCalendar; +export default Calendar; diff --git a/components/calendar/index.md b/components/calendar/index.md index 6ee1392016..60588ab622 100644 --- a/components/calendar/index.md +++ b/components/calendar/index.md @@ -17,17 +17,18 @@ ## API ```html - + ``` | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| value | 展示日期 | gregorian-calendar object | 当前日期 | -| fullscreen | 是否全屏显示 | bool | true | -| getDateData | 获取日的显示数据 | function | 无 | -| getMonthData | 获取月的显示数据 | function | 无 | -| dateCellRender | 自定义渲染日期单元格 | function | 无 | -| monthCellRender | 自定义渲染月单元格 | function | 无 | -| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | -| onChange | 日期改变 | bool | 无 | -| onTypeChange | 年月切换 | function | 无 | +| value | 展示日期 | Date | 当前日期 | +| fullscreen | 是否全屏显示 | bool | true | +| dateCellRender | 自定义渲染日期单元格 | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| 无 | +| monthCellRender | 自定义渲染月单元格 | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/)) | 无 | +| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | +| onChange | 日期面板变化回调 | function | 无 |