test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

rm NoteList, it should be in demo

Browse Source
This commit is contained in:
afc163 2015-11-13 19:56:34 +08:00
parent 4b4b2dbe36
commit e8bc6f58ba
9 changed files with 45 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/calendar/Header.jsx
View File

@ -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,

27
components/calendar/NoteList.jsx
View File

@ -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 (
<ul className={prefixCls}>
{ listData.map(function (item, index) {
return <li key={`list-${index}`}><span className={`${prefixCls}-node-${item.type}`}>●</span>{ item.content }</li>;
}) }
</ul>
);
}
}
NoteList.propTypes = {
listData: PropTypes.array,
prefixCls: PropTypes.string,
};
NoteList.defaultProps = {
prefixCls: `${PREFIX_CLS}-note-list`,
};
export default NoteList;

44
components/calendar/Notes.jsx
View File

@ -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 = (<div className={classNames.join(' ')}>
{
items.map((type, i) => (
<span key={`item-${i}`}
className={`${prefixCls}-node-${type}`}>●</span>
)
)
}
</div>);
return (
<Popover placement="bottomLeft" trigger={['hover']} overlay={<NoteList listData={listData} />}>{el}</Popover>
);
}
}
Notes.propTypes = {
listData: PropTypes.array,
threshold: PropTypes.number,
prefixCls: PropTypes.string,
};
Notes.defaultProps = {
listData: null,
threshold: 3,
prefixCls: `${PREFIX_CLS}-notes`,
};
export default Notes;

39
components/calendar/demo/basic.md
View File

@ -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(
<Calendar type="date" getDateData={getDateData} getMonthData={getMonthData} />
<Calendar type="date" onChange={onChange} />
, document.getElementById('components-calendar-demo-basic'));
````

39
components/calendar/demo/card.md
View File

@ -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(
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} type="date" getDateData={getDateData} onChange={onChange} onTypeChange={onTypeChange} />
<Calendar fullscreen={false} type="date" onChange={onChange} />
</div>
, document.getElementById('components-calendar-demo-card'));
````

6
components/calendar/demo/custom-render.md
View File

@ -10,14 +10,14 @@
import { Calendar } from 'antd';
function dateCellRender(value) {
return <span>date</span>;
return <div>date</div>;
}
function monthCellRender(value) {
return <span>month</span>;
return <div>month</div>;
}
ReactDOM.render(
<Calendar type="date" dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
<Calendar type="date" value={new Date()} dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
, document.getElementById('components-calendar-demo-custom-render'));
````

0
components/calendar/demo/notice-example.md Normal file
View File

99
components/calendar/index.jsx
View File

@ -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 (
<div className={`${prefixCls}-month`}>
<section>{num}</section>
<span>待办事项数</span>
</div>
);
};
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 = <div className={`${prefixCls}-fullscreen-month`}>
{render(value)}
</div>;
} else {
const month = value.getMonth();
const noteNum = this.props.getMonthData(value);
if (noteNum > 0) {
content = (
<div className={`${prefixCls}-fullscreen-month`}>
<span>{locale.format.shortMonths[month]}</span>
<MonthCellNoteNum num={noteNum} prefixCls={`${prefixCls}-notes`} />
</div>
);
} else {
content = <div className={`${prefixCls}-fullscreen-month`}>
{locale.format.shortMonths[month]}
</div>;
}
}
return content;
const month = value.getMonth();
return <div className={`${prefixCls}-fullscreen-month`}>
<span>{locale.format.shortMonths[month]}</span>
{this.props.monthCellRender(value)}
</div>;
}
fullscreenDateCellRender(value) {
const prefixCls = this.props.prefixCls;
const render = this.props.dateCellRender;
let content;
if (render) {
content = <span className={`${prefixCls}-fullscreen-date`}>
{render(value)}
</span>;
} else {
content = <span className={`${prefixCls}-fullscreen-date`}>
<span>{ zerofixed(value.getDayOfMonth()) }</span>
<div className={`${prefixCls}-note-list-wrapper`}>
<NoteList listData={this.props.getDateData(value)} />
</div>
</span>;
}
return content;
return <span className={`${prefixCls}-fullscreen-date`}>
<span>{ zerofixed(value.getDayOfMonth()) }</span>
{this.props.dateCellRender(value)}
</span>;
}
dateCellRender(value) {
const prefixCls = this.props.prefixCls;
const render = this.props.dateCellRender;
let content;
if (render) {
content = <div style={{ position: 'relative' }}>
{render(value)}
</div>;
} else {
const listData = this.props.getDateData(value);
content = <div style={{ position: 'relative' }}>
<span className={`${prefixCls}-date ${prefixCls}-notes-date`}>
{zerofixed(value.getDayOfMonth())}
</span>
{(listData && listData.length > 0) ?
<div className={`${prefixCls}-notes-wrapper`}>
<Notes listData={listData} />
</div> : null}
</div>;
}
return content;
return <div style={{ position: 'relative' }}>
<span className={`${prefixCls}-date ${prefixCls}-notes-date`}>
{zerofixed(value.getDayOfMonth())}
</span>
{this.props.dateCellRender(value)}
</div>;
}
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;

21
components/calendar/index.md
View File

@ -17,17 +17,18 @@
## API
```html
<Calendar getDateData={getDateDataMethod} getMonthData={getMonthDataMethod} />
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onChange={onChange}
/>
```
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| 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 | 无 |