Socket
Socket
Sign inDemoInstall

@ericz1803/react-google-calendar

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ericz1803/react-google-calendar - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0

146

event.js

@@ -10,4 +10,2 @@ "use strict";

var _css2 = _interopRequireDefault(require("@emotion/css"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

@@ -25,4 +23,2 @@

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));

@@ -36,3 +32,3 @@

var _core = require("@emotion/core");
var _react2 = require("@emotion/react");

@@ -43,2 +39,4 @@ var _fiberManualRecord = _interopRequireDefault(require("./svg/fiberManualRecord"));

var _reactPopper = require("react-popper");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

@@ -48,27 +46,47 @@

var TooltipWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return (0, _core.jsx)(_tooltip["default"], (0, _extends2["default"])({
innerRef: ref
}, props));
});
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref = {
name: "xrcpmh-Event",
styles: "position:relative;&:focus{outline:none;};label:Event;"
var _ref = process.env.NODE_ENV === "production" ? {
name: "18i2ql3",
styles: "@media (max-width: 599px){display:none;}"
} : {
name: "190p05k-Event",
styles: "@media (max-width: 599px){display:none;};label:Event;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = {
name: "7wzouh-Event",
styles: "border-radius:3px;width:100%;&:hover{cursor:pointer;background:rgba(81,86,93,0.1);};label:Event;"
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "147xfim",
styles: "position:absolute;top:5px;left:2px;color:#4786ff;height:15px;width:15px"
} : {
name: "hl8ezg-Event",
styles: "position:absolute;top:5px;left:2px;color:#4786ff;height:15px;width:15px;label:Event;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref3 = {
name: "1km0psv-Event",
styles: "position:absolute;top:5px;left:2px;color:#4786ff;height:15px;width:15px;;label:Event;"
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "obigwj",
styles: "border-radius:3px;width:100%;&:hover{cursor:pointer;background:rgba(81, 86, 93, 0.1);}"
} : {
name: "17undz0-Event",
styles: "border-radius:3px;width:100%;&:hover{cursor:pointer;background:rgba(81, 86, 93, 0.1);};label:Event;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref4 = {
name: "1akqoc6-Event",
styles: "@media (max-width:599px){display:none;};label:Event;"
var _ref4 = process.env.NODE_ENV === "production" ? {
name: "urwrh8",
styles: "position:relative;&:focus{outline:none;}"
} : {
name: "xrcpmh-Event",
styles: "position:relative;&:focus{outline:none;};label:Event;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref5 = {
name: "np5u6c-Event",
styles: "font-weight:500;;label:Event;"
var _ref6 = process.env.NODE_ENV === "production" ? {
name: "f3vz0n",
styles: "font-weight:500"
} : {
name: "7rb84a-Event",
styles: "font-weight:500;label:Event;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

@@ -113,34 +131,30 @@

value: function render() {
return (0, _core.jsx)("div", {
var _this2 = this;
return (0, _react2.jsx)(_reactPopper.Manager, null, (0, _react2.jsx)("div", {
className: "event",
tabIndex: "0",
onBlur: this.closeTooltip,
css: _ref
}, (0, _core.jsx)("div", {
css: /*#__PURE__*/(0, _css2["default"])([_ref2, this.props.eventStyles], ";label:Event;"),
onClick: this.toggleTooltip
}, (0, _core.jsx)("div", {
className: "event-text",
css: /*#__PURE__*/(0, _css2["default"])([{
color: "#51565d",
padding: "3px 0px 3px 20px",
marginRight: "5px",
overflowX: "hidden",
whiteSpace: "nowrap",
position: "relative",
textAlign: "left"
}, this.props.eventTextStyles], ";label:Event;")
}, (0, _core.jsx)("span", {
css: /*#__PURE__*/(0, _css2["default"])([_ref3, this.props.eventCircleStyles], ";label:Event;")
}, (0, _core.jsx)(_fiberManualRecord["default"], {
fill: "currentColor",
fontSize: "inherit",
height: "auto",
width: "100%"
})), (0, _core.jsx)("span", {
css: _ref4
}, this.state.startTime.format("h:mma ")), (0, _core.jsx)("span", {
css: _ref5
}, this.props.name))), (0, _core.jsx)(TooltipWrapper, {
ref: this.props.innerRef,
}, (0, _react2.jsx)(_reactPopper.Reference, null, function (_ref5) {
var ref = _ref5.ref;
return (0, _react2.jsx)("div", {
css: [_ref3, _this2.props.eventStyles, process.env.NODE_ENV === "production" ? "" : ";label:Event;"],
onClick: _this2.toggleTooltip,
ref: ref
}, (0, _react2.jsx)("div", {
className: "event-text",
css: ["color:#51565d;padding:3px 0px 3px 20px;margin-right:5px;overflow-x:hidden;white-space:nowrap;position:relative;text-align:left;", _this2.props.eventTextStyles, process.env.NODE_ENV === "production" ? "" : ";label:Event;"]
}, (0, _react2.jsx)("span", {
css: [_ref2, _this2.props.eventCircleStyles, process.env.NODE_ENV === "production" ? "" : ";label:Event;"]
}, (0, _react2.jsx)(_fiberManualRecord["default"], {
fill: "currentColor",
fontSize: "inherit",
width: "100%"
})), (0, _react2.jsx)("span", {
css: _ref
}, _this2.state.startTime.format("h:mma ")), (0, _react2.jsx)("span", {
css: _ref6
}, _this2.props.name)));
}), (0, _react2.jsx)(_tooltip["default"], {
name: this.props.name,

@@ -154,3 +168,3 @@ startTime: _momentTimezone["default"].parseZone(this.props.startTime),

closeTooltip: this.closeTooltip
}));
})));
}

@@ -168,22 +182,6 @@ }]);

location: _propTypes["default"].string,
eventStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:eventStyles;;label:eventStyles;")]),
eventCircleStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:eventCircleStyles;;label:eventCircleStyles;")]),
eventTextStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:eventTextStyles;;label:eventTextStyles;")]),
tooltipStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:tooltipStyles;;label:tooltipStyles;")]),
eventStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react2.css, process.env.NODE_ENV === "production" ? "" : ";label:eventStyles;")]),
eventCircleStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react2.css, process.env.NODE_ENV === "production" ? "" : ";label:eventCircleStyles;")]),
eventTextStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react2.css, process.env.NODE_ENV === "production" ? "" : ";label:eventTextStyles;")]),
tooltipStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react2.css, process.env.NODE_ENV === "production" ? "" : ";label:tooltipStyles;")]),
circleColor: _propTypes["default"].string,

@@ -190,0 +188,0 @@ textColor: _propTypes["default"].string,

145

index.js

@@ -12,6 +12,6 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _css2 = _interopRequireDefault(require("@emotion/css"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

@@ -33,4 +33,2 @@

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _get2 = _interopRequireDefault(require("lodash/get"));

@@ -58,3 +56,3 @@

var _core = require("@emotion/core");
var _react2 = require("@emotion/react");

@@ -75,34 +73,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

var EventWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return (0, _core.jsx)(_event["default"], (0, _extends2["default"])({
innerRef: ref
}, props));
});
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var MultiEventWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return (0, _core.jsx)(_multiEvent["default"], (0, _extends2["default"])({
innerRef: ref
}, props));
});
var _ref = process.env.NODE_ENV === "production" ? {
name: "1hrdiqt",
styles: "font-size:14px;text-decoration:none;color:inherit;&:hover{text-decoration:underline;}"
} : {
name: "d0cexe-Calendar",
styles: "font-size:14px;text-decoration:none;color:inherit;&:hover{text-decoration:underline;};label:Calendar;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref = {
name: "12l6s68-Calendar",
styles: "font-size:14px;padding-left:5px;text-align:left;;label:Calendar;"
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "p20sj1",
styles: "vertical-align:top;margin-left:3px;margin-right:3px"
} : {
name: "s71wyw-Calendar",
styles: "vertical-align:top;margin-left:3px;margin-right:3px;label:Calendar;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = {
name: "j7mp1g-Calendar",
styles: "vertical-align:top;margin-left:3px;margin-right:3px;;label:Calendar;"
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "7l8byf",
styles: "font-size:14px;padding-left:5px;text-align:left"
} : {
name: "155wnvz-Calendar",
styles: "font-size:14px;padding-left:5px;text-align:left;label:Calendar;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref3 = {
name: "d0cexe-Calendar",
styles: "font-size:14px;text-decoration:none;color:inherit;&:hover{text-decoration:underline;};label:Calendar;"
var _ref4 = process.env.NODE_ENV === "production" ? {
name: "sgs7ru",
styles: "padding-right:6px"
} : {
name: "csro95-Calendar",
styles: "padding-right:6px;label:Calendar;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref4 = {
name: "15m0aa0-Calendar",
styles: "padding-right:6px;;label:Calendar;"
var _ref5 = process.env.NODE_ENV === "production" ? {
name: "sgs7ru",
styles: "padding-right:6px"
} : {
name: "csro95-Calendar",
styles: "padding-right:6px;label:Calendar;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref5 = {
name: "15m0aa0-Calendar",
styles: "padding-right:6px;;label:Calendar;"
};

@@ -131,3 +143,2 @@ var Calendar = /*#__PURE__*/function (_React$Component) {

};
_this.calendarRef = /*#__PURE__*/_react["default"].createRef();
_this.lastMonth = _this.lastMonth.bind((0, _assertThisInitialized2["default"])(_this));

@@ -244,8 +255,6 @@ _this.nextMonth = _this.nextMonth.bind((0, _assertThisInitialized2["default"])(_this));

return this.state.days.map(function (x, i) {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "day-name",
key: "day-of-week-" + i,
css: /*#__PURE__*/(0, _css2["default"])([{
borderColor: "LightGray"
}, (0, _get2["default"])(_this2.props.styles, 'day', {})], ";label:Calendar;")
css: ["border-color:LightGray;", (0, _get2["default"])(_this2.props.styles, 'day', {}), process.env.NODE_ENV === "production" ? "" : ";label:Calendar;"]
}, x);

@@ -267,3 +276,3 @@ });

return [(0, _toConsumableArray2["default"])(Array(dayOfWeek)).map(function (x, i) {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "day",

@@ -275,9 +284,9 @@ key: "empty-day-" + i,

if (x == _this3.state.today.date() && _this3.state.current.isSame(_this3.state.today, "month")) {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "day",
key: "day-" + x,
css: /*#__PURE__*/(0, _css2["default"])([(0, _get2["default"])(_this3.props.styles, 'day', {}), (0, _get2["default"])(_this3.props.styles, 'today', {})], ";label:Calendar;")
}, (0, _core.jsx)("span", {
css: [(0, _get2["default"])(_this3.props.styles, 'day', {}), (0, _get2["default"])(_this3.props.styles, 'today', {}), process.env.NODE_ENV === "production" ? "" : ";label:Calendar;"]
}, (0, _react2.jsx)("span", {
css: _ref4
}, x), (0, _core.jsx)("div", {
}, x), (0, _react2.jsx)("div", {
className: "innerDay",

@@ -287,9 +296,9 @@ id: "day-" + x

} else {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "day",
key: "day-" + x,
css: (0, _get2["default"])(_this3.props.styles, 'day', {})
}, (0, _core.jsx)("span", {
}, (0, _react2.jsx)("span", {
css: _ref5
}, x), (0, _core.jsx)("div", {
}, x), (0, _react2.jsx)("div", {
className: "innerDay",

@@ -300,3 +309,3 @@ id: "day-" + x

}), (0, _toConsumableArray2["default"])(Array(padDays)).map(function (x, i) {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "day",

@@ -428,5 +437,3 @@ key: "empty-day-2-" + i,

_reactDom["default"].render((0, _core.jsx)(MultiEventWrapper, (0, _extends2["default"])({
ref: this.calendarRef
}, props, multiEventProps, {
_reactDom["default"].render((0, _react2.jsx)(_multiEvent["default"], (0, _extends2["default"])({}, props, multiEventProps, {
length: length,

@@ -453,5 +460,3 @@ arrowLeft: arrowLeft,

//target only placeholders
_reactDom["default"].render((0, _core.jsx)(EventWrapper, (0, _extends2["default"])({
ref: this.calendarRef
}, props)), node);
_reactDom["default"].render((0, _react2.jsx)(_event["default"], props), node);

@@ -473,5 +478,3 @@ node.className = "";

_reactDom["default"].render((0, _core.jsx)(EventWrapper, (0, _extends2["default"])({
ref: this.calendarRef
}, props)), tempNode);
_reactDom["default"].render((0, _react2.jsx)(_event["default"], props), tempNode);
}

@@ -603,35 +606,27 @@ } //get dates based on rrule string between dates

value: function render() {
return (0, _core.jsx)("div", {
return (0, _react2.jsx)("div", {
className: "calendar",
ref: this.calendarRef,
css: /*#__PURE__*/(0, _css2["default"])([{
fontSize: "18px",
border: "1px solid",
minWidth: "300px",
position: "relative",
borderColor: "LightGray",
color: "#51565d"
}, (0, _get2["default"])(this.props.styles, 'calendar', {})], ";label:Calendar;")
}, (0, _core.jsx)("div", {
css: ["font-size:18px;border:1px solid;min-width:300px;position:relative;border-color:LightGray;color:#51565d;", (0, _get2["default"])(this.props.styles, 'calendar', {}), process.env.NODE_ENV === "production" ? "" : ";label:Calendar;"]
}, (0, _react2.jsx)("div", {
className: "calendar-header"
}, (0, _core.jsx)("div", {
}, (0, _react2.jsx)("div", {
className: "calendar-navigate unselectable",
onClick: this.lastMonth
}, "\u276E"), (0, _core.jsx)("div", null, (0, _core.jsx)("h2", {
}, "\u276E"), (0, _react2.jsx)("div", null, (0, _react2.jsx)("h2", {
className: "calendar-title"
}, this.state.monthNames[this.state.current.month()] + " " + this.state.current.year())), (0, _core.jsx)("div", {
}, this.state.monthNames[this.state.current.month()] + " " + this.state.current.year())), (0, _react2.jsx)("div", {
className: "calendar-navigate unselectable",
onClick: this.nextMonth
}, "\u276F")), (0, _core.jsx)("div", {
}, "\u276F")), (0, _react2.jsx)("div", {
className: "calendar-body"
}, this.renderDays(), this.renderDates()), (0, _core.jsx)("div", {
}, this.renderDays(), this.renderDates()), (0, _react2.jsx)("div", {
className: "calendar-footer"
}, (0, _core.jsx)("div", {
css: _ref
}, "All times shown in timezone: ", this.state.calendarTimezone.replace("_", " ")), (0, _core.jsx)("div", {
}, (0, _react2.jsx)("div", {
css: _ref3
}, "All times shown in timezone: ", this.state.calendarTimezone.replace("_", " ")), (0, _react2.jsx)("div", {
css: _ref2
}, (0, _core.jsx)("a", {
}, (0, _react2.jsx)("a", {
href: "https://calendar.google.com/calendar/r?cid=" + this.props.calendarId,
target: "_blank",
css: _ref3
css: _ref
}, "+ Add Calendar"))));

@@ -638,0 +633,0 @@ }

129

multiEvent.js

@@ -10,3 +10,3 @@ "use strict";

var _css2 = _interopRequireDefault(require("@emotion/css"));
var _react = require("@emotion/react");

@@ -25,6 +25,4 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react2 = _interopRequireDefault(require("react"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -36,4 +34,2 @@

var _core = require("@emotion/core");
var _tooltip = _interopRequireDefault(require("./tooltip"));

@@ -43,2 +39,4 @@

var _reactPopper = require("react-popper");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

@@ -48,21 +46,31 @@

var TooltipWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return (0, _core.jsx)(_tooltip["default"], (0, _extends2["default"])({
innerRef: ref
}, props));
});
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref = {
name: "13px5w7-MultiEvent",
styles: "margin-left:8px;border-top-left-radius:0px;border-bottom-left-radius:0px;&:before{content:\"\";position:absolute;left:0;bottom:0;width:0;height:0;border-right:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::before{cursor:pointer;border-right-color:#396DCC;};label:MultiEvent;"
};
var _ref2 = {
var _ref = process.env.NODE_ENV === "production" ? {
name: "bi9hsa",
styles: "margin-right:8px;border-top-right-radius:0px;border-bottom-right-radius:0px;&:after{content:\"\";position:absolute;right:0;bottom:0;width:0;height:0;border-left:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::after{cursor:pointer;border-left-color:#396DCC;}"
} : {
name: "111omtu-MultiEvent",
styles: "margin-right:8px;border-top-right-radius:0px;border-bottom-right-radius:0px;&:after{content:\"\";position:absolute;right:0;bottom:0;width:0;height:0;border-left:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::after{cursor:pointer;border-left-color:#396DCC;};label:MultiEvent;"
styles: "margin-right:8px;border-top-right-radius:0px;border-bottom-right-radius:0px;&:after{content:\"\";position:absolute;right:0;bottom:0;width:0;height:0;border-left:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::after{cursor:pointer;border-left-color:#396DCC;};label:MultiEvent;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref3 = {
name: "1qt7nlq-MultiEvent",
styles: "font-weight:500;;label:MultiEvent;"
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "rxtwpq",
styles: "margin-left:8px;border-top-left-radius:0px;border-bottom-left-radius:0px;&:before{content:\"\";position:absolute;left:0;bottom:0;width:0;height:0;border-right:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::before{cursor:pointer;border-right-color:#396DCC;}"
} : {
name: "13px5w7-MultiEvent",
styles: "margin-left:8px;border-top-left-radius:0px;border-bottom-left-radius:0px;&:before{content:\"\";position:absolute;left:0;bottom:0;width:0;height:0;border-right:8px solid #4786ff;border-top:13px solid transparent;border-bottom:13px solid transparent;}&:hover::before{cursor:pointer;border-right-color:#396DCC;};label:MultiEvent;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref4 = process.env.NODE_ENV === "production" ? {
name: "f3vz0n",
styles: "font-weight:500"
} : {
name: "jc1ljl-MultiEvent",
styles: "font-weight:500;label:MultiEvent;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var MultiEvent = /*#__PURE__*/function (_React$Component) {

@@ -106,39 +114,36 @@ (0, _inherits2["default"])(MultiEvent, _React$Component);

value: function render() {
var leftArrow = _ref;
var rightArrow = _ref2;
return (0, _core.jsx)("div", {
var _this2 = this;
var leftArrow = _ref2;
var rightArrow = _ref;
return (0, _react.jsx)("div", {
className: "event",
tabIndex: "0",
onBlur: this.closeTooltip,
css:
/*#__PURE__*/
/*#__PURE__*/
(0, _core.css)("width:", 'calc(' + this.props.length + '00% + ' + (this.props.length - 1) + 'px)', ";&:focus{outline:none;}position:relative;;label:MultiEvent;;label:MultiEvent;")
}, (0, _core.jsx)("div", {
css: /*#__PURE__*/(0, _css2["default"])([
/*#__PURE__*/
/*#__PURE__*/
(0, _core.css)("width:", 'calc(100% - ' + 8 * (this.props.arrowLeft + this.props.arrowRight) + 'px)', ";border-radius:3px;background:#4786ff;&:hover{background:#396DCC;}", this.props.arrowLeft && leftArrow, " ", this.props.arrowRight && rightArrow, ";label:MultiEvent;;label:MultiEvent;"), this.props.multiEventStyles], ";label:MultiEvent;"),
onClick: this.toggleTooltip
}, (0, _core.jsx)("div", {
className: "event-text",
css: /*#__PURE__*/(0, _css2["default"])({
padding: '3px 0px',
color: 'white',
marginLeft: this.props.arrowLeft ? '2px' : '5px',
marginRight: this.props.arrowRight ? '0px' : '5px',
overflowX: 'hidden',
whiteSpace: 'nowrap',
position: 'relative',
textAlign: 'left',
'&:hover': {
cursor: 'pointer'
}
}, ";label:MultiEvent;")
}, this.state.allDay ? "" : this.state.startTime.format("h:mma "), (0, _core.jsx)("span", {
css: _ref3
}, this.props.name))), (0, _core.jsx)(TooltipWrapper, {
ref: this.props.innerRef,
css: /*#__PURE__*/(0, _react.css)("width:", 'calc(' + this.props.length + '00% + ' + (this.props.length - 1) + 'px)', ";&:focus{outline:none;}position:relative;" + (process.env.NODE_ENV === "production" ? "" : ";label:MultiEvent;"))
}, (0, _react.jsx)(_reactPopper.Manager, null, (0, _react.jsx)(_reactPopper.Reference, null, function (_ref3) {
var ref = _ref3.ref;
return (0, _react.jsx)("div", {
css: [/*#__PURE__*/(0, _react.css)("width:", 'calc(100% - ' + 8 * (_this2.props.arrowLeft + _this2.props.arrowRight) + 'px)', ";border-radius:3px;background:#4786ff;&:hover{background:#396DCC;}", _this2.props.arrowLeft && leftArrow, " ", _this2.props.arrowRight && rightArrow, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:MultiEvent;")), _this2.props.multiEventStyles, process.env.NODE_ENV === "production" ? "" : ";label:MultiEvent;"],
onClick: _this2.toggleTooltip,
ref: ref
}, (0, _react.jsx)("div", {
className: "event-text",
css: /*#__PURE__*/(0, _react.css)({
padding: '3px 0px',
color: 'white',
marginLeft: _this2.props.arrowLeft ? '2px' : '5px',
marginRight: _this2.props.arrowRight ? '0px' : '5px',
overflowX: 'hidden',
whiteSpace: 'nowrap',
position: 'relative',
textAlign: 'left',
'&:hover': {
cursor: 'pointer'
}
}, process.env.NODE_ENV === "production" ? "" : ";label:MultiEvent;")
}, _this2.state.allDay ? "" : _this2.state.startTime.format("h:mma "), (0, _react.jsx)("span", {
css: _ref4
}, _this2.props.name)));
}), (0, _react.jsx)(_tooltip["default"], {
name: this.props.name,

@@ -152,7 +157,7 @@ startTime: _momentTimezone["default"].parseZone(this.props.startTime),

closeTooltip: this.closeTooltip
}));
})));
}
}]);
return MultiEvent;
}(_react["default"].Component);
}(_react2["default"].Component);

@@ -167,12 +172,4 @@ exports["default"] = MultiEvent;

location: _propTypes["default"].string,
tooltipStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:tooltipStyles;;label:tooltipStyles;")]),
multiEventStyles: _propTypes["default"].oneOfType([_propTypes["default"].object,
/*#__PURE__*/
/*#__PURE__*/
_propTypes["default"].instanceOf(_core.css, ";label:multiEventStyles;;label:multiEventStyles;")]),
tooltipStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react.css, process.env.NODE_ENV === "production" ? "" : ";label:tooltipStyles;")]),
multiEventStyles: _propTypes["default"].oneOfType([_propTypes["default"].object, /*#__PURE__*/_propTypes["default"].instanceOf(_react.css, process.env.NODE_ENV === "production" ? "" : ";label:multiEventStyles;")]),
arrowLeft: _propTypes["default"].bool,

@@ -179,0 +176,0 @@ arrowRight: _propTypes["default"].bool

18

package.json
{
"name": "@ericz1803/react-google-calendar",
"version": "3.0.4",
"version": "3.1.0",
"description": "React Google Calendar Component",

@@ -23,8 +23,9 @@ "main": "index.js",

"peerDependencies": {
"react": "^16.13.0",
"react-dom": "^16.13.0",
"@emotion/core": "^10.0.28"
"react": "^16.14.0",
"react-dom": "^16.14.0",
"@emotion/react": "^11.1.1"
},
"dependencies": {
"@babel/runtime": "^7.10.3",
"@popperjs/core": "^2.5.4",
"lodash": "^4.17.15",

@@ -34,2 +35,3 @@ "moment": "^2.26.0",

"prop-types": "^15.7.2",
"react-popper": "^2.2.4",
"rrule": "^2.6.4"

@@ -43,5 +45,5 @@ },

"@babel/preset-react": "^7.10.1",
"@emotion/babel-preset-css-prop": "^10.0.27",
"@emotion/babel-plugin": "^11.0.0",
"@emotion/babel-preset-css-prop": "^10.2.1",
"babel-jest": "^25.5.1",
"babel-plugin-emotion": "^10.0.33",
"babel-plugin-lodash": "^3.3.4",

@@ -51,5 +53,3 @@ "jest": "^25.5.4",

"jest-transform-css": "^2.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1"
"react-test-renderer": "^16.14.0"
},

@@ -56,0 +56,0 @@ "jest": {

8

README.md

@@ -18,4 +18,4 @@ # React Google Calendar

```
1. npm install --save react react-dom @emotion/core
2. npm install --save @ericz1803/google-react-calendar
1. npm install --save react react-dom @emotion/react
2. npm install --save @ericz1803/react-google-calendar
```

@@ -62,3 +62,3 @@

You can change the color of different aspects of the calendar by passing in a `styles` object. Each of the styles in the `styles` object should be an object style (the same as react inline styles) or an emotion `css` string style ([see more here](https://emotion.sh/docs/css-prop)). If you choose to use emotion's `css` string styles, make sure to `import { css } from "@emotion/core"`.
You can change the color of different aspects of the calendar by passing in a `styles` object. Each of the styles in the `styles` object should be an object style (the same as react inline styles) or an emotion `css` string style ([see more here](https://emotion.sh/docs/css-prop)). If you choose to use emotion's `css` string styles, make sure to `import { css } from "@emotion/react"`.

@@ -80,3 +80,3 @@ #### Style Keys

import Calendar from "@ericz1803/react-google-calendar";
import { css } from "@emotion/core";
import { css } from "@emotion/react";

@@ -83,0 +83,0 @@ const API_KEY = "YOUR_API_KEY";

8

svg/fiberManualRecord.js

@@ -16,11 +16,9 @@ "use strict";

var _core = require("@emotion/core");
function SvgComponent(props) {
return (0, _core.jsx)("svg", (0, _extends2["default"])({
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
viewBox: "0 0 24 24"
}, props), (0, _core.jsx)("path", {
}, props), /*#__PURE__*/React.createElement("path", {
d: "M24 24H0V0h24v24z",
fill: "none"
}), (0, _core.jsx)("circle", {
}), /*#__PURE__*/React.createElement("circle", {
cx: 12,

@@ -27,0 +25,0 @@ cy: 12,

8

svg/place.js

@@ -16,13 +16,11 @@ "use strict";

var _core = require("@emotion/core");
function SvgComponent(props) {
return (0, _core.jsx)("svg", (0, _extends2["default"])({
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
viewBox: "0 0 24 24",
width: 18,
height: 18
}, props), (0, _core.jsx)("path", {
}, props), /*#__PURE__*/React.createElement("path", {
d: "M0 0h24v24H0z",
fill: "none"
}), (0, _core.jsx)("path", {
}), /*#__PURE__*/React.createElement("path", {
d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"

@@ -29,0 +27,0 @@ }));

8

svg/subject.js

@@ -16,13 +16,11 @@ "use strict";

var _core = require("@emotion/core");
function SvgComponent(props) {
return (0, _core.jsx)("svg", (0, _extends2["default"])({
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
viewBox: "0 0 24 24",
width: 18,
height: 18
}, props), (0, _core.jsx)("path", {
}, props), /*#__PURE__*/React.createElement("path", {
d: "M0 0h24v24H0z",
fill: "none"
}), (0, _core.jsx)("path", {
}), /*#__PURE__*/React.createElement("path", {
d: "M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"

@@ -29,0 +27,0 @@ }));

204

tooltip.js

@@ -10,4 +10,2 @@ "use strict";

var _css2 = _interopRequireDefault(require("@emotion/css"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

@@ -31,4 +29,6 @@

var _core = require("@emotion/core");
var _react2 = require("@emotion/react");
var _reactPopper = require("react-popper");
var _helper = require("./utils/helper");

@@ -44,29 +44,60 @@

var _ref = {
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref = process.env.NODE_ENV === "production" ? {
name: "p9r3d0",
styles: "position:absolute;right:2px;top:-5px;opacity:0.5;font-size:24px;&:hover{cursor:pointer;opacity:0.9;}"
} : {
name: "17coeau-Tooltip",
styles: "position:absolute;right:2px;top:-5px;opacity:0.5;font-size:24px;&:hover{cursor:pointer;opacity:0.9;};label:Tooltip;"
styles: "position:absolute;right:2px;top:-5px;opacity:0.5;font-size:24px;&:hover{cursor:pointer;opacity:0.9;};label:Tooltip;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = {
name: "l3dvzg-Tooltip",
styles: "padding-right:10px;;label:Tooltip;"
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "qzmnd2",
styles: "padding-right:10px"
} : {
name: "17g6ek8-description",
styles: "padding-right:10px;label:description;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref3 = {
name: "1jnkikl-Tooltip",
styles: "padding-right:10px;display:flex;align-items:center;;label:Tooltip;"
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "1uk7isy",
styles: "padding-right:10px;display:flex;align-items:center"
} : {
name: "15q0fcl-location",
styles: "padding-right:10px;display:flex;align-items:center;label:location;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref4 = {
name: "1a0ws95-Tooltip",
styles: "position:relative;;label:Tooltip;"
var _ref5 = process.env.NODE_ENV === "production" ? {
name: "bjn8wh",
styles: "position:relative"
} : {
name: "xfysr9-Tooltip",
styles: "position:relative;label:Tooltip;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref5 = {
name: "1myfoss-Tooltip",
styles: "margin-top:0px;padding-top:18.675px;;label:Tooltip;"
var _ref6 = process.env.NODE_ENV === "production" ? {
name: "5ar9vx",
styles: "margin-top:0px;padding-top:18.675px"
} : {
name: "1micmwc-Tooltip",
styles: "margin-top:0px;padding-top:18.675px;label:Tooltip;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref6 = {
name: "1yyodgo-Tooltip",
styles: "font-size:13px;;label:Tooltip;"
var _ref7 = process.env.NODE_ENV === "production" ? {
name: "vh5nmu",
styles: "font-size:13px"
} : {
name: "lfpdkk-Tooltip",
styles: "font-size:13px;label:Tooltip;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(Tooltip, _React$PureComponent);
var Tooltip = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Tooltip, _React$Component);

@@ -82,11 +113,5 @@ var _super = _createSuper(Tooltip);

_this.state = {
//tooltip positioning
flipX: false,
flipY: false,
middleX: false,
middleY: false,
timeDisplay: Tooltip.getTimeDisplay(_this.props.startTime, _this.props.endTime, allDay),
eventURL: (0, _helper.getCalendarURL)(_this.props.startTime, _this.props.endTime, _this.props.name, _this.props.description, _this.props.location, allDay)
};
_this.tooltipRef = /*#__PURE__*/_react["default"].createRef();
return _this;

@@ -96,50 +121,16 @@ }

(0, _createClass2["default"])(Tooltip, [{
key: "componentDidMount",
//if tooltip goes outside calendar flip it to keep it inside
value: function componentDidMount() {
if (this.props.innerRef) {
var calendarRect = this.props.innerRef.current.getBoundingClientRect();
var tooltipRect = this.tooltipRef.current.getBoundingClientRect();
this.setState({
flipX: tooltipRect.left < calendarRect.left,
flipY: tooltipRect.top < calendarRect.top
});
}
} //position tooltip in middle of event if it hangs off both sides of calendar
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.props.innerRef) {
var calendarRect = this.props.innerRef.current.getBoundingClientRect();
var tooltipRect = this.tooltipRef.current.getBoundingClientRect();
if (this.state.flipX && tooltipRect.right > calendarRect.right) {
this.setState({
middleX: true,
flipX: false
});
}
if (this.state.flipY && tooltipRect.bottom > calendarRect.bottom) {
this.setState({
middleY: true,
flipY: false
});
}
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var description;
if (this.props.description) {
description = (0, _core.jsx)("div", {
description = (0, _react2.jsx)("div", {
className: "details description"
}, (0, _core.jsx)("div", {
}, (0, _react2.jsx)("div", {
css: _ref2
}, (0, _core.jsx)(_subject["default"], {
}, (0, _react2.jsx)(_subject["default"], {
fill: "currentColor"
})), (0, _core.jsx)("div", {
})), (0, _react2.jsx)("div", {
dangerouslySetInnerHTML: {

@@ -150,3 +141,3 @@ __html: this.props.description

} else {
description = (0, _core.jsx)("div", null);
description = (0, _react2.jsx)("div", null);
}

@@ -157,39 +148,50 @@

if (this.props.location) {
location = (0, _core.jsx)("div", {
location = (0, _react2.jsx)("div", {
className: "details location"
}, (0, _core.jsx)("div", {
}, (0, _react2.jsx)("div", {
css: _ref3
}, (0, _core.jsx)(_place["default"], {
}, (0, _react2.jsx)(_place["default"], {
fill: "currentColor"
})), (0, _core.jsx)("div", null, this.props.location));
})), (0, _react2.jsx)("div", null, this.props.location));
} else {
location = (0, _core.jsx)("div", null);
location = (0, _react2.jsx)("div", null);
}
return (0, _core.jsx)("div", {
className: "tooltip",
ref: this.tooltipRef,
css: /*#__PURE__*/(0, _css2["default"])([
/*#__PURE__*/
/*#__PURE__*/
(0, _core.css)("visibility:", this.props.showTooltip ? "visible" : "hidden", ";width:225px;background:#fff;text-align:left;padding:5px;border-radius:6px;color:#51565d;border:2px solid rgba(81,86,93,0.1);position:absolute;z-index:1;bottom:", this.state.middleX ? !this.state.flipY && "100%" : !this.state.flipY && "0%", ";top:", this.state.middleX ? this.state.flipY && "100%" : this.state.flipY && "0%", ";right:", !this.state.flipX && "calc(100% + 3px)", ";left:", this.state.flipX && "calc(100% + 3px)", ";left:", this.state.middleX && "50%", ";transform:", "translate(" + (this.state.middleX ? "-50%" : "0%") + "," + (this.state.middleY ? "50%" : "0%") + ")", ";;label:Tooltip;;label:Tooltip;"), this.props.tooltipStyles], ";label:Tooltip;")
}, (0, _core.jsx)("div", {
css: _ref4
}, (0, _core.jsx)("div", {
css: _ref,
onClick: this.props.closeTooltip
}, "\xD7"), (0, _core.jsx)("h2", {
className: "tooltip-text",
css: _ref5
}, this.props.name), (0, _core.jsx)("p", {
className: "display-linebreak"
}, this.state.timeDisplay), description, location, (0, _core.jsx)("a", {
href: this.state.eventURL,
target: "_blank",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
},
css: _ref6
}, "Copy to Calendar")));
return (0, _react2.jsx)(_reactPopper.Popper, {
modifiers: [{
name: 'preventOverflow',
options: {
altAxis: true
}
}]
}, function (_ref4) {
var ref = _ref4.ref,
style = _ref4.style,
placement = _ref4.placement,
arrowProps = _ref4.arrowProps;
return (0, _react2.jsx)("div", {
className: "tooltip",
ref: ref,
style: style,
"data-placement": placement,
css: [/*#__PURE__*/(0, _react2.css)("visibility:", _this2.props.showTooltip ? "visible" : "hidden", ";width:225px;background:#fff;text-align:left;padding:5px;border-radius:6px;color:#51565d;border:2px solid rgba(81, 86, 93, 0.1);position:absolute;z-index:1;bottom:", _this2.state.middleX ? !_this2.state.flipY && "100%" : !_this2.state.flipY && "0%", ";top:", _this2.state.middleX ? _this2.state.flipY && "100%" : _this2.state.flipY && "0%", ";right:", !_this2.state.flipX && "calc(100% + 3px)", ";left:", _this2.state.flipX && "calc(100% + 3px)", ";left:", _this2.state.middleX && "50%", ";transform:", "translate(" + (_this2.state.middleX ? "-50%" : "0%") + "," + (_this2.state.middleY ? "50%" : "0%") + ")", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;")), _this2.props.tooltipStyles, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"]
}, (0, _react2.jsx)("div", {
css: _ref5
}, (0, _react2.jsx)("div", {
css: _ref,
onClick: _this2.props.closeTooltip
}, "\xD7"), (0, _react2.jsx)("h2", {
className: "tooltip-text",
css: _ref6
}, _this2.props.name), (0, _react2.jsx)("p", {
className: "display-linebreak"
}, _this2.state.timeDisplay), description, location, (0, _react2.jsx)("a", {
href: _this2.state.eventURL,
target: "_blank",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
},
css: _ref7
}, "Copy to Calendar")));
});
}

@@ -217,3 +219,3 @@ }], [{

return Tooltip;
}(_react["default"].PureComponent);
}(_react["default"].Component);

@@ -220,0 +222,0 @@ exports["default"] = Tooltip;

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc