loon-bulma-react 2022.2.1 → 2022.2.2

package/README.md

@@ -467,7 +467,7 @@ De Calendar Component toont events in een grid-view. Er zijn 2 verschillende soo
 - Events met een start-tijd
 - Events zonder starttijd of met allday = true
 
-Events hebben het onderstaande type nodig. Daarvan zijn `id`, `title`, `startDateTime` de 3 verplichte properties, de rest is optioneel. De `evtColor` en de `txtColor` hebben de default waarden resp `#ee8000` en `#ffffff`. Voor deze waarden kunnen alleen hex-waarden worden gebruikt.
+Events hebben het onderstaande type nodig. Daarvan zijn `id`, `title`, `startDateTime` de 3 verplichte properties, de rest is optioneel. De `evtColor` en de `txtColor` hebben de default waarden resp `#ee8000` en `#ffffff`. Voor deze waarden kunnen hex-waarden of de Bulma-kleuren 'p', 's', 'i', 'l', 'w', 'd' worden gebruikt.
 
 ```ts
 export type BaseEventProps = {

package/dist/index.js

@@ -4132,9 +4132,45 @@ function AlldayEvent(props) {
       isHovered = _useState[0],
       setHovered = _useState[1];
 
+  var evtColor = typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor;
+  var divClass = '';
+
+  switch (evtColor) {
+    case 'p':
+      divClass = isHovered ? 'has-background-primary-dark' : 'has-background-primary';
+      break;
+
+    case 'i':
+      divClass = isHovered ? 'has-background-info-dark' : 'has-background-info';
+      break;
+
+    case 'l':
+      divClass = isHovered ? 'has-background-link-dark' : 'has-background-link';
+      break;
+
+    case 'd':
+      divClass = isHovered ? 'has-background-danger-dark' : 'has-background-danger';
+      break;
+
+    case 'w':
+      divClass = isHovered ? 'has-background-warning-dark' : 'has-background-warning';
+      break;
+
+    case 's':
+      divClass = isHovered ? 'has-background-success-dark' : 'has-background-success';
+      break;
+
+    default:
+      divClass = '';
+      break;
+  }
+
   var eventStyle = React__default.useMemo(function () {
-    var bgColor = (event.evtColor ? typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor : typeof (options === null || options === void 0 ? void 0 : options.evtColor) == 'function' ? options.evtColor(event) : options === null || options === void 0 ? void 0 : options.evtColor) || ' #ee8000';
-    if (isHovered && options !== null && options !== void 0 && options.evtHoverColor) bgColor = typeof options.evtHoverColor == 'function' ? options.evtHoverColor(event) : options.evtHoverColor;else bgColor += isHovered ? 'ff' : 'dd';
+    var bgColor = '';
+    if (typeof event.evtColor == 'string' && ['p', 'l', 'i', 's', 'd', 'w'].includes(event.evtColor)) bgColor = 'transparent';else {
+      bgColor = (event.evtColor ? typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor : typeof (options === null || options === void 0 ? void 0 : options.evtColor) == 'function' ? options.evtColor(event) : options === null || options === void 0 ? void 0 : options.evtColor) || ' #ee8000';
+      if (isHovered && options !== null && options !== void 0 && options.evtHoverColor) bgColor = typeof options.evtHoverColor == 'function' ? options.evtHoverColor(event) : options.evtHoverColor;else bgColor += isHovered ? 'ff' : 'dd';
+    }
     var txtColor = (event.txtColor ? typeof event.txtColor == 'function' ? event.txtColor() : event.txtColor : typeof (options === null || options === void 0 ? void 0 : options.txtColor) == 'function' ? options.txtColor(event) : options === null || options === void 0 ? void 0 : options.txtColor) || '#ffffff';
     if (isHovered && options !== null && options !== void 0 && options.txtHoverColor) txtColor = typeof options.txtHoverColor == 'function' ? options.txtHoverColor(event) : options.txtHoverColor;
     return _extends({}, baseEventStyles, {
@@ -4146,6 +4182,7 @@ function AlldayEvent(props) {
   }, [props.event, isHovered]);
   var tooltip = createTooltip(event);
   return React__default.createElement("div", {
+    className: divClass,
     title: tooltip,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
@@ -4180,8 +4217,11 @@ function TimedEvent(props) {
     });
   }, [isHovered]);
   var eventSpan = React__default.useMemo(function () {
-    var evtColor = event.evtColor ? typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor : (typeof (options === null || options === void 0 ? void 0 : options.evtColor) == 'function' ? options.evtColor(event) : options === null || options === void 0 ? void 0 : options.evtColor) || ' #ee8000';
-    if (isHovered && options !== null && options !== void 0 && options.evtHoverColor) evtColor = typeof options.evtHoverColor == 'function' ? options.evtHoverColor(event) : options.evtHoverColor;else evtColor += isHovered ? 'ff' : 'dd';
+    var evtColor = '';
+    if (typeof event.evtColor == 'string' && ['p', 'l', 'i', 's', 'd', 'w'].includes(event.evtColor)) evtColor = 'transparent';else {
+      evtColor = event.evtColor ? typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor : (typeof (options === null || options === void 0 ? void 0 : options.evtColor) == 'function' ? options.evtColor(event) : options === null || options === void 0 ? void 0 : options.evtColor) || ' #ee8000';
+      if (isHovered && options !== null && options !== void 0 && options.evtHoverColor) evtColor = typeof options.evtHoverColor == 'function' ? options.evtHoverColor(event) : options.evtHoverColor;else evtColor += isHovered ? 'ff' : 'dd';
+    }
     return {
       width: '0.9em',
       height: '0.9em',
@@ -4192,6 +4232,39 @@ function TimedEvent(props) {
       transition: 'background-color .2s ease-in-out'
     };
   }, [props.event, isHovered]);
+  var evtColor = typeof event.evtColor == 'function' ? event.evtColor() : event.evtColor;
+  var divClass = '';
+
+  switch (evtColor) {
+    case 'p':
+      divClass = isHovered ? 'has-background-primary-dark' : 'has-background-primary';
+      break;
+
+    case 'i':
+      divClass = isHovered ? 'has-background-info-dark' : 'has-background-info';
+      break;
+
+    case 'l':
+      divClass = isHovered ? 'has-background-link-dark' : 'has-background-link';
+      break;
+
+    case 'd':
+      divClass = isHovered ? 'has-background-danger-dark' : 'has-background-danger';
+      break;
+
+    case 'w':
+      divClass = isHovered ? 'has-background-warning-dark' : 'has-background-warning';
+      break;
+
+    case 's':
+      divClass = isHovered ? 'has-background-success-dark' : 'has-background-success';
+      break;
+
+    default:
+      divClass = '';
+      break;
+  }
+
   var timeStr = formatDate(event.startDateTime, 'HH:mm');
   var tooltip = createTooltip(event);
   return React__default.createElement("div", {
@@ -4207,6 +4280,7 @@ function TimedEvent(props) {
       return setHovered(false);
     }
   }, React__default.createElement("span", {
+    className: divClass,
     style: eventSpan
   }), React__default.createElement("b", null, timeStr), React__default.createElement("span", null, " ", typeof event.title == 'string' ? event.title : event.title()));
 }