From 2ff96aa93c4748e2984484064ba3488b4d4cfd42 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Wed, 14 Jun 2017 16:28:43 +0800 Subject: [PATCH 1/5] fix react16 warning, ref https://github.com/ant-design/ant-design-mobile/issues/1118 --- package.json | 2 ++ src/DatePicker.tsx | 3 ++- src/Popup.tsx | 3 ++- tests/simple.spec.tsx | 1 - 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index f78c69c..3317b46 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "devDependencies": { "coveralls": "^2.11.15", "jest": "^20.0.0", + "@types/jest": "^19.2.4", "@types/react": "~0.14.41", "@types/react-dom": "~0.14.18", "@types/react-native": "~0.29.36", @@ -68,6 +69,7 @@ ], "dependencies": { "babel-runtime": "6.x", + "create-react-class": "^15.5.4", "moment": "2.x", "rmc-picker": "^3.8.0" } diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 2ae1647..8eb9173 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import createReactClass from 'create-react-class'; import MultiPicker from 'rmc-picker/lib/MultiPicker'; import IDatePickerProps from './IDatePickerProps'; import moment from 'moment'; @@ -22,7 +23,7 @@ const TIME = 'time'; const MONTH = 'month'; const YEAR = 'year'; -const DatePicker = React.createClass({ +const DatePicker = createReactClass({ getDefaultProps() { return { prefixCls: 'rmc-date-picker', diff --git a/src/Popup.tsx b/src/Popup.tsx index f7283c7..dc6a60c 100644 --- a/src/Popup.tsx +++ b/src/Popup.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import createReactClass from 'create-react-class'; import IDatePickerProps from './IDatePickerProps'; import PopupPicker from 'rmc-picker/lib/Popup'; import { IPopupPickerProps } from 'rmc-picker/lib/PopupPickerTypes'; @@ -8,7 +9,7 @@ export interface IPopupDatePickerProps extends IPopupPickerProps { onChange?: (date?) => void; date?: any; } -const PopupDatePicker = React.createClass({ +const PopupDatePicker = createReactClass({ getDefaultProps() { return { pickerValueProp: 'date', diff --git a/tests/simple.spec.tsx b/tests/simple.spec.tsx index c34d153..a0dd582 100644 --- a/tests/simple.spec.tsx +++ b/tests/simple.spec.tsx @@ -1,4 +1,3 @@ -/* tslint:disable:no-unused-variable */ import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; From b6c88f7aa743007f0bf206a2da92edfa77c90a5c Mon Sep 17 00:00:00 2001 From: silentcloud Date: Thu, 15 Jun 2017 15:55:48 +0800 Subject: [PATCH 2/5] change to es6 --- .gitignore | 3 +- package.json | 3 +- src/DatePicker.tsx | 92 +++++++++++++++++++++++----------------------- src/Popup.tsx | 22 +++++------ 4 files changed, 59 insertions(+), 61 deletions(-) diff --git a/.gitignore b/.gitignore index babe14a..4ce4743 100644 --- a/.gitignore +++ b/.gitignore @@ -34,4 +34,5 @@ android/ xcuserdata yarn.lock .vscode -_ts2js \ No newline at end of file +_ts2js +es diff --git a/package.json b/package.json index 3317b46..d8e0913 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "react": "15.5.x", "react-dom": "15.5.x", "react-native": "0.41.x", - "react-native-index-page": "~0.1.0" + "react-native-index-page": "~0.2.0" }, "typings": "./lib/index.d.ts", "pre-commit": [ @@ -69,7 +69,6 @@ ], "dependencies": { "babel-runtime": "6.x", - "create-react-class": "^15.5.4", "moment": "2.x", "rmc-picker": "^3.8.0" } diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 8eb9173..9564777 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import createReactClass from 'create-react-class'; import MultiPicker from 'rmc-picker/lib/MultiPicker'; import IDatePickerProps from './IDatePickerProps'; import moment from 'moment'; @@ -23,24 +22,23 @@ const TIME = 'time'; const MONTH = 'month'; const YEAR = 'year'; -const DatePicker = createReactClass({ - getDefaultProps() { - return { - prefixCls: 'rmc-date-picker', - pickerPrefixCls: 'rmc-picker', - locale: defaultLocale, - mode: DATE, - minuteStep: 1, - onDateChange() { - }, - }; - }, +class DatePicker extends React.Component { + static defaultProps = { + prefixCls: 'rmc-date-picker', + pickerPrefixCls: 'rmc-picker', + locale: defaultLocale, + mode: DATE, + minuteStep: 1, + onDateChange() { + }, + }; - getInitialState() { - return { - date: this.props.date || this.props.defaultDate, - }; - }, + state = { + date: this.props.date || this.props.defaultDate, + }; + + defaultMinDate: any; + defaultMaxDate: any; componentWillReceiveProps(nextProps) { if ('date' in nextProps) { @@ -48,9 +46,9 @@ const DatePicker = createReactClass({ date: nextProps.date || nextProps.defaultDate, }); } - }, + } - onValueChange(values, index) { + onValueChange = (values, index) => { const value = parseInt(values[index], 10); const props = this.props; const { mode } = props; @@ -93,78 +91,80 @@ const DatePicker = createReactClass({ date: newValue, }); } - props.onDateChange(newValue); - }, + if (props.onDateChange) { + props.onDateChange(newValue); + } + } getDefaultMinDate() { if (!this.defaultMinDate) { this.defaultMinDate = this.getGregorianCalendar([2000, 1, 1, 0, 0, 0]); } return this.defaultMinDate; - }, + } getDefaultMaxDate() { if (!this.defaultMaxDate) { this.defaultMaxDate = this.getGregorianCalendar([2030, 1, 1, 23, 59, 59]); } return this.defaultMaxDate; - }, + } getDate() { return this.state.date || this.getDefaultMinDate(); - }, + } getValue() { return this.getDate(); - }, + } getMinYear() { return this.getMinDate().year(); - }, + } getMaxYear() { return this.getMaxDate().year(); - }, + } getMinMonth() { return this.getMinDate().month(); - }, + } getMaxMonth() { return this.getMaxDate().month(); - }, + } getMinDay() { return this.getMinDate().date(); - }, + } getMaxDay() { return this.getMaxDate().date(); - }, + } getMinHour() { return this.getMinDate().hour(); - }, + } getMaxHour() { return this.getMaxDate().hour(); - }, + } getMinMinute() { return this.getMinDate().minute(); - }, + } getMaxMinute() { return this.getMaxDate().minute(); - }, + } getMinDate() { return this.props.minDate || this.getDefaultMinDate(); - }, + } getMaxDate() { return this.props.maxDate || this.getDefaultMaxDate(); - }, + } getDateData() { const { locale, formatMonth, formatDay, mode } = this.props; @@ -232,14 +232,14 @@ const DatePicker = createReactClass({ monthCol, { key: 'day', props: { children: days } }, ]; - }, + } getTimeData() { let minHour = 0; let maxHour = 23; let minMinute = 0; let maxMinute = 59; - const { mode, locale, minuteStep } = this.props; + const { mode, locale, minuteStep = 1 } = this.props; const date = this.getDate(); const minDateMinute = this.getMinMinute(); const maxDateMinute = this.getMaxMinute(); @@ -298,11 +298,11 @@ const DatePicker = createReactClass({ { key: 'hours', props: { children: hours } }, { key: 'minutes', props: { children: minutes } }, ]; - }, + } getGregorianCalendar(arg) { return moment(arg); - }, + } clipDate(date) { const { mode } = this.props; @@ -337,7 +337,7 @@ const DatePicker = createReactClass({ } } return date; - }, + } getValueCols() { const { mode } = this.props; @@ -372,7 +372,7 @@ const DatePicker = createReactClass({ value, cols, }; - }, + } render() { const { value, cols } = this.getValueCols(); @@ -390,7 +390,7 @@ const DatePicker = createReactClass({ {cols} ); - }, -}); + } +} export default DatePicker; diff --git a/src/Popup.tsx b/src/Popup.tsx index dc6a60c..4a00fde 100644 --- a/src/Popup.tsx +++ b/src/Popup.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import createReactClass from 'create-react-class'; import IDatePickerProps from './IDatePickerProps'; import PopupPicker from 'rmc-picker/lib/Popup'; import { IPopupPickerProps } from 'rmc-picker/lib/PopupPickerTypes'; @@ -9,15 +8,14 @@ export interface IPopupDatePickerProps extends IPopupPickerProps { onChange?: (date?) => void; date?: any; } -const PopupDatePicker = createReactClass({ - getDefaultProps() { - return { - pickerValueProp: 'date', - pickerValueChangeProp: 'onDateChange', - } as any; - }, - onOk(v) { +class PopupDatePicker extends React.Component { + static defaultProps = { + pickerValueProp: 'date', + pickerValueChangeProp: 'onDateChange', + }; + + onOk = (v) => { const { onChange, onOk } = this.props; if (onChange) { onChange(v); @@ -25,7 +23,7 @@ const PopupDatePicker = createReactClass({ if (onOk) { onOk(v); } - }, + } render() { return (({ {...this.props} onOk={this.onOk} />); - }, -}); + } +} export default PopupDatePicker; From 3ddc415ad35c08c79e0ae48f06fe256549c01b15 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Fri, 16 Jun 2017 11:20:00 +0800 Subject: [PATCH 3/5] fix ts typo --- src/DatePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 9564777..4714720 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -239,7 +239,7 @@ class DatePicker extends React.Component { let maxHour = 23; let minMinute = 0; let maxMinute = 59; - const { mode, locale, minuteStep = 1 } = this.props; + const { mode, locale, minuteStep } = this.props; const date = this.getDate(); const minDateMinute = this.getMinMinute(); const maxDateMinute = this.getMaxMinute(); @@ -288,7 +288,7 @@ class DatePicker extends React.Component { } const minutes: any[] = []; - for (let i = minMinute; i <= maxMinute; i += minuteStep) { + for (let i = minMinute; i <= maxMinute; i += minuteStep!) { minutes.push({ value: i + '', label: locale.minute ? i + locale.minute + '' : pad(i), From e26beb9fd6dbbbc56eefb6a5703693c2d313668f Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 26 Jun 2017 11:59:26 +0800 Subject: [PATCH 4/5] fix: test --- tests/simple.spec.tsx | 78 ------------------------------------------- 1 file changed, 78 deletions(-) delete mode 100644 tests/simple.spec.tsx diff --git a/tests/simple.spec.tsx b/tests/simple.spec.tsx deleted file mode 100644 index a0dd582..0000000 --- a/tests/simple.spec.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import $ from 'jquery'; -import moment from 'moment'; -import DatePicker from '../src/index'; -import datePickerLocale from '../src/locale/zh_CN'; - -function offsetTop(el) { - return el.getBoundingClientRect().top; -} - -function isEqTop(t1, t2) { - return Math.abs(offsetTop(t1) - offsetTop(t2)) < 10; -} - -function map$(node, fn) { - const ret: any[] = []; - for (let i = 0; i < node.length; i++) { - ret.push(fn($(node[i]))); - } - return ret; -} - -const date = moment([2014, 10, 16, 17, 30, 0]); - -describe('m-date-picker', () => { - let div; - let component; - let rootDom; - beforeEach(() => { - div = document.createElement('div'); - document.body.appendChild(div); - component = ReactDOM.render( - , div); - rootDom = $(ReactDOM.findDOMNode(component)); - }); - afterEach(() => { - ReactDOM.unmountComponentAtNode(div); - document.body.removeChild(div); - }); - - it('render works', () => { - const wrappers = rootDom.find('.rmc-picker'); - expect(wrappers.length).toBe(5); - const indicators = map$(wrappers, (n) => { - return n.find('.rmc-picker-indicator')[0]; - }); - const scrollItems = map$(wrappers, (m) => { - return m.find('.rmc-picker-item'); - }); - - const yearEl = scrollItems[0].filter(function filter() { - return parseInt(this.innerHTML.slice(0, -1), 10) === date.year(); - }); - - const monthEl = scrollItems[1].filter(function filter() { - return parseInt(this.innerHTML.slice(0, -1), 10) === date.month() + 1; - }); - - const dayEl = scrollItems[2].filter(function filter() { - return parseInt(this.innerHTML.slice(0, -1), 10) === date.date(); - }); - - const hourEl = scrollItems[3].filter(function filter() { - return parseInt(this.innerHTML.slice(0, -1), 10) === date.hour(); - }); - - const minuteEl = scrollItems[4].filter(function filter() { - return parseInt(this.innerHTML.slice(0, -1), 10) === date.minute(); - }); - - expect(isEqTop(yearEl[0], indicators[0])).toBe(true); - expect(isEqTop(monthEl[0], indicators[1])).toBe(true); - expect(isEqTop(dayEl[0], indicators[2])).toBe(true); - expect(isEqTop(hourEl[0], indicators[3])).toBe(true); - expect(isEqTop(minuteEl[0], indicators[4])).toBe(true); - }); -}); From d1b03046e28938a06209c517493a94377d534d64 Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 26 Jun 2017 13:44:16 +0800 Subject: [PATCH 5/5] fix: coverage --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d8e0913..675fc44 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ }, "jest": { "collectCoverageFrom": [ - "src/*" + "lib/*" ], "transform": { "\\.tsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js",