From 04de55f8a50f58575ccda435ba62edfca1d4a5e4 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Wed, 13 Jul 2016 20:21:06 +0800 Subject: add default prefixCls for panel --- src/TimePicker.jsx | 1 + src/mixin/CommonMixin.js | 1 - src/module/Panel.jsx | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 350eeb2..86faa71 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -45,6 +45,7 @@ const Picker = React.createClass({ getDefaultProps() { return { + prefixCls: 'rc-time-picker', defaultOpen: false, style: {}, className: '', diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js index a6893b8..be080fd 100644 --- a/src/mixin/CommonMixin.js +++ b/src/mixin/CommonMixin.js @@ -9,7 +9,6 @@ export default { getDefaultProps() { return { - prefixCls: 'rc-time-picker', locale: enUs, }; }, diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 4c3d071..137ec2f 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -40,6 +40,7 @@ const Panel = React.createClass({ getDefaultProps() { return { + prefixCls: 'rc-time-picker-panel', onChange: noop, onClear: noop, }; -- cgit v1.2.3 From deaa6062ea2e274d50d58c70251c1237c0c03c67 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Wed, 13 Jul 2016 20:25:25 +0800 Subject: bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 11b2436..4fd7055 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "1.1.5", + "version": "1.1.6", "description": "React TimePicker", "keywords": [ "react", -- cgit v1.2.3 From 4984ed85e54f442998a335db70618d6184fa397e Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 4 Aug 2016 19:53:55 +0800 Subject: 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/Combobox.jsx | 125 ++++++++++++++++++++++ src/Header.jsx | 175 +++++++++++++++++++++++++++++++ src/Panel.jsx | 136 ++++++++++++++++++++++++ src/Select.jsx | 105 +++++++++++++++++++ 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/Combobox.jsx | 141 ------------------------- src/module/Header.jsx | 204 ------------------------------------ src/module/Panel.jsx | 130 ----------------------- src/module/Select.jsx | 97 ----------------- src/placements.js | 35 +++++++ src/util/index.js | 8 -- src/util/placements.js | 35 ------- src/util/selection.js | 17 --- tests/Header.spec.jsx | 208 +++++++++++++++++++------------------ tests/Select.spec.jsx | 140 +++++++++++++------------ tests/TimePicker.spec.jsx | 65 ++++++------ tests/index.js | 4 + tests/index.spec.js | 3 - tests/runner.html | 1 - 32 files changed, 907 insertions(+), 1002 deletions(-) create mode 100644 src/Combobox.jsx create mode 100644 src/Header.jsx create mode 100644 src/Panel.jsx create mode 100644 src/Select.jsx 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/Combobox.jsx delete mode 100644 src/module/Header.jsx delete mode 100644 src/module/Panel.jsx delete mode 100644 src/module/Select.jsx create mode 100644 src/placements.js delete mode 100644 src/util/index.js delete mode 100644 src/util/placements.js delete mode 100644 src/util/selection.js create mode 100644 tests/index.js delete mode 100644 tests/index.spec.js 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/Combobox.jsx b/src/Combobox.jsx new file mode 100644 index 0000000..9d9da16 --- /dev/null +++ b/src/Combobox.jsx @@ -0,0 +1,125 @@ +import React, { PropTypes } from 'react'; +import Select from './Select'; + +const formatOption = (option, disabledOptions) => { + let value = `${option}`; + if (option < 10) { + value = `0${option}`; + } + + let disabled = false; + if (disabledOptions && disabledOptions.indexOf(option) >= 0) { + disabled = true; + } + + return { + value, + disabled, + }; +}; + +const Combobox = React.createClass({ + propTypes: { + format: PropTypes.string, + defaultOpenValue: PropTypes.object, + prefixCls: PropTypes.string, + value: PropTypes.object, + onChange: PropTypes.func, + showHour: PropTypes.bool, + showSecond: PropTypes.bool, + hourOptions: PropTypes.array, + minuteOptions: PropTypes.array, + secondOptions: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, + onCurrentSelectPanelChange: PropTypes.func, + }, + + onItemChange(type, itemValue) { + const { onChange, defaultOpenValue } = this.props; + const value = (this.props.value || defaultOpenValue).clone(); + if (type === 'hour') { + value.hour(itemValue); + } else if (type === 'minute') { + value.minute(itemValue); + } else { + value.second(itemValue); + } + onChange(value); + }, + + onEnterSelectPanel(range) { + this.props.onCurrentSelectPanelChange(range); + }, + + getHourSelect(hour) { + const { prefixCls, hourOptions, disabledHours, showHour } = this.props; + if (!showHour) { + return null; + } + const disabledOptions = disabledHours(); + + return ( + formatOption(option, disabledOptions))} + selectedIndex={minuteOptions.indexOf(minute)} + type="minute" + onSelect={this.onItemChange} + onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} + /> + ); + }, + + getSecondSelect(second) { + const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; + if (!showSecond) { + return null; + } + const value = this.props.value || defaultOpenValue; + const disabledOptions = disabledSeconds(value.hour(), value.minute()); + + return ( + ); + }, + + render() { + const { prefixCls } = this.props; + return ( +
+ {this.getInput()} + {this.getClearButton()} +
+ ); + }, +}); + +export default Header; diff --git a/src/Panel.jsx b/src/Panel.jsx new file mode 100644 index 0000000..f70cf38 --- /dev/null +++ b/src/Panel.jsx @@ -0,0 +1,136 @@ +import React, { PropTypes } from 'react'; +import Header from './Header'; +import Combobox from './Combobox'; +import moment from 'moment'; + +function noop() { +} + +function generateOptions(length, disabledOptions, hideDisabledOptions) { + const arr = []; + for (let value = 0; value < length; value++) { + if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { + arr.push(value); + } + } + return arr; +} + +const Panel = React.createClass({ + propTypes: { + clearText: PropTypes.string, + prefixCls: PropTypes.string, + defaultOpenValue: PropTypes.object, + value: PropTypes.object, + placeholder: PropTypes.string, + format: PropTypes.string, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, + hideDisabledOptions: PropTypes.bool, + onChange: PropTypes.func, + onEsc: PropTypes.func, + allowEmpty: PropTypes.bool, + showHour: PropTypes.bool, + showSecond: PropTypes.bool, + onClear: PropTypes.func, + }, + + getDefaultProps() { + return { + prefixCls: 'rc-time-picker-panel', + onChange: noop, + onClear: noop, + defaultOpenValue: moment(), + }; + }, + + getInitialState() { + return { + value: this.props.value, + selectionRange: [], + }; + }, + + componentWillReceiveProps(nextProps) { + const value = nextProps.value; + if (value) { + this.setState({ + value, + }); + } + }, + + onChange(newValue) { + this.setState({ value: newValue }); + this.props.onChange(newValue); + }, + + onClear() { + this.props.onClear(); + }, + + onCurrentSelectPanelChange(currentSelectPanel) { + this.setState({ currentSelectPanel }); + }, + + render() { + 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.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); + + return ( +
+
+ +
+ ); + }, +}); + +export default Panel; diff --git a/src/Select.jsx b/src/Select.jsx new file mode 100644 index 0000000..e25bb29 --- /dev/null +++ b/src/Select.jsx @@ -0,0 +1,105 @@ +import React, { PropTypes } from 'react'; +import ReactDom from 'react-dom'; +import classnames from 'classnames'; + +const scrollTo = (element, to, duration) => { + const requestAnimationFrame = window.requestAnimationFrame || + function requestAnimationFrameTimeout() { + return setTimeout(arguments[0], 10); + }; + // jump to target if duration zero + if (duration <= 0) { + element.scrollTop = to; + return; + } + const difference = to - element.scrollTop; + const perTick = difference / duration * 10; + + requestAnimationFrame(() => { + element.scrollTop = element.scrollTop + perTick; + if (element.scrollTop === to) return; + scrollTo(element, to, duration - 10); + }); +}; + +const Select = React.createClass({ + propTypes: { + prefixCls: PropTypes.string, + options: PropTypes.array, + selectedIndex: PropTypes.number, + type: PropTypes.string, + onSelect: PropTypes.func, + onMouseEnter: PropTypes.func, + }, + + componentDidMount() { + // jump to selected option + this.scrollToSelected(0); + }, + + componentDidUpdate(prevProps) { + // smooth scroll to selected option + if (prevProps.selectedIndex !== this.props.selectedIndex) { + this.scrollToSelected(120); + } + }, + + onSelect(value) { + const { onSelect, type } = this.props; + onSelect(type, value); + }, + + getOptions() { + const { options, selectedIndex, prefixCls } = this.props; + return options.map((item, index) => { + const cls = classnames({ + [`${prefixCls}-select-option-selected`]: selectedIndex === index, + [`${prefixCls}-select-option-disabled`]: item.disabled, + }); + let onclick = null; + if (!item.disabled) { + onclick = this.onSelect.bind(this, +item.value); + } + return (
  • + {item.value} +
    • ); + }); + }, + + scrollToSelected(duration) { + // move to selected item + const select = ReactDom.findDOMNode(this); + const list = ReactDom.findDOMNode(this.refs.list); + let index = this.props.selectedIndex; + if (index < 0) { + index = 0; + } + const topOption = list.children[index]; + const to = topOption.offsetTop; + scrollTo(select, to, duration); + }, + + render() { + if (this.props.options.length === 0) { + return null; + } + + const { prefixCls } = this.props; + + return ( +
    +
      {this.getOptions()}
    +
    + ); + }, +}); + +export default Select; 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/Combobox.jsx b/src/module/Combobox.jsx deleted file mode 100644 index f1e7c5b..0000000 --- a/src/module/Combobox.jsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, {PropTypes} from 'react'; -import Select from './Select'; -import GregorianCalendar from 'gregorian-calendar'; - -const formatOption = (option, disabledOptions) => { - let value = `${option}`; - if (option < 10) { - value = `0${option}`; - } - - let disabled = false; - if (disabledOptions && disabledOptions.indexOf(option) >= 0) { - disabled = true; - } - - return { - value, - disabled, - }; -}; - -const Combobox = React.createClass({ - propTypes: { - formatter: 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, - secondOptions: PropTypes.array, - disabledHours: PropTypes.func, - disabledMinutes: PropTypes.func, - disabledSeconds: PropTypes.func, - onCurrentSelectPanelChange: PropTypes.func, - }, - - onItemChange(type, itemValue) { - const { onChange } = this.props; - let value = this.props.value; - if (value) { - value = value.clone(); - } else { - value = this.getNow().clone(); - } - if (type === 'hour') { - value.setHourOfDay(itemValue); - } else if (type === 'minute') { - value.setMinutes(itemValue); - } else { - value.setSeconds(itemValue); - } - onChange(value); - }, - - onEnterSelectPanel(range) { - this.props.onCurrentSelectPanelChange(range); - }, - - getHourSelect(hour) { - const { prefixCls, hourOptions, disabledHours, showHour } = this.props; - if (!showHour) { - return null; - } - const disabledOptions = disabledHours(); - - return ( - formatOption(option, disabledOptions))} - selectedIndex={minuteOptions.indexOf(minute)} - type="minute" - onSelect={this.onItemChange} - onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} - /> - ); - }, - - getSecondSelect(second) { - const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props; - if (!showSecond) { - return null; - } - const value = this.props.value || this.getNow(); - const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); - - 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/module/Panel.jsx b/src/module/Panel.jsx deleted file mode 100644 index 137ec2f..0000000 --- a/src/module/Panel.jsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, {PropTypes} from 'react'; -import CommonMixin from '../mixin/CommonMixin'; -import Header from './Header'; -import Combobox from './Combobox'; - -function noop() { -} - -function generateOptions(length, disabledOptions, hideDisabledOptions) { - const arr = []; - for (let value = 0; value < length; value++) { - if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { - arr.push(value); - } - } - return arr; -} - -const Panel = React.createClass({ - propTypes: { - prefixCls: PropTypes.string, - value: PropTypes.object, - locale: PropTypes.object, - placeholder: PropTypes.string, - gregorianCalendarLocale: PropTypes.object, - formatter: PropTypes.object, - disabledHours: PropTypes.func, - disabledMinutes: PropTypes.func, - disabledSeconds: PropTypes.func, - hideDisabledOptions: PropTypes.bool, - onChange: PropTypes.func, - onEsc: PropTypes.func, - allowEmpty: PropTypes.bool, - showHour: PropTypes.bool, - showSecond: PropTypes.bool, - onClear: PropTypes.func, - }, - - mixins: [CommonMixin], - - getDefaultProps() { - return { - prefixCls: 'rc-time-picker-panel', - onChange: noop, - onClear: noop, - }; - }, - - getInitialState() { - return { - value: this.props.value, - selectionRange: [], - }; - }, - - componentWillReceiveProps(nextProps) { - const value = nextProps.value; - if (value) { - this.setState({ - value, - }); - } - }, - - onChange(newValue) { - this.setState({ value: newValue }); - this.props.onChange(newValue); - }, - - onClear() { - this.props.onClear(); - }, - - onCurrentSelectPanelChange(currentSelectPanel) { - this.setState({ currentSelectPanel }); - }, - - render() { - const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; - const value = this.state.value; - const disabledHourOptions = disabledHours(); - const disabledMinuteOptions = disabledMinutes(value ? value.getHourOfDay() : null); - const disabledSecondOptions = disabledSeconds(value ? value.getHourOfDay() : null, value ? value.getMinutes() : null); - const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); - const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); - const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); - - return ( -
    -
    - -
    - ); - }, -}); - -export default Panel; diff --git a/src/module/Select.jsx b/src/module/Select.jsx deleted file mode 100644 index 2ab9e61..0000000 --- a/src/module/Select.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, {PropTypes} from 'react'; -import ReactDom from 'react-dom'; -import classnames from 'classnames'; - -const scrollTo = (element, to, duration) => { - const requestAnimationFrame = window.requestAnimationFrame || - function requestAnimationFrameTimeout() { - return setTimeout(arguments[0], 10); - }; - // jump to target if duration zero - if (duration <= 0) { - element.scrollTop = to; - return; - } - const difference = to - element.scrollTop; - const perTick = difference / duration * 10; - - requestAnimationFrame(() => { - element.scrollTop = element.scrollTop + perTick; - if (element.scrollTop === to) return; - scrollTo(element, to, duration - 10); - }); -}; - -const Select = React.createClass({ - propTypes: { - prefixCls: PropTypes.string, - options: PropTypes.array, - gregorianCalendarLocale: PropTypes.object, - selectedIndex: PropTypes.number, - type: PropTypes.string, - onSelect: PropTypes.func, - onMouseEnter: PropTypes.func, - }, - - componentDidMount() { - // jump to selected option - this.scrollToSelected(0); - }, - - componentDidUpdate(prevProps) { - // smooth scroll to selected option - if (prevProps.selectedIndex !== this.props.selectedIndex) { - this.scrollToSelected(120); - } - }, - - onSelect(value) { - const { onSelect, type } = this.props; - onSelect(type, value); - }, - - getOptions() { - const { options, selectedIndex, prefixCls } = this.props; - return options.map((item, index) => { - const cls = classnames({ - [`${prefixCls}-select-option-selected`]: selectedIndex === index, - [`${prefixCls}-select-option-disabled`]: item.disabled, - }); - let onclick = null; - if (!item.disabled) { - onclick = this.onSelect.bind(this, +item.value); - } - return
  • {item.value}
    • ; - }); - }, - - scrollToSelected(duration) { - // move to selected item - const select = ReactDom.findDOMNode(this); - const list = ReactDom.findDOMNode(this.refs.list); - let index = this.props.selectedIndex; - if (index < 0) { - index = 0; - } - const topOption = list.children[index]; - const to = topOption.offsetTop; - scrollTo(select, to, duration); - }, - - render() { - if (this.props.options.length === 0) { - return null; - } - - const { prefixCls } = this.props; - - return ( -
    -
      {this.getOptions()}
    -
    - ); - }, -}); - -export default Select; diff --git a/src/placements.js b/src/placements.js new file mode 100644 index 0000000..6760286 --- /dev/null +++ b/src/placements.js @@ -0,0 +1,35 @@ +const autoAdjustOverflow = { + adjustX: 1, + adjustY: 1, +}; + +const targetOffset = [0, 0]; + +const placements = { + bottomLeft: { + points: ['tl', 'tl'], + overflow: autoAdjustOverflow, + offset: [0, -3], + targetOffset, + }, + bottomRight: { + points: ['tr', 'tr'], + overflow: autoAdjustOverflow, + offset: [0, -3], + targetOffset, + }, + topRight: { + points: ['br', 'br'], + overflow: autoAdjustOverflow, + offset: [0, 3], + targetOffset, + }, + topLeft: { + points: ['bl', 'bl'], + overflow: autoAdjustOverflow, + offset: [0, 3], + targetOffset, + }, +}; + +export default placements; 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/placements.js b/src/util/placements.js deleted file mode 100644 index 6760286..0000000 --- a/src/util/placements.js +++ /dev/null @@ -1,35 +0,0 @@ -const autoAdjustOverflow = { - adjustX: 1, - adjustY: 1, -}; - -const targetOffset = [0, 0]; - -const placements = { - bottomLeft: { - points: ['tl', 'tl'], - overflow: autoAdjustOverflow, - offset: [0, -3], - targetOffset, - }, - bottomRight: { - points: ['tr', 'tr'], - overflow: autoAdjustOverflow, - offset: [0, -3], - targetOffset, - }, - topRight: { - points: ['br', 'br'], - overflow: autoAdjustOverflow, - offset: [0, 3], - targetOffset, - }, - topLeft: { - points: ['bl', 'bl'], - overflow: autoAdjustOverflow, - offset: [0, 3], - targetOffset, - }, -}; - -export default placements; 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.js b/tests/index.js new file mode 100644 index 0000000..2900845 --- /dev/null +++ b/tests/index.js @@ -0,0 +1,4 @@ +import '../assets/index.less'; +import './TimePicker.spec'; +import './Header.spec'; +import './Select.spec'; diff --git a/tests/index.spec.js b/tests/index.spec.js deleted file mode 100644 index ae3918a..0000000 --- a/tests/index.spec.js +++ /dev/null @@ -1,3 +0,0 @@ -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 -- cgit v1.2.3 From 3d4a763813161e575db61737f46879072b1983e9 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Sat, 24 Sep 2016 01:15:02 +0800 Subject: add default --- package.json | 2 +- src/Panel.jsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4690f1e..fee536b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "2.0.0", + "version": "2.0.1", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/Panel.jsx b/src/Panel.jsx index f70cf38..a5464c4 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -41,6 +41,9 @@ const Panel = React.createClass({ prefixCls: 'rc-time-picker-panel', onChange: noop, onClear: noop, + disabledHours: noop, + disabledMinutes: noop, + disabledSeconds: noop, defaultOpenValue: moment(), }; }, -- cgit v1.2.3 From c6a1a235f9ff6de74cae402c7359b25fa655a537 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 17:33:15 +0800 Subject: chore: add className for Panel --- src/Panel.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Panel.jsx b/src/Panel.jsx index a5464c4..f5cf7bc 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'; import Header from './Header'; import Combobox from './Combobox'; import moment from 'moment'; +import classNames from 'classnames'; function noop() { } @@ -20,6 +21,7 @@ const Panel = React.createClass({ propTypes: { clearText: PropTypes.string, prefixCls: PropTypes.string, + className: PropTypes.string, defaultOpenValue: PropTypes.object, value: PropTypes.object, placeholder: PropTypes.string, @@ -79,7 +81,7 @@ const Panel = React.createClass({ render() { const { - prefixCls, placeholder, disabledHours, disabledMinutes, + prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, format, defaultOpenValue, clearText, onEsc, } = this.props; @@ -95,7 +97,7 @@ const Panel = React.createClass({ const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); return ( -
    +
    Date: Mon, 26 Sep 2016 17:40:44 +0800 Subject: bump --- package.json | 2 +- src/Panel.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fee536b..9d98e8a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "2.0.1", + "version": "2.0.2", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/Panel.jsx b/src/Panel.jsx index f5cf7bc..9066b03 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -97,7 +97,7 @@ const Panel = React.createClass({ const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); return ( -
    +
    Date: Thu, 20 Oct 2016 00:00:17 +0300 Subject: feat: 'addon' property support ..to be able to render something like OK button to timepicker: ``` { return ( ) }} /> ``` --- README.md | 1 + src/Panel.jsx | 9 ++++++++- src/TimePicker.jsx | 4 ++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ae31aa..5ec960c 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ API | disabledSeconds | Function | disabled second options | | | hideDisabledOptions | Boolean | whether hide disabled options | | | onChange | Function | null | called when select a different value | +| addon | Function | nothing | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.| | placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | | transitionName | String | '' | | diff --git a/src/Panel.jsx b/src/Panel.jsx index 9066b03..0ed60e9 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -36,6 +36,7 @@ const Panel = React.createClass({ showHour: PropTypes.bool, showSecond: PropTypes.bool, onClear: PropTypes.func, + addon: PropTypes.func, }, getDefaultProps() { @@ -47,6 +48,7 @@ const Panel = React.createClass({ disabledMinutes: noop, disabledSeconds: noop, defaultOpenValue: moment(), + addon: noop, }; }, @@ -79,11 +81,15 @@ const Panel = React.createClass({ this.setState({ currentSelectPanel }); }, + close() { + this.props.onEsc(); + }, + render() { const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, - format, defaultOpenValue, clearText, onEsc, + format, defaultOpenValue, clearText, onEsc, addon, } = this.props; const { value, currentSelectPanel, @@ -133,6 +139,7 @@ const Panel = React.createClass({ disabledSeconds={disabledSeconds} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} /> + {addon(this)}
    ); }, diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 58f6ea1..358b596 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -39,6 +39,7 @@ const Picker = React.createClass({ onChange: PropTypes.func, onOpen: PropTypes.func, onClose: PropTypes.func, + addon: PropTypes.func, }, getDefaultProps() { @@ -61,6 +62,7 @@ const Picker = React.createClass({ onChange: noop, onOpen: noop, onClose: noop, + addon: noop, }; }, @@ -137,6 +139,7 @@ const Picker = React.createClass({ prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, defaultOpenValue, clearText, + addon, } = this.props; return ( ); }, -- cgit v1.2.3 From f429b4a79df25c9eadc3901e2483716835cc7de7 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 25 Oct 2016 17:41:51 +0800 Subject: add addon prop --- HISTORY.md | 5 +++++ package.json | 2 +- src/Header.jsx | 18 ++++++++++-------- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 8cfc326..214f3bb 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,11 @@ --- +2.1.0 / 2016-10-25 +--------------------------- + +support addon prop + 2.0.0 / 2016-08-04 --------------------------- diff --git a/package.json b/package.json index 9d98e8a..74066e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "2.0.2", + "version": "2.1.0", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/Header.jsx b/src/Header.jsx index 4196ea9..2ef9827 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -151,14 +151,16 @@ const Header = React.createClass({ const { prefixCls, placeholder } = this.props; const { invalid, str } = this.state; const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; - return (); + return ( + + ); }, render() { -- cgit v1.2.3