loon-bulma-react 2023.0.20 → 2023.0.22

package/README.md

@@ -5,6 +5,7 @@
 > - `<CB>`-component gemaakt. Een kale checkbox met een label. Geen wrapper, geen direction, geen form.
 > - `<RB>`-component gemaakt. Een Radio-button met een label. Geen wrapper, geen direction, geen form.
 > - `ColorProp` uitgebreid met `"is-${`_string_`}"`-template literal. Als _Bulma_ nog andere kleuren gebruikt dan de standaard-kleuren, kan je die op die manier gebruiken.
+> - `<Tooltip>`-component gemaakt Deze is nog niet af. Tot nu toe alleen een `bottom`-positie. Wel alle bulma-kleuren. Voeg de te hoveren spullen als `children` toe aan de component om de tooltip te weergeven.
 
 ## [Bulma](https://bulma.io/) &amp; [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 

package/dist/components/Calendar/CalendarItems/CalendarColoredItem.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     /** Het event */
@@ -8,7 +8,7 @@ declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler voor het event */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: string;
+    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event dat de hele dag duurt

package/dist/components/Calendar/CalendarItems/CalendarItem.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarItemProps<T extends BaseEventProps> = {
     desc: (event: T) => JSX.Element;
@@ -8,7 +8,7 @@ declare type CalendarItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: string;
+    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event met een tijdstip en NIET de hele dag duurt

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ColorProp } from '~/loon-react-bulma-types';
+declare type PositionProp = 'bottom';
+export declare class Tooltip extends React.Component<{
+    content: React.ReactNode;
+    color?: ColorProp;
+    children: React.ReactNode;
+}> {
+    static defaultProps: {
+        position: PositionProp;
+        color: ColorProp;
+    };
+    state: {
+        active: boolean;
+    };
+    show: () => void;
+    hide: () => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/components/index.d.ts

@@ -55,3 +55,4 @@ export { Calendar } from './Calendar';
 export type { BaseEventProps, CalendarOptions } from './Calendar/Props';
 export type { MonthViewProps } from './Calendar';
 export type { WeekViewProps } from './Calendar';
+export { Tooltip } from './Tooltip/Tooltip';

package/dist/forms/Checkbox/CB.d.ts

@@ -14,8 +14,6 @@ declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'dir
      * @param checked: is de checkbox checked ?
      */
     onValueChanged?(checked: boolean): void;
-    /** classes voor de omringende `<div>` van de checkbox/label combi */
-    className?: string;
 };
 /**
  * Maak een kale checkbox input met een label, dus ZONDER alle form-functies met controls, fields en directions.
@@ -43,6 +41,6 @@ declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'dir
  * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
  * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
  */
-declare function JustACheckbox({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, className: containerClassName, onValueChanged, onKeyDown, }: CBInputProps): JSX.Element;
+declare function JustACheckbox({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, onKeyDown, }: CBInputProps): JSX.Element;
 export { JustACheckbox as CB };
 export type { CBInputProps };

package/dist/forms/Radio/RB.d.ts

@@ -18,8 +18,6 @@ declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'i
      * @param checked: is de checkbox checked ?
      */
     onValueChanged?(value: T): void;
-    /** classes voor de omringende `<div>` van de checkbox/label combi */
-    className?: string;
     /** ID voor het item. Bij radio-buttons is deze VERPLICHT! */
     id: string;
 };
@@ -48,6 +46,6 @@ declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'i
  * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
  * | setValueFn()      | `function`           |         | (newVal: T) => void. Gebruik om een React-useState-setfunction aan te roepen |
  */
-declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, className: containerClassName, onValueChanged, }: RBInputProps<T>): JSX.Element;
+declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, }: RBInputProps<T>): JSX.Element;
 export { JustARadioButon as RB };
 export type { RBInputProps };

package/dist/index.js

@@ -383,8 +383,8 @@ function Section(_ref) {
   var children = _ref.children,
     classes = _ref.className,
     styles = _ref.styles;
-  var className = 'section ';
-  if (className) className += " " + classes;
+  var className = 'section';
+  if (classes) className += " " + classes;
   return React__default.createElement("section", {
     className: className,
     style: styles
@@ -499,6 +499,18 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -3497,6 +3509,74 @@ var eventKleurBlockStyleBase = {
   transition: 'background-color .2s ease-in-out'
 };
 
+var Tooltip = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Tooltip, _React$Component);
+  function Tooltip() {
+    var _this;
+    _this = _React$Component.apply(this, arguments) || this;
+    _this.state = {
+      active: false
+    };
+    _this.show = function () {
+      return _this.setState({
+        active: true
+      });
+    };
+    _this.hide = function () {
+      return _this.setState({
+        active: false
+      });
+    };
+    return _this;
+  }
+  var _proto = Tooltip.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      content = _this$props.content,
+      children = _this$props.children,
+      color = _this$props.color;
+    var active = this.state.active;
+    var className = "tooltip is-bottom";
+    var arrowClassName = 'tooltip-arrow';
+    if (color === 'p') {
+      className += ' is-primary';
+      arrowClassName += ' is-primary';
+    } else if (color === 'i') {
+      className += ' is-info';
+      arrowClassName += ' is-info';
+    } else if (color === 'l') {
+      className += ' is-link';
+      arrowClassName += ' is-link';
+    } else if (color === 'd') {
+      className += ' is-danger';
+      arrowClassName += ' is-danger';
+    } else if (color === 's') {
+      className += ' is-success';
+      arrowClassName += ' is-success';
+    } else if (color === 'w') {
+      className += ' is-warning';
+      arrowClassName += ' is-warning';
+    } else {
+      className += " " + color;
+      arrowClassName += " " + color;
+    }
+    return React__default.createElement("span", {
+      className: "tooltip-wrapper",
+      onMouseEnter: this.show,
+      onMouseLeave: this.hide
+    }, children, active && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: className
+    }, content), React__default.createElement("div", {
+      className: arrowClassName
+    })));
+  };
+  return Tooltip;
+}(React__default.Component);
+Tooltip.defaultProps = {
+  position: 'bottom',
+  color: 'l'
+};
+
 function CalendarColoredItem(_ref) {
   var event = _ref.event,
     options = _ref.options,
@@ -3521,12 +3601,26 @@ function CalendarColoredItem(_ref) {
     });
   }, [event, isHovered]);
   var ref = React__default.useRef(null);
-  return React__default.createElement("div", {
+  if (tooltip) return React__default.createElement(Tooltip, {
+    content: tooltip,
+    color: "is-light"
+  }, React__default.createElement("div", {
+    ref: ref,
+    onClick: function onClick(e) {
+      return _onClick && _onClick(event, e);
+    },
+    style: eventStyle,
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    }
+  }, React__default.createElement("span", null, desc(event))));else return React__default.createElement("div", {
     ref: ref,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
     },
-    title: tooltip,
     style: eventStyle,
     onMouseEnter: function onMouseEnter() {
       return setHovered(true);
@@ -3565,13 +3659,29 @@ function CalendarItem(_ref) {
     });
   }, [event, isHovered]);
   var ref = React__default.useRef(null);
-  return React__default.createElement("div", {
+  if (tooltip) return React__default.createElement(Tooltip, {
+    color: "is-light",
+    content: tooltip
+  }, React__default.createElement("div", {
+    ref: ref,
+    onClick: function onClick(e) {
+      return _onClick && _onClick(event, e);
+    },
+    style: eventStyle,
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    }
+  }, React__default.createElement("span", {
+    style: eventSpan
+  }), desc(event)));else return React__default.createElement("div", {
     ref: ref,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
     },
     style: eventStyle,
-    title: tooltip,
     onMouseEnter: function onMouseEnter() {
       return setHovered(true);
     },
@@ -4534,7 +4644,7 @@ function CheckBox(props) {
   var className = React__default.useMemo(function () {
     var cn = 'is-checkradio';
     if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
-    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += color;
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += " " + color;
     if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
     if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
     return cn;
@@ -6949,7 +7059,6 @@ function JustACheckbox(_ref) {
     textAlign = _ref.textAlign,
     disabled = _ref.disabled,
     errorMessage = _ref.errorMessage,
-    containerClassName = _ref.className,
     onValueChanged = _ref.onValueChanged,
     onKeyDown = _ref.onKeyDown;
   var handleClick = function handleClick() {
@@ -6958,16 +7067,14 @@ function JustACheckbox(_ref) {
   var className = React__default.useMemo(function () {
     var cn = 'is-checkradio';
     if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
-    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += typeof color === 'function' ? color(checked) : color;
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += " " + (typeof color === 'function' ? color(checked) : color);
     if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
     if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
     return cn;
   }, [textAlign, size, color, styling, checked]);
   var errorMsg = '';
   if (errorMessage) errorMsg = typeof errorMessage === 'string' ? errorMessage : errorMessage(checked);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: containerClassName
-  }, React__default.createElement("input", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
     className: className,
     type: "checkbox",
     name: name,
@@ -6980,7 +7087,7 @@ function JustACheckbox(_ref) {
     onKeyDown: onKeyDown
   }), typeof label === 'string' && React__default.createElement("label", {
     htmlFor: id != null ? id : name
-  }, label != null ? label : name), typeof label !== 'string' && label), errorMessage && React__default.createElement("p", {
+  }, label != null ? label : name), typeof label !== 'string' && label, errorMessage && React__default.createElement("p", {
     className: "help is-danger"
   }, errorMsg));
 }
@@ -6998,7 +7105,6 @@ function JustARadioButon(_ref) {
     textAlign = _ref.textAlign,
     disabled = _ref.disabled,
     errorMessage = _ref.errorMessage,
-    containerClassName = _ref.className,
     onValueChanged = _ref.onValueChanged;
   var handleClick = function handleClick() {
     if (!disabled) onValueChanged && onValueChanged(value);
@@ -7006,16 +7112,14 @@ function JustARadioButon(_ref) {
   var className = React__default.useMemo(function () {
     var cn = 'is-checkradio';
     if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
-    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += typeof color === 'function' ? color(value) : color;
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += " " + (typeof color === 'function' ? color(value) : color);
     if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
     if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
     return cn;
   }, [textAlign, size, color, styling]);
   var errorMsg = '';
   if (errorMessage) errorMsg = typeof errorMessage === 'string' ? errorMessage : errorMessage(value);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: containerClassName
-  }, React__default.createElement("input", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
     className: className,
     type: "radio",
     name: name,
@@ -7025,7 +7129,7 @@ function JustARadioButon(_ref) {
     onChange: handleClick
   }), typeof label === 'string' && React__default.createElement("label", {
     htmlFor: id != null ? id : name
-  }, label != null ? label : name), typeof label !== 'string' && label), errorMessage && React__default.createElement("p", {
+  }, label != null ? label : name), typeof label !== 'string' && label, errorMessage && React__default.createElement("p", {
     className: "help is-danger"
   }, errorMsg));
 }
@@ -7514,6 +7618,7 @@ exports.TimeLine = TimeLine;
 exports.Title = Title;
 exports.TitleWithSubtitle = TitleWithSubtitle;
 exports.ToggleBar = ToggleBar;
+exports.Tooltip = Tooltip;
 exports.calculateTxtColor = calculateTxtColor;
 exports.deserializeJSON = deserializeJSON;
 exports.getHotkeyHandler = getHotkeyHandler;