web-toolkit
Version:
A GTK inspired toolkit designed to build awesome web apps
421 lines (362 loc) • 13.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _dateFns = require("date-fns");
var _clsx = _interopRequireDefault(require("clsx"));
var _Box = _interopRequireDefault(require("./Box"));
var _Button = _interopRequireDefault(require("./Button"));
var _Input = _interopRequireDefault(require("./Input"));
var _Label = _interopRequireDefault(require("./Label"));
var weekDayLetters = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
var months = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
var yearButtons = Array(3).fill(0).map(function (_, n) {
return n;
});
var MODE = {
DAY: 'day',
MONTH: 'month',
YEAR: 'year'
};
var Calendar = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(Calendar, _React$Component);
var _super = (0, _createSuper2.default)(Calendar);
function Calendar() {
var _this;
(0, _classCallCheck2.default)(this, Calendar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.state = {
mode: MODE.DAY,
value: new Date(),
current: (0, _dateFns.startOfMonth)(new Date())
};
_this.setMonth = function (month) {
var current = new Date(_this.state.current);
current.setMonth(month);
_this.setCurrent(current);
_this.setMode(MODE.DAY);
};
_this.setYear = function (year) {
_this.changeYear(year);
_this.setMode(MODE.DAY);
};
_this.changeYear = function (year) {
var current = new Date(_this.state.current);
current.setFullYear(year);
_this.setCurrent(current);
};
_this.onPrevious = function () {
_this.setCurrent((0, _dateFns.addMonths)(_this.state.current, -1));
};
_this.onNext = function () {
_this.setCurrent((0, _dateFns.addMonths)(_this.state.current, +1));
};
_this.select = function (item) {
var value = toDate(item);
if (_this.props.onChange) _this.props.onChange(value);else _this.setState({
value: value
});
};
return _this;
}
(0, _createClass2.default)(Calendar, [{
key: "setMode",
value: function setMode(mode) {
this.setState({
mode: mode
});
}
}, {
key: "setCurrent",
value: function setCurrent(current) {
this.setState({
current: current
});
}
}, {
key: "getValue",
value: function getValue() {
var _this$props$value;
return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
}
}, {
key: "renderDays",
value: function renderDays() {
var _this2 = this;
var today = new Date();
var value = this.getValue();
var current = this.state.current;
var weeks = getWeeks(current);
return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", {
className: "Calendar__weekDays"
}, weekDayLetters.map(function (letter, j) {
return /*#__PURE__*/_react.default.createElement("td", {
key: j,
className: "Calendar__day"
}, letter);
})), weeks.map(function (week, i) {
return /*#__PURE__*/_react.default.createElement("tr", {
key: i,
className: "Calendar__week"
}, week.map(function (item, j) {
return /*#__PURE__*/_react.default.createElement("td", {
key: j,
className: (0, _clsx.default)('Calendar__day', "day-".concat(j), {
selected: isEqual(item, value),
today: isEqual(item, today),
'other-month': !isEqualMonth(item, current)
})
}, item !== undefined && /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
circular: true,
onClick: function onClick() {
return _this2.select(item);
}
}, item.date));
}));
})));
}
}, {
key: "renderMonths",
value: function renderMonths() {
var _this3 = this;
return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, months.map(function (row, i) {
return /*#__PURE__*/_react.default.createElement("tr", {
key: i
}, row.map(function (month) {
return /*#__PURE__*/_react.default.createElement("td", {
key: month,
className: "Calendar__month"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
onClick: function onClick() {
return _this3.setMonth(month);
}
}, (0, _dateFns.format)(new Date(2000, month, 15), 'MMMM')));
}));
})));
}
}, {
key: "renderYears",
value: function renderYears() {
var current = this.state.current;
var year = current.getFullYear();
return /*#__PURE__*/_react.default.createElement(_Box.default, {
fill: true,
align: true,
justify: true
}, /*#__PURE__*/_react.default.createElement(YearPicker, {
value: year,
onChange: this.changeYear,
onAccept: this.setYear
}));
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$state = this.state,
current = _this$state.current,
mode = _this$state.mode;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
className: (0, _clsx.default)('Calendar', "mode-".concat(mode)),
vertical: true,
compact: true
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
className: "Calendar__header",
horizontal: true,
compact: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
icon: "go-previous",
onClick: this.onPrevious,
className: "Calendar__previous"
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
className: "Calendar__monthLabel",
onClick: function onClick() {
return _this4.setMode(mode !== MODE.MONTH ? MODE.MONTH : MODE.DAY);
}
}, mode !== MODE.MONTH ? (0, _dateFns.format)(current, 'MMMM') : /*#__PURE__*/_react.default.createElement(_Label.default, {
info: true
}, "Go Back")), /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
className: "Calendar__yearLabel",
onClick: function onClick() {
return _this4.setMode(mode !== MODE.YEAR ? MODE.YEAR : MODE.DAY);
}
}, mode !== MODE.YEAR ? (0, _dateFns.format)(current, 'yyyy') : /*#__PURE__*/_react.default.createElement(_Label.default, {
info: true
}, "Go Back")), /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
icon: "go-next",
onClick: this.onNext,
className: "Calendar__next"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "Calendar__grid"
}, mode === MODE.DAY ? this.renderDays() : mode === MODE.MONTH ? this.renderMonths() : mode === MODE.YEAR ? this.renderYears() : null));
}
}]);
return Calendar;
}(_react.default.Component);
function YearPicker(_ref) {
var value = _ref.value,
onChange = _ref.onChange,
onAccept = _ref.onAccept;
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
ticks = _useState2[0],
setTicks = _useState2[1];
var onWheel = function onWheel(ev) {
ev.preventDefault();
var direction = ev.deltaY < 0 ? -1 : ev.deltaY > 0 ? +1 : 0;
var newTicks = ticks + direction;
if (Math.abs(newTicks) > 5) {
onChange(value + direction);
setTicks(0);
} else {
setTicks(newTicks);
}
};
var onSubmit = function onSubmit(ev) {
ev.preventDefault();
onAccept(value);
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "YearPicker",
onWheel: onWheel
}, yearButtons.map(function (diff, i) {
return /*#__PURE__*/_react.default.createElement("div", {
key: value - (yearButtons.length - diff),
className: "YearPicker__year"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
onClick: function onClick() {
return onAccept(value - (yearButtons.length - diff));
}
}, value - (yearButtons.length - diff)));
}), /*#__PURE__*/_react.default.createElement("form", {
className: "YearPicker__input",
onSubmit: onSubmit
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
horizontal: true
}, /*#__PURE__*/_react.default.createElement(_Input.default.Group, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
size: "huge",
icon: "go-previous",
onClick: function onClick() {
return onChange(value - 1);
}
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
flat: true,
size: "huge",
type: "number",
value: value,
onChange: onChange
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
size: "huge",
icon: "go-next",
onClick: function onClick() {
return onChange(value + 1);
}
})))), yearButtons.map(function (diff) {
return /*#__PURE__*/_react.default.createElement("div", {
key: value + 1 + diff,
className: "YearPicker__year"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
flat: true,
onClick: function onClick() {
return onAccept(value + 1 + diff);
}
}, value + 1 + diff));
}));
}
var _default = Calendar;
exports.default = _default;
function isEqual(item, value) {
return value.getFullYear() === item.year && value.getMonth() === item.month && value.getDate() === item.date;
}
function isEqualMonth(item, value) {
return value.getFullYear() === item.year && value.getMonth() === item.month;
}
function toDate(item) {
return new Date(item.year, item.month, item.date);
}
function getWeeks(current) {
var year = current.getFullYear();
var month = current.getMonth();
var firstDay = (0, _dateFns.startOfMonth)(current);
var lastDay = (0, _dateFns.endOfMonth)(current);
var firstDate = firstDay.getDay();
var lastDate = lastDay.getDate();
var weeks = [Array(7).fill(undefined)];
var currentWeek = weeks[0];
var currentDate = firstDate;
for (var i = 1; i <= lastDate; i++) {
if (currentDate === 7) {
currentDate = 0;
currentWeek = Array(7).fill(undefined);
weeks.push(currentWeek);
}
currentWeek[currentDate] = {
year: year,
month: month,
date: i
};
currentDate++;
}
if (firstDay.getDay() !== 0) {
var previousMonth = (0, _dateFns.addMonths)(current, -1);
var _currentWeek = weeks[0];
var firstDayOfWeek = (0, _dateFns.addDays)(firstDay, -firstDay.getDay());
var firstDayOfWeekDate = firstDayOfWeek.getDate();
for (var _i = 0; _i < firstDay.getDay(); _i++) {
_currentWeek[_i] = {
year: previousMonth.getFullYear(),
month: previousMonth.getMonth(),
date: firstDayOfWeekDate + _i
};
}
}
if (lastDay.getDay() !== 6) {
var nextMonth = (0, _dateFns.addMonths)(current, 1);
var _currentWeek2 = weeks[weeks.length - 1];
var _currentDate = 1;
for (var _i2 = lastDay.getDay() + 1; _i2 <= 6; _i2++) {
_currentWeek2[_i2] = {
year: nextMonth.getFullYear(),
month: nextMonth.getMonth(),
date: _currentDate++
};
}
}
if (weeks.length <= 5) {
var _nextMonth = (0, _dateFns.addMonths)(current, 1);
var lastDayOfCalendar = weeks[weeks.length - 1][6];
var _currentWeek3 = [];
weeks.push(_currentWeek3);
var lastDayOfWeekDate = lastDayOfCalendar.month === _nextMonth.getMonth() ? lastDayOfCalendar.date : 1;
for (var _i3 = 0; _i3 <= 6; _i3++) {
_currentWeek3[_i3] = {
year: _nextMonth.getFullYear(),
month: _nextMonth.getMonth(),
date: lastDayOfWeekDate + _i3
};
}
}
return weeks;
}
//# sourceMappingURL=Calendar.js.map