@dvrd/dvr-controls 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -17,6 +17,9 @@
     "1": "not dead",
     "2": "ie >= 11"
   },
+  "peerDependencies": {
+    "react-router-dom": "6.8.1"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.3.0",
     "@fortawesome/free-brands-svg-icons": "6.3.0",
@@ -42,7 +45,6 @@
     "react-color": "2.19.3",
     "react-dom": "18.2.0",
     "react-rnd": "10.4.1",
-    "react-router-dom": "6.8.1",
     "typescript": "4.9.5",
     "uuid": "9.0.0"
   }

package/src/js/date/dvrdDatePicker.tsx

@@ -52,7 +52,7 @@ export default function DvrdDatePicker(props: Props) {
             <label className='field-label'>{label}</label>
             <div className='value-container' onClick={onClickContainer}>
                 <label className={classNames('value', !value && 'placeholder')}>{value?.format(format) ?? placeholder ??
-                ''}</label>
+                    ''}</label>
                 <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
             </div>
             <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
@@ -104,7 +104,7 @@ class Picker extends PureComponent<PickerProps> {
 
     onSelectDay = (day: number, month?: number, year?: number) => () => {
         const {onChange, value} = this.props, pickerValue = this.getPickerValue();
-        if (day !== pickerValue.date() || value === null) {
+        if (day || value === null) {
             pickerValue.date(day);
             if (month !== undefined) pickerValue.month(month);
             if (year !== undefined) pickerValue.year(year);

package/src/js/date/style/dvrdDatePicker.scss

@@ -225,6 +225,7 @@
 
         .day-label {
           font-size: 14px;
+          user-select: none;
         }
 
         &.no-select, &.hide, {

package/src/js/util/componentUtil.tsx

@@ -2,10 +2,11 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import {debug} from "./miscUtil";
 import {getScreenHeight, getScreenWidth} from "./responsiveUtil";
 import {generateUUID} from "./controlUtil";
+import {addCustomEventListener, removeCustomEventListener} from "./eventUtil";
 
 export const generateComponentId = (id?: string | null, lettersOnly: boolean = true): string => {
     if (id !== null && id !== undefined) return id;
@@ -56,4 +57,17 @@ export const getElementTop = (element: string | HTMLElement | null): number => {
         return box.top + scrollTop;
     }
     return 0;
-};
+};
+
+export function useEvent(eventName: string, handler: Function, ...deps: any): string {
+    const id = useRef<string>(generateComponentId());
+
+    useEffect(() => {
+        addCustomEventListener(id.current, eventName, handler);
+        return function () {
+            removeCustomEventListener(id.current, eventName);
+        }
+    }, [...deps])
+
+    return id.current;
+}

package/src/js/util/eventUtil.ts

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {DialogActions} from "../dialog/dialogController";
-import {DialogConfig, Snack} from "./interfaces";
+import {DialogConfig} from "./interfaces";
 
 interface ListenerShape {
     component: string,
@@ -14,6 +14,10 @@ interface ListenerShape {
 
 const listeners: ListenerShape[] = [];
 
+export function getCurrentListeners(): Array<ListenerShape> {
+    return listeners;
+}
+
 export const addCustomEventListener = (componentName: string, eventName: string, eventHandler: Function): boolean => {
     if (listenerExists(componentName, eventName)) return false;
     listeners.push({component: componentName, eventName, eventHandler});