@up-group-ui/react-controls
Version:
Up shared react controls
183 lines • 8.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayDetail = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var UpCalendarWeekDay = (function (_super) {
(0, tslib_1.__extends)(UpCalendarWeekDay, _super);
function UpCalendarWeekDay(p, c) {
var _this = _super.call(this, p, c) || this;
_this.makeEvent = function () {
var events = [];
events.push({
start: new Date(2017, 7, 10, 11, 0),
end: new Date(2017, 7, 10, 14, 0),
title: 'test 1',
});
events.push({
start: new Date(2017, 7, 8, 9, 0),
end: new Date(2017, 7, 8, 11, 0),
title: 'test 2',
});
events.push({
start: new Date(2017, 7, 12, 18, 0),
end: new Date(2017, 7, 12, 20, 0),
title: 'test .3',
});
return events;
};
_this.getCurrentWeek = function () {
var dateNow = new Date();
var firstDay = dateNow;
while (firstDay.getDay() != 1) {
firstDay = (0, moment_1.default)(firstDay).subtract('days', 1).toDate();
}
var week = [firstDay];
for (var i = 1; i < 7; i++) {
week.push((0, moment_1.default)(firstDay).add('days', i).toDate());
}
return week;
};
_this.onDayClick = function (date) {
_this.setState({ selectedDate: date });
};
_this.state = {
selectedDate: new Date(),
};
return _this;
}
UpCalendarWeekDay.prototype.render = function () {
var _this = this;
var t = this.getCurrentWeek();
moment_1.default.locale('fr');
var dateNow = new Date();
var dayofWeek = dateNow.getDay();
var month = moment_1.default.months(dateNow.getMonth());
var week = t.map(function (v, i) {
return (0, jsx_runtime_1.jsx)(CalendarDay, { day: v, selectedDate: _this.state.selectedDate, onClick: _this.onDayClick }, i);
});
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "titreCalendrierHome col-md-12" }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "moisAbr col-md-2 bg-aqua" }, { children: dateNow.getFullYear() }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ id: "moisFR", className: "moisTitre col-md-10 bg-blue" }, { children: month }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "col-md-12" }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { padding: 0 }, className: "col-md-2" }, { children: week }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { padding: 0 }, className: "col-md-10" }, { children: (0, jsx_runtime_1.jsx)(DayDetail, { date: this.state.selectedDate, event: this.makeEvent() }, void 0) }), void 0)] }), void 0)] }, void 0));
};
UpCalendarWeekDay.defaultProps = {};
return UpCalendarWeekDay;
}(React.Component));
exports.default = UpCalendarWeekDay;
var CalendarDay = (function (_super) {
(0, tslib_1.__extends)(CalendarDay, _super);
function CalendarDay(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onClick = function () {
_this.props.onClick(_this.props.day);
};
_this.state = {};
return _this;
}
CalendarDay.prototype.render = function () {
var styleJour = {
borderBottom: '1px solid #ccc',
borderLeft: '1px solid #ccc',
borderRight: '1px solid #ccc',
borderRadius: '5px 0 0 5px',
height: 75,
lineHeight: '60px',
listStyleType: 'none',
textAlign: 'center',
width: '100 %',
padding: '0',
backgroundColor: '#fafafa',
fontSize: '20px',
fontWeight: 300,
cursor: 'pointer',
};
var styleNbDate = null;
if (this.props.day.getDate() == this.props.selectedDate.getDate()) {
styleJour['borderRight'] = 'none';
styleJour['boxShadow'] = '1px 1px 6px #ccc';
styleNbDate = {
border: '2px solid #00c0ef',
padding: '3px 7px',
borderRadius: '20px',
};
}
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: styleJour, onClick: this.onClick }, { children: (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ style: styleNbDate }, { children: [" ", this.props.day.getDate()] }), void 0) }), void 0));
};
return CalendarDay;
}(React.Component));
var DayDetail = (function (_super) {
(0, tslib_1.__extends)(DayDetail, _super);
function DayDetail(p, c) {
var _this = _super.call(this, p, c) || this;
_this.getHourString = function (date) {
if (date.getMinutes() != 0) {
return '';
}
return (0, moment_1.default)(date).format('HH:mm');
};
_this.getEventIn = function (inside) {
var mDate = (0, moment_1.default)(inside);
var data = _this.props.event.filter(function (v) {
if ((mDate.isBefore(v.end) && mDate.isAfter(v.start)) || v.start.valueOf() == inside.valueOf()) {
return true;
}
return false;
});
return data;
};
_this.state = {};
return _this;
}
DayDetail.prototype.render = function () {
var styleRemovePadding = {};
var hourSegement = new Date(this.props.date.getFullYear(), this.props.date.getMonth(), this.props.date.getDate(), 8, 0);
var current = hourSegement;
var tableLine = [];
for (var i = 0; i < 25; i++) {
var event_1 = null;
var eventData = this.getEventIn(hourSegement);
if (eventData.length != 0) {
var evt = eventData[0];
if (evt.start.valueOf() == hourSegement.valueOf()) {
event_1 = ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
position: 'absolute',
top: '0',
bottom: '0',
right: 0,
backgroundColor: 'rgb(243, 156, 18)',
height: '21px',
width: '80%',
paddingLeft: 10,
} }, { children: eventData[0].title }), void 0));
}
else {
event_1 = ((0, jsx_runtime_1.jsx)("div", { style: {
position: 'absolute',
top: '0',
bottom: '0',
right: 0,
backgroundColor: 'rgb(243, 156, 18)',
height: '21px',
width: '80%',
} }, void 0));
}
}
var line = ((0, jsx_runtime_1.jsxs)("tr", (0, tslib_1.__assign)({ style: {
height: 20,
borderBottom: '1px dotted',
}, className: "col-md-12" }, { children: [(0, jsx_runtime_1.jsx)("td", (0, tslib_1.__assign)({ style: {
padding: 0,
borderRight: '1px dotted',
}, className: "col-md-1" }, { children: this.getHourString(current) }), void 0), (0, jsx_runtime_1.jsx)("td", (0, tslib_1.__assign)({ style: styleRemovePadding, className: "col-md-11" }, { children: event_1 }), void 0)] }), i));
tableLine.push(line);
hourSegement = (0, moment_1.default)(hourSegement).add('minutes', 30).toDate();
current = hourSegement;
}
return ((0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("tbody", { children: tableLine }, void 0) }, void 0));
};
return DayDetail;
}(React.Component));
exports.DayDetail = DayDetail;
//# sourceMappingURL=UpCalendarWeekDay.js.map