@dvrd/dvr-controls 1.0.1 → 1.0.4

package/index.ts

@@ -30,7 +30,6 @@ import InputControllerV2 from './src/js/input/v2/inputController_v2';
 import WithEvents from './src/js/events/withEvents';
 import AppNavigator from "./src/js/navigator/navigator";
 import DVRHead from './src/js/head/DVRHead';
-import AnalyticsRouter from './src/js/analytics/analyticsRouter';
 import TopButton from './src/js/topButton/topButton';
 import DVRCarouselController from './src/js/carousel/DVRCarouselController';
 import DVRSlider from './src/js/slider/DVRSlider';
@@ -76,7 +75,6 @@ export {
     WithEvents,
     AppNavigator,
     DVRHead,
-    AnalyticsRouter,
     TopButton,
     DVRCarouselController as DVRCarousel,
     DVRSlider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@types/js-cookie": "^2.2.6",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash": "^4.14.181",
     "@types/node": "^14.14.34",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.0",
     "@types/react-color": "^3.0.6",
     "@types/dompurify": "^2.2.3",
@@ -30,12 +30,12 @@
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-color": "^2.19.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-rnd": "^10.3.5",
-    "typescript": "^4.2.3",
+    "typescript": "^4.6.3",
     "uuid": "^8.3.2",
     "dompurify": "^2.3.3"
   }

package/src/js/button/button.tsx

@@ -4,7 +4,7 @@
 
 import './style/button.scss';
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import {convertColor, editColor, ThemeShape} from "../../..";
 import {isNotNull, isNull} from "../util/controlUtil";
@@ -29,7 +29,7 @@ interface Props {
     tabIndex?: number;
 }
 
-export class Button extends React.Component<Props> {
+export class Button extends React.Component<PropsWithChildren<Props>> {
     getContainerClass = (): string => {
         const {disabled, withRipple, padding, containerClass} = this.props,
             classes = ['buttonController'];

package/src/js/button/buttonController.tsx

@@ -34,6 +34,7 @@ interface State {
 }
 
 export default class ButtonController extends React.Component<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     static defaultProps = {

package/src/js/button/outlinedButton.tsx

@@ -4,7 +4,7 @@
 
 import './style/outlinedButton.scss';
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import {colorIsWhite, convertColor, editColor} from "../util/colorUtil";
 import {isNotNull, isNull} from "../util/controlUtil";
@@ -29,7 +29,7 @@ interface ButtonProps {
     tabIndex?: number;
 }
 
-export class OutlinedButton extends React.Component<ButtonProps, {}> {
+export class OutlinedButton extends React.Component<PropsWithChildren<ButtonProps>> {
     getContainerClass = (): string => {
         const {containerClass, disabled, padding} = this.props, classes: string[] = ['outlinedButtonContainer'];
         if (disabled) classes.push('disabled');

package/src/js/button/simpleButton.tsx

@@ -4,7 +4,7 @@
 
 import './style/simpleButton.scss';
 
-import React, {CSSProperties, PureComponent} from 'react';
+import React, {CSSProperties, PureComponent, ReactNode} from 'react';
 import {ControlContext} from "../util/controlContext";
 import {colorIsWhite, convertColor, editColor} from "../util/colorUtil";
 import {ControlPadding, ElementPosition, OrnamentShape} from "../util/interfaces";
@@ -29,9 +29,11 @@ interface Props {
     withRipple: boolean;
     primary: boolean;
     tabIndex?: number;
+    children?: ReactNode | ReactNode[] | OrnamentShape | OrnamentShape[];
 }
 
 export default class SimpleButton extends PureComponent<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     getBaseColor = (trueBase: boolean = false): string => {

package/src/js/checkbox/checkbox.tsx

@@ -36,6 +36,7 @@ interface CheckboxProps {
 }
 
 export class Checkbox extends React.Component<CheckboxProps> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     getContainerClass = (): string => {

package/src/js/dialog/dialog.tsx

@@ -40,6 +40,7 @@ interface DataShape {
 }
 
 export default class Dialog extends React.Component<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
     static defaultProps = {
         className: '',

package/src/js/dialog/inlineDialog.tsx

@@ -25,8 +25,9 @@ interface DialogProps {
 }
 
 export default class InlineDialog extends React.Component<DialogProps> {
-    // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
+
     static defaultProps = {
         title: 'Bericht van Klaverjassen',
         actions: null,

package/src/js/events/withEvents.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {addCustomEventListener, removeCustomEventListener} from '../util/eventUtil';
 import {CustomAppEvent} from '../util/interfaces';
 import {generateComponentId} from "../util/componentUtil";
@@ -12,7 +12,7 @@ interface Props {
     componentName?: string;
 }
 
-export default class WithEvents extends React.PureComponent<Props> {
+export default class WithEvents extends React.PureComponent<PropsWithChildren<Props>> {
     private readonly componentName: string;
 
     constructor(props: Props) {

package/src/js/header/DVRHeader.tsx

@@ -62,7 +62,9 @@ enum Phase {HEADER = 'header', MENU = 'menu', CALCULATING = 'calculating'}
 const RESIZE_TIMEOUT = Math.ceil(1000 / 120); // 30 fps
 
 export default class DVRHeader extends PureComponent<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
+
     static defaultProps = {
         forcedMenu: false,
         containerClass: '',

package/src/js/info/info.tsx

@@ -31,6 +31,7 @@ interface State {
 }
 
 export default class Info extends PureComponent<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     private messageContainer: HTMLDivElement;

package/src/js/input/date/dateField.tsx

@@ -57,6 +57,7 @@ interface State {
 export enum PickerKey {DAY = 'day', MONTH = 'month', YEAR = 'year'}
 
 export default class DateField extends PureComponent<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     constructor(props: Props) {

package/src/js/input/date/datePicker/datePicker.tsx

@@ -27,6 +27,7 @@ interface Props {
 }
 
 export default class DatePicker extends PureComponent<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     onClickReset = (type: 'year' | 'month') => () => {

package/src/js/input/date/timePicker/timePicker.tsx

@@ -21,6 +21,7 @@ interface Props {
 const SCROLL_TIMEOUT = 120;
 
 export default class TimePicker extends PureComponent<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     private hourTimeout: number | null = null;

package/src/js/input/simple/v2/simpleInputV2.tsx

@@ -4,18 +4,19 @@
 
 import '../style/simpleInput.scss';
 
-import React from 'react';
-import {CSSProperties, PureComponent} from 'react';
+import React, {CSSProperties, PureComponent} from 'react';
 import classNames from "classnames";
 import {ControlContext} from "../../../util/controlContext";
 import {colorIsWhite, convertColor, editColor} from "../../../util/colorUtil";
-import {OrnamentShape, ElementPosition} from "../../../util/interfaces";
+import {ElementPosition, OrnamentShape} from "../../../util/interfaces";
 import AwesomeIcon from '../../../icon/awesomeIcon';
 import {stopPropagation} from "../../../util/controlUtil";
 import {DVRInputProps} from "../../v2/inputController_v2";
 
 export default class SimpleInput extends PureComponent<DVRInputProps> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
+
     private input: HTMLInputElement | HTMLTextAreaElement | null = null;
 
     private onFocus = (evt: React.FocusEvent) => {

package/src/js/input/v2/inputController_v2.tsx

@@ -3,14 +3,14 @@
  */
 import React, {
     ChangeEventHandler, CSSProperties, EventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler,
-    MouseEventHandler, PureComponent, TextareaHTMLAttributes
+    MouseEventHandler, PureComponent, ReactNode, TextareaHTMLAttributes
 } from 'react';
 import {assert, enterPressed} from "../../util/controlUtil";
 import SimpleInput from "../simple/v2/simpleInputV2";
 import {ControlVariant, ErrorType, OrnamentShape} from "../../util/interfaces";
 import { generateComponentId } from '../../../..';
 
-type HTMLProps = Omit<InputHTMLAttributes<any>, 'onChange' | 'step'>;
+type HTMLProps = Omit<InputHTMLAttributes<any>, 'onChange' | 'step' | 'children'>;
 
 export interface DVRInputControllerProps extends HTMLProps {
     // Events
@@ -44,6 +44,7 @@ export interface DVRInputControllerProps extends HTMLProps {
     value?: string | number;
     step?: number;
     unControlled?: boolean;
+    children?: ReactNode | ReactNode[] | OrnamentShape | OrnamentShape[];
 }
 
 export interface DVRInputProps extends Omit<DVRInputControllerProps, 'value' | 'onChange'> {

package/src/js/label/label.tsx

@@ -37,7 +37,9 @@ interface State {
  * text until the number of lines is reached. Remaining text will be shown in the title.
  */
 export default class Label extends React.Component<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
+
     static defaultProps = {
         labelType: LabelType.LABEL,
         className: '',

package/src/js/loader/loaderController.tsx

@@ -23,6 +23,7 @@ interface LoaderProps {
 
 export default class LoaderController extends React.Component<LoaderProps> {
     // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     static defaultProps = {

package/src/js/navigator/navigator.tsx

@@ -3,30 +3,49 @@
  */
 
 import React from 'react';
-import {RouteComponentProps, withRouter} from "react-router";
+// import {RouteComponentProps, withRouter} from "react-router";
+import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import {debug} from '../util/miscUtil';
 
-let navigationData: any = null;
+// let navigationData: any = null;
 
-class AppNavigator extends React.Component<RouteComponentProps> {
-    static setNavigationData = (data: any) => {
-        navigationData = data;
-    };
+export default function AppNavigator() {
+    const location = useLocation();
+    const navigate = useNavigate();
 
-    static getNavigationData = (): any => navigationData;
-
-    navigate = (evt: any) => {
-        const {location, history} = this.props;
-        const navigator = evt.target,
-            url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
+    function onNavigate(evt: React.MouseEvent) {
+        const navigator: HTMLButtonElement = evt.target as HTMLButtonElement;
+        const url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
         navigator.dataset.strip = '0';
         debug(`Navigating to ${url}`);
-        history.push(url);
-    };
-
-    render = () => {
-        return <button id='appNavigator' style={{display: 'none'}} data-url='' data-strip='0' onClick={this.navigate}/>
+        navigate(url);
     }
+
+    return (
+        <button id='appNavigator' style={{display: 'none'}} data-url='' data-strip='0' onClick={onNavigate}/>
+    )
 }
 
-export default withRouter(AppNavigator);
+// class AppNavigator extends React.Component<RouteComponentProps> {
+//     static setNavigationData = (data: any) => {
+//         navigationData = data;
+//     };
+//
+//     static getNavigationData = (): any => navigationData;
+//
+//     navigate = (evt: any) => {
+//         const {location, history} = this.props;
+//         const navigator = evt.target,
+//             url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
+//         navigator.dataset.strip = '0';
+//         debug(`Navigating to ${url}`);
+//         history.push(url);
+//     };
+//
+//     render = () => {
+//         return <button id='appNavigator' style={{display: 'none'}} data-url='' data-strip='0' onClick={this.navigate}/>
+//     }
+// }
+//
+// export default withRouter(AppNavigator);

package/src/js/pdf/element/pdfElement.tsx

@@ -3,7 +3,7 @@
  */
 import './style/pdfElement.scss';
 
-import React, {MouseEventHandler, PureComponent} from 'react';
+import React, {MouseEventHandler, PropsWithChildren, PureComponent} from 'react';
 import {DraggableData, HandleClasses, HandleStyles, ResizeEnable, Rnd} from 'react-rnd';
 import {
     CustomAppEvent, ElementPosition, IndexedObject, PDFElementDimensions, PDFElementParams, PDFElementPersist, PdfFont,
@@ -145,7 +145,7 @@ interface DraggableState {
     height: number | string;
 }
 
-export class PDFDraggable extends PureComponent<DraggableProps, DraggableState> {
+export class PDFDraggable extends PureComponent<PropsWithChildren<DraggableProps>, DraggableState> {
     static defaultProps = {
         resizeable: true,
         resizeHoriz: true,

package/src/js/popup/withBackground.tsx

@@ -4,7 +4,7 @@
 
 import './style/withBackground.scss';
 
-import React, {CSSProperties} from 'react';
+import React, {CSSProperties, PropsWithChildren} from 'react';
 import classNames from 'classnames';
 import {escapePressed, hasHover} from "../util/controlUtil";
 
@@ -21,7 +21,7 @@ interface Props {
     zIndex?: number;
 }
 
-export default class WithBackground extends React.Component<Props> {
+export default class WithBackground extends React.Component<PropsWithChildren<Props>> {
     static defaultProps = {
         backgroundColor: 'rgba(0,0,0,.2)',
         transparent: false,

package/src/js/select/select.tsx

@@ -62,7 +62,9 @@ interface Props {
 }
 
 export class Select extends React.Component<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
+
     getBaseColor = (allowWhite: boolean = true): string => {
         const {baseColor} = this.props, {contrastColor} = this.context;
         let color = convertColor(baseColor);

package/src/js/select/selectController.tsx

@@ -83,7 +83,7 @@ interface State {
 
 // noinspection JSUnusedGlobalSymbols
 export default class SelectController extends React.Component<SelectProps, State> {
-    // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     static defaultProps = SelectDefaultProps;

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -7,7 +7,7 @@ import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useS
 import {useLocation} from 'react-router';
 import {SidebarItem, SideMenuMode} from "../util/interfaces";
 import classNames from 'classnames';
-import {AwesomeIcon, generateComponentId} from "../../../index";
+import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
 import {ControlContext} from "../util/controlContext";
 import {defer} from 'lodash';
 
@@ -67,7 +67,14 @@ export default function SidebarMenu(props: Props) {
     function _onClickItem(item: SidebarItem) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
-            setActiveItem(item.id);
+            const {route} = item;
+            let _route: string | null = null;
+            if (route) {
+                if (Array.isArray(route) && route.length) _route = route[0];
+                else _route = route as string;
+            }
+            if (_route && !isAbsoluteLink(_route))
+                setActiveItem(item.id);
             onClickItem(item)(evt);
         }
     }

package/src/js/slider/DVRSlider.tsx

@@ -36,7 +36,7 @@ export default class DVRSlider extends PureComponent<Props> {
         labelClassName: '',
         labelPosition: ElementPosition.RIGHT,
     };
-
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     constructor(props: Props) {

package/src/js/snackbar/snackbar.tsx

@@ -22,6 +22,7 @@ interface ViewProps {
 
 export class Snackbar extends React.Component<ViewProps> {
     // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
     static contextType = ControlContext;
 
     getBackgroundColor = (): string => {

package/src/js/snackbar/snackbarController.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {Snackbar} from "./snackbar";
 import {CustomAppEvent, DialogConfig, Snack} from "../util/interfaces";
 import WithEvents from '../events/withEvents';
-import { delay } from 'lodash';
+import {delay} from 'lodash';
 
 interface Props {
     containerClass: string;
@@ -94,9 +94,11 @@ export default class SnackbarController extends React.Component<Props, State> {
 
     render = () => {
         const {snack, active} = this.state, {containerClass, textClass, textColor, backgroundColor} = this.props;
-        return <WithEvents events={this.getEvents()}>
-            <Snackbar snack={snack} containerClass={containerClass} textClass={textClass} active={active}
-                      onClick={this.onClick} textColor={textColor} backgroundColor={backgroundColor}/>
-        </WithEvents>
+        return (
+            <WithEvents events={this.getEvents()}>
+                <Snackbar snack={snack} containerClass={containerClass} textClass={textClass} active={active}
+                          onClick={this.onClick} textColor={textColor} backgroundColor={backgroundColor}/>
+            </WithEvents>
+        )
     };
 }

package/src/js/switch/switchController.tsx

@@ -33,7 +33,7 @@ interface SwitchState {
 
 // noinspection JSUnusedGlobalSymbols
 export default class SwitchController extends React.Component<SwitchProps, SwitchState> {
-    // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>
     static contextType = ControlContext;
 
     static defaultProps = {

package/src/js/topButton/topButton.tsx

@@ -27,6 +27,7 @@ interface State {
 }
 
 export default class TopButton extends PureComponent<TopButtonProps, State> {
+    declare context: React.ContextType<typeof ControlContext>
     static contextType = ControlContext;
     static defaultProps = {
         disabled: false,

package/src/js/util/miscUtil.ts

@@ -163,4 +163,8 @@ export function webpSupported(): boolean {
     } catch {
         return false;
     }
+}
+
+export function isAbsoluteLink(link: string): boolean {
+    return /^(https?|www).*/.test(link);
 }

package/src/js/analytics/analyticsRouter.tsx

@@ -1,31 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React from 'react';
-import {RouteComponentProps, withRouter} from 'react-router-dom';
-import {Location} from 'history';
-
-class AnalyticsRouter extends React.Component<RouteComponentProps> {
-    private lastPathname: string;
-    componentDidMount = () => {
-        this.sendPageView(this.props.location);
-        this.props.history.listen(this.sendPageView);
-    };
-
-    sendPageView = (location: Location) => {
-        if (!window.gtag) {
-            console.debug('gtag function not found.');
-            return;
-        }
-        if (this.lastPathname === location.pathname) return;
-        this.lastPathname = location.pathname;
-
-        window.gtag('set', 'page', location.pathname)
-        window.gtag('send', 'pageview');
-    };
-
-    render = () => this.props.children;
-}
-
-export default withRouter(AnalyticsRouter);