From 4984ed85e54f442998a335db70618d6184fa397e Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 4 Aug 2016 19:53:55 +0800 Subject: [PATCH] 2.x :boom: --- .gitignore | 2 +- .travis.yml | 10 +- HISTORY.md | 5 + README.md | 26 +++- examples/disabled.js | 28 ++-- examples/hidden.js | 30 ++--- examples/pick-time.js | 23 ++-- examples/value-and-defaultValue.js | 27 ++-- package.json | 26 ++-- src/{module => }/Combobox.jsx | 54 +++----- src/Header.jsx | 175 ++++++++++++++++++++++++ src/{module => }/Panel.jsx | 42 +++--- src/{module => }/Select.jsx | 18 ++- src/TimePicker.jsx | 64 ++++----- src/locale/en_US.js | 8 -- src/locale/ru_RU.js | 8 -- src/locale/zh_CN.js | 8 -- src/mixin/CommonMixin.js | 15 --- src/module/Header.jsx | 204 ---------------------------- src/{util => }/placements.js | 0 src/util/index.js | 8 -- src/util/selection.js | 17 --- tests/Header.spec.jsx | 208 +++++++++++++++-------------- tests/Select.spec.jsx | 140 ++++++++++--------- tests/TimePicker.spec.jsx | 65 +++++---- tests/{index.spec.js => index.js} | 1 + tests/runner.html | 1 - 27 files changed, 559 insertions(+), 654 deletions(-) rename src/{module => }/Combobox.jsx (66%) create mode 100644 src/Header.jsx rename src/{module => }/Panel.jsx (78%) rename src/{module => }/Select.jsx (88%) delete mode 100644 src/locale/en_US.js delete mode 100644 src/locale/ru_RU.js delete mode 100644 src/locale/zh_CN.js delete mode 100644 src/mixin/CommonMixin.js delete mode 100644 src/module/Header.jsx rename src/{util => }/placements.js (100%) delete mode 100644 src/util/index.js delete mode 100644 src/util/selection.js rename tests/{index.spec.js => index.js} (71%) delete mode 100644 tests/runner.html diff --git a/.gitignore b/.gitignore index 037d70d..3de050d 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,4 @@ dist *.css build lib - +coverage \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 15c7ce7..e780b32 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,7 @@ language: node_js +sudo: false + notifications: email: - yiminghe@gmail.com @@ -14,9 +16,8 @@ before_install: echo "Only docs were updated, stopping build process." exit fi - npm install mocha-phantomjs -g + npm install npm@3.x -g phantomjs --version - script: - | if [ "$TEST_TYPE" = test ]; then @@ -24,9 +25,8 @@ script: else npm run $TEST_TYPE fi - env: matrix: - TEST_TYPE=lint - - TEST_TYPE=browser-test - - TEST_TYPE=browser-test-cover + - TEST_TYPE=test + - TEST_TYPE=coverage diff --git a/HISTORY.md b/HISTORY.md index 00609e5..8cfc326 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,11 @@ --- +2.0.0 / 2016-08-04 +--------------------------- + +goodbye gregorian-calendar, hello moment + 1.1.0 / 2016-01-14 --------------------------- diff --git a/README.md b/README.md index 483ee2b..3ae31aa 100644 --- a/README.md +++ b/README.md @@ -51,15 +51,17 @@ API | Name | Type | Default | Description | |-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| | prefixCls | String | | prefixCls of this component | -| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | +| clearText | String | 'clear' | | | disabled | Boolean | false | whether picker is disabled | +| clearText | String | clear | clear text | | open | Boolean | false | current open state of picker. controlled prop | -| defaultValue | GregorianCalendar | null | default initial value | -| value | GregorianCalendar | null | current value | +| defaultValue | moment | null | default initial value | +| defaultOpenValue | moment | moment() | default open panel value, used to set utcOffset,locale if value/defaultValue absent | +| value | moment | null | current value | | placeholder | String | '' | time input's placeholder | | showHour | Boolean | whether show hour | | | showSecond | Boolean | whether show second | | -| formatter | String|GregorianCalendarFormatter | | | +| format | String | | | | disabledHours | Function | disabled hour options | | | disabledMinutes | Function | disabled minute options | | | disabledSeconds | Function | disabled second options | | @@ -68,6 +70,22 @@ API | placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | | transitionName | String | '' | | + +## Test Case + +``` +npm test +npm run chrome-test +``` + +## Coverage + +``` +npm run coverage +``` + +open coverage/ dir + License ------- diff --git a/examples/disabled.js b/examples/disabled.js index b650448..9d74002 100644 --- a/examples/disabled.js +++ b/examples/disabled.js @@ -5,19 +5,14 @@ import 'rc-time-picker/assets/index.less'; import React from 'react'; import ReactDom from 'react-dom'; -import GregorianCalendar from 'gregorian-calendar'; -import DateTimeFormat from 'gregorian-calendar-format'; +import moment from 'moment'; import TimePicker from 'rc-time-picker'; -import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; const showSecond = true; const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; -const formatter = new DateTimeFormat(str); - -const now = new GregorianCalendar(TimePickerLocale.calendar); -now.setTime(Date.now()); +const now = moment().hour(14).minute(30); function generateOptions(length, excludedOptions) { const arr = []; @@ -30,7 +25,7 @@ function generateOptions(length, excludedOptions) { } function onChange(value) { - console.log(value && formatter.format(value)); + console.log(value && value.format(str)); } function disabledHours() { @@ -53,13 +48,14 @@ function disabledSeconds(h, m) { } ReactDom.render( - , + , document.getElementById('__react-content') ); diff --git a/examples/hidden.js b/examples/hidden.js index 16abd2a..90a20d2 100644 --- a/examples/hidden.js +++ b/examples/hidden.js @@ -5,32 +5,28 @@ import 'rc-time-picker/assets/index.less'; import React from 'react'; import ReactDom from 'react-dom'; -import GregorianCalendar from 'gregorian-calendar'; -import DateTimeFormat from 'gregorian-calendar-format'; +import moment from 'moment'; import TimePicker from 'rc-time-picker'; -import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; const showSecond = true; const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; -const formatter = new DateTimeFormat(str); - -const now = new GregorianCalendar(TimePickerLocale.calendar); -now.setTime(Date.now()); - function onChange(value) { - console.log(value && formatter.format(value)); + console.log(value && value.format(str)); } ReactDom.render( - [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} - disabledMinutes={() => [0, 2, 4, 6, 8]} - hideDisabledOptions />, + [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} + disabledMinutes={() => [0, 2, 4, 6, 8]} + hideDisabledOptions + />, document.getElementById('__react-content') ); diff --git a/examples/pick-time.js b/examples/pick-time.js index 8fa7831..835e1e1 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js @@ -5,30 +5,25 @@ import 'rc-time-picker/assets/index.less'; import React from 'react'; import ReactDom from 'react-dom'; -import GregorianCalendar from 'gregorian-calendar'; -import DateTimeFormat from 'gregorian-calendar-format'; +import moment from 'moment'; import TimePicker from 'rc-time-picker'; -import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; const showSecond = true; const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; -const formatter = new DateTimeFormat(str); - -const now = new GregorianCalendar(TimePickerLocale.calendar); -now.setTime(Date.now()); function onChange(value) { - console.log(value && formatter.format(value)); + console.log(value && value.format(str)); } ReactDom.render( - , + , document.getElementById('__react-content') ); diff --git a/examples/value-and-defaultValue.js b/examples/value-and-defaultValue.js index 1be30cc..0e1aa14 100644 --- a/examples/value-and-defaultValue.js +++ b/examples/value-and-defaultValue.js @@ -4,25 +4,17 @@ import 'rc-time-picker/assets/index.less'; import React from 'react'; import ReactDom from 'react-dom'; - -import GregorianCalendar from 'gregorian-calendar'; -import DateTimeFormat from 'gregorian-calendar-format'; +import moment from 'moment'; import TimePicker from 'rc-time-picker'; -import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; - -const formatter = new DateTimeFormat('HH:mm:ss'); - -const now = new GregorianCalendar(TimePickerLocale.calendar); -now.setTime(Date.now()); const App = React.createClass({ getInitialState() { return { - value: now, + value: moment(), }; }, handleValueChange(value) { - console.log(value && formatter.format(value)); + console.log(value && value.format('HH:mm:ss')); this.setState({ value }); }, clear() { @@ -33,11 +25,14 @@ const App = React.createClass({ render() { return (
- - + +
); diff --git a/package.json b/package.json index 4fd7055..4690f1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "1.1.6", + "version": "2.0.0", "description": "React TimePicker", "keywords": [ "react", @@ -33,34 +33,34 @@ "scripts": { "build": "rc-tools run build", "gh-pages": "rc-tools run gh-pages", - "start": "rc-server", - "pub": "rc-tools run pub", + "start": "rc-tools run server", + "pub": "rc-tools run pub --babel-runtime", "lint": "rc-tools run lint", "karma": "rc-tools run karma", "saucelabs": "rc-tools run saucelabs", - "browser-test": "rc-tools run browser-test", - "browser-test-cover": "rc-tools run browser-test-cover" + "test": "rc-tools run test", + "chrome-test": "rc-tools run chrome-test", + "coverage": "rc-tools run coverage" }, "devDependencies": { "async": "~0.9.0", "bootstrap": "~3.3.2", "expect.js": "~0.3.1", - "jquery": "~1.11.3", + "jquery": "1.x", "pre-commit": "1.x", - "rc-server": "3.x", - "rc-tools": "4.x", + "rc-tools": "5.x", "rc-util": "^3.1.2", - "react": "0.14.x", - "react-addons-test-utils": "0.14.x", - "react-dom": "0.14.x" + "react": "15.x", + "react-addons-test-utils": "15.x", + "react-dom": "15.x" }, "pre-commit": [ "lint" ], "dependencies": { + "babel-runtime": "6.x", "classnames": "2.x", - "gregorian-calendar": "4.x", - "gregorian-calendar-format": "4.x", + "moment": "2.x", "rc-trigger": "1.x" } } diff --git a/src/module/Combobox.jsx b/src/Combobox.jsx similarity index 66% rename from src/module/Combobox.jsx rename to src/Combobox.jsx index f1e7c5b..9d9da16 100644 --- a/src/module/Combobox.jsx +++ b/src/Combobox.jsx @@ -1,6 +1,5 @@ -import React, {PropTypes} from 'react'; +import React, { PropTypes } from 'react'; import Select from './Select'; -import GregorianCalendar from 'gregorian-calendar'; const formatOption = (option, disabledOptions) => { let value = `${option}`; @@ -21,12 +20,12 @@ const formatOption = (option, disabledOptions) => { const Combobox = React.createClass({ propTypes: { - formatter: PropTypes.object, + format: PropTypes.string, + defaultOpenValue: PropTypes.object, prefixCls: PropTypes.string, value: PropTypes.object, onChange: PropTypes.func, showHour: PropTypes.bool, - gregorianCalendarLocale: PropTypes.object, showSecond: PropTypes.bool, hourOptions: PropTypes.array, minuteOptions: PropTypes.array, @@ -38,19 +37,14 @@ const Combobox = React.createClass({ }, onItemChange(type, itemValue) { - const { onChange } = this.props; - let value = this.props.value; - if (value) { - value = value.clone(); - } else { - value = this.getNow().clone(); - } + const { onChange, defaultOpenValue } = this.props; + const value = (this.props.value || defaultOpenValue).clone(); if (type === 'hour') { - value.setHourOfDay(itemValue); + value.hour(itemValue); } else if (type === 'minute') { - value.setMinutes(itemValue); + value.minute(itemValue); } else { - value.setSeconds(itemValue); + value.second(itemValue); } onChange(value); }, @@ -79,9 +73,9 @@ const Combobox = React.createClass({ }, getMinuteSelect(minute) { - const { prefixCls, minuteOptions, disabledMinutes } = this.props; - const value = this.props.value || this.getNow(); - const disabledOptions = disabledMinutes(value.getHourOfDay()); + const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue } = this.props; + const value = this.props.value || defaultOpenValue; + const disabledOptions = disabledMinutes(value.hour()); return ( ); + }, + + render() { + const { prefixCls } = this.props; + return ( +
+ {this.getInput()} + {this.getClearButton()} +
+ ); + }, +}); + +export default Header; diff --git a/src/module/Panel.jsx b/src/Panel.jsx similarity index 78% rename from src/module/Panel.jsx rename to src/Panel.jsx index 137ec2f..f70cf38 100644 --- a/src/module/Panel.jsx +++ b/src/Panel.jsx @@ -1,7 +1,7 @@ -import React, {PropTypes} from 'react'; -import CommonMixin from '../mixin/CommonMixin'; +import React, { PropTypes } from 'react'; import Header from './Header'; import Combobox from './Combobox'; +import moment from 'moment'; function noop() { } @@ -18,12 +18,12 @@ function generateOptions(length, disabledOptions, hideDisabledOptions) { const Panel = React.createClass({ propTypes: { + clearText: PropTypes.string, prefixCls: PropTypes.string, + defaultOpenValue: PropTypes.object, value: PropTypes.object, - locale: PropTypes.object, placeholder: PropTypes.string, - gregorianCalendarLocale: PropTypes.object, - formatter: PropTypes.object, + format: PropTypes.string, disabledHours: PropTypes.func, disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, @@ -36,13 +36,12 @@ const Panel = React.createClass({ onClear: PropTypes.func, }, - mixins: [CommonMixin], - getDefaultProps() { return { prefixCls: 'rc-time-picker-panel', onChange: noop, onClear: noop, + defaultOpenValue: moment(), }; }, @@ -76,11 +75,18 @@ const Panel = React.createClass({ }, render() { - const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; - const value = this.state.value; + const { + prefixCls, placeholder, disabledHours, disabledMinutes, + disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, + format, defaultOpenValue, clearText, onEsc, + } = this.props; + const { + value, currentSelectPanel, + } = this.state; const disabledHourOptions = disabledHours(); - const disabledMinuteOptions = disabledMinutes(value ? value.getHourOfDay() : null); - const disabledSecondOptions = disabledSeconds(value ? value.getHourOfDay() : null, value ? value.getMinutes() : null); + const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null); + const disabledSecondOptions = disabledSeconds(value ? value.hour() : null, + value ? value.minute() : null); const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); @@ -88,13 +94,13 @@ const Panel = React.createClass({ return (
{item.value}; + return (
  • + {item.value} +
    • ); }); }, @@ -86,8 +92,10 @@ const Select = React.createClass({ const { prefixCls } = this.props; return ( -
    +
      {this.getOptions()}
    ); diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 86faa71..58f6ea1 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -1,9 +1,8 @@ import React, { PropTypes } from 'react'; import Trigger from 'rc-trigger'; -import Panel from './module/Panel'; -import placements from './util/placements'; -import CommonMixin from './mixin/CommonMixin'; -import { getFormatter } from './util/index'; +import Panel from './Panel'; +import placements from './placements'; +import moment from 'moment'; function noop() { } @@ -15,8 +14,9 @@ function refFn(field, component) { const Picker = React.createClass({ propTypes: { prefixCls: PropTypes.string, - locale: PropTypes.object, + clearText: PropTypes.string, value: PropTypes.object, + defaultOpenValue: PropTypes.object, disabled: PropTypes.bool, allowEmpty: PropTypes.bool, defaultValue: PropTypes.object, @@ -27,7 +27,7 @@ const Picker = React.createClass({ transitionName: PropTypes.string, getPopupContainer: PropTypes.func, placeholder: PropTypes.string, - formatter: PropTypes.any, + format: PropTypes.string, showHour: PropTypes.bool, style: PropTypes.object, className: PropTypes.string, @@ -41,15 +41,15 @@ const Picker = React.createClass({ onClose: PropTypes.func, }, - mixins: [CommonMixin], - getDefaultProps() { return { + clearText: 'clear', prefixCls: 'rc-time-picker', defaultOpen: false, style: {}, className: '', align: {}, + defaultOpenValue: moment(), allowEmpty: true, showHour: true, showSecond: true, @@ -118,56 +118,40 @@ const Picker = React.createClass({ this.props.onChange(value); }, - getFormatter() { - const formatter = this.props.formatter; - const locale = this.props.locale; - if (formatter) { - if (formatter === this.lastFormatter) { - return this.normalFormatter; - } - this.normalFormatter = getFormatter(formatter, locale); - this.lastFormatter = formatter; - return this.normalFormatter; + getFormat() { + const format = this.props.format; + if (format) { + return format; } if (!this.props.showSecond) { - if (!this.notShowSecondFormatter) { - this.notShowSecondFormatter = getFormatter('HH:mm', locale); - } - return this.notShowSecondFormatter; + return 'HH:mm'; } if (!this.props.showHour) { - if (!this.notShowHourFormatter) { - this.notShowHourFormatter = getFormatter('mm:ss', locale); - } - return this.notShowHourFormatter; + return 'mm:ss'; } - if (!this.normalFormatter) { - this.normalFormatter = getFormatter('HH:mm:ss', locale); - } - return this.normalFormatter; + return 'HH:mm:ss'; }, getPanelElement() { const { - prefixCls, defaultValue, locale, placeholder, disabledHours, + prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, - allowEmpty, showHour, showSecond, + allowEmpty, showHour, showSecond, defaultOpenValue, clearText, } = this.props; return ( diff --git a/src/locale/en_US.js b/src/locale/en_US.js deleted file mode 100644 index 506f4c9..0000000 --- a/src/locale/en_US.js +++ /dev/null @@ -1,8 +0,0 @@ -import enUs from 'gregorian-calendar-format/lib/locale/en_US'; -import enUsCalendar from 'gregorian-calendar/lib/locale/en_US'; - -export default { - clear: 'Clear', - format: enUs, - calendar: enUsCalendar, -}; diff --git a/src/locale/ru_RU.js b/src/locale/ru_RU.js deleted file mode 100644 index 86746ea..0000000 --- a/src/locale/ru_RU.js +++ /dev/null @@ -1,8 +0,0 @@ -import ruRu from 'gregorian-calendar-format/lib/locale/ru_RU'; -import ruRuCalendar from 'gregorian-calendar/lib/locale/ru_RU'; - -export default { - clear: 'Очистить', - format: ruRu, - calendar: ruRuCalendar, -}; diff --git a/src/locale/zh_CN.js b/src/locale/zh_CN.js deleted file mode 100644 index 1e977be..0000000 --- a/src/locale/zh_CN.js +++ /dev/null @@ -1,8 +0,0 @@ -import zhCn from 'gregorian-calendar-format/lib/locale/zh_CN'; -import zhCnCalendar from 'gregorian-calendar/lib/locale/zh_CN'; - -export default { - clear: '清除', - format: zhCn, - calendar: zhCnCalendar, -}; diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js deleted file mode 100644 index be080fd..0000000 --- a/src/mixin/CommonMixin.js +++ /dev/null @@ -1,15 +0,0 @@ -import {PropTypes} from 'react'; -import enUs from '../locale/en_US'; - -export default { - propTypes: { - prefixCls: PropTypes.string, - locale: PropTypes.object, - }, - - getDefaultProps() { - return { - locale: enUs, - }; - }, -}; diff --git a/src/module/Header.jsx b/src/module/Header.jsx deleted file mode 100644 index a926e98..0000000 --- a/src/module/Header.jsx +++ /dev/null @@ -1,204 +0,0 @@ -import React, { PropTypes } from 'react'; -import createSelection from '../util/selection'; - -const Header = React.createClass({ - propTypes: { - formatter: PropTypes.object, - prefixCls: PropTypes.string, - gregorianCalendarLocale: PropTypes.object, - locale: PropTypes.object, - disabledDate: PropTypes.func, - placeholder: PropTypes.string, - value: PropTypes.object, - hourOptions: PropTypes.array, - minuteOptions: PropTypes.array, - secondOptions: PropTypes.array, - disabledHours: PropTypes.func, - disabledMinutes: PropTypes.func, - disabledSeconds: PropTypes.func, - onChange: PropTypes.func, - onClear: PropTypes.func, - onEsc: PropTypes.func, - allowEmpty: PropTypes.bool, - currentSelectPanel: PropTypes.string, - }, - - getInitialState() { - const value = this.props.value; - return { - str: value && this.props.formatter.format(value) || '', - invalid: false, - }; - }, - - componentDidMount() { - this.timer = setTimeout(this.selectRange, 0); - }, - - componentWillReceiveProps(nextProps) { - const value = nextProps.value; - this.setState({ - str: value && nextProps.formatter.format(value) || '', - invalid: false, - }); - }, - - componentDidUpdate() { - this.timer = setTimeout(this.selectRange, 0); - }, - - componentWillUnmount() { - clearTimeout(this.timer); - }, - - onInputChange(event) { - const str = event.target.value; - this.setState({ - str, - }); - let value = null; - const { formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty } = this.props; - - if (str) { - const originalValue = this.props.value; - try { - value = formatter.parse(str, { - locale: gregorianCalendarLocale, - obeyCount: true, - }); - } catch (ex) { - this.setState({ - invalid: true, - }); - return; - } - - if (value) { - // if time value not allowed, response warning. - if ( - hourOptions.indexOf(value.getHourOfDay()) < 0 || - minuteOptions.indexOf(value.getMinutes()) < 0 || - secondOptions.indexOf(value.getSeconds()) < 0 - ) { - this.setState({ - invalid: true, - }); - return; - } - - // if time value is disabled, response warning. - const disabledHourOptions = disabledHours(); - const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); - const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); - if ( - (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || - (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || - (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) - ) { - this.setState({ - invalid: true, - }); - return; - } - - if (originalValue && value) { - if ( - originalValue.getHourOfDay() !== value.getHourOfDay() || - originalValue.getMinutes() !== value.getMinutes() || - originalValue.getSeconds() !== value.getSeconds() - ) { - // keep other fields for rc-calendar - const changedValue = originalValue.clone(); - changedValue.setHourOfDay(value.getHourOfDay()); - changedValue.setMinutes(value.getMinutes()); - changedValue.setSeconds(value.getSeconds()); - onChange(changedValue); - } - } else if (originalValue !== value) { - onChange(value); - } - } else { - this.setState({ - invalid: true, - }); - return; - } - } else if (allowEmpty) { - onChange(null); - } else { - this.setState({ - invalid: true, - }); - return; - } - - this.setState({ - invalid: false, - }); - }, - - onKeyDown(e) { - if (e.keyCode === 27) { - this.props.onEsc(); - } - }, - - onClear() { - this.setState({ str: '' }); - this.props.onClear(); - }, - - getClearButton() { - const { locale, prefixCls, allowEmpty } = this.props; - if (!allowEmpty) { - return null; - } - return ; - }, - - getInput() { - const { prefixCls, placeholder } = this.props; - const { invalid, str } = this.state; - const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; - return (); - }, - - selectRange() { - this.refs.input.select(); - if (this.props.currentSelectPanel && this.refs.input.value) { - let selectionRangeStart = 0; - let selectionRangeEnd = 0; - if (this.props.currentSelectPanel === 'hour') { - selectionRangeStart = 0; - selectionRangeEnd = this.refs.input.value.indexOf(':'); - } else if (this.props.currentSelectPanel === 'minute') { - selectionRangeStart = this.refs.input.value.indexOf(':') + 1; - selectionRangeEnd = this.refs.input.value.lastIndexOf(':'); - } else if (this.props.currentSelectPanel === 'second') { - selectionRangeStart = this.refs.input.value.lastIndexOf(':') + 1; - selectionRangeEnd = this.refs.input.value.length; - } - if (selectionRangeEnd - selectionRangeStart === 2) { - createSelection(this.refs.input, selectionRangeStart, selectionRangeEnd); - } - } - }, - - render() { - const { prefixCls } = this.props; - return ( -
    - {this.getInput()} - {this.getClearButton()} -
    - ); - }, -}); - -export default Header; diff --git a/src/util/placements.js b/src/placements.js similarity index 100% rename from src/util/placements.js rename to src/placements.js diff --git a/src/util/index.js b/src/util/index.js deleted file mode 100644 index 5bc0a78..0000000 --- a/src/util/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import DateTimeFormat from 'gregorian-calendar-format'; - -export function getFormatter(format, locale) { - if (typeof format === 'string') { - return new DateTimeFormat(format, locale.format); - } - return format; -} diff --git a/src/util/selection.js b/src/util/selection.js deleted file mode 100644 index 395901e..0000000 --- a/src/util/selection.js +++ /dev/null @@ -1,17 +0,0 @@ -export default function createSelection(field, start, end) { - if (field.createTextRange) { - const selRange = field.createTextRange(); - selRange.collapse(true); - selRange.moveStart('character', start); - selRange.moveEnd('character', end); - selRange.select(); - field.focus(); - } else if (field.setSelectionRange) { - field.focus(); - field.setSelectionRange(start, end); - } else if (typeof field.selectionStart !== 'undefined') { - field.selectionStart = start; - field.selectionEnd = end; - field.focus(); - } -} diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx index e992279..d5e570d 100644 --- a/tests/Header.spec.jsx +++ b/tests/Header.spec.jsx @@ -6,32 +6,21 @@ import TestUtils from 'react-addons-test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; -import {KeyCode} from 'rc-util'; - -import DateTimeFormat from 'gregorian-calendar-format'; -import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; -import TimePickerLocale from '../src/locale/zh_CN'; - -function formatTime(time, formatter) { - return formatter.parse(time, { - locale: zhCn, - obeyCount: true, - }); -} +import { KeyCode } from 'rc-util'; +import moment from 'moment'; describe('Header', () => { let container; function renderPicker(props) { const showSecond = true; - const formatter = new DateTimeFormat('HH:mm:ss'); + const format = 'HH:mm:ss'; return ReactDOM.render( , container); } @@ -50,25 +39,27 @@ describe('Header', () => { it('input correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '12:34:56'; + (header).value = '12:34:56'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('12:34:56'); - expect(ReactDOM.findDOMNode(input).value).to.be('12:34:56'); + expect((header).value).to.be('12:34:56'); + expect((input).value).to.be('12:34:56'); next(); }], () => { @@ -79,41 +70,43 @@ describe('Header', () => { it('carry correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '33:44:55'; + (header).value = '33:44:55'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('09:44:55'); - expect(ReactDOM.findDOMNode(input).value).to.be('09:44:55'); + expect((header).value).to.be('33:44:55'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:90:30'; + (header).value = '10:90:30'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('11:30:30'); - expect(ReactDOM.findDOMNode(input).value).to.be('11:30:30'); + expect((header).value).to.be('10:90:30'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '34:56:78'; + (header).value = '34:56:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('10:57:18'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:57:18'); + expect((header).value).to.be('34:56:78'); + expect((input).value).to.be('01:02:03'); next(); }], () => { @@ -131,51 +124,53 @@ describe('Header', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:78'; + (header).value = '10:09:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('10:09:78'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:10:78'; + (header).value = '10:10:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + expect((header).value).to.be('10:10:78'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:19'; + (header).value = '10:09:19'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('10:09:19'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:20'; + (header).value = '10:09:20'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20'); + expect((header).value).to.be('10:09:20'); + expect((input).value).to.be('10:09:20'); next(); }], () => { @@ -194,51 +189,53 @@ describe('Header', () => { hideDisabledOptions: true, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:78'; + (header).value = '10:09:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('10:09:78'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:10:78'; + (header).value = '10:10:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + expect((header).value).to.be('10:10:78'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:19'; + (header).value = '10:09:19'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('10:09:19'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '10:09:20'; + (header).value = '10:09:20'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20'); - expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20'); + expect((header).value).to.be('10:09:20'); + expect((input).value).to.be('10:09:20'); next(); }], () => { @@ -249,44 +246,46 @@ describe('Header', () => { it('check correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '3:34:56'; + (header).value = '3:34:56'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('3:34:56'); + expect((input).value).to.be('01:02:03'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); - ReactDOM.findDOMNode(header).value = '13:3:56'; + (header).value = '13:3:56'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('13:3:56'); + expect((input).value).to.be('01:02:03'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); - ReactDOM.findDOMNode(header).value = '13:34:5'; + (header).value = '13:34:5'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect((header).value).to.be('13:34:5'); + expect((input).value).to.be('01:02:03'); + expect((header).className).to.contain('rc-time-picker-panel-input-invalid'); next(); }], () => { done(); @@ -303,7 +302,8 @@ describe('Header', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -312,20 +312,22 @@ describe('Header', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; - const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; + const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-clear-btn')[0]; expect(header).to.be.ok(); expect(clearButton).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); Simulate.mouseDown(clearButton); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(false); expect(change).to.be(null); - expect(ReactDOM.findDOMNode(header).value).to.be(''); - expect(ReactDOM.findDOMNode(input).value).to.be(''); + expect((header).value).to.be(''); + expect((input).value).to.be(''); next(); }], () => { @@ -336,7 +338,8 @@ describe('Header', () => { it('exit correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -345,19 +348,20 @@ describe('Header', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); - Simulate.keyDown(ReactDOM.findDOMNode(header), { + Simulate.keyDown((header), { keyCode: KeyCode.ESC, }); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(false); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect((header).value).to.be('01:02:03'); + expect((input).value).to.be('01:02:03'); next(); }], () => { diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx index f7717c7..e6d32dd 100644 --- a/tests/Select.spec.jsx +++ b/tests/Select.spec.jsx @@ -1,35 +1,24 @@ import ReactDOM from 'react-dom'; import React from 'react'; import TimePicker from '../src/TimePicker'; - import TestUtils from 'react-addons-test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; -import DateTimeFormat from 'gregorian-calendar-format'; -import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; -import TimePickerLocale from '../src/locale/zh_CN'; - -function formatTime(time, formatter) { - return formatter.parse(time, { - locale: zhCn, - obeyCount: true, - }); -} +import moment from 'moment'; describe('Select', () => { let container; function renderPicker(props) { const showSecond = true; - const formatter = new DateTimeFormat('HH:mm:ss'); + const format = 'HH:mm:ss'; return ReactDOM.render( , container); } @@ -48,7 +37,8 @@ describe('Select', () => { it('select number correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let selector; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -57,7 +47,8 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select'); + selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select'); setTimeout(next, 100); }, (next) => { @@ -79,7 +70,8 @@ describe('Select', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -88,20 +80,22 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[0]; const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(19); - expect(ReactDOM.findDOMNode(header).value).to.be('19:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04'); + expect(change.hour()).to.be(19); + expect((header).value).to.be('19:02:04'); + expect((input).value).to.be('19:02:04'); expect(picker.state.open).to.be.ok(); next(); @@ -118,7 +112,8 @@ describe('Select', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -127,20 +122,22 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[1]; const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getMinutes()).to.be(19); - expect(ReactDOM.findDOMNode(header).value).to.be('01:19:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04'); + expect(change.minute()).to.be(19); + expect((header).value).to.be('01:19:04'); + expect((input).value).to.be('01:19:04'); expect(picker.state.open).to.be.ok(); next(); @@ -157,7 +154,8 @@ describe('Select', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -166,20 +164,22 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[2]; const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getSeconds()).to.be(19); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19'); + expect(change.second()).to.be(19); + expect((header).value).to.be('01:02:19'); + expect((input).value).to.be('01:02:19'); expect(picker.state.open).to.be.ok(); next(); @@ -202,7 +202,8 @@ describe('Select', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; let header; async.series([(next) => { expect(picker.state.open).to.be(false); @@ -211,40 +212,44 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[1]; const option = selector.getElementsByTagName('li')[1]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).not.to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); expect(picker.state.open).to.be.ok(); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[2]; const option = selector.getElementsByTagName('li')[3]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).not.to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); expect(picker.state.open).to.be.ok(); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[1]; const option = selector.getElementsByTagName('li')[7]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getMinutes()).to.be(7); - expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04'); + expect(change.minute()).to.be(7); + expect((header).value).to.be('01:07:04'); + expect((input).value).to.be('01:07:04'); expect(picker.state.open).to.be.ok(); next(); @@ -274,31 +279,34 @@ describe('Select', () => { setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect((header).value).to.be('01:02:04'); + expect((input).value).to.be('01:02:04'); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[0]; const option = selector.getElementsByTagName('li')[3]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(6); - expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04'); + expect(change.hour()).to.be(6); + expect((header).value).to.be('06:02:04'); + expect((input).value).to.be('06:02:04'); expect(picker.state.open).to.be.ok(); - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-select')[0]; const option = selector.getElementsByTagName('li')[4]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(8); - expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04'); - expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04'); + expect(change.hour()).to.be(8); + expect((header).value).to.be('08:02:04'); + expect((input).value).to.be('08:02:04'); expect(picker.state.open).to.be.ok(); next(); diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx index 95a1fd1..150f727 100644 --- a/tests/TimePicker.spec.jsx +++ b/tests/TimePicker.spec.jsx @@ -6,45 +6,33 @@ import TestUtils from 'react-addons-test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; - -import DateTimeFormat from 'gregorian-calendar-format'; -import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; -import TimePickerLocale from '../src/locale/zh_CN'; - -function formatTime(time, formatter) { - return formatter.parse(time, { - locale: zhCn, - obeyCount: true, - }); -} +import moment from 'moment'; describe('TimePicker', () => { let container; function renderPicker(props) { const showSecond = true; - const formatter = new DateTimeFormat('HH:mm:ss'); + const format = ('HH:mm:ss'); return ReactDOM.render( , container); } function renderPickerWithoutSeconds(props) { const showSecond = false; - const formatter = new DateTimeFormat('HH:mm'); + const format = ('HH:mm'); return ReactDOM.render( , container); } @@ -68,23 +56,25 @@ describe('TimePicker', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; - expect(ReactDOM.findDOMNode(input).value).to.be('12:57:58'); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; + expect((input).value).to.be('12:57:58'); async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); + expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-inner')[0]).to.be.ok(); expect(picker.state.open).to.be(true); const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; Simulate.click(hour); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(1); - expect(change.getMinutes()).to.be(57); - expect(change.getSeconds()).to.be(58); - expect(ReactDOM.findDOMNode(input).value).to.be('01:57:58'); + expect(change.hour()).to.be(1); + expect(change.minute()).to.be(57); + expect(change.second()).to.be(58); + expect((input).value).to.be('01:57:58'); expect(picker.state.open).to.be.ok(); next(); }], () => { @@ -95,17 +85,20 @@ describe('TimePicker', () => { it('destroy correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-panel-inner')[0]).not.to.be.ok(); + expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-panel-inner')[0]).not.to.be.ok(); expect(picker.state.open).to.be(true); if (document.querySelectorAll) { expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); } - expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[0]).to.be.ok(); + expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, + 'li')[0]).to.be.ok(); ReactDOM.unmountComponentAtNode(container); setTimeout(next, 100); }, (next) => { @@ -129,22 +122,24 @@ describe('TimePicker', () => { }, }); expect(picker.state.open).not.to.be.ok(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; - expect(ReactDOM.findDOMNode(input).value).to.be('08:24'); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; + expect((input).value).to.be('08:24'); async.series([(next) => { Simulate.click(input); setTimeout(next, 100); }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); + expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, + 'rc-time-picker-panel-inner')[0]).to.be.ok(); expect(picker.state.open).to.be(true); const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; Simulate.click(hour); setTimeout(next, 100); }, (next) => { expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(1); - expect(change.getMinutes()).to.be(24); - expect(ReactDOM.findDOMNode(input).value).to.be('01:24'); + expect(change.hour()).to.be(1); + expect(change.minute()).to.be(24); + expect((input).value).to.be('01:24'); expect(picker.state.open).to.be.ok(); next(); }], () => { diff --git a/tests/index.spec.js b/tests/index.js similarity index 71% rename from tests/index.spec.js rename to tests/index.js index ae3918a..2900845 100644 --- a/tests/index.spec.js +++ b/tests/index.js @@ -1,3 +1,4 @@ +import '../assets/index.less'; import './TimePicker.spec'; import './Header.spec'; import './Select.spec'; diff --git a/tests/runner.html b/tests/runner.html deleted file mode 100644 index 39802f6..0000000 --- a/tests/runner.html +++ /dev/null @@ -1 +0,0 @@ -stub -- 2.41.0