@dvrd/dvr-controls 1.0.68 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/select/dvrdMultiSelect.tsx

@@ -159,7 +159,7 @@ export default function DvrdMultiSelect(props: Props) {
         const label = selectableItemLabel ?? item.label;
         if (['number', 'string'].includes(typeof label)) return (
             <label key={index} className={classNames('dvrd-select-item', isSelected && 'selected', itemClassName)}
-                   onClick={onClickItem(value)}>{selected &&
+                   onClick={onClickItem(value)}>{isSelected &&
                 <AwesomeIcon name='check' className='check-icon'/>} {label}</label>
         );
         const labelElement: ReactElement = label as ReactElement;

package/src/js/snackbar/snackbar.tsx

@@ -4,69 +4,56 @@
 
 import './style/snackbar.scss';
 
-import React from 'react';
+import React, {CSSProperties, MouseEventHandler, ReactElement, useContext, useMemo} from 'react';
 import classNames from 'classnames';
 import {convertColor} from "../util/colorUtil";
 import {ControlContext} from "../util/controlContext";
 import {Snack} from "../util/interfaces";
 
-interface ViewProps {
-    onClick: any;
+interface Props {
+    onClick: MouseEventHandler;
     snack: Snack | null;
-    containerClass: string;
-    textClass: string;
+    active: boolean;
+    containerClass?: string;
+    textClass?: string;
     backgroundColor?: string;
     textColor?: string;
-    active: boolean;
 }
 
-export class Snackbar extends React.Component<ViewProps> {
-    // noinspection JSUnusedGlobalSymbols
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getBackgroundColor = (): string => {
-        const {backgroundColor, snack} = this.props;
-        if (snack?.config?.backgroundColor) return convertColor(snack.config.backgroundColor);
-        if (backgroundColor) return convertColor(backgroundColor);
-        // noinspection JSDeprecatedSymbols
-        return convertColor(this.context.baseColor);
-    };
-
-    getTextColor = (): string => {
-        const {textColor, snack} = this.props;
-        if (snack?.config?.textColor) return convertColor(snack.config.textColor);
-        if (textColor !== undefined && textColor !== null) return convertColor(textColor);
-        // noinspection JSDeprecatedSymbols
-        return convertColor(this.context.contrastColor);
-    };
-
-    getBackgroundStyle = (): { backgroundColor: string } => ({backgroundColor: this.getBackgroundColor()});
-
-    getTextStyle = (): { color: string } => ({color: this.getTextColor()});
-
-    renderText = () => {
-        const {snack, textClass} = this.props;
+export default function Snackbar(props: Props) {
+    const context = useContext(ControlContext);
+    const {textClass, containerClass, active, onClick, snack} = props;
+    const backgroundStyle: CSSProperties = useMemo(() => {
+        let backgroundColor: string = context.baseColor;
+        if (snack?.config?.backgroundColor) backgroundColor = snack.config.backgroundColor;
+        else if (props.backgroundColor) backgroundColor = props.backgroundColor;
+        return {backgroundColor: convertColor(backgroundColor)};
+    }, [props.backgroundColor, props.snack, context.baseColor])
+    const textStyle: CSSProperties = useMemo(() => {
+        let color: string = context.contrastColor;
+        if (snack?.config?.textColor) color = snack.config.textColor;
+        else if (props.textColor) color = props.textColor;
+        return {color: convertColor(color)};
+    }, [props.textColor, context.contrastColor, props.snack]);
+
+    function renderText() {
         if (!snack) return null;
         const {text} = snack;
-        let element: React.ReactNode = null;
-        if (typeof text === 'string') element =
-            <label className={classNames('snackBarText', textClass)} style={this.getTextStyle()}>{text}</label>;
+        let element: ReactElement | null = null;
+        if (typeof text === 'string')
+            element = <label className={classNames('snackbar-text', textClass)} style={textStyle}>{text}</label>;
         else if (text) {
-            const className = Object.assign({}, text.props?.className, classNames('snackBarText', textClass)),
-                style = Object.assign({}, text.props?.style, this.getTextStyle());
+            const className = classNames(text.props?.className, 'snackbar-text', textClass);
+            const style = {...text.props?.style, ...textStyle};
             element = React.cloneElement(text, {className, style});
         }
         return element;
     }
 
-    render = () => {
-        const {containerClass, active, onClick} = this.props;
-        return (
-            <div className={classNames('snackbar', active && 'active', containerClass)}
-                 style={this.getBackgroundStyle()} onClick={onClick}>
-                {this.renderText()}
-            </div>
-        );
-    };
+    return (
+        <div className={classNames('snackbar', active && 'active', containerClass)} style={backgroundStyle}
+             onClick={onClick}>
+            {renderText()}
+        </div>
+    );
 }

package/src/js/snackbar/snackbarController.tsx

@@ -2,103 +2,85 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React from 'react';
-import {Snackbar} from "./snackbar";
-import {CustomAppEvent, DialogConfig, Snack} from "../util/interfaces";
-import WithEvents from '../events/withEvents';
+import React, {useEffect, useRef, useState} from 'react';
+import Snackbar from "./snackbar";
+import {Snack} from "../util/interfaces";
 import delay from 'lodash.delay';
+import defer from 'lodash.defer';
+import {useEvent} from "../util/componentUtil";
 
 interface Props {
-    containerClass: string;
-    textClass: string;
-    activeTime: number;
+    activeTime?: number;
     backgroundColor?: string;
     textColor?: string;
     maxSnacks?: number;
     noDuplicates?: boolean;
+    containerClass?: string;
+    textClass?: string;
 }
 
-interface State {
-    active: boolean;
-    snack: Snack | null;
-    config: DialogConfig;
-}
-
-export default class SnackbarController extends React.Component<Props, State> {
-    static defaultProps = {
-        activeTime: 3000,
-        containerClass: '',
-        textClass: '',
-    };
-
-    state: State = {
-        active: false,
-        snack: null,
-        config: {}
-    };
+export default function SnackbarController(props: Props) {
+    const {containerClass, textClass, textColor, backgroundColor, noDuplicates, maxSnacks, activeTime} = props;
+    const [active, setActive] = useState(false);
+    const [snack, setSnack] = useState<Snack | null>(null);
+    const snackQueue = useRef<Array<Snack>>([]);
+    const timeoutID = useRef<number | null>(null);
+    useEvent('onShowSnackbar', onAddSnack);
 
-    snackQueue: Snack[] = [];
-    timeout: number | null = null;
-
-    onAddSnack = (snack: Snack) => {
-        const {maxSnacks, noDuplicates} = this.props;
-        if (noDuplicates && this.isDuplicate(snack)) return;
-        this.snackQueue.push(snack);
+    function onAddSnack(snack: Snack) {
+        if (noDuplicates && isDuplicate(snack)) return;
+        snackQueue.current.push(snack);
         if (maxSnacks !== undefined)
-            while (this.snackQueue.length > maxSnacks - 1)
-                this.snackQueue.shift();
-        if (!this.state.active)
-            this.activate();
-    };
+            while (snackQueue.current.length > maxSnacks - 1)
+                snackQueue.current.shift();
+        if (!active) activate();
+    }
 
-    onClick = () => {
-        if (this.timeout !== null)
-            window.clearTimeout(this.timeout);
-        this.deactivate();
-    };
+    function onClick() {
+        clearTimeout();
+        deactivate();
+    }
 
-    isDuplicate = (snack: Snack): boolean => {
-        return this.state.snack?.text === snack.text || this.snackQueue.pop()?.text === snack.text;
+    function isDuplicate(_snack: Snack): boolean {
+        return snack?.text === _snack.text || snackQueue.current.pop()?.text === _snack.text;
     }
 
-    deactivate = () => {
-        this.setState({active: false}, () => {
-            delay(() => {
-                // Clear snack after 200ms (css transition)
-                this.setState({snack: null}, () => {
-                    if (this.snackQueue.length > 0)
-                        this.timeout = window.setTimeout(this.activate, 500);
-                })
-            }, 200);
-        })
-    };
+    function activate() {
+        const snack: Snack | undefined = snackQueue.current.pop();
+        if (!snack) return;
+        const _activeTime = snack.config?.duration ?? activeTime ?? 3000;
+        setSnack(snack);
+        defer(() => setActive(true));
+        timeoutID.current = window.setTimeout(deactivate, _activeTime);
+    }
 
-    activate = () => {
-        const snack: Snack | undefined = this.snackQueue.pop();
-        if (snack) {
-            this.setState({snack}, () => {
-                this.setState({active: true});
-                this.timeout = window.setTimeout(this.deactivate, this.props.activeTime);
+    function deactivate() {
+        setActive(false);
+        // Clear snack after 200ms (css transition)
+        delay(() => {
+            setSnack(null);
+            defer(() => {
+                if (snackQueue.current.length)
+                    // Open next
+                    timeoutID.current = window.setTimeout(activate, 500);
             })
-        }
-    };
+        }, 200);
+    }
 
-    componentWillUnmount = () => {
-        if (this.timeout !== null)
-            window.clearTimeout(this.timeout);
-    };
+    function clearTimeout() {
+        if (timeoutID.current)
+            window.clearTimeout(timeoutID.current);
+        timeoutID.current = null;
+    }
 
-    getEvents = (): CustomAppEvent[] => [
-        {eventName: 'onShowSnackbar', handler: this.onAddSnack}
-    ];
+    useEffect(() => {
+        return function () {
+            clearTimeout();
+        }
+    }, []);
 
-    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 (
+        <Snackbar snack={snack} containerClass={containerClass} textClass={textClass} active={active} onClick={onClick}
+                  textColor={textColor} backgroundColor={backgroundColor}/>
+    );
 }

package/src/js/snackbar/style/snackbar.scss

@@ -29,7 +29,7 @@
     transform: translateY(0) translateX(-50%);
   }
 
-  .snackBarText {
+  .snackbar-text {
     text-align: center;
     user-select: none;
   }

package/src/js/util/eventUtil.ts

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {DialogActions} from "../dialog/dialogController";
-import {DialogConfig} from "./interfaces";
+import {SnackConfig} from "./interfaces";
 
 interface ListenerShape {
     component: string,
@@ -64,6 +64,6 @@ export const showDialog = (message: string | React.ReactElement, title: string =
     dispatchCustomEvent('onOpenDialog', {message, title, actions, transparent, persistent});
 };
 
-export const showSnackbar = (text: string | React.ReactElement, config?: DialogConfig) => {
+export const showSnackbar = (text: string | React.ReactElement, config?: SnackConfig) => {
     dispatchCustomEvent('onShowSnackbar', {text, config});
 };

package/src/js/util/interfaces.ts

@@ -79,9 +79,10 @@ export interface GroupedSelectItem {
     style?: CSSProperties;
 }
 
-export interface DialogConfig {
+export interface SnackConfig {
     backgroundColor?: string;
     textColor?: string;
+    duration?: number;  // Duration in milliseconds
 }
 
 export interface PDFOptions {
@@ -247,6 +248,6 @@ export type RenderFile = {
 }
 export type Snack = {
     text: string | React.ReactElement;
-    config?: DialogConfig;
+    config?: SnackConfig;
 }
 export type SelectValueType = string | number;