import moment from 'moment';
import TimePicker from 'rc-time-picker';
-const App = React.createClass({
- render() {
- return (
- <div>
- <TimePicker defaultValue={moment()} showHour={false} />
- <TimePicker defaultValue={moment()} showMinute={false} />
- <TimePicker defaultValue={moment()} showSecond={false} />
-
- <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
- <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
- <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
- </div>
- );
- },
-});
-
ReactDom.render(
- <App />,
- document.getElementById('__react-content')
-);
+ <div>
+ <TimePicker defaultValue={moment()} showHour={false} />
+ <TimePicker defaultValue={moment()} showMinute={false} />
+ <TimePicker defaultValue={moment()} showSecond={false} />
+
+ <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
+ <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
+ <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
+ </div>
+, document.getElementById('__react-content'));
import ReactDom from 'react-dom';
import TimePicker from 'rc-time-picker';
-const App = React.createClass({
- getInitialState() {
- return {
- open: false,
- };
- },
- setOpen({ open }) {
+class App extends React.Component {
+ state = {
+ open: false,
+ };
+ setOpen = ({ open }) => {
this.setState({ open });
- },
- toggleOpen() {
+ }
+ toggleOpen = () => {
this.setState({
open: !this.state.open,
});
- },
+ }
render() {
return (
<div>
<TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} />
</div>
);
- },
-});
+ }
+}
ReactDom.render(
<App />,
import moment from 'moment';
import TimePicker from 'rc-time-picker';
-const App = React.createClass({
- getInitialState() {
- return {
- value: moment(),
- };
- },
- handleValueChange(value) {
+class App extends React.Component {
+ state = {
+ value: moment(),
+ };
+ handleValueChange = (value) => {
console.log(value && value.format('HH:mm:ss'));
this.setState({ value });
- },
- clear() {
+ }
+ clear = () => {
this.setState({
value: undefined,
});
- },
+ }
render() {
return (
<div>
<button onClick={this.clear}>clear</button>
</div>
);
- },
-});
+ }
+}
ReactDom.render(
<App />,
"rc-tools": "5.x",
"rc-util": "^4.0.2",
"react": "15.x",
- "react-addons-test-utils": "15.x",
"react-dom": "15.x"
},
"pre-commit": [
"babel-runtime": "6.x",
"classnames": "2.x",
"moment": "2.x",
+ "prop-types": "^15.5.8",
"rc-trigger": "1.x"
}
}
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import Select from './Select';
const formatOption = (option, disabledOptions) => {
};
};
-const Combobox = React.createClass({
- propTypes: {
+class Combobox extends Component {
+ static propTypes = {
format: PropTypes.string,
defaultOpenValue: PropTypes.object,
prefixCls: PropTypes.string,
disabledSeconds: PropTypes.func,
onCurrentSelectPanelChange: PropTypes.func,
use12Hours: PropTypes.bool,
- },
+ };
- onItemChange(type, itemValue) {
+ onItemChange = (type, itemValue) => {
const { onChange, defaultOpenValue, use12Hours } = this.props;
const value = (this.props.value || defaultOpenValue).clone();
value.second(+itemValue);
}
onChange(value);
- },
+ }
- onEnterSelectPanel(range) {
+ onEnterSelectPanel = (range) => {
this.props.onCurrentSelectPanelChange(range);
- },
+ }
getHourSelect(hour) {
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
/>
);
- },
+ }
getMinuteSelect(minute) {
const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
/>
);
- },
+ }
getSecondSelect(second) {
const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
/>
);
- },
+ }
getAMPMSelect() {
const { prefixCls, use12Hours, format } = this.props;
onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
/>
);
- },
+ }
isAM() {
const value = (this.props.value || this.props.defaultOpenValue);
return value.hour() >= 0 && value.hour() < 12;
- },
+ }
render() {
const { prefixCls, defaultOpenValue } = this.props;
{this.getAMPMSelect(value.hour())}
</div>
);
- },
-});
+ }
+}
export default Combobox;
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import moment from 'moment';
-const Header = React.createClass({
- propTypes: {
+class Header extends Component {
+ static propTypes = {
format: PropTypes.string,
prefixCls: PropTypes.string,
disabledDate: PropTypes.func,
allowEmpty: PropTypes.bool,
defaultOpenValue: PropTypes.object,
currentSelectPanel: PropTypes.string,
- },
+ };
- getInitialState() {
- const { value, format } = this.props;
- return {
+ constructor(props) {
+ super(props);
+ const { value, format } = props;
+ this.state = {
str: value && value.format(format) || '',
invalid: false,
};
- },
+ }
componentWillReceiveProps(nextProps) {
const { value, format } = nextProps;
str: value && value.format(format) || '',
invalid: false,
});
- },
+ }
- onInputChange(event) {
+ onInputChange = (event) => {
const str = event.target.value;
this.setState({
str,
this.setState({
invalid: false,
});
- },
+ }
- onKeyDown(e) {
+ onKeyDown = (e) => {
if (e.keyCode === 27) {
this.props.onEsc();
}
- },
+ }
- onClear() {
+ onClear = () => {
this.setState({ str: '' });
this.props.onClear();
- },
+ }
getClearButton() {
const { prefixCls, allowEmpty } = this.props;
title={this.props.clearText}
onMouseDown={this.onClear}
/>);
- },
+ }
getProtoValue() {
return this.props.value || this.props.defaultOpenValue;
- },
+ }
getInput() {
const { prefixCls, placeholder } = this.props;
onChange={this.onInputChange}
/>
);
- },
+ }
render() {
const { prefixCls } = this.props;
{this.getClearButton()}
</div>
);
- },
-});
+ }
+}
export default Header;
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import Header from './Header';
import Combobox from './Combobox';
import moment from 'moment';
return arr;
}
-const Panel = React.createClass({
- propTypes: {
+class Panel extends Component {
+ static propTypes = {
clearText: PropTypes.string,
prefixCls: PropTypes.string,
className: PropTypes.string,
onClear: PropTypes.func,
use12Hours: PropTypes.bool,
addon: PropTypes.func,
- },
+ };
- getDefaultProps() {
- return {
- prefixCls: 'rc-time-picker-panel',
- onChange: noop,
- onClear: noop,
- disabledHours: noop,
- disabledMinutes: noop,
- disabledSeconds: noop,
- defaultOpenValue: moment(),
- use12Hours: false,
- addon: noop,
- };
- },
+ static defaultProps = {
+ prefixCls: 'rc-time-picker-panel',
+ onChange: noop,
+ onClear: noop,
+ disabledHours: noop,
+ disabledMinutes: noop,
+ disabledSeconds: noop,
+ defaultOpenValue: moment(),
+ use12Hours: false,
+ addon: noop,
+ };
- getInitialState() {
- return {
- value: this.props.value,
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: props.value,
selectionRange: [],
};
- },
+ }
componentWillReceiveProps(nextProps) {
const value = nextProps.value;
value,
});
}
- },
+ }
- onChange(newValue) {
+ onChange = (newValue) => {
this.setState({ value: newValue });
this.props.onChange(newValue);
- },
-
- onClear() {
- this.props.onClear();
- },
+ }
- onCurrentSelectPanelChange(currentSelectPanel) {
+ onCurrentSelectPanelChange = (currentSelectPanel) => {
this.setState({ currentSelectPanel });
- },
-
- close() {
- this.props.onEsc();
- },
+ }
render() {
const {
prefixCls, className, placeholder, disabledHours, disabledMinutes,
disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
- format, defaultOpenValue, clearText, onEsc, addon, use12Hours,
+ format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
} = this.props;
const {
value, currentSelectPanel,
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onChange={this.onChange}
- onClear={this.onClear}
+ onClear={onClear}
allowEmpty={allowEmpty}
/>
<Combobox
{addon(this)}
</div>
);
- },
-});
+ }
+}
export default Panel;
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import ReactDom from 'react-dom';
import classnames from 'classnames';
});
};
-const Select = React.createClass({
- propTypes: {
+class Select extends Component {
+ static propTypes = {
prefixCls: PropTypes.string,
options: PropTypes.array,
selectedIndex: PropTypes.number,
type: PropTypes.string,
onSelect: PropTypes.func,
onMouseEnter: PropTypes.func,
- },
+ };
- getInitialState() {
- return {
- active: false,
- };
- },
+ state = {
+ active: false,
+ };
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) {
+ onSelect = (value) => {
const { onSelect, type } = this.props;
onSelect(type, value);
- },
+ }
getOptions() {
const { options, selectedIndex, prefixCls } = this.props;
{item.value}
</li>);
});
- },
+ }
scrollToSelected(duration) {
// move to selected item
const topOption = list.children[index];
const to = topOption.offsetTop;
scrollTo(select, to, duration);
- },
+ }
- handleMouseEnter(e) {
+ handleMouseEnter = (e) => {
this.setState({ active: true });
this.props.onMouseEnter(e);
- },
+ }
- handleMouseLeave() {
+ handleMouseLeave = () => {
this.setState({ active: false });
- },
+ }
render() {
if (this.props.options.length === 0) {
<ul ref="list">{this.getOptions()}</ul>
</div>
);
- },
-});
+ }
+}
export default Select;
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import Trigger from 'rc-trigger';
import Panel from './Panel';
import placements from './placements';
this[field] = component;
}
-const Picker = React.createClass({
- propTypes: {
+class Picker extends Component {
+ static propTypes = {
prefixCls: PropTypes.string,
clearText: PropTypes.string,
value: PropTypes.object,
name: PropTypes.string,
autoComplete: PropTypes.string,
use12Hours: PropTypes.bool,
- },
-
- getDefaultProps() {
- return {
- clearText: 'clear',
- prefixCls: 'rc-time-picker',
- defaultOpen: false,
- style: {},
- className: '',
- align: {},
- defaultOpenValue: moment(),
- allowEmpty: true,
- showHour: true,
- showMinute: true,
- showSecond: true,
- disabledHours: noop,
- disabledMinutes: noop,
- disabledSeconds: noop,
- hideDisabledOptions: false,
- placement: 'bottomLeft',
- onChange: noop,
- onOpen: noop,
- onClose: noop,
- addon: noop,
- use12Hours: false,
- };
- },
-
- getInitialState() {
+ };
+
+ static defaultProps = {
+ clearText: 'clear',
+ prefixCls: 'rc-time-picker',
+ defaultOpen: false,
+ style: {},
+ className: '',
+ align: {},
+ defaultOpenValue: moment(),
+ allowEmpty: true,
+ showHour: true,
+ showMinute: true,
+ showSecond: true,
+ disabledHours: noop,
+ disabledMinutes: noop,
+ disabledSeconds: noop,
+ hideDisabledOptions: false,
+ placement: 'bottomLeft',
+ onChange: noop,
+ onOpen: noop,
+ onClose: noop,
+ addon: noop,
+ use12Hours: false,
+ };
+
+ constructor(props) {
+ super(props);
this.saveInputRef = refFn.bind(this, 'picker');
this.savePanelRef = refFn.bind(this, 'panelInstance');
- const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
- return {
+ const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props;
+ this.state = {
open,
value,
};
- },
+ }
componentWillReceiveProps(nextProps) {
const { value, open } = nextProps;
if (open !== undefined) {
this.setState({ open });
}
- },
+ }
- onPanelChange(value) {
+ onPanelChange = (value) => {
this.setValue(value);
- },
+ }
- onPanelClear() {
+ onPanelClear = () => {
this.setValue(null);
this.setOpen(false);
- },
+ }
- onVisibleChange(open) {
+ onVisibleChange = (open) => {
this.setOpen(open);
- },
+ }
- onEsc() {
+ onEsc = () => {
this.setOpen(false);
this.focus();
- },
+ }
- onKeyDown(e) {
+ onKeyDown = (e) => {
if (e.keyCode === 40) {
this.setOpen(true);
}
- },
+ }
setValue(value) {
if (!('value' in this.props)) {
});
}
this.props.onChange(value);
- },
+ }
getFormat() {
const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
showMinute ? 'mm' : '',
showSecond ? 'ss' : '',
].filter(item => !!item).join(':');
- },
+ }
getPanelElement() {
const {
addon={addon}
/>
);
- },
+ }
setOpen(open) {
const { onOpen, onClose } = this.props;
onClose({ open });
}
}
- },
+ }
focus() {
this.picker.focus();
- },
+ }
render() {
const {
</span>
</Trigger>
);
- },
-});
+ }
+}
export default Picker;
import React from 'react';
import TimePicker from '../src/TimePicker';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
const Simulate = TestUtils.Simulate;
import expect from 'expect.js';
import async from 'async';
import ReactDOM from 'react-dom';
import React from 'react';
import TimePicker from '../src/TimePicker';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
const Simulate = TestUtils.Simulate;
import expect from 'expect.js';
import async from 'async';
import React from 'react';
import TimePicker from '../src/TimePicker';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
const Simulate = TestUtils.Simulate;
import expect from 'expect.js';
import async from 'async';
projects / github / fretlink / time-picker.git / commitdiff
