@up-group-ui/react-controls
Version:
Up shared react controls
71 lines • 4.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_2 = (0, tslib_1.__importDefault)(require("@fullcalendar/react"));
var daygrid_1 = (0, tslib_1.__importDefault)(require("@fullcalendar/daygrid"));
var interaction_1 = (0, tslib_1.__importDefault)(require("@fullcalendar/interaction"));
var timegrid_1 = (0, tslib_1.__importDefault)(require("@fullcalendar/timegrid"));
var fr_1 = (0, tslib_1.__importDefault)(require("@fullcalendar/core/locales/fr"));
require("@fullcalendar/common/main.css");
require("@fullcalendar/daygrid/main.css");
require("@fullcalendar/timegrid/main.css");
require("./UpCalendar.css");
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var react_popper_1 = require("react-popper");
var UpCalendar = function (props) {
var _a;
var calendar = react_1.default.useRef(null);
react_1.default.useEffect(function () {
var calendarApi = calendar.current.getApi();
});
var fullCalendarStyle = (0, typestyle_1.style)({
$nest: {
'& td.fc-timegrid-slot': {
cursor: props.editable ? 'pointer' : 'default',
},
'& td.fc-daygrid-day': {
cursor: props.editable ? 'pointer' : 'default',
},
},
});
var _b = react_1.default.useState(null), tooltipEvent = _b[0], setTooltipEvent = _b[1];
var _c = react_1.default.useState(null), referenceElement = _c[0], setReferenceElement = _c[1];
var _d = react_1.default.useState(null), arrowElement = _d[0], setArrowElement = _d[1];
var _e = react_1.default.useState(null), popperElement = _e[0], setPopperElement = _e[1];
var styles = null;
var attributes = null;
if (react_popper_1.usePopper) {
(_a = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
placement: 'right',
modifiers: [
{
name: 'arrow',
options: { element: arrowElement },
},
{
name: 'offset',
options: {
offset: [0, 10],
},
},
],
}), styles = _a.styles, attributes = _a.attributes);
}
var generateTooltipEvent = props.generateTooltipEvent, renderTooltipContent = props.renderTooltipContent, renderTooltipHeader = props.renderTooltipHeader, className = props.className, calendarProps = (0, tslib_1.__rest)(props, ["generateTooltipEvent", "renderTooltipContent", "renderTooltipHeader", "className"]);
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'up-calendar', style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_2.default, (0, tslib_1.__assign)({ initialView: "dayGridMonth", locale: 'fr', locales: [fr_1.default], headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
}, eventMouseEnter: function (e) {
setReferenceElement(e.el);
setTooltipEvent((generateTooltipEvent && generateTooltipEvent(e.event)) || e.event);
}, eventMouseLeave: function (e) {
setReferenceElement(null);
setTooltipEvent(null);
}, ref: function (element) { return (calendar.current = element); }, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], viewClassNames: (0, classnames_1.default)(fullCalendarStyle, className) }, calendarProps), void 0), referenceElement && tooltipEvent && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-calendar__tooltip", ref: setPopperElement, style: styles && styles.popper }, ((attributes === null || attributes === void 0 ? void 0 : attributes.popper) || {}), { children: [(0, jsx_runtime_1.jsx)("div", { className: "up-calendar__tooltip__arrow", ref: setArrowElement, style: styles.arrow }, void 0), props.renderTooltipHeader && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-calendar__tooltip__header" }, { children: renderTooltipHeader(tooltipEvent) }), void 0)), props.renderTooltipContent && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-calendar__tooltip__content" }, { children: renderTooltipContent(tooltipEvent) }), void 0))] }), void 0))] }), void 0));
};
exports.default = UpCalendar;
//# sourceMappingURL=UpCalendar.js.map