From 45b10ef109229ca72835dc5f3f8eb540e11d8c9e Mon Sep 17 00:00:00 2001 From: panwei <1184734081@qq.com> Date: Mon, 17 Feb 2020 15:40:34 +0800 Subject: [PATCH 1/2] feat(custom month title) --- examples/basic.tsx | 16 ++++++++++++++++ package.json | 16 ++++++++-------- src/Calendar.tsx | 3 ++- src/CalendarProps.ts | 2 ++ src/DatePicker.tsx | 2 ++ src/DatePickerProps.ts | 1 + src/date/SingleMonth.tsx | 6 ++++-- 7 files changed, 35 insertions(+), 11 deletions(-) diff --git a/examples/basic.tsx b/examples/basic.tsx index 3347239..9050a00 100644 --- a/examples/basic.tsx +++ b/examples/basic.tsx @@ -64,6 +64,21 @@ class BasicDemo extends React.Component<{}, { ; } + renderMonthTitle = (date:Date) => { + const style = {color:'rgba(25,124,217,1)',fontWeight:600,fontSize:14,lineHeight:22} + return
+ {`${date.getFullYear()}年`} + {`${date.getMonth()}月`} +
+ } + + render() { return (
@@ -120,6 +135,7 @@ class BasicDemo extends React.Component<{}, { }} minDate={new Date(+new Date - 62 * 24 * 3600 * 1000)} maxDate={new Date(+new Date + 365 * 24 * 3600 * 1000)} + renderMonthTitle={this.renderMonthTitle} />
); diff --git a/package.json b/package.json index 8171c70..a9d9855 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "main": "./lib/index", "module": "./es/index", "config": { - "port": 8021 + "port": 8899 }, "scripts": { "watch-tsc": "rc-tools run watch-tsc", @@ -66,19 +66,19 @@ "rmc-date-picker": "~6.0.0-alpha.10" }, "devDependencies": { - "@types/jest": "^21.1.2", - "jest": "^21.2.1", "@types/enzyme": "^2.8.11", - "enzyme": "^3.1.0", "@types/enzyme-to-json": "^1.5.0", - "enzyme-to-json": "^3.1.2", - "enzyme-adapter-react-15": "^1.0.1", - "coveralls": "^3.0.0", + "@types/jest": "^21.1.2", "@types/react": "^16.0.10", "@types/react-dom": "^16.0.1", + "coveralls": "^3.0.0", + "enzyme": "^3.1.0", + "enzyme-adapter-react-15": "^1.0.1", + "enzyme-to-json": "^3.1.2", + "jest": "^21.2.1", "pre-commit": "1.x", "rc-test": "^6.0.8", - "rc-tools": "^7.0.0", + "rc-tools": "^9.5.3", "react": "^15.x", "react-dom": "^15.x", "react-test-renderer": "^15.x", diff --git a/src/Calendar.tsx b/src/Calendar.tsx index e263a2d..1bc71d0 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -191,7 +191,7 @@ export default class Calendar extends React.PureComponent type, locale = {} as Models.Locale, prefixCls, visible, pickTime, showShortcut, renderHeader, infiniteOpt, initalMonths, defaultDate, minDate, maxDate, getDateExtra, rowSize, defaultTimeValue, renderShortcut, enterDirection, timePickerPrefixCls, timePickerPickerPrefixCls, - style, + style,renderMonthTitle } = this.props; const { showTimePicker, timePickerTitle, @@ -233,6 +233,7 @@ export default class Calendar extends React.PureComponent startDate={startDate} endDate={endDate} rowSize={rowSize} + renderMonthTitle={renderMonthTitle} /> { showTimePicker && diff --git a/src/CalendarProps.ts b/src/CalendarProps.ts index ad773ee..8ff0598 100644 --- a/src/CalendarProps.ts +++ b/src/CalendarProps.ts @@ -59,4 +59,6 @@ export default interface PropsType { defaultTimeValue?: Date; timePickerPrefixCls?: string; timePickerPickerPrefixCls?: string; + /** 自定义月的标题 */ + renderMonthTitle?:(date:Date) => React.ReactNode } diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 1161366..04db9a5 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -14,12 +14,14 @@ export default class DatePicker extends Component { genMonthComponent = (data?: Models.MonthData) => { if (!data) return; + const { renderMonthTitle } = this.props return renderMonthTitle(data.firstDate) : undefined} ref={(dom) => { // FIXME?: sometimes will callback twice, and the second is null, when use preact. data.componentRef = dom || data.componentRef || undefined; diff --git a/src/DatePickerProps.ts b/src/DatePickerProps.ts index c63e385..ade709c 100644 --- a/src/DatePickerProps.ts +++ b/src/DatePickerProps.ts @@ -30,4 +30,5 @@ export default interface PropsType { rowSize?: 'normal' | 'xl'; /** 选择类型，default: range，one: 单日，range: 日期区间 */ type?: 'one' | 'range'; + renderMonthTitle?:(date:Date) => React.ReactNode } diff --git a/src/date/SingleMonth.tsx b/src/date/SingleMonth.tsx index d0bfac8..8ccdeba 100644 --- a/src/date/SingleMonth.tsx +++ b/src/date/SingleMonth.tsx @@ -7,6 +7,7 @@ export interface PropsType { rowSize?: 'normal' | 'xl'; getDateExtra?: (date: Date) => Models.ExtraData; onCellClick?: (data: Models.CellData, monthData: Models.MonthData) => void; + renderMonthTitle?:(date:Date) => React.ReactNode } export default class SingleMonth extends React.PureComponent
- {title} + {renderMonthTitle ? renderMonthTitle(firstDate): title}
{weekComponents} From 87cdd36d6404fe967bf6059fbf87e21aa9e9fa73 Mon Sep 17 00:00:00 2001 From: panwei <1184734081@qq.com> Date: Mon, 17 Feb 2020 15:41:37 +0800 Subject: [PATCH 2/2] feat(custom month title) --- examples/basic.tsx | 22 +++++++++++----------- src/Calendar.tsx | 2 +- src/CalendarProps.ts | 2 +- src/DatePicker.base.tsx | 2 +- src/DatePicker.tsx | 2 +- src/DatePickerProps.ts | 2 +- src/date/SingleMonth.tsx | 8 ++++---- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/basic.tsx b/examples/basic.tsx index 9050a00..5fddcde 100644 --- a/examples/basic.tsx +++ b/examples/basic.tsx @@ -64,18 +64,18 @@ class BasicDemo extends React.Component<{}, {
; } - renderMonthTitle = (date:Date) => { - const style = {color:'rgba(25,124,217,1)',fontWeight:600,fontSize:14,lineHeight:22} + renderMonthTitle = (date: Date) => { + const style = { color: 'rgba(25,124,217,1)', fontWeight: 600, fontSize: 14, lineHeight: 22 }; return
- {`${date.getFullYear()}年`} - {`${date.getMonth()}月`} -
+ display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + height: 40, + background: 'rgba(255,255,255,1) rgba(29,43,61,0.03)'}}> + {`${date.getFullYear()}年`} + {`${date.getMonth()}月`} + ; } diff --git a/src/Calendar.tsx b/src/Calendar.tsx index 1bc71d0..0a12b30 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -191,7 +191,7 @@ export default class Calendar extends React.PureComponent type, locale = {} as Models.Locale, prefixCls, visible, pickTime, showShortcut, renderHeader, infiniteOpt, initalMonths, defaultDate, minDate, maxDate, getDateExtra, rowSize, defaultTimeValue, renderShortcut, enterDirection, timePickerPrefixCls, timePickerPickerPrefixCls, - style,renderMonthTitle + style, renderMonthTitle } = this.props; const { showTimePicker, timePickerTitle, diff --git a/src/CalendarProps.ts b/src/CalendarProps.ts index 8ff0598..720bc38 100644 --- a/src/CalendarProps.ts +++ b/src/CalendarProps.ts @@ -60,5 +60,5 @@ export default interface PropsType { timePickerPrefixCls?: string; timePickerPickerPrefixCls?: string; /** 自定义月的标题 */ - renderMonthTitle?:(date:Date) => React.ReactNode + renderMonthTitle?: (date: Date) => React.ReactNode; } diff --git a/src/DatePicker.base.tsx b/src/DatePicker.base.tsx index 523593a..0a7e57e 100644 --- a/src/DatePicker.base.tsx +++ b/src/DatePicker.base.tsx @@ -213,7 +213,7 @@ export default abstract class DatePicker extends React.Component 0) { if (onSelectHasDisableDate) { diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 04db9a5..0a2d7b9 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -14,7 +14,7 @@ export default class DatePicker extends Component { genMonthComponent = (data?: Models.MonthData) => { if (!data) return; - const { renderMonthTitle } = this.props + const { renderMonthTitle } = this.props; return React.ReactNode + renderMonthTitle?: (date: Date) => React.ReactNode; } diff --git a/src/date/SingleMonth.tsx b/src/date/SingleMonth.tsx index 8ccdeba..e2374ce 100644 --- a/src/date/SingleMonth.tsx +++ b/src/date/SingleMonth.tsx @@ -7,7 +7,7 @@ export interface PropsType { rowSize?: 'normal' | 'xl'; getDateExtra?: (date: Date) => Models.ExtraData; onCellClick?: (data: Models.CellData, monthData: Models.MonthData) => void; - renderMonthTitle?:(date:Date) => React.ReactNode + renderMonthTitle?: (date: Date) => React.ReactNode; } export default class SingleMonth extends React.PureComponent
- {renderMonthTitle ? renderMonthTitle(firstDate): title} + {renderMonthTitle ? renderMonthTitle(firstDate) : title}
{weekComponents}