jss-react-material
Version:
Google Material Components for React
225 lines (186 loc) • 9.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _alert = require('../dialog/alert');
var _alert2 = _interopRequireDefault(_alert);
var _iconButton = require('../buttons/icon-button');
var _iconButton2 = _interopRequireDefault(_iconButton);
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var getCalendarDays = function getCalendarDays(_ref) {
var startWeekDay = _ref.startWeekDay,
monthDaysCount = _ref.monthDaysCount;
var isMonthDay = true;
var arraySize = startWeekDay + monthDaysCount;
var maxSize = arraySize + (7 - arraySize % 7);
var days = Array(maxSize).fill(!isMonthDay, 0, startWeekDay);
days.fill(isMonthDay, startWeekDay, arraySize);
if (arraySize % 7) {
days.fill(!isMonthDay, arraySize, maxSize);
}
return days;
};
var createDefaultState = function createDefaultState(props) {
var today = new Date();
var date = props.date || today;
var startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
var endDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
return {
selectedDate: (0, _moment2.default)(date),
selectedMonth: {
date: (0, _moment2.default)(date).set('date', 15),
startWeekDay: startOfMonth.getDay(),
monthDaysCount: endDayOfMonth.getDate()
},
today: {
date: (0, _moment2.default)(today)
}
};
};
var PickerDate = (_temp = _class = function (_React$PureComponent) {
_inherits(PickerDate, _React$PureComponent);
function PickerDate(props, context) {
_classCallCheck(this, PickerDate);
var _this = _possibleConstructorReturn(this, (PickerDate.__proto__ || Object.getPrototypeOf(PickerDate)).call(this, props, context));
_this.state = createDefaultState(props);
_this.handlePrevMonth = _this.handlePrevMonth.bind(_this);
_this.handleNextMonth = _this.handleNextMonth.bind(_this);
_this.onAgree = _this.onAgree.bind(_this);
_this.handleSelect = _this.handleSelect.bind(_this);
return _this;
}
_createClass(PickerDate, [{
key: 'updateSelected',
value: function updateSelected(date) {
var startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
var endDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
this.setState({
selectedMonth: {
date: (0, _moment2.default)(date),
startWeekDay: startOfMonth.getDay(),
monthDaysCount: endDayOfMonth.getDate()
}
});
}
}, {
key: 'handleSelect',
value: function handleSelect(event) {
var date = event.target.getAttribute('data-key');
var selectedMonth = this.state.selectedMonth;
this.setState({
selectedDate: (0, _moment2.default)(selectedMonth.date.toDate()).set('date', date)
});
}
}, {
key: 'handlePrevMonth',
value: function handlePrevMonth() {
var selectedMonth = this.state.selectedMonth;
this.updateSelected(selectedMonth.date.subtract(1, 'months').toDate());
}
}, {
key: 'handleNextMonth',
value: function handleNextMonth() {
var selectedMonth = this.state.selectedMonth;
this.updateSelected(selectedMonth.date.add(1, 'months').toDate());
}
}, {
key: 'onAgree',
value: function onAgree() {
this.props.agree.onClick(this.state.selectedDate.toDate());
}
}, {
key: 'render',
value: function render() {
var disagree = this.props.disagree;
var _state = this.state,
selectedMonth = _state.selectedMonth,
selectedDate = _state.selectedDate;
var agree = { onClick: this.onAgree, label: this.props.agree.label };
var isSelectedDateInMonth = selectedDate.get('month') === selectedMonth.date.get('month');
var selectedMonthDate = selectedDate.get('date');
var days = getCalendarDays(selectedMonth);
var day = 1;
return _react2.default.createElement(
_alert2.default,
{ agree: agree, disagree: disagree, className: 'picker-date' },
_react2.default.createElement(
'div',
{ className: 'picker-date-header' },
_react2.default.createElement(
'span',
{ className: 'header-subtitle' },
' ',
selectedDate.format('YYYY'),
' '
),
_react2.default.createElement(
'h3',
{ className: 'header-title' },
selectedDate.format('ddd, MMM, DD')
)
),
_react2.default.createElement(
'div',
{ className: 'picker-date-body' },
_react2.default.createElement(
'div',
{ className: 'picker-date-navigation' },
_react2.default.createElement(_iconButton2.default, { icon: '0xE314', className: 'picker-date-prev', onClick: this.handlePrevMonth }),
_react2.default.createElement(
'span',
{ className: 'picker-date-month' },
selectedMonth.date.format('MMMM YYYY')
),
_react2.default.createElement(_iconButton2.default, { icon: '0xE315', className: 'picker-date-next', onClick: this.handleNextMonth })
),
_react2.default.createElement(
'div',
{ className: 'picker-date-weekdays' },
_moment2.default.weekdaysShort().map(function (wd, key) {
return _react2.default.createElement(
'span',
{ key: key },
wd
);
})
),
_react2.default.createElement(
'div',
{ className: 'picker-date-days', onClick: this.handleSelect },
days.map(function (isDay, key) {
var className = isSelectedDateInMonth && isDay && selectedMonthDate === day ? 'picker-date-day-selected' : 'picker-date-day';
return _react2.default.createElement(
'span',
{ className: className, 'data-key': isDay ? day : 0, key: key },
isDay ? day++ : ''
);
})
)
)
);
}
}]);
return PickerDate;
}(_react2.default.PureComponent), _class.propTypes = {
date: _propTypes2.default.instanceOf(Date),
agree: _propTypes2.default.shape({
label: _propTypes2.default.string.isRequired,
onClick: _propTypes2.default.func.isRequired
}).isRequired,
disagree: _propTypes2.default.shape({
label: _propTypes2.default.string.isRequired,
onClick: _propTypes2.default.func.isRequired
})
}, _temp);
exports.default = PickerDate;