@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
204 lines • 8.55 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var moment = require("moment");
var UpCalendarWeekDay = (function (_super) {
__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 = moment(firstDay).subtract('days', 1).toDate();
}
console.log(firstDay);
var week = [firstDay];
for (var i = 1; i < 7; i++) {
week.push(moment(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.locale("fr");
var dateNow = new Date();
var dayofWeek = dateNow.getDay();
var month = moment.months(dateNow.getMonth());
var week = t.map(function (v, i) {
return React.createElement(CalendarDay, { day: v, key: i, selectedDate: _this.state.selectedDate, onClick: _this.onDayClick });
});
return React.createElement("div", null,
React.createElement("div", { className: "titreCalendrierHome col-md-12" },
React.createElement("div", { className: "moisAbr col-md-2 bg-aqua" }, dateNow.getFullYear()),
React.createElement("div", { id: "moisFR", className: "moisTitre col-md-10 bg-blue" }, month)),
React.createElement("div", { className: "col-md-12" },
React.createElement("div", { style: { padding: 0 }, className: "col-md-2" }, week),
React.createElement("div", { style: { padding: 0 }, className: "col-md-10" },
React.createElement(DayDetail, { date: this.state.selectedDate, event: this.makeEvent() }))));
};
UpCalendarWeekDay.defaultProps = {};
return UpCalendarWeekDay;
}(React.Component));
exports.default = UpCalendarWeekDay;
var CalendarDay = (function (_super) {
__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 React.createElement("div", { style: styleJour, onClick: this.onClick },
React.createElement("span", { style: styleNbDate },
" ",
this.props.day.getDate()));
};
return CalendarDay;
}(React.Component));
var DayDetail = (function (_super) {
__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 moment(date).format('HH:mm');
};
_this.getEventIn = function (inside) {
var mDate = moment(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 = null;
var eventData = this.getEventIn(hourSegement);
if (eventData.length != 0) {
var evt = eventData[0];
if (evt.start.valueOf() == hourSegement.valueOf()) {
event = React.createElement("div", { style: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
position: "absolute",
top: "0",
bottom: "0",
right: 0,
backgroundColor: "rgb(243, 156, 18)",
height: "21px",
width: "80%",
paddingLeft: 10
} }, eventData[0].title);
}
else {
event = React.createElement("div", { style: {
position: "absolute",
top: "0",
bottom: "0",
right: 0,
backgroundColor: "rgb(243, 156, 18)",
height: "21px",
width: "80%",
} });
}
}
var line = React.createElement("tr", { style: {
height: 20,
borderBottom: "1px dotted"
}, key: i, className: "col-md-12" },
React.createElement("td", { style: {
padding: 0,
borderRight: "1px dotted"
}, className: "col-md-1" }, this.getHourString(current)),
React.createElement("td", { style: styleRemovePadding, className: "col-md-11" }, event));
tableLine.push(line);
hourSegement = moment(hourSegement).add('minutes', 30).toDate();
current = hourSegement;
}
return React.createElement("table", null,
React.createElement("tbody", null, tableLine));
};
return DayDetail;
}(React.Component));
exports.DayDetail = DayDetail;
//# sourceMappingURL=UpCalendarWeekDay.js.map