chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
189 lines (186 loc) • 7.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _areDatesEqual = _interopRequireDefault(require("../utils/areDatesEqual"));
var _DateStorage = _interopRequireDefault(require("../utils/DateStorage"));
var _DayItem = _interopRequireDefault(require("./DayItem"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable react/no-array-index-key,no-underscore-dangle */
const DAYS = {
de: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
};
function getDayNames(language) {
if (language === void 0) {
language = chayns.env.language;
}
return DAYS[language] || DAYS.de;
}
class MonthTable extends _react.PureComponent {
static isActivated(activated, date) {
for (let i = 0; i < activated.length; i += 1) {
if ((0, _areDatesEqual.default)(activated[i], date)) {
return true;
}
}
return false;
}
static getHighlightedData(highlighted, date) {
for (let k = 0; k < highlighted.length; k += 1) {
for (let l = 0; highlighted[k].dates && l < highlighted[k].dates.length; l += 1) {
if ((0, _areDatesEqual.default)(highlighted[k].dates[l], date)) {
return {
highlighted: true,
style: highlighted[k].style || null
};
}
}
}
return {
highlighted: false,
style: null
};
}
static getCategoryData(categories, date) {
if (!categories) {
return null;
}
return categories.filter(c => (0, _areDatesEqual.default)(new Date(c.date), date)).map(c => c.color);
}
createTable() {
const {
startDate
} = this.props;
const _table = [];
let normalWeekStart;
if (startDate.getDay() > 0) {
normalWeekStart = _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), 9 - startDate.getDay());
} else {
normalWeekStart = _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), 2 - startDate.getDay());
}
for (let i = 0; i < 6; i += 1) {
const _row = [];
if (i === 0) {
if (startDate.getDay() > 0) {
for (let j = 2; j <= startDate.getDay(); j += 1) {
_row.push({
date: _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), startDate.getDay() * -1 + j),
inMonth: false
});
}
for (let k = 1; k <= 8 - startDate.getDay(); k += 1) {
_row.push({
date: _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), k),
inMonth: true
});
}
} else {
for (let j = 6; j > 0; j -= 1) {
_row.push({
date: _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - j),
inMonth: false
});
}
_row.push({
date: _DateStorage.default.From(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()),
inMonth: true
});
}
} else {
for (let j = 0; j < 7; j += 1) {
const _date = _DateStorage.default.From(normalWeekStart.getFullYear(), normalWeekStart.getMonth(), normalWeekStart.getDate() + j);
if (_date.getMonth() === startDate.getMonth()) {
_row.push({
date: _date,
inMonth: true
});
} else {
_row.push({
date: _date,
inMonth: false
});
}
}
normalWeekStart = _DateStorage.default.From(normalWeekStart.getFullYear(), normalWeekStart.getMonth(), normalWeekStart.getDate() + 7);
}
_table.push(_row);
}
return _table;
}
render() {
const {
activateAll,
activated,
selected,
highlighted: highlightedList,
circleColor,
categories,
onDateSelect
} = this.props;
const _table = this.createTable();
const daysList = getDayNames();
return /*#__PURE__*/_react.default.createElement("div", {
className: "month__table noselect"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "day__row"
}, daysList.map((day, index) => /*#__PURE__*/_react.default.createElement("div", {
className: "day__item--text chayns__color--headline",
key: index
}, day))), _table.map((row, index) => /*#__PURE__*/_react.default.createElement("div", {
className: "day__row",
key: index
}, row.map(day => {
const {
style,
highlighted
} = MonthTable.getHighlightedData(highlightedList, day.date);
return /*#__PURE__*/_react.default.createElement(_DayItem.default, {
key: day.date.getTime(),
date: day.date,
inMonth: day.inMonth,
categories: MonthTable.getCategoryData(categories, day.date),
activateAll: activateAll,
activated: MonthTable.isActivated(activated, day.date),
selected: selected,
highlightStyle: style,
highlighted: highlighted,
circleColor: circleColor,
onDateSelect: onDateSelect
});
}))));
}
}
exports.default = MonthTable;
MonthTable.propTypes = {
onDateSelect: _propTypes.default.func,
activateAll: _propTypes.default.bool,
startDate: _propTypes.default.instanceOf(Date),
selected: _propTypes.default.instanceOf(Date),
activated: _propTypes.default.arrayOf(Date),
highlighted: _propTypes.default.arrayOf(_propTypes.default.shape({
dates: _propTypes.default.arrayOf(Date).isRequired,
// eslint-disable-next-line react/forbid-prop-types
style: _propTypes.default.object
})),
categories: _propTypes.default.arrayOf(_propTypes.default.shape({
date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
color: _propTypes.default.string
})),
circleColor: _propTypes.default.string
};
MonthTable.defaultProps = {
selected: null,
activated: null,
highlighted: null,
circleColor: null,
categories: null,
startDate: null,
activateAll: true,
onDateSelect: null
};
MonthTable.displayName = 'MonthTable';
//# sourceMappingURL=MonthTable.js.map