*.css
build
lib
-
+coverage
\ No newline at end of file
language: node_js
+sudo: false
+
notifications:
email:
- yiminghe@gmail.com
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
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
---
+2.0.0 / 2016-08-04
+---------------------------
+
+goodbye gregorian-calendar, hello moment
+
1.1.0 / 2016-01-14
---------------------------
| 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 | |
| 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
-------
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 = [];
}
function onChange(value) {
- console.log(value && formatter.format(value));
+ console.log(value && value.format(str));
}
function disabledHours() {
}
ReactDom.render(
- <TimePicker formatter={formatter} locale={TimePickerLocale}
- showSecond={showSecond}
- defaultValue={now}
- className="xxx"
- onChange={onChange}
- disabledHours={disabledHours}
- disabledMinutes={disabledMinutes}
- disabledSeconds={disabledSeconds}/>,
+ <TimePicker
+ showSecond={showSecond}
+ defaultValue={now}
+ className="xxx"
+ onChange={onChange}
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds}
+ />,
document.getElementById('__react-content')
);
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(
- <TimePicker formatter={formatter} locale={TimePickerLocale}
- showSecond={showSecond}
- defaultValue={now}
- className="xxx"
- onChange={onChange}
- disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
- disabledMinutes={() => [0, 2, 4, 6, 8]}
- hideDisabledOptions />,
+ <TimePicker
+ format={str}
+ showSecond={showSecond}
+ // use to control utfOffset, locale, default open value
+ defaultOpenValue={moment()}
+ className="xxx"
+ onChange={onChange}
+ disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
+ disabledMinutes={() => [0, 2, 4, 6, 8]}
+ hideDisabledOptions
+ />,
document.getElementById('__react-content')
);
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(
- <TimePicker formatter={formatter} locale={TimePickerLocale}
- style={{width: 100}}
- showSecond={showSecond}
- defaultValue={now}
- className="xxx"
- onChange={onChange} />,
+ <TimePicker
+ style={{ width: 100 }}
+ showSecond={showSecond}
+ defaultValue={moment()}
+ className="xxx"
+ onChange={onChange}
+ />,
document.getElementById('__react-content')
);
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() {
render() {
return (
<div>
- <TimePicker formatter={formatter} locale={TimePickerLocale}
- defaultValue={now} />
- <TimePicker formatter={formatter} locale={TimePickerLocale}
- value={this.state.value}
- onChange={this.handleValueChange}/>
+ <TimePicker
+ defaultValue={this.state.value}
+ onChange={this.handleValueChange}
+ />
+ <TimePicker
+ value={this.state.value}
+ onChange={this.handleValueChange}
+ />
<button onClick={this.clear}>clear</button>
</div>
);
{
"name": "rc-time-picker",
- "version": "1.1.6",
+ "version": "2.0.0",
"description": "React TimePicker",
"keywords": [
"react",
"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"
}
}
-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}`;
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,
},
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);
},
},
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 (
<Select
},
getSecondSelect(second) {
- const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props;
+ const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
if (!showSecond) {
return null;
}
- const value = this.props.value || this.getNow();
- const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+ const value = this.props.value || defaultOpenValue;
+ const disabledOptions = disabledSeconds(value.hour(), value.minute());
return (
<Select
);
},
- getNow() {
- if (this.showNow) {
- return this.showNow;
- }
- const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
- value.setTime(Date.now());
- this.showNow = value;
- return value;
- },
-
render() {
- const { prefixCls } = this.props;
- const value = this.props.value || this.getNow();
+ const { prefixCls, defaultOpenValue } = this.props;
+ const value = this.props.value || defaultOpenValue;
return (
<div className={`${prefixCls}-combobox`}>
- {this.getHourSelect(value.getHourOfDay())}
- {this.getMinuteSelect(value.getMinutes())}
- {this.getSecondSelect(value.getSeconds())}
+ {this.getHourSelect(value.hour())}
+ {this.getMinuteSelect(value.minute())}
+ {this.getSecondSelect(value.second())}
</div>
);
},
--- /dev/null
+import React, { PropTypes } from 'react';
+import moment from 'moment';
+
+const Header = React.createClass({
+ propTypes: {
+ format: PropTypes.string,
+ prefixCls: PropTypes.string,
+ disabledDate: PropTypes.func,
+ placeholder: PropTypes.string,
+ clearText: 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,
+ defaultOpenValue: PropTypes.object,
+ currentSelectPanel: PropTypes.string,
+ },
+
+ getInitialState() {
+ const { value, format } = this.props;
+ return {
+ str: value && value.format(format) || '',
+ invalid: false,
+ };
+ },
+
+ componentWillReceiveProps(nextProps) {
+ const { value, format } = nextProps;
+ this.setState({
+ str: value && value.format(format) || '',
+ invalid: false,
+ });
+ },
+
+ onInputChange(event) {
+ const str = event.target.value;
+ this.setState({
+ str,
+ });
+ const {
+ format, hourOptions, minuteOptions, secondOptions,
+ disabledHours, disabledMinutes,
+ disabledSeconds, onChange, allowEmpty,
+ } = this.props;
+
+ if (str) {
+ const originalValue = this.props.value;
+ const value = this.getProtoValue().clone();
+ const parsed = moment(str, format, true);
+ if (!parsed.isValid()) {
+ this.setState({
+ invalid: true,
+ });
+ return;
+ }
+ value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
+
+ // if time value not allowed, response warning.
+ if (
+ hourOptions.indexOf(value.hour()) < 0 ||
+ minuteOptions.indexOf(value.minute()) < 0 ||
+ secondOptions.indexOf(value.second()) < 0
+ ) {
+ this.setState({
+ invalid: true,
+ });
+ return;
+ }
+
+ // if time value is disabled, response warning.
+ const disabledHourOptions = disabledHours();
+ const disabledMinuteOptions = disabledMinutes(value.hour());
+ const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
+ if (
+ (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
+ (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
+ (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
+ ) {
+ this.setState({
+ invalid: true,
+ });
+ return;
+ }
+
+ if (originalValue) {
+ if (
+ originalValue.hour() !== value.hour() ||
+ originalValue.minute() !== value.minute() ||
+ originalValue.second() !== value.second()
+ ) {
+ // keep other fields for rc-calendar
+ const changedValue = originalValue.clone();
+ changedValue.hour(value.hour());
+ changedValue.minute(value.minute());
+ changedValue.second(value.second());
+ onChange(changedValue);
+ }
+ } else if (originalValue !== value) {
+ onChange(value);
+ }
+ } 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 { prefixCls, allowEmpty } = this.props;
+ if (!allowEmpty) {
+ return null;
+ }
+ return (<a
+ className={`${prefixCls}-clear-btn`}
+ role="button"
+ title={this.props.clearText}
+ onMouseDown={this.onClear}
+ />);
+ },
+
+ getProtoValue() {
+ return this.props.value || this.props.defaultOpenValue;
+ },
+
+ getInput() {
+ const { prefixCls, placeholder } = this.props;
+ const { invalid, str } = this.state;
+ const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
+ return (<input
+ className={`${prefixCls}-input ${invalidClass}`}
+ ref="input"
+ onKeyDown={this.onKeyDown}
+ value={str}
+ placeholder={placeholder}
+ onChange={this.onInputChange}
+ />);
+ },
+
+ render() {
+ const { prefixCls } = this.props;
+ return (
+ <div className={`${prefixCls}-input-wrap`}>
+ {this.getInput()}
+ {this.getClearButton()}
+ </div>
+ );
+ },
+});
+
+export default Header;
-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() {
}
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,
onClear: PropTypes.func,
},
- mixins: [CommonMixin],
-
getDefaultProps() {
return {
prefixCls: 'rc-time-picker-panel',
onChange: noop,
onClear: noop,
+ defaultOpenValue: moment(),
};
},
},
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);
return (
<div className={`${prefixCls}-inner`}>
<Header
+ clearText={clearText}
prefixCls={prefixCls}
- gregorianCalendarLocale={gregorianCalendarLocale}
- locale={locale}
+ defaultOpenValue={defaultOpenValue}
value={value}
- currentSelectPanel={this.state.currentSelectPanel}
- onEsc={this.props.onEsc}
- formatter={formatter}
+ currentSelectPanel={currentSelectPanel}
+ onEsc={onEsc}
+ format={format}
placeholder={placeholder}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
<Combobox
prefixCls={prefixCls}
value={value}
- gregorianCalendarLocale={gregorianCalendarLocale}
- formatter={formatter}
+ defaultOpenValue={defaultOpenValue}
+ format={format}
onChange={this.onChange}
showHour={showHour}
showSecond={showSecond}
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
import ReactDom from 'react-dom';
import classnames from 'classnames';
propTypes: {
prefixCls: PropTypes.string,
options: PropTypes.array,
- gregorianCalendarLocale: PropTypes.object,
selectedIndex: PropTypes.number,
type: PropTypes.string,
onSelect: PropTypes.func,
if (!item.disabled) {
onclick = this.onSelect.bind(this, +item.value);
}
- return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
+ return (<li
+ className={cls}
+ key={index}
+ onClick={onclick}
+ disabled={item.disabled}
+ >
+ {item.value}
+ </li>);
});
},
const { prefixCls } = this.props;
return (
- <div className={`${prefixCls}-select`}
- onMouseEnter={this.props.onMouseEnter}>
+ <div
+ className={`${prefixCls}-select`}
+ onMouseEnter={this.props.onMouseEnter}
+ >
<ul ref="list">{this.getOptions()}</ul>
</div>
);
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() {
}
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,
transitionName: PropTypes.string,
getPopupContainer: PropTypes.func,
placeholder: PropTypes.string,
- formatter: PropTypes.any,
+ format: PropTypes.string,
showHour: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
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,
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 (
<Panel
+ clearText={clearText}
prefixCls={`${prefixCls}-panel`}
ref={this.savePanelRef}
value={this.state.value}
onChange={this.onPanelChange}
- gregorianCalendarLocale={locale.calendar}
onClear={this.onPanelClear}
- defaultValue={defaultValue}
+ defaultOpenValue={defaultOpenValue}
showHour={showHour}
onEsc={this.onEsc}
showSecond={showSecond}
- locale={locale}
allowEmpty={allowEmpty}
- formatter={this.getFormatter()}
+ format={this.getFormat()}
placeholder={placeholder}
disabledHours={disabledHours}
disabledMinutes={disabledMinutes}
},
render() {
- const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
+ const {
+ prefixCls, placeholder, placement, align,
+ disabled, transitionName, style, className, showHour,
+ showSecond, getPopupContainer,
+ } = this.props;
const { open, value } = this.state;
let popupClassName;
if (!showHour || !showSecond) {
ref="picker" type="text" placeholder={placeholder}
readOnly
onKeyDown={this.onKeyDown}
- disabled={disabled} value={value && this.getFormatter().format(value) || ''}
+ disabled={disabled} value={value && value.format(this.getFormat()) || ''}
/>
<span className={`${prefixCls}-icon`}/>
</span>
+++ /dev/null
-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,
-};
+++ /dev/null
-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,
-};
+++ /dev/null
-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,
-};
+++ /dev/null
-import {PropTypes} from 'react';
-import enUs from '../locale/en_US';
-
-export default {
- propTypes: {
- prefixCls: PropTypes.string,
- locale: PropTypes.object,
- },
-
- getDefaultProps() {
- return {
- locale: enUs,
- };
- },
-};
+++ /dev/null
-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 <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>;
- },
-
- getInput() {
- const { prefixCls, placeholder } = this.props;
- const { invalid, str } = this.state;
- const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
- return (<input
- className={`${prefixCls}-input ${invalidClass}`}
- ref="input"
- onKeyDown={this.onKeyDown}
- value={str}
- placeholder={placeholder} onChange={this.onInputChange}
- />);
- },
-
- 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 (
- <div className={`${prefixCls}-input-wrap`}>
- {this.getInput()}
- {this.getClearButton()}
- </div>
- );
- },
-});
-
-export default Header;
+++ /dev/null
-import DateTimeFormat from 'gregorian-calendar-format';
-
-export function getFormatter(format, locale) {
- if (typeof format === 'string') {
- return new DateTimeFormat(format, locale.format);
- }
- return format;
-}
+++ /dev/null
-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();
- }
-}
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(
<TimePicker
- formatter={formatter}
- locale={TimePickerLocale}
+ format={format}
showSecond={showSecond}
- defaultValue={formatTime('01:02:03', formatter)}
+ defaultValue={moment('01:02:03', format)}
{...props}
/>, container);
}
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();
}], () => {
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();
}], () => {
},
});
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();
}], () => {
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();
}], () => {
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();
},
});
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);
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();
}], () => {
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);
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();
}], () => {
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(
<TimePicker
- formatter={formatter}
- locale={TimePickerLocale}
+ format={format}
showSecond={showSecond}
- defaultValue={formatTime('01:02:04', formatter)}
+ defaultValue={moment('01:02:04', format)}
{...props}
/>, container);
}
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);
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) => {
},
});
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);
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();
},
});
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);
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();
},
});
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);
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();
},
});
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);
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();
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();
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(
<TimePicker
- formatter={formatter}
- locale={TimePickerLocale}
+ format={format}
showSecond={showSecond}
- defaultValue={formatTime('12:57:58', formatter)}
+ defaultValue={moment('12:57:58', format)}
{...props}
/>, container);
}
function renderPickerWithoutSeconds(props) {
const showSecond = false;
- const formatter = new DateTimeFormat('HH:mm');
+ const format = ('HH:mm');
return ReactDOM.render(
<TimePicker
- formatter={formatter}
- locale={TimePickerLocale}
+ format={format}
showSecond={showSecond}
- defaultValue={formatTime('08:24', formatter)}
+ defaultValue={moment('08:24', format)}
{...props}
/>, container);
}
},
});
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();
}], () => {
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) => {
},
});
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();
}], () => {
+import '../assets/index.less';
import './TimePicker.spec';
import './Header.spec';
import './Select.spec';
projects / github / fretlink / time-picker.git / commitdiff
