From 3de08abb43b2181329fbee9ff374ebdd8c986b34 Mon Sep 17 00:00:00 2001 From: Joshua Thornton Date: Tue, 5 Apr 2016 10:10:58 +0800 Subject: [PATCH 1/4] Can send custom icon either as a function, or as a string. --- src/DateTimeField.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 2e2d342b..bced8c0a 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -15,6 +15,9 @@ export default class DateTimeField extends Component { mode: Constants.MODE_DATETIME, onChange: (x) => { console.log(x); + }, + buttonIcon: () => { + return this.props.mode === Constants.MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; } } @@ -47,14 +50,18 @@ export default class DateTimeField extends Component { showToday: PropTypes.bool, viewMode: PropTypes.string, size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]), - daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number) + daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number), + buttonIcon: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]) } state = { showDatePicker: this.props.mode !== Constants.MODE_TIME, showTimePicker: this.props.mode === Constants.MODE_TIME, inputFormat: this.resolvePropsInputFormat(), - buttonIcon: this.props.mode === Constants.MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", + buttonIcon: (typeof this.props.buttonIcon === 'function') ? this.props.buttonIcon.call(this) : this.props.buttonIcon, widgetStyle: { display: "block", position: "absolute", @@ -375,7 +382,7 @@ export default class DateTimeField extends Component {
- +
From d8872089421dfc4b6650b7b25e070ede39bd0d78 Mon Sep 17 00:00:00 2001 From: Joshua Thornton Date: Tue, 5 Apr 2016 10:17:29 +0800 Subject: [PATCH 2/4] Removing lib as ignore to be able to use it directly from github. --- .gitignore | 1 - lib/Constants.js | 11 + lib/DateTimeField.js | 448 +++++++++++++++++++++++++++++++++++ lib/DateTimePicker.js | 163 +++++++++++++ lib/DateTimePickerDate.js | 183 ++++++++++++++ lib/DateTimePickerDays.js | 204 ++++++++++++++++ lib/DateTimePickerHours.js | 227 ++++++++++++++++++ lib/DateTimePickerMinutes.js | 155 ++++++++++++ lib/DateTimePickerMonths.js | 126 ++++++++++ lib/DateTimePickerTime.js | 224 ++++++++++++++++++ lib/DateTimePickerYears.js | 127 ++++++++++ 11 files changed, 1868 insertions(+), 1 deletion(-) create mode 100644 lib/Constants.js create mode 100644 lib/DateTimeField.js create mode 100644 lib/DateTimePicker.js create mode 100644 lib/DateTimePickerDate.js create mode 100644 lib/DateTimePickerDays.js create mode 100644 lib/DateTimePickerHours.js create mode 100644 lib/DateTimePickerMinutes.js create mode 100644 lib/DateTimePickerMonths.js create mode 100644 lib/DateTimePickerTime.js create mode 100644 lib/DateTimePickerYears.js diff --git a/.gitignore b/.gitignore index b5e0853e..4982464c 100644 --- a/.gitignore +++ b/.gitignore @@ -7,5 +7,4 @@ test-built/* .idea docs/*.html docs/assets/bundle.js -lib/* /bower_components/ diff --git a/lib/Constants.js b/lib/Constants.js new file mode 100644 index 00000000..d4848a60 --- /dev/null +++ b/lib/Constants.js @@ -0,0 +1,11 @@ +"use strict"; + +module.exports = { + MODE_DATE: "date", + MODE_DATETIME: "datetime", + MODE_TIME: "time", + + SIZE_SMALL: "sm", + SIZE_MEDIUM: "md", + SIZE_LARGE: "lg" +}; \ No newline at end of file diff --git a/lib/DateTimeField.js b/lib/DateTimeField.js new file mode 100644 index 00000000..0b994bba --- /dev/null +++ b/lib/DateTimeField.js @@ -0,0 +1,448 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _extends = require("babel-runtime/helpers/extends")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _this2 = this; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _moment = require("moment"); + +var _moment2 = _interopRequireDefault(_moment); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _DateTimePickerJs = require("./DateTimePicker.js"); + +var _DateTimePickerJs2 = _interopRequireDefault(_DateTimePickerJs); + +var _ConstantsJs = require("./Constants.js"); + +var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); + +var DateTimeField = (function (_Component) { + _inherits(DateTimeField, _Component); + + function DateTimeField() { + var _this = this; + + _classCallCheck(this, DateTimeField); + + _get(Object.getPrototypeOf(DateTimeField.prototype), "constructor", this).apply(this, arguments); + + this.resolvePropsInputFormat = function () { + if (_this.props.inputFormat) { + return _this.props.inputFormat; + } + switch (_this.props.mode) { + case _ConstantsJs2["default"].MODE_TIME: + return "h:mm A"; + case _ConstantsJs2["default"].MODE_DATE: + return "MM/DD/YY"; + default: + return "MM/DD/YY h:mm A"; + } + }; + + this.state = { + showDatePicker: this.props.mode !== _ConstantsJs2["default"].MODE_TIME, + showTimePicker: this.props.mode === _ConstantsJs2["default"].MODE_TIME, + inputFormat: this.resolvePropsInputFormat(), + buttonIcon: typeof this.props.buttonIcon === 'function' ? this.props.buttonIcon.call(this) : this.props.buttonIcon, + widgetStyle: { + display: "block", + position: "absolute", + left: -9999, + zIndex: "9999 !important" + }, + viewDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true).startOf("month"), + selectedDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true), + inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : (0, _moment2["default"])(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) + }; + + this.componentWillReceiveProps = function (nextProps) { + var state = {}; + if (nextProps.inputFormat !== _this.props.inputFormat) { + state.inputFormat = nextProps.inputFormat; + state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat); + } + + if (nextProps.dateTime !== _this.props.dateTime && (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).isValid()) { + state.viewDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).startOf("month"); + state.selectedDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true); + state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : _this.state.inputFormat); + } + return _this.setState(state); + }; + + this.onChange = function (event) { + var value = event.target == null ? event : event.target.value; + if ((0, _moment2["default"])(value, _this.state.inputFormat, true).isValid()) { + _this.setState({ + selectedDate: (0, _moment2["default"])(value, _this.state.inputFormat, true), + viewDate: (0, _moment2["default"])(value, _this.state.inputFormat, true).startOf("month") + }); + } + + return _this.setState({ + inputValue: value + }, function () { + return this.props.onChange((0, _moment2["default"])(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); + }); + }; + + this.getValue = function () { + return (0, _moment2["default"])(_this.state.inputValue, _this.props.inputFormat, true).format(_this.props.format); + }; + + this.setSelectedDate = function (e) { + var target = e.target; + + if (target.className && !target.className.match(/disabled/g)) { + var month = undefined; + if (target.className.indexOf("new") >= 0) month = _this.state.viewDate.month() + 1;else if (target.className.indexOf("old") >= 0) month = _this.state.viewDate.month() - 1;else month = _this.state.viewDate.month(); + return _this.setState({ + selectedDate: _this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) + }, function () { + this.closePicker(); + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.state.inputFormat) + }); + }); + } + }; + + this.setSelectedHour = function (e) { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(_this.state.selectedDate.minutes()) + }, function () { + this.closePicker(); + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.state.inputFormat) + }); + }); + }; + + this.setSelectedMinute = function (e) { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().hour(_this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) + }, function () { + this.closePicker(); + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.state.inputFormat) + }); + }); + }; + + this.setViewMonth = function (month) { + return _this.setState({ + viewDate: _this.state.viewDate.clone().month(month) + }); + }; + + this.setViewYear = function (year) { + return _this.setState({ + viewDate: _this.state.viewDate.clone().year(year) + }); + }; + + this.addMinute = function () { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().add(1, "minutes") + }, function () { + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) + }); + }); + }; + + this.addHour = function () { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().add(1, "hours") + }, function () { + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) + }); + }); + }; + + this.addMonth = function () { + return _this.setState({ + viewDate: _this.state.viewDate.add(1, "months") + }); + }; + + this.addYear = function () { + return _this.setState({ + viewDate: _this.state.viewDate.add(1, "years") + }); + }; + + this.addDecade = function () { + return _this.setState({ + viewDate: _this.state.viewDate.add(10, "years") + }); + }; + + this.subtractMinute = function () { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().subtract(1, "minutes") + }, function () { + _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); + return _this.setState({ + inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) + }); + }); + }; + + this.subtractHour = function () { + return _this.setState({ + selectedDate: _this.state.selectedDate.clone().subtract(1, "hours") + }, function () { + _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); + return _this.setState({ + inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) + }); + }); + }; + + this.subtractMonth = function () { + return _this.setState({ + viewDate: _this.state.viewDate.subtract(1, "months") + }); + }; + + this.subtractYear = function () { + return _this.setState({ + viewDate: _this.state.viewDate.subtract(1, "years") + }); + }; + + this.subtractDecade = function () { + return _this.setState({ + viewDate: _this.state.viewDate.subtract(10, "years") + }); + }; + + this.togglePeriod = function () { + if (_this.state.selectedDate.hour() > 12) { + return _this.onChange(_this.state.selectedDate.clone().subtract(12, "hours").format(_this.state.inputFormat)); + } else { + return _this.onChange(_this.state.selectedDate.clone().add(12, "hours").format(_this.state.inputFormat)); + } + }; + + this.togglePicker = function () { + return _this.setState({ + showDatePicker: !_this.state.showDatePicker, + showTimePicker: !_this.state.showTimePicker + }); + }; + + this.onClick = function () { + var classes = undefined, + gBCR = undefined, + offset = undefined, + placePosition = undefined, + scrollTop = undefined, + styles = undefined; + if (_this.state.showPicker) { + return _this.closePicker(); + } else { + _this.setState({ + showPicker: true + }); + gBCR = _this.refs.dtpbutton.getBoundingClientRect(); + classes = { + "bootstrap-datetimepicker-widget": true, + "dropdown-menu": true + }; + offset = { + top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, + left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft + }; + offset.top = offset.top + _this.refs.datetimepicker.offsetHeight; + scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; + placePosition = _this.props.direction === "up" ? "top" : _this.props.direction === "bottom" ? "bottom" : _this.props.direction === "auto" ? offset.top + _this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && _this.refs.widget.offsetHeight + _this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; + if (placePosition === "top") { + offset.top = -_this.refs.widget.offsetHeight - _this.clientHeight - 2; + classes.top = true; + classes.bottom = false; + classes["pull-right"] = true; + } else { + offset.top = 40; + classes.top = false; + classes.bottom = true; + classes["pull-right"] = true; + } + styles = { + display: "block", + position: "absolute", + top: offset.top, + left: "auto", + right: 40 + }; + return _this.setState({ + widgetStyle: styles, + widgetClasses: classes + }); + } + }; + + this.closePicker = function () { + var style = _extends({}, _this.state.widgetStyle); + style.left = -9999; + style.display = "none"; + return _this.setState({ + showPicker: false, + widgetStyle: style + }); + }; + + this.size = function () { + switch (_this.props.size) { + case _ConstantsJs2["default"].SIZE_SMALL: + return "form-group-sm"; + case _ConstantsJs2["default"].SIZE_LARGE: + return "form-group-lg"; + } + + return ""; + }; + + this.renderOverlay = function () { + var styles = { + position: "fixed", + top: 0, + bottom: 0, + left: 0, + right: 0, + zIndex: "999" + }; + if (_this.state.showPicker) { + return _react2["default"].createElement("div", { onClick: _this.closePicker, style: styles }); + } else { + return _react2["default"].createElement("span", null); + } + }; + } + + _createClass(DateTimeField, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + null, + this.renderOverlay(), + _react2["default"].createElement(_DateTimePickerJs2["default"], { + addDecade: this.addDecade, + addHour: this.addHour, + addMinute: this.addMinute, + addMonth: this.addMonth, + addYear: this.addYear, + daysOfWeekDisabled: this.props.daysOfWeekDisabled, + maxDate: this.props.maxDate, + minDate: this.props.minDate, + mode: this.props.mode, + ref: "widget", + selectedDate: this.state.selectedDate, + setSelectedDate: this.setSelectedDate, + setSelectedHour: this.setSelectedHour, + setSelectedMinute: this.setSelectedMinute, + setViewMonth: this.setViewMonth, + setViewYear: this.setViewYear, + showDatePicker: this.state.showDatePicker, + showTimePicker: this.state.showTimePicker, + showToday: this.props.showToday, + subtractDecade: this.subtractDecade, + subtractHour: this.subtractHour, + subtractMinute: this.subtractMinute, + subtractMonth: this.subtractMonth, + subtractYear: this.subtractYear, + togglePeriod: this.togglePeriod, + togglePicker: this.togglePicker, + viewDate: this.state.viewDate, + viewMode: this.props.viewMode, + widgetClasses: this.state.widgetClasses, + widgetStyle: this.state.widgetStyle + }), + _react2["default"].createElement( + "div", + { className: "input-group date " + this.size(), ref: "datetimepicker" }, + _react2["default"].createElement("input", _extends({ className: "form-control", onChange: this.onChange, type: "text", value: this.state.inputValue }, this.props.inputProps)), + _react2["default"].createElement( + "span", + { className: "input-group-addon", onBlur: this.onBlur, onClick: this.onClick, ref: "dtpbutton" }, + _react2["default"].createElement("span", { className: this.state.buttonIcon }) + ) + ) + ); + } + }], [{ + key: "defaultProps", + value: { + dateTime: (0, _moment2["default"])().format("x"), + format: "x", + showToday: true, + viewMode: "days", + daysOfWeekDisabled: [], + size: _ConstantsJs2["default"].SIZE_MEDIUM, + mode: _ConstantsJs2["default"].MODE_DATETIME, + onChange: function onChange(x) { + console.log(x); + }, + buttonIcon: function buttonIcon() { + return _this2.props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; + } + }, + enumerable: true + }, { + key: "propTypes", + value: { + dateTime: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), + onChange: _react.PropTypes.func, + format: _react.PropTypes.string, + inputProps: _react.PropTypes.object, + inputFormat: _react.PropTypes.string, + defaultText: _react.PropTypes.string, + mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), + minDate: _react.PropTypes.object, + maxDate: _react.PropTypes.object, + direction: _react.PropTypes.string, + showToday: _react.PropTypes.bool, + viewMode: _react.PropTypes.string, + size: _react.PropTypes.oneOf([_ConstantsJs2["default"].SIZE_SMALL, _ConstantsJs2["default"].SIZE_MEDIUM, _ConstantsJs2["default"].SIZE_LARGE]), + daysOfWeekDisabled: _react.PropTypes.arrayOf(_react.PropTypes.number), + buttonIcon: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]) + }, + enumerable: true + }]); + + return DateTimeField; +})(_react.Component); + +exports["default"] = DateTimeField; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePicker.js b/lib/DateTimePicker.js new file mode 100644 index 00000000..277cf104 --- /dev/null +++ b/lib/DateTimePicker.js @@ -0,0 +1,163 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _DateTimePickerDateJs = require("./DateTimePickerDate.js"); + +var _DateTimePickerDateJs2 = _interopRequireDefault(_DateTimePickerDateJs); + +var _DateTimePickerTimeJs = require("./DateTimePickerTime.js"); + +var _DateTimePickerTimeJs2 = _interopRequireDefault(_DateTimePickerTimeJs); + +var _ConstantsJs = require("./Constants.js"); + +var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); + +var DateTimePicker = (function (_Component) { + _inherits(DateTimePicker, _Component); + + function DateTimePicker() { + var _this = this; + + _classCallCheck(this, DateTimePicker); + + _get(Object.getPrototypeOf(DateTimePicker.prototype), "constructor", this).apply(this, arguments); + + this.renderDatePicker = function () { + if (_this.props.showDatePicker) { + return _react2["default"].createElement( + "li", + null, + _react2["default"].createElement(_DateTimePickerDateJs2["default"], { + addDecade: _this.props.addDecade, + addMonth: _this.props.addMonth, + addYear: _this.props.addYear, + daysOfWeekDisabled: _this.props.daysOfWeekDisabled, + maxDate: _this.props.maxDate, + minDate: _this.props.minDate, + selectedDate: _this.props.selectedDate, + setSelectedDate: _this.props.setSelectedDate, + setViewMonth: _this.props.setViewMonth, + setViewYear: _this.props.setViewYear, + showToday: _this.props.showToday, + subtractDecade: _this.props.subtractDecade, + subtractMonth: _this.props.subtractMonth, + subtractYear: _this.props.subtractYear, + viewDate: _this.props.viewDate, + viewMode: _this.props.viewMode + }) + ); + } + }; + + this.renderTimePicker = function () { + if (_this.props.showTimePicker) { + return _react2["default"].createElement( + "li", + null, + _react2["default"].createElement(_DateTimePickerTimeJs2["default"], { + addHour: _this.props.addHour, + addMinute: _this.props.addMinute, + mode: _this.props.mode, + selectedDate: _this.props.selectedDate, + setSelectedHour: _this.props.setSelectedHour, + setSelectedMinute: _this.props.setSelectedMinute, + subtractHour: _this.props.subtractHour, + subtractMinute: _this.props.subtractMinute, + togglePeriod: _this.props.togglePeriod, + viewDate: _this.props.viewDate + }) + ); + } + }; + + this.renderSwitchButton = function () { + return _this.props.mode === _ConstantsJs2["default"].MODE_DATETIME ? _react2["default"].createElement( + "li", + null, + _react2["default"].createElement( + "span", + { className: "btn picker-switch", onClick: _this.props.togglePicker, style: { width: "100%" } }, + _react2["default"].createElement("span", { className: (0, _classnames2["default"])("glyphicon", _this.props.showTimePicker ? "glyphicon-calendar" : "glyphicon-time") }) + ) + ) : null; + }; + } + + _createClass(DateTimePicker, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: (0, _classnames2["default"])(this.props.widgetClasses), style: this.props.widgetStyle }, + _react2["default"].createElement( + "ul", + { className: "list-unstyled" }, + this.renderDatePicker(), + this.renderSwitchButton(), + this.renderTimePicker() + ) + ); + } + }], [{ + key: "propTypes", + value: { + showDatePicker: _react.PropTypes.bool, + showTimePicker: _react.PropTypes.bool, + subtractMonth: _react.PropTypes.func.isRequired, + addMonth: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + showToday: _react.PropTypes.bool, + viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), + mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), + daysOfWeekDisabled: _react.PropTypes.array, + setSelectedDate: _react.PropTypes.func.isRequired, + subtractYear: _react.PropTypes.func.isRequired, + addYear: _react.PropTypes.func.isRequired, + setViewMonth: _react.PropTypes.func.isRequired, + setViewYear: _react.PropTypes.func.isRequired, + subtractHour: _react.PropTypes.func.isRequired, + addHour: _react.PropTypes.func.isRequired, + subtractMinute: _react.PropTypes.func.isRequired, + addMinute: _react.PropTypes.func.isRequired, + addDecade: _react.PropTypes.func.isRequired, + subtractDecade: _react.PropTypes.func.isRequired, + togglePeriod: _react.PropTypes.func.isRequired, + minDate: _react.PropTypes.object, + maxDate: _react.PropTypes.object, + widgetClasses: _react.PropTypes.object, + widgetStyle: _react.PropTypes.object, + togglePicker: _react.PropTypes.func, + setSelectedHour: _react.PropTypes.func, + setSelectedMinute: _react.PropTypes.func + }, + enumerable: true + }]); + + return DateTimePicker; +})(_react.Component); + +exports["default"] = DateTimePicker; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerDate.js b/lib/DateTimePickerDate.js new file mode 100644 index 00000000..97fda04f --- /dev/null +++ b/lib/DateTimePickerDate.js @@ -0,0 +1,183 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _Object$keys = require("babel-runtime/core-js/object/keys")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _DateTimePickerDays = require("./DateTimePickerDays"); + +var _DateTimePickerDays2 = _interopRequireDefault(_DateTimePickerDays); + +var _DateTimePickerMonths = require("./DateTimePickerMonths"); + +var _DateTimePickerMonths2 = _interopRequireDefault(_DateTimePickerMonths); + +var _DateTimePickerYears = require("./DateTimePickerYears"); + +var _DateTimePickerYears2 = _interopRequireDefault(_DateTimePickerYears); + +var DateTimePickerDate = (function (_Component) { + _inherits(DateTimePickerDate, _Component); + + _createClass(DateTimePickerDate, null, [{ + key: "propTypes", + value: { + subtractMonth: _react.PropTypes.func.isRequired, + addMonth: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + showToday: _react.PropTypes.bool, + viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), + daysOfWeekDisabled: _react.PropTypes.array, + setSelectedDate: _react.PropTypes.func.isRequired, + subtractYear: _react.PropTypes.func.isRequired, + addYear: _react.PropTypes.func.isRequired, + setViewMonth: _react.PropTypes.func.isRequired, + setViewYear: _react.PropTypes.func.isRequired, + addDecade: _react.PropTypes.func.isRequired, + subtractDecade: _react.PropTypes.func.isRequired, + minDate: _react.PropTypes.object, + maxDate: _react.PropTypes.object + }, + enumerable: true + }]); + + function DateTimePickerDate(props) { + var _this = this; + + _classCallCheck(this, DateTimePickerDate); + + _get(Object.getPrototypeOf(DateTimePickerDate.prototype), "constructor", this).call(this, props); + + this.showMonths = function () { + return _this.setState({ + daysDisplayed: false, + monthsDisplayed: true + }); + }; + + this.showYears = function () { + return _this.setState({ + monthsDisplayed: false, + yearsDisplayed: true + }); + }; + + this.setViewYear = function (e) { + _this.props.setViewYear(e.target.innerHTML); + return _this.setState({ + yearsDisplayed: false, + monthsDisplayed: true + }); + }; + + this.setViewMonth = function (e) { + _this.props.setViewMonth(e.target.innerHTML); + return _this.setState({ + monthsDisplayed: false, + daysDisplayed: true + }); + }; + + this.renderDays = function () { + if (_this.state.daysDisplayed) { + return _react2["default"].createElement(_DateTimePickerDays2["default"], { + addMonth: _this.props.addMonth, + daysOfWeekDisabled: _this.props.daysOfWeekDisabled, + maxDate: _this.props.maxDate, + minDate: _this.props.minDate, + selectedDate: _this.props.selectedDate, + setSelectedDate: _this.props.setSelectedDate, + showMonths: _this.showMonths, + showToday: _this.props.showToday, + subtractMonth: _this.props.subtractMonth, + viewDate: _this.props.viewDate + }); + } else { + return null; + } + }; + + this.renderMonths = function () { + if (_this.state.monthsDisplayed) { + return _react2["default"].createElement(_DateTimePickerMonths2["default"], { + addYear: _this.props.addYear, + selectedDate: _this.props.selectedDate, + setViewMonth: _this.setViewMonth, + showYears: _this.showYears, + subtractYear: _this.props.subtractYear, + viewDate: _this.props.viewDate + }); + } else { + return null; + } + }; + + this.renderYears = function () { + if (_this.state.yearsDisplayed) { + return _react2["default"].createElement(_DateTimePickerYears2["default"], { + addDecade: _this.props.addDecade, + selectedDate: _this.props.selectedDate, + setViewYear: _this.setViewYear, + subtractDecade: _this.props.subtractDecade, + viewDate: _this.props.viewDate + }); + } else { + return null; + } + }; + + var viewModes = { + "days": { + daysDisplayed: true, + monthsDisplayed: false, + yearsDisplayed: false + }, + "months": { + daysDisplayed: false, + monthsDisplayed: true, + yearsDisplayed: false + }, + "years": { + daysDisplayed: false, + monthsDisplayed: false, + yearsDisplayed: true + } + }; + this.state = viewModes[this.props.viewMode] || viewModes[_Object$keys(viewModes)[this.props.viewMode]] || viewModes.days; + } + + _createClass(DateTimePickerDate, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "datepicker" }, + this.renderDays(), + this.renderMonths(), + this.renderYears() + ); + } + }]); + + return DateTimePickerDate; +})(_react.Component); + +exports["default"] = DateTimePickerDate; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerDays.js b/lib/DateTimePickerDays.js new file mode 100644 index 00000000..eb509f5e --- /dev/null +++ b/lib/DateTimePickerDays.js @@ -0,0 +1,204 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _moment = require("moment"); + +var _moment2 = _interopRequireDefault(_moment); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var DateTimePickerDays = (function (_Component) { + _inherits(DateTimePickerDays, _Component); + + function DateTimePickerDays() { + var _this = this; + + _classCallCheck(this, DateTimePickerDays); + + _get(Object.getPrototypeOf(DateTimePickerDays.prototype), "constructor", this).apply(this, arguments); + + this.renderDays = function () { + var cells, classes, days, html, month, nextMonth, prevMonth, minDate, maxDate, row, year; + year = _this.props.viewDate.year(); + month = _this.props.viewDate.month(); + prevMonth = _this.props.viewDate.clone().subtract(1, "months"); + days = prevMonth.daysInMonth(); + prevMonth.date(days).startOf("week"); + nextMonth = (0, _moment2["default"])(prevMonth).clone().add(42, "d"); + minDate = _this.props.minDate ? _this.props.minDate.clone().subtract(1, "days") : _this.props.minDate; + maxDate = _this.props.maxDate ? _this.props.maxDate.clone() : _this.props.maxDate; + html = []; + cells = []; + while (prevMonth.isBefore(nextMonth)) { + classes = { + day: true + }; + if (prevMonth.year() < year || prevMonth.year() === year && prevMonth.month() < month) { + classes.old = true; + } else if (prevMonth.year() > year || prevMonth.year() === year && prevMonth.month() > month) { + classes["new"] = true; + } + if (prevMonth.isSame((0, _moment2["default"])({ + y: _this.props.selectedDate.year(), + M: _this.props.selectedDate.month(), + d: _this.props.selectedDate.date() + }))) { + classes.active = true; + } + if (_this.props.showToday) { + if (prevMonth.isSame((0, _moment2["default"])(), "day")) { + classes.today = true; + } + } + if (minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate)) { + classes.disabled = true; + } + if (_this.props.daysOfWeekDisabled.length > 0) classes.disabled = _this.props.daysOfWeekDisabled.indexOf(prevMonth.day()) !== -1; + cells.push(_react2["default"].createElement( + "td", + { className: (0, _classnames2["default"])(classes), key: prevMonth.month() + "-" + prevMonth.date(), onClick: _this.props.setSelectedDate }, + prevMonth.date() + )); + if (prevMonth.weekday() === (0, _moment2["default"])().endOf("week").weekday()) { + row = _react2["default"].createElement( + "tr", + { key: prevMonth.month() + "-" + prevMonth.date() }, + cells + ); + html.push(row); + cells = []; + } + prevMonth.add(1, "d"); + } + return html; + }; + } + + _createClass(DateTimePickerDays, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "datepicker-days", style: { display: "block" } }, + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "thead", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "th", + { className: "prev", onClick: this.props.subtractMonth }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-left" }) + ), + _react2["default"].createElement( + "th", + { className: "switch", colSpan: "5", onClick: this.props.showMonths }, + _moment2["default"].months()[this.props.viewDate.month()], + " ", + this.props.viewDate.year() + ), + _react2["default"].createElement( + "th", + { className: "next", onClick: this.props.addMonth }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-right" }) + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "th", + { className: "dow" }, + "Su" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "Mo" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "Tu" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "We" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "Th" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "Fr" + ), + _react2["default"].createElement( + "th", + { className: "dow" }, + "Sa" + ) + ) + ), + _react2["default"].createElement( + "tbody", + null, + this.renderDays() + ) + ) + ); + } + }], [{ + key: "propTypes", + value: { + subtractMonth: _react.PropTypes.func.isRequired, + addMonth: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + showToday: _react.PropTypes.bool, + daysOfWeekDisabled: _react.PropTypes.array, + setSelectedDate: _react.PropTypes.func.isRequired, + showMonths: _react.PropTypes.func.isRequired, + minDate: _react.PropTypes.object, + maxDate: _react.PropTypes.object + }, + enumerable: true + }, { + key: "defaultProps", + value: { + showToday: true + }, + enumerable: true + }]); + + return DateTimePickerDays; +})(_react.Component); + +exports["default"] = DateTimePickerDays; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerHours.js b/lib/DateTimePickerHours.js new file mode 100644 index 00000000..33d51841 --- /dev/null +++ b/lib/DateTimePickerHours.js @@ -0,0 +1,227 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _ConstantsJs = require("./Constants.js"); + +var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); + +var DateTimePickerHours = (function (_Component) { + _inherits(DateTimePickerHours, _Component); + + function DateTimePickerHours() { + var _this = this; + + _classCallCheck(this, DateTimePickerHours); + + _get(Object.getPrototypeOf(DateTimePickerHours.prototype), "constructor", this).apply(this, arguments); + + this.renderSwitchButton = function () { + return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( + "ul", + { className: "list-unstyled" }, + _react2["default"].createElement( + "li", + null, + _react2["default"].createElement( + "span", + { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) + ) + ) + ) : null; + }; + } + + _createClass(DateTimePickerHours, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "timepicker-hours", "data-action": "selectHour", style: { display: "block" } }, + this.renderSwitchButton(), + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "tbody", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "01" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "02" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "03" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "04" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "05" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "06" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "07" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "08" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "09" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "10" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "11" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "12" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "13" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "14" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "15" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "16" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "17" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "18" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "19" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "20" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "21" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "22" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "23" + ), + _react2["default"].createElement( + "td", + { className: "hour", onClick: this.props.setSelectedHour }, + "24" + ) + ) + ) + ) + ); + } + }], [{ + key: "propTypes", + value: { + setSelectedHour: _react.PropTypes.func.isRequired, + onSwitch: _react.PropTypes.func.isRequired, + mode: _react.PropTypes.string.isRequired + }, + enumerable: true + }]); + + return DateTimePickerHours; +})(_react.Component); + +exports["default"] = DateTimePickerHours; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerMinutes.js b/lib/DateTimePickerMinutes.js new file mode 100644 index 00000000..4d60d278 --- /dev/null +++ b/lib/DateTimePickerMinutes.js @@ -0,0 +1,155 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _ConstantsJs = require("./Constants.js"); + +var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); + +var DateTimePickerMinutes = (function (_Component) { + _inherits(DateTimePickerMinutes, _Component); + + function DateTimePickerMinutes() { + var _this = this; + + _classCallCheck(this, DateTimePickerMinutes); + + _get(Object.getPrototypeOf(DateTimePickerMinutes.prototype), "constructor", this).apply(this, arguments); + + this.renderSwitchButton = function () { + return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( + "ul", + { className: "list-unstyled" }, + _react2["default"].createElement( + "li", + null, + _react2["default"].createElement( + "span", + { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) + ) + ) + ) : null; + }; + } + + _createClass(DateTimePickerMinutes, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "timepicker-minutes", "data-action": "selectMinute", style: { display: "block" } }, + this.renderSwitchButton(), + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "tbody", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "00" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "05" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "10" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "15" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "20" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "25" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "30" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "35" + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "40" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "45" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "50" + ), + _react2["default"].createElement( + "td", + { className: "minute", onClick: this.props.setSelectedMinute }, + "55" + ) + ) + ) + ) + ); + } + }], [{ + key: "propTypes", + value: { + setSelectedMinute: _react.PropTypes.func.isRequired, + onSwitch: _react.PropTypes.func.isRequired, + mode: _react.PropTypes.string.isRequired + }, + enumerable: true + }]); + + return DateTimePickerMinutes; +})(_react.Component); + +exports["default"] = DateTimePickerMinutes; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerMonths.js b/lib/DateTimePickerMonths.js new file mode 100644 index 00000000..f884c2d6 --- /dev/null +++ b/lib/DateTimePickerMonths.js @@ -0,0 +1,126 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _moment = require("moment"); + +var _moment2 = _interopRequireDefault(_moment); + +var DateTimePickerMonths = (function (_Component) { + _inherits(DateTimePickerMonths, _Component); + + function DateTimePickerMonths() { + var _this = this; + + _classCallCheck(this, DateTimePickerMonths); + + _get(Object.getPrototypeOf(DateTimePickerMonths.prototype), "constructor", this).apply(this, arguments); + + this.renderMonths = function () { + var classes, i, month, months, monthsShort; + month = _this.props.selectedDate.month(); + monthsShort = _moment2["default"].monthsShort(); + i = 0; + months = []; + while (i < 12) { + classes = { + month: true, + "active": i === month && _this.props.viewDate.year() === _this.props.selectedDate.year() + }; + months.push(_react2["default"].createElement( + "span", + { className: (0, _classnames2["default"])(classes), key: i, onClick: _this.props.setViewMonth }, + monthsShort[i] + )); + i++; + } + return months; + }; + } + + _createClass(DateTimePickerMonths, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "datepicker-months", style: { display: "block" } }, + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "thead", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "th", + { className: "prev", onClick: this.props.subtractYear }, + "‹" + ), + _react2["default"].createElement( + "th", + { className: "switch", colSpan: "5", onClick: this.props.showYears }, + this.props.viewDate.year() + ), + _react2["default"].createElement( + "th", + { className: "next", onClick: this.props.addYear }, + "›" + ) + ) + ), + _react2["default"].createElement( + "tbody", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { colSpan: "7" }, + this.renderMonths() + ) + ) + ) + ) + ); + } + }], [{ + key: "propTypes", + value: { + subtractYear: _react.PropTypes.func.isRequired, + addYear: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + showYears: _react.PropTypes.func.isRequired, + setViewMonth: _react.PropTypes.func.isRequired + }, + enumerable: true + }]); + + return DateTimePickerMonths; +})(_react.Component); + +exports["default"] = DateTimePickerMonths; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerTime.js b/lib/DateTimePickerTime.js new file mode 100644 index 00000000..0bfc4aa9 --- /dev/null +++ b/lib/DateTimePickerTime.js @@ -0,0 +1,224 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _extends = require("babel-runtime/helpers/extends")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _DateTimePickerMinutes = require("./DateTimePickerMinutes"); + +var _DateTimePickerMinutes2 = _interopRequireDefault(_DateTimePickerMinutes); + +var _DateTimePickerHours = require("./DateTimePickerHours"); + +var _DateTimePickerHours2 = _interopRequireDefault(_DateTimePickerHours); + +var _ConstantsJs = require("./Constants.js"); + +var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); + +var DateTimePickerTime = (function (_Component) { + _inherits(DateTimePickerTime, _Component); + + function DateTimePickerTime() { + var _this = this; + + _classCallCheck(this, DateTimePickerTime); + + _get(Object.getPrototypeOf(DateTimePickerTime.prototype), "constructor", this).apply(this, arguments); + + this.state = { + minutesDisplayed: false, + hoursDisplayed: false + }; + + this.goBack = function () { + return _this.setState({ + minutesDisplayed: false, + hoursDisplayed: false + }); + }; + + this.showMinutes = function () { + return _this.setState({ + minutesDisplayed: true + }); + }; + + this.showHours = function () { + return _this.setState({ + hoursDisplayed: true + }); + }; + + this.renderMinutes = function () { + if (_this.state.minutesDisplayed) { + return _react2["default"].createElement(_DateTimePickerMinutes2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); + } else { + return null; + } + }; + + this.renderHours = function () { + if (_this.state.hoursDisplayed) { + return _react2["default"].createElement(_DateTimePickerHours2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); + } else { + return null; + } + }; + + this.renderPicker = function () { + if (!_this.state.minutesDisplayed && !_this.state.hoursDisplayed) { + return _react2["default"].createElement( + "div", + { className: "timepicker-picker" }, + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "tbody", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "a", + { className: "btn", onClick: _this.props.addHour }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) + ) + ), + _react2["default"].createElement("td", { className: "separator" }), + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "a", + { className: "btn", onClick: _this.props.addMinute }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) + ) + ), + _react2["default"].createElement("td", { className: "separator" }) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "span", + { className: "timepicker-hour", onClick: _this.showHours }, + _this.props.selectedDate.format("h") + ) + ), + _react2["default"].createElement( + "td", + { className: "separator" }, + ":" + ), + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "span", + { className: "timepicker-minute", onClick: _this.showMinutes }, + _this.props.selectedDate.format("mm") + ) + ), + _react2["default"].createElement("td", { className: "separator" }), + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "button", + { className: "btn btn-primary", onClick: _this.props.togglePeriod, type: "button" }, + _this.props.selectedDate.format("A") + ) + ) + ), + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "a", + { className: "btn", onClick: _this.props.subtractHour }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) + ) + ), + _react2["default"].createElement("td", { className: "separator" }), + _react2["default"].createElement( + "td", + null, + _react2["default"].createElement( + "a", + { className: "btn", onClick: _this.props.subtractMinute }, + _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) + ) + ), + _react2["default"].createElement("td", { className: "separator" }) + ) + ) + ) + ); + } else { + return ""; + } + }; + } + + _createClass(DateTimePickerTime, [{ + key: "render", + value: function render() { + return _react2["default"].createElement( + "div", + { className: "timepicker" }, + this.renderPicker(), + this.renderHours(), + this.renderMinutes() + ); + } + }], [{ + key: "propTypes", + value: { + setSelectedHour: _react.PropTypes.func.isRequired, + setSelectedMinute: _react.PropTypes.func.isRequired, + subtractHour: _react.PropTypes.func.isRequired, + addHour: _react.PropTypes.func.isRequired, + subtractMinute: _react.PropTypes.func.isRequired, + addMinute: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + togglePeriod: _react.PropTypes.func.isRequired, + mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]) + }, + enumerable: true + }]); + + return DateTimePickerTime; +})(_react.Component); + +exports["default"] = DateTimePickerTime; + +module.exports = DateTimePickerTime; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/DateTimePickerYears.js b/lib/DateTimePickerYears.js new file mode 100644 index 00000000..2d1f2f83 --- /dev/null +++ b/lib/DateTimePickerYears.js @@ -0,0 +1,127 @@ +"use strict"; + +var _get = require("babel-runtime/helpers/get")["default"]; + +var _inherits = require("babel-runtime/helpers/inherits")["default"]; + +var _createClass = require("babel-runtime/helpers/create-class")["default"]; + +var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"]; + +var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var DateTimePickerYears = (function (_Component) { + _inherits(DateTimePickerYears, _Component); + + function DateTimePickerYears() { + var _this = this; + + _classCallCheck(this, DateTimePickerYears); + + _get(Object.getPrototypeOf(DateTimePickerYears.prototype), "constructor", this).apply(this, arguments); + + this.renderYears = function () { + var classes, i, year, years; + years = []; + year = parseInt(_this.props.viewDate.year() / 10, 10) * 10; + year--; + i = -1; + while (i < 11) { + classes = { + year: true, + old: i === -1 | i === 10, + active: _this.props.selectedDate.year() === year + }; + years.push(_react2["default"].createElement( + "span", + { className: (0, _classnames2["default"])(classes), key: year, onClick: _this.props.setViewYear }, + year + )); + year++; + i++; + } + return years; + }; + } + + _createClass(DateTimePickerYears, [{ + key: "render", + value: function render() { + var year; + year = parseInt(this.props.viewDate.year() / 10, 10) * 10; + return _react2["default"].createElement( + "div", + { className: "datepicker-years", style: { display: "block" } }, + _react2["default"].createElement( + "table", + { className: "table-condensed" }, + _react2["default"].createElement( + "thead", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "th", + { className: "prev", onClick: this.props.subtractDecade }, + "‹" + ), + _react2["default"].createElement( + "th", + { className: "switch", colSpan: "5" }, + year, + " - ", + year + 9 + ), + _react2["default"].createElement( + "th", + { className: "next", onClick: this.props.addDecade }, + "›" + ) + ) + ), + _react2["default"].createElement( + "tbody", + null, + _react2["default"].createElement( + "tr", + null, + _react2["default"].createElement( + "td", + { colSpan: "7" }, + this.renderYears() + ) + ) + ) + ) + ); + } + }], [{ + key: "propTypes", + value: { + subtractDecade: _react.PropTypes.func.isRequired, + addDecade: _react.PropTypes.func.isRequired, + viewDate: _react.PropTypes.object.isRequired, + selectedDate: _react.PropTypes.object.isRequired, + setViewYear: _react.PropTypes.func.isRequired + }, + enumerable: true + }]); + + return DateTimePickerYears; +})(_react.Component); + +exports["default"] = DateTimePickerYears; +module.exports = exports["default"]; \ No newline at end of file From 5b2558d01b6b00676a70b052186a22057e305a44 Mon Sep 17 00:00:00 2001 From: Joshua Thornton Date: Tue, 5 Apr 2016 10:28:23 +0800 Subject: [PATCH 3/4] Passing props down to the function. --- src/DateTimeField.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index bced8c0a..0041ec6e 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -16,8 +16,8 @@ export default class DateTimeField extends Component { onChange: (x) => { console.log(x); }, - buttonIcon: () => { - return this.props.mode === Constants.MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; + buttonIcon: (props, state, component) => { + return props.mode === Constants.MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; } } @@ -61,7 +61,7 @@ export default class DateTimeField extends Component { showDatePicker: this.props.mode !== Constants.MODE_TIME, showTimePicker: this.props.mode === Constants.MODE_TIME, inputFormat: this.resolvePropsInputFormat(), - buttonIcon: (typeof this.props.buttonIcon === 'function') ? this.props.buttonIcon.call(this) : this.props.buttonIcon, + buttonIcon: (typeof this.props.buttonIcon === 'function') ? this.props.buttonIcon(this.props, this.state, this) : this.props.buttonIcon, widgetStyle: { display: "block", position: "absolute", From 07d4895aa12e9a40b57a7f5082dcde3598b0f31a Mon Sep 17 00:00:00 2001 From: Joshua Thornton Date: Tue, 5 Apr 2016 10:29:05 +0800 Subject: [PATCH 4/4] Built. --- lib/DateTimeField.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/DateTimeField.js b/lib/DateTimeField.js index 0b994bba..e70c30fb 100644 --- a/lib/DateTimeField.js +++ b/lib/DateTimeField.js @@ -16,8 +16,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _this2 = this; - var _react = require("react"); var _react2 = _interopRequireDefault(_react); @@ -66,7 +64,7 @@ var DateTimeField = (function (_Component) { showDatePicker: this.props.mode !== _ConstantsJs2["default"].MODE_TIME, showTimePicker: this.props.mode === _ConstantsJs2["default"].MODE_TIME, inputFormat: this.resolvePropsInputFormat(), - buttonIcon: typeof this.props.buttonIcon === 'function' ? this.props.buttonIcon.call(this) : this.props.buttonIcon, + buttonIcon: typeof this.props.buttonIcon === 'function' ? this.props.buttonIcon(this.props, this.state, this) : this.props.buttonIcon, widgetStyle: { display: "block", position: "absolute", @@ -414,8 +412,8 @@ var DateTimeField = (function (_Component) { onChange: function onChange(x) { console.log(x); }, - buttonIcon: function buttonIcon() { - return _this2.props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; + buttonIcon: function buttonIcon(props, state, component) { + return props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon glyphicon-time" : "glyphicon glyphicon-calendar"; } }, enumerable: true