vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add passing unknown props and checking of keypress

old
Ro Savage 2016-06-21 10:25:04 +12:00
parent b44b1683f8
commit d01a57664d
4 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/date_picker/DatePicker.js
View File

@ -28,6 +28,7 @@ const factory = (Input, DatePickerDialog) => {
minDate: PropTypes.object,
name: PropTypes.string,
onChange: PropTypes.func,
onKeyPress: PropTypes.func,
theme: PropTypes.shape({
input: PropTypes.string
}),
@ -50,13 +51,21 @@ const factory = (Input, DatePickerDialog) => {
this.setState({active: true});
};
handleInputKeyPress = (event) => {
if (event.charCode === 13) {
events.pauseEvent(event);
this.setState({active: true});
}
if (this.props.onKeyPress) this.props.onKeyPress(event);
};
handleSelect = (value, event) => {
if (this.props.onChange) this.props.onChange(value, event);
this.setState({active: false});
};
render () {
const { inputClassName, value } = this.props;
const { inputClassName, value, ...others } = this.props;
const inputFormat = this.props.inputFormat || time.formatDate;
const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
const formattedDate = date === undefined ? '' : inputFormat(value);
@ -64,9 +73,11 @@ const factory = (Input, DatePickerDialog) => {
return (
<div data-react-toolbox='date-picker'>
<Input
{...others}
className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
error={this.props.error}
onMouseDown={this.handleInputMouseDown}
onKeyPress={this.handleInputKeyPress}
name={this.props.name}
label={this.props.label}
readOnly

13
components/time_picker/TimePicker.js
View File

@ -18,6 +18,7 @@ const factory = (TimePickerDialog, Input) => {
label: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func,
onKeyPress: PropTypes.func,
theme: PropTypes.shape({
input: PropTypes.string
}),
@ -42,22 +43,32 @@ const factory = (TimePickerDialog, Input) => {
this.setState({active: true});
};
handleInputKeyPress = (event) => {
if (event.charCode === 13) {
events.pauseEvent(event);
this.setState({active: true});
}
if (this.props.onKeyPress) this.props.onKeyPress(event);
};
handleSelect = (value, event) => {
if (this.props.onChange) this.props.onChange(value, event);
this.setState({active: false});
};
render () {
const { value, format, inputClassName, theme } = this.props;
const { value, format, inputClassName, theme, ...others } = this.props;
const formattedTime = value ? time.formatTime(value, format) : '';
return (
<div data-react-toolbox='time-picker'>
<Input
{...others}
className={classnames(theme.input, {[inputClassName]: inputClassName })}
error={this.props.error}
name={this.props.name}
label={this.props.label}
onMouseDown={this.handleInputMouseDown}
onKeyPress={this.handleInputKeyPress}
readOnly
type='text'
value={formattedTime}

18
lib/date_picker/DatePicker.js
View File

@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
});
exports.DatePicker = exports.datePickerFactory = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
@ -51,6 +53,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -79,6 +83,12 @@ var factory = function factory(Input, DatePickerDialog) {
}, _this.handleInputMouseDown = function (event) {
_events2.default.pauseEvent(event);
_this.setState({ active: true });
}, _this.handleInputKeyPress = function (event) {
if (event.charCode === 13) {
_events2.default.pauseEvent(event);
_this.setState({ active: true });
}
if (_this.props.onKeyPress) _this.props.onKeyPress(event);
}, _this.handleSelect = function (value, event) {
if (_this.props.onChange) _this.props.onChange(value, event);
_this.setState({ active: false });
@ -92,6 +102,8 @@ var factory = function factory(Input, DatePickerDialog) {
var inputClassName = _props.inputClassName;
var value = _props.value;
var others = _objectWithoutProperties(_props, ['inputClassName', 'value']);
var inputFormat = this.props.inputFormat || _time2.default.formatDate;
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
var formattedDate = date === undefined ? '' : inputFormat(value);
@ -99,17 +111,18 @@ var factory = function factory(Input, DatePickerDialog) {
return _react2.default.createElement(
'div',
{ 'data-react-toolbox': 'date-picker' },
_react2.default.createElement(Input, {
_react2.default.createElement(Input, _extends({}, others, {
className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
error: this.props.error,
onMouseDown: this.handleInputMouseDown,
onKeyPress: this.handleInputKeyPress,
name: this.props.name,
label: this.props.label,
readOnly: true,
type: 'text',
icon: this.props.icon,
value: formattedDate
}),
})),
_react2.default.createElement(DatePickerDialog, {
autoOk: this.props.autoOk,
active: this.state.active,
@ -141,6 +154,7 @@ var factory = function factory(Input, DatePickerDialog) {
minDate: _react.PropTypes.object,
name: _react.PropTypes.string,
onChange: _react.PropTypes.func,
onKeyPress: _react.PropTypes.func,
theme: _react.PropTypes.shape({
input: _react.PropTypes.string
}),

18
lib/time_picker/TimePicker.js
View File

@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
});
exports.TimePicker = exports.timePickerFactory = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
@ -43,6 +45,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -71,6 +75,12 @@ var factory = function factory(TimePickerDialog, Input) {
}, _this.handleInputMouseDown = function (event) {
_events2.default.pauseEvent(event);
_this.setState({ active: true });
}, _this.handleInputKeyPress = function (event) {
if (event.charCode === 13) {
_events2.default.pauseEvent(event);
_this.setState({ active: true });
}
if (_this.props.onKeyPress) _this.props.onKeyPress(event);
}, _this.handleSelect = function (value, event) {
if (_this.props.onChange) _this.props.onChange(value, event);
_this.setState({ active: false });
@ -86,20 +96,23 @@ var factory = function factory(TimePickerDialog, Input) {
var inputClassName = _props.inputClassName;
var theme = _props.theme;
var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'theme']);
var formattedTime = value ? _time2.default.formatTime(value, format) : '';
return _react2.default.createElement(
'div',
{ 'data-react-toolbox': 'time-picker' },
_react2.default.createElement(Input, {
_react2.default.createElement(Input, _extends({}, others, {
className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
error: this.props.error,
name: this.props.name,
label: this.props.label,
onMouseDown: this.handleInputMouseDown,
onKeyPress: this.handleInputKeyPress,
readOnly: true,
type: 'text',
value: formattedTime
}),
})),
_react2.default.createElement(TimePickerDialog, {
active: this.state.active,
className: this.props.className,
@ -125,6 +138,7 @@ var factory = function factory(TimePickerDialog, Input) {
label: _react.PropTypes.string,
name: _react.PropTypes.string,
onChange: _react.PropTypes.func,
onKeyPress: _react.PropTypes.func,
theme: _react.PropTypes.shape({
input: _react.PropTypes.string
}),