loon-bulma-react 2023.0.16 → 2023.0.18

package/dist/components/Calendar/DayContainer.d.ts

@@ -12,11 +12,13 @@ declare type DayContainerProps<T extends BaseEventProps> = {
     options?: CalendarOptions<T>;
     /** De datum voor de container */
     date: JSDateTime;
+    /** Behoort deze dag tot de huidige maand ? */
+    isCurrentMonth?: boolean;
 };
 /**
  * Component voor de dag-container in de maand-view
  * @param props
  * @returns
  */
-export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, }: DayContainerProps<T>): JSX.Element;
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, isCurrentMonth, }: DayContainerProps<T>): JSX.Element;
 export {};

package/dist/forms/Numeric/MultiRangeInput.d.ts

@@ -5,6 +5,8 @@ declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons'> & {
     step?: number;
     /** De start-waarde voor de input (optional) */
     value?: [number, number];
+    /** een eenheid voor de waardes van de input (`%`, `kg/m3`, etc) */
+    unit?: string;
     /**
      * Wat te doen als de waarde is veranderd
      * @param newVal: de nieuwe waarde
@@ -28,6 +30,7 @@ declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons'> & {
  * | step              | `number `            | `1    `  | stapgrootte voor verschuiving              |
  * | labelHidden       | `boolean`            | `false`  | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false`  | de input is disabled                       |
+ * | unit              | `string`             | `''`     | Een eenheid voor de waardes uit de range   |
  * | keyboardType      | `search`, `text`,    | `text `  | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`  |          |                                            |
  * |                   | `numeric`, `decimal` |          |                                            |

package/dist/forms/Numeric/RangeInput.d.ts

@@ -3,6 +3,8 @@ import { BaseInputProps } from '../shared';
 declare type RangeInputProps = Omit<BaseInputProps, 'icons'> & {
     /** Stap-grootte voor de input (optional, default = 1) */
     step?: number;
+    /** een getals-unit (`%`, `kg/m3`, etc) om weer te geven op de range-input */
+    unit?: string;
     /** De start-waarde voor de input (optional) */
     value?: number;
     /**
@@ -29,6 +31,7 @@ declare type RangeInputProps = Omit<BaseInputProps, 'icons'> & {
  * | step              | `number `            | `1    ` | stapgrootte voor verschuiving              |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | unit              | `string `            | ''      | een eenheid voor de input                  |
  * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`  |         |                                            |
  * |                   | `numeric`, `decimal` |         |                                            |

package/dist/index.js

@@ -3536,7 +3536,7 @@ function CalendarItem(_ref) {
     setHovered = _React$useState[1];
   var pickTextColor = React__default.useCallback(calculateTxtColor, []);
   var eventStyle = React__default.useMemo(function () {
-    var bgColor = isHovered ? '#f1f1f1' : '#ffffff';
+    var bgColor = isHovered ? '#f1f1f1' : '#ffffff00';
     var txtColor = pickTextColor(bgColor);
     return _extends({}, eventStylesBase, {
       backgroundColor: bgColor,
@@ -3655,13 +3655,18 @@ function DayContainer(_ref) {
     date = _ref.date,
     onDayClick = _ref.onDayClick,
     onEventClick = _ref.onEventClick,
-    events = _ref.events;
+    events = _ref.events,
+    _ref$isCurrentMonth = _ref.isCurrentMonth,
+    isCurrentMonth = _ref$isCurrentMonth === void 0 ? true : _ref$isCurrentMonth;
   var _React$useState = React__default.useState(false),
     isHovered = _React$useState[0],
     setHovered = _React$useState[1];
   var pickTextColor = React__default.useCallback(calculateTxtColor, []);
   var dayContainerStyle = React__default.useMemo(function () {
-    return _extends({}, dayContainerStyleBase);
+    return _extends({}, dayContainerStyleBase, {
+      backgroundColor: isCurrentMonth ? 'transparent' : '#f8f8f8',
+      color: isCurrentMonth ? '#888888' : '#bbbbbb'
+    });
   }, [date, events]);
   var todayHeaderStyle = React__default.useMemo(function () {
     var _options$today, _options$today2;
@@ -3686,7 +3691,8 @@ function DayContainer(_ref) {
     },
     style: _extends({}, dayDateStyleBase, {
       cursor: onDayClick ? 'pointer' : 'default',
-      backgroundColor: isHovered ? '#f4f4f4' : 'transparent'
+      backgroundColor: isHovered ? '#f4f4f4' : 'transparent',
+      color: isCurrentMonth ? '#555555' : '#bbbbbb'
     }),
     onClick: function onClick(e) {
       return onDayClick && onDayClick(date, e);
@@ -3695,7 +3701,7 @@ function DayContainer(_ref) {
     style: date.isToday ? todayHeaderStyle : undefined
   }, date.day), React__default.createElement("span", {
     style: {
-      color: '#aaa',
+      color: isCurrentMonth ? '#777777' : '#bbbbbb',
       fontSize: '0.66em'
     }
   }, " ", date.monthLong)), React__default.createElement("div", null, events.map(function (evt, index) {
@@ -4024,7 +4030,8 @@ function MonthViewDayBlocks(_ref4) {
     onDayClick = _ref4.onDayClick,
     onEventClick = _ref4.onEventClick,
     options = _ref4.options,
-    datesWithEvents = _ref4.datesWithEvents;
+    datesWithEvents = _ref4.datesWithEvents,
+    viewDate = _ref4.viewDate;
   var weekLength = visibleDays.size;
   var counter = 0;
   return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref5) {
@@ -4041,7 +4048,8 @@ function MonthViewDayBlocks(_ref4) {
       events: events,
       onEventClick: onEventClick,
       onDayClick: onDayClick,
-      options: options
+      options: options,
+      isCurrentMonth: date.hasSame(viewDate, 'month')
     }));
   }));
 }
@@ -4912,11 +4920,14 @@ var reducer$4 = function reducer(state, action) {
   }
 };
 function MultiRangeInput(props) {
-  var _props$validation$min, _props$validation, _props$validation$max, _props$validation2, _state$validation3, _state$validation4, _props$direction, _props$id, _state$validation$min2, _state$validation5, _state$validation$max2, _state$validation6, _state$validation7, _state$validation$min3, _state$validation8, _state$validation$max3, _state$validation9, _state$validation10;
+  var _props$validation$min, _props$validation, _props$validation$max, _props$validation2, _state$validation5, _state$validation6, _props$direction, _props$id, _state$validation$min3, _state$validation7, _state$validation$max3, _state$validation8, _state$validation9, _state$validation$min4, _state$validation10, _state$validation$max4, _state$validation11, _state$validation12;
+  React__default.useEffect(function () {
+    console.error('De <MultiRangeInput> werkt niet helemaal zoals het hoort. Gebruik hem voorlopig maar even niet');
+  }, []);
   var _React$useReducer = React__default.useReducer(reducer$4, {
       description: props.label || props.name,
-      valueA: props.value ? props.value[0] : +((_props$validation$min = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.min) != null ? _props$validation$min : 0),
-      valueB: props.value ? props.value[1] : +((_props$validation$max = (_props$validation2 = props.validation) === null || _props$validation2 === void 0 ? void 0 : _props$validation2.max) != null ? _props$validation$max : 100),
+      valueA: props.value ? props.value[0] : +((_props$validation$min = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.min) != null ? _props$validation$min : '0'),
+      valueB: props.value ? props.value[1] : +((_props$validation$max = (_props$validation2 = props.validation) === null || _props$validation2 === void 0 ? void 0 : _props$validation2.max) != null ? _props$validation$max : '100'),
       invalidMsg: '',
       valid: false,
       touched: false,
@@ -4925,18 +4936,20 @@ function MultiRangeInput(props) {
     state = _React$useReducer[0],
     dispatch = _React$useReducer[1];
   var sliderStyle = React__default.useMemo(function () {
-    var _state$validation$min, _state$validation, _state$validation$max, _state$validation2;
+    var _state$validation$min, _state$validation, _state$validation$min2, _state$validation2, _state$validation$max, _state$validation3, _state$validation$max2, _state$validation4;
     return {
       width: '100%',
       marginTop: '1em',
       '--min': (_state$validation$min = (_state$validation = state.validation) === null || _state$validation === void 0 ? void 0 : _state$validation.min) != null ? _state$validation$min : 0,
-      '--max': (_state$validation$max = (_state$validation2 = state.validation) === null || _state$validation2 === void 0 ? void 0 : _state$validation2.max) != null ? _state$validation$max : 100,
+      '--min-text': "\"" + ((_state$validation$min2 = (_state$validation2 = state.validation) === null || _state$validation2 === void 0 ? void 0 : _state$validation2.min) != null ? _state$validation$min2 : 0) + props.unit + "\"",
+      '--max': (_state$validation$max = (_state$validation3 = state.validation) === null || _state$validation3 === void 0 ? void 0 : _state$validation3.max) != null ? _state$validation$max : 100,
+      '--max-text': "\"" + ((_state$validation$max2 = (_state$validation4 = state.validation) === null || _state$validation4 === void 0 ? void 0 : _state$validation4.max) != null ? _state$validation$max2 : 100) + props.unit + "\"",
       '--value-a': state.valueA,
       '--value-b': state.valueB,
-      '--text-value-a': "" + state.valueA,
-      '--text-value-b': "" + state.valueB
+      '--text-value-a': "" + state.valueA + props.unit,
+      '--text-value-b': "" + state.valueB + props.unit
     };
-  }, [state.valueA, state.valueB, (_state$validation3 = state.validation) === null || _state$validation3 === void 0 ? void 0 : _state$validation3.min, (_state$validation4 = state.validation) === null || _state$validation4 === void 0 ? void 0 : _state$validation4.max, props.value]);
+  }, [state.valueA, state.valueB, (_state$validation5 = state.validation) === null || _state$validation5 === void 0 ? void 0 : _state$validation5.min, (_state$validation6 = state.validation) === null || _state$validation6 === void 0 ? void 0 : _state$validation6.max, props.value, props.unit]);
   var onChangeValue = function onChangeValue(input, newVal) {
     if (!props.disabled) {
       var val = parseFloat(newVal);
@@ -4992,11 +5005,11 @@ function MultiRangeInput(props) {
     type: "range",
     name: props.name + '_A',
     id: props.id + '_A',
-    min: (_state$validation$min2 = (_state$validation5 = state.validation) === null || _state$validation5 === void 0 ? void 0 : _state$validation5.min) != null ? _state$validation$min2 : 0,
-    max: (_state$validation$max2 = (_state$validation6 = state.validation) === null || _state$validation6 === void 0 ? void 0 : _state$validation6.max) != null ? _state$validation$max2 : 100,
+    min: (_state$validation$min3 = (_state$validation7 = state.validation) === null || _state$validation7 === void 0 ? void 0 : _state$validation7.min) != null ? _state$validation$min3 : 0,
+    max: (_state$validation$max3 = (_state$validation8 = state.validation) === null || _state$validation8 === void 0 ? void 0 : _state$validation8.max) != null ? _state$validation$max3 : 100,
     value: state.valueA,
     step: props.step,
-    required: (_state$validation7 = state.validation) === null || _state$validation7 === void 0 ? void 0 : _state$validation7.required,
+    required: (_state$validation9 = state.validation) === null || _state$validation9 === void 0 ? void 0 : _state$validation9.required,
     disabled: props.disabled,
     onBlur: function onBlur() {
       return !state.touched && dispatch({
@@ -5009,15 +5022,15 @@ function MultiRangeInput(props) {
     }
   }), React__default.createElement("output", {
     id: props.id + '_out_A'
-  }, state.valueA), React__default.createElement("input", {
+  }, "" + state.valueA + props.unit), React__default.createElement("input", {
     type: "range",
     name: props.name + '_B',
     id: props.id + '_B',
-    min: (_state$validation$min3 = (_state$validation8 = state.validation) === null || _state$validation8 === void 0 ? void 0 : _state$validation8.min) != null ? _state$validation$min3 : 0,
-    max: (_state$validation$max3 = (_state$validation9 = state.validation) === null || _state$validation9 === void 0 ? void 0 : _state$validation9.max) != null ? _state$validation$max3 : 100,
+    min: (_state$validation$min4 = (_state$validation10 = state.validation) === null || _state$validation10 === void 0 ? void 0 : _state$validation10.min) != null ? _state$validation$min4 : 0,
+    max: (_state$validation$max4 = (_state$validation11 = state.validation) === null || _state$validation11 === void 0 ? void 0 : _state$validation11.max) != null ? _state$validation$max4 : 100,
     value: state.valueB,
     step: props.step,
-    required: (_state$validation10 = state.validation) === null || _state$validation10 === void 0 ? void 0 : _state$validation10.required,
+    required: (_state$validation12 = state.validation) === null || _state$validation12 === void 0 ? void 0 : _state$validation12.required,
     disabled: props.disabled,
     onBlur: function onBlur() {
       return !state.touched && dispatch({
@@ -5030,7 +5043,7 @@ function MultiRangeInput(props) {
     }
   }), React__default.createElement("output", {
     id: props.id + '_out_B'
-  }, state.valueB), React__default.createElement("div", {
+  }, "" + state.valueB + props.unit), React__default.createElement("div", {
     className: "range-slider__progress"
   })))));
 }
@@ -5173,7 +5186,7 @@ function reducer$6(state, action) {
   }
 }
 function RangeInput(props) {
-  var _props$label, _props$value, _props$label2, _props$id, _props$direction, _props$id2, _state$validation$min2, _state$validation3, _state$validation$max2, _state$validation4, _state$validation5;
+  var _props$label, _props$value, _props$label2, _props$id, _props$direction, _props$id2, _state$validation$min3, _state$validation5, _state$validation$max3, _state$validation6, _state$validation7;
   var _React$useReducer = React__default.useReducer(reducer$6, {
       description: (_props$label = props.label) != null ? _props$label : props.name,
       value: (_props$value = props.value) != null ? _props$value : 0,
@@ -5185,16 +5198,18 @@ function RangeInput(props) {
     state = _React$useReducer[0],
     dispatch = _React$useReducer[1];
   var sliderStyle = React__default.useMemo(function () {
-    var _state$validation$min, _state$validation, _state$validation$max, _state$validation2;
+    var _state$validation$min, _state$validation, _state$validation$min2, _state$validation2, _state$validation$max, _state$validation3, _state$validation$max2, _state$validation4, _props$unit;
     return {
       width: '100%',
       marginTop: '1em',
       '--min': (_state$validation$min = (_state$validation = state.validation) === null || _state$validation === void 0 ? void 0 : _state$validation.min) != null ? _state$validation$min : 0,
-      '--max': (_state$validation$max = (_state$validation2 = state.validation) === null || _state$validation2 === void 0 ? void 0 : _state$validation2.max) != null ? _state$validation$max : 100,
+      '--min-text': "\"" + ((_state$validation$min2 = (_state$validation2 = state.validation) === null || _state$validation2 === void 0 ? void 0 : _state$validation2.min) != null ? _state$validation$min2 : 0) + props.unit + "\"",
+      '--max': (_state$validation$max = (_state$validation3 = state.validation) === null || _state$validation3 === void 0 ? void 0 : _state$validation3.max) != null ? _state$validation$max : 100,
+      '--max-text': "\"" + ((_state$validation$max2 = (_state$validation4 = state.validation) === null || _state$validation4 === void 0 ? void 0 : _state$validation4.max) != null ? _state$validation$max2 : 100) + props.unit + "\"",
       '--value': state.value || 0,
-      '--text-value': "" + state.value
+      '--text-value': "" + state.value + ((_props$unit = props.unit) != null ? _props$unit : '')
     };
-  }, [state.value, state.validation]);
+  }, [state.value, state.validation, props.unit]);
   var handleChange = function handleChange(val) {
     if (!props.disabled) {
       var v = parseFloat(val);
@@ -5243,12 +5258,12 @@ function RangeInput(props) {
     type: "range",
     name: props.name,
     id: (_props$id2 = props.id) != null ? _props$id2 : props.name,
-    min: (_state$validation$min2 = (_state$validation3 = state.validation) === null || _state$validation3 === void 0 ? void 0 : _state$validation3.min) != null ? _state$validation$min2 : 0,
-    max: (_state$validation$max2 = (_state$validation4 = state.validation) === null || _state$validation4 === void 0 ? void 0 : _state$validation4.max) != null ? _state$validation$max2 : 100,
+    min: (_state$validation$min3 = (_state$validation5 = state.validation) === null || _state$validation5 === void 0 ? void 0 : _state$validation5.min) != null ? _state$validation$min3 : 0,
+    max: (_state$validation$max3 = (_state$validation6 = state.validation) === null || _state$validation6 === void 0 ? void 0 : _state$validation6.max) != null ? _state$validation$max3 : 100,
     value: state.value,
     step: props.step,
     disabled: props.disabled,
-    required: (_state$validation5 = state.validation) === null || _state$validation5 === void 0 ? void 0 : _state$validation5.required,
+    required: (_state$validation7 = state.validation) === null || _state$validation7 === void 0 ? void 0 : _state$validation7.required,
     onBlur: function onBlur() {
       return !state.touched && dispatch({
         type: 'TOUCH',
@@ -5259,7 +5274,7 @@ function RangeInput(props) {
       return handleChange(e.target.value);
     },
     onKeyDown: props.onKeyDown
-  }), React__default.createElement("output", null, state.value), React__default.createElement("div", {
+  }), React__default.createElement("output", null, state.value, props.unit), React__default.createElement("div", {
     className: "range-slider__progress"
   })))));
 }