@dvrd/dvr-controls 1.0.44 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -30,6 +30,11 @@
     "react-router-dom": "6.15.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-brands-svg-icons": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@types/dompurify": "2.4.0",
     "@types/js-cookie": "3.0.3",
     "@types/lodash.defer": "^4.1.7",
@@ -42,12 +47,6 @@
     "@types/react-color": "2.13.5",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "9.0.0",
-    "typescript": "4.9.5",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
-    "@fortawesome/react-fontawesome": "0.2.0",
     "classnames": "2.3.2",
     "dompurify": "3.0.0",
     "js-cookie": "3.0.1",
@@ -59,6 +58,7 @@
     "moment": "2.29.4",
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
+    "typescript": "4.9.5",
     "uuid": "9.0.0"
   }
 }

package/src/js/checkbox/checkbox.tsx

@@ -4,145 +4,133 @@
 
 import './style/checkbox.scss';
 
-import React from 'react';
-import {MouseEventHandler} from 'react';
+import React, {CSSProperties, MouseEventHandler, useContext, useMemo} from 'react';
 import classNames from 'classnames';
 import AwesomeIcon from '../icon/awesomeIcon';
-import {findDarkestColor, convertColor, editColor} from "../util/colorUtil";
-import {isNotNull, isNull} from "../util/controlUtil";
+import {convertColor, editColor, findDarkestColor} from "../util/colorUtil";
 import {ControlContext} from "../util/controlContext";
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import {IconName} from '@fortawesome/fontawesome-svg-core';
+import {ErrorType} from "../../../index";
 
-interface CheckboxProps {
+interface Props {
     onCheck: MouseEventHandler;
-    onMouseEnter: any,
-    onMouseLeave: any,
-    checked: boolean,
-    disabled: boolean,
-    isHovered: boolean,
-    label: string,
-    labelPosition: 'left' | 'right',
-    containerClass: string,
-    labelClass: string,
-    checkboxClass: string,
-    checkClass: string,
-    errorClass: string,
-    id: string,
-    error: string | null,
-    checkIcon: IconName | React.ReactNode
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    checked: boolean;
+    disabled: boolean;
+    isHovered: boolean;
+    label?: string;
+    labelPosition: 'left' | 'right';
+    className?: string;
+    labelClassName?: string;
+    checkboxClassName?: string;
+    checkClassName?: string;
+    errorClassName?: string;
+    id: string;
+    error: ErrorType;
+    checkIcon: IconName | React.ReactNode;
     baseColor?: string;
     contrastColor?: string;
     title?: string;
     useDarkestColor: boolean;
+    asRadio?: boolean;
 }
 
-export class Checkbox extends React.Component<CheckboxProps> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getContainerClass = (): string => {
-        const {disabled, containerClass, error, label} = this.props, classes = ['checkboxContainer'];
-
+export default function DvrdCheckbox(props: Props) {
+    const context = useContext(ControlContext);
+    const {
+        disabled, error, label, useDarkestColor, isHovered, id, onCheck, onMouseEnter, onMouseLeave, title,
+        labelPosition, checkIcon, checked, asRadio
+    } = props;
+    const className = useMemo(() => {
+        const classes: Array<string> = ['checkboxContainer'];
         if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        if (!label.length) classes.push('no-label');
-
-        classes.push(containerClass);
-        return classNames(classes);
-    };
-
-    getLabelClass = (position: 'left' | 'right'): string => {
-        const {disabled, labelClass, error} = this.props, classes = ['checkboxLabel', position];
+        if (!!error) classes.push('error');
+        if (!label?.length) classes.push('no-label');
+        return classNames(classes, props.className);
+    }, [disabled, error, label, props.className]);
+    const labelClassName = useMemo(() => {
+        const classes: Array<string> = ['checkboxLabel'];
         if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        classes.push(labelClass);
-        return classNames(classes);
-    };
-
-    getCheckboxClass = (): string => {
-        const {disabled, checkboxClass} = this.props, classes = ['checkbox'];
+        if (!!error) classes.push('error');
+        return classNames(classes, props.labelClassName);
+    }, [disabled, error, props.labelClassName]);
+    const checkboxClassName = useMemo(() => {
+        const classes: Array<string> = ['checkbox'];
         if (disabled) classes.push('disabled');
-        classes.push(checkboxClass);
-        return classNames(classes);
-    };
-
-    getCheckClass = (): string => {
-        const {disabled, checkClass, checked} = this.props, classes = ['checkbox-check'];
+        if (asRadio) classes.push('as-radio');
+        return classNames(classes, props.checkboxClassName);
+    }, [disabled, props.checkClassName]);
+    const checkClassName = useMemo(() => {
+        const classes = ['checkbox-check'];
         if (disabled) classes.push('disabled');
         if (checked) classes.push('checked');
-        classes.push(checkClass);
-        return classNames(classes);
-    };
-
-    getCheckboxStyle = (): object => {
-        const {isHovered, error, disabled, useDarkestColor} = this.props;
+        return classNames(classes, props.checkClassName);
+    }, [disabled, checked, props.checkClassName]);
+    const [baseColor, contrastColor] = useMemo(() => {
+        const base = convertColor(props.baseColor || context.baseColor)
+        const contrast = convertColor(props.baseColor || context.baseColor);
+        return [base, contrast];
+    }, [props.baseColor, context.baseColor, props.contrastColor, context.contrastColor]);
+    const checkboxStyle: CSSProperties = useMemo(() => {
         let color: string;
-        if (isNotNull(error)) color = 'red';
+        if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
         else {
             if (useDarkestColor)
-                color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-            else color = this.getBaseColor();
+                color = findDarkestColor(baseColor, contrastColor);
+            else color = baseColor;
             if (isHovered) color = editColor(-.2, color);
         }
         return {borderColor: convertColor(color)};
-    };
-
-    getCheckStyle = (): object => {
-        const {error, disabled, useDarkestColor} = this.props;
-        let color: string;
-        if (isNotNull(error)) color = 'red';
+    }, [error, useDarkestColor, isHovered, disabled, baseColor, contrastColor]);
+    const checkStyle: CSSProperties = useMemo(() => {
+        let color: string = baseColor;
+        if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
-        else if (useDarkestColor) color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-        else color = this.getBaseColor();
+        else if (useDarkestColor) color = findDarkestColor(baseColor, contrastColor);
         return {color: convertColor(color)};
-    };
-
-    getBaseColor = (): string => convertColor(this.props.baseColor || this.context.baseColor);
-    getContrastColor = (): string => convertColor(this.props.contrastColor || this.context.contrastColor);
-
-    getMainColor = () => this.props.useDarkestColor ? findDarkestColor(this.getBaseColor(), this.getContrastColor()) : this.getBaseColor();
-
-    renderLabel = (position: 'left' | 'right'): React.ReactNode => {
-        const {label, labelPosition} = this.props;
-        if (isNull(label) || labelPosition !== position) return null;
-        return <label className={this.getLabelClass(position)}>{label}</label>
-    };
+    }, [error, disabled, useDarkestColor, baseColor, contrastColor]);
+    const mainColor = useMemo(() => {
+        return useDarkestColor ? findDarkestColor(baseColor, contrastColor) : baseColor;
+    }, [useDarkestColor, props.baseColor, context.baseColor, props.contrastColor, context.contrastColor]);
+
+    function renderLabel(position: 'left' | 'right'): React.ReactNode {
+        if (!label || labelPosition !== position) return null;
+        return <label className={classNames(labelClassName, position)}>{label}</label>
+    }
 
-    renderCheckbox = (): React.ReactNode => {
+    function renderCheckbox() {
         return (
-            <div className={this.getCheckboxClass()} style={this.getCheckboxStyle()}>
-                <div className='ripple' style={{backgroundColor: this.getMainColor()}}/>
-                {this.renderCheck()}
+            <div className={checkboxClassName} style={checkboxStyle}>
+                <div className='ripple' style={{backgroundColor: mainColor}}/>
+                {renderCheck()}
             </div>
         )
-    };
+    }
 
-    renderCheck = () => {
-        const {checkIcon} = this.props;
+    function renderCheck() {
         if (React.isValidElement(checkIcon)) return React.cloneElement((checkIcon as React.ReactElement), {
-            className: classNames(checkIcon.props.className, this.getCheckClass()),
-            style: {...checkIcon.props.style, ...this.getCheckStyle()}
+            className: classNames(checkIcon.props.className, checkClassName),
+            style: {...checkIcon.props.style, ...checkStyle}
         });
-        const checkName: IconName = typeof checkIcon === 'string' ? checkIcon as IconName : 'check';
-        return <AwesomeIcon name={checkName} className={this.getCheckClass()} style={this.getCheckStyle()}/>;
-    };
-
-    renderError = (): React.ReactNode => {
-        const {error, errorClass} = this.props;
-        return <label className={classNames('error', errorClass)}>{error}</label>;
-    };
+        let checkName: IconName = 'check';
+        if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
+        else if (asRadio) checkName = 'circle';
+        return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
+    }
 
-    render = () => {
-        const {id, onCheck, onMouseLeave, onMouseEnter, title} = this.props;
-        return (
-            <div className={this.getContainerClass()} id={id} onClick={onCheck} onMouseEnter={onMouseEnter}
-                 title={title} onMouseLeave={onMouseLeave}>
-                {this.renderLabel('left')}
-                {this.renderCheckbox()}
-                {this.renderLabel('right')}
-                {this.renderError()}
-            </div>
-        )
+    function renderError() {
+        return <label className={classNames('error', props.errorClassName)}>{error}</label>;
     }
+
+    return (
+        <div className={className} id={id} onClick={onCheck} onMouseEnter={onMouseEnter}
+             title={title} onMouseLeave={onMouseLeave}>
+            {renderLabel('left')}
+            {renderCheckbox()}
+            {renderLabel('right')}
+            {renderError()}
+        </div>
+    )
 }

package/src/js/checkbox/checkboxController.tsx

@@ -2,136 +2,214 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from 'react';
-import {Checkbox} from "./checkbox";
-import {ControlContext} from "../util/controlContext";
+import React, {MouseEventHandler, useEffect, useRef, useState} from 'react';
+import DvrdCheckbox from "./checkbox";
 import {generateComponentId} from '../../..';
 
 interface Props {
     onCheck: Function;
-    onMouseEnter?: Function;
-    onMouseLeave?: Function;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
     checked: boolean;
-    disabled: boolean;
-    label: string;
-    labelPosition: 'left' | 'right';
-    containerClass: string;
-    labelClass: string;
-    checkboxClass: string;
-    checkClass: string;
-    errorClass: string;
+    disabled?: boolean;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+    className?: string;
+    labelClassName?: string;
+    checkboxClassName?: string;
+    checkClassName?: string;
+    errorClassName?: string;
     baseColor?: string;
     contrastColor?: string;
-    error: string | null;
+    error?: string | null;
     id?: string;
-    checkIcon: React.ReactNode;
-    unControlled: boolean;
+    checkIcon?: React.ReactNode;
+    unControlled?: boolean;
     title?: string;
-    useDarkestColor: boolean;
+    useDarkestColor?: boolean;
     ref?: any;
+    asRadio?: boolean;
 }
 
-interface CheckboxState {
-    isHovered: boolean;
-    internalValue: boolean;
-}
-
-export default class CheckboxController extends React.Component<Props, CheckboxState> {
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        disabled: false,
-        label: '',
-        labelPosition: 'right',
-        containerClass: '',
-        labelClass: '',
-        checkboxClass: '',
-        checkClass: '',
-        errorClass: '',
-        checkIcon: null,
-        error: null,
-        unControlled: false,
-        useDarkestColor: true,
-    };
-
-    private getContainer = (): HTMLElement | null => {
-        return document.getElementById(this.id);
-    };
-
-    private getRipple = (): HTMLElement | null => {
-        const container = this.getContainer();
-        if (container === null) return null;
-        return container.querySelector('div.ripple');
-    };
-
-    private id: string = generateComponentId(this.props.id);
+export default function CheckboxController(props: Props) {
+    const {
+        disabled, unControlled, checked, onCheck, label, labelPosition, className, labelClassName, checkboxClassName,
+        checkClassName, error, checkIcon, errorClassName, title, useDarkestColor, baseColor, contrastColor, asRadio
+    } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const [internalValue, setInternalValue] = useState(props.checked);
+    const id = useRef(generateComponentId(props.id));
 
-    state = {isHovered: false, internalValue: this.props.checked};
-
-    onCheck = (evt: React.MouseEvent<Element, Event>) => {
-        const {checked, onCheck, disabled, unControlled} = this.props;
+    function _onCheck(evt: React.MouseEvent<Element, Event>) {
         if (disabled) return;
         if (unControlled) {
             evt.stopPropagation();
             evt.persist();
-            this.setState({internalValue: !this.state.internalValue}, () => {
-                onCheck(this.state.internalValue, evt);
-            });
+            const nextInternal = !internalValue;
+            setInternalValue(nextInternal);
+            onCheck(nextInternal, evt);
         } else onCheck(!checked, evt);
-        this.addRipple();
-    };
-
-    onMouseEnter = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: true});
-    };
+    }
 
-    onMouseLeave = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: false});
-    };
+    function onMouseEnter(evt: React.MouseEvent) {
+        if (disabled) return;
+        setIsHovered(true);
+        props.onMouseEnter?.(evt);
+    }
 
-    addRipple = () => {
-        const container = this.getContainer();
-        if (container !== null) {
-            const ripple = this.getRipple();
-            if (ripple !== null) {
-                if (container.classList.contains('rippling'))
-                    container.classList.remove('rippling');
-                ripple.addEventListener('transitionend', this.removeRipple);
-                container.classList.add('rippling');
-            }
-        }
-    };
+    function onMouseLeave(evt: React.MouseEvent) {
+        setIsHovered(false);
+        props.onMouseLeave?.(evt);
+    }
 
-    removeRipple = () => {
-        const ripple = this.getRipple();
-        const container = this.getContainer();
-        if (ripple !== null && container !== null) {
-            ripple.removeEventListener('transitionend', this.removeRipple);
-            container.classList.remove('rippling');
-        }
-    };
+    function addRipple() {
+        const container = getContainer();
+        if (!container) return;
+        const ripple = getRipple();
+        if (!ripple) return;
+        container.classList.remove('rippling');
+        ripple.addEventListener('transitionend', removeRipple);
+        container.classList.add('rippling');
+    }
 
-    componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
-        if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
-        else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
-    };
+    function removeRipple() {
+        const container = getContainer();
+        if (!container) return;
+        const ripple = getRipple();
+        if (!ripple) return;
+        ripple.removeEventListener('transitionend', removeRipple);
+        container.classList.remove('rippling');
+    }
 
-    componentWillUnmount = () => {
-        this.removeRipple();
-    };
+    function getContainer() {
+        return document.getElementById(id.current);
+    }
 
-    render = () => {
-        const {
-            checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
-            error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
-        } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
-        return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                         checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
-                         labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
-                         checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
-                         error={error} errorClass={errorClass} title={title} baseColor={baseColor}
-                         contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
+    function getRipple() {
+        return getContainer()?.querySelector('div.ripple') ?? null;
     }
-}
+
+    useEffect(() => {
+        if (unControlled && internalValue) addRipple();
+        else if (!unControlled && checked) addRipple();
+        return function () {
+            removeRipple();
+        }
+    }, [internalValue, checked]);
+
+    const isChecked = unControlled ? internalValue : checked
+    return (
+        <DvrdCheckbox onCheck={_onCheck} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} checked={isChecked}
+                      disabled={disabled ?? false} isHovered={isHovered} label={label}
+                      labelPosition={labelPosition ?? 'right'} className={className} labelClassName={labelClassName}
+                      checkboxClassName={checkboxClassName} checkClassName={checkClassName} id={id.current}
+                      checkIcon={checkIcon} error={error ?? null} errorClassName={errorClassName} title={title}
+                      baseColor={baseColor} contrastColor={contrastColor} useDarkestColor={useDarkestColor ?? true}
+                      asRadio={asRadio}/>
+    )
+}
+
+// interface CheckboxState {
+//     isHovered: boolean;
+//     internalValue: boolean;
+// }
+//
+// class _CheckboxController extends React.Component<Props, CheckboxState> {
+//     static contextType = ControlContext;
+//
+//     static defaultProps = {
+//         disabled: false,
+//         label: '',
+//         labelPosition: 'right',
+//         containerClass: '',
+//         labelClass: '',
+//         checkboxClass: '',
+//         checkClass: '',
+//         errorClass: '',
+//         checkIcon: null,
+//         error: null,
+//         unControlled: false,
+//         useDarkestColor: true,
+//     };
+//
+//     private getContainer = (): HTMLElement | null => {
+//         return document.getElementById(this.id);
+//     };
+//
+//     private getRipple = (): HTMLElement | null => {
+//         const container = this.getContainer();
+//         if (container === null) return null;
+//         return container.querySelector('div.ripple');
+//     };
+//
+//     private id: string = generateComponentId(this.props.id);
+//
+//     state = {isHovered: false, internalValue: this.props.checked};
+//
+//     onCheck = (evt: React.MouseEvent<Element, Event>) => {
+//         const {checked, onCheck, disabled, unControlled} = this.props;
+//         if (disabled) return;
+//         if (unControlled) {
+//             evt.stopPropagation();
+//             evt.persist();
+//             this.setState({internalValue: !this.state.internalValue}, () => {
+//                 onCheck(this.state.internalValue, evt);
+//             });
+//         } else onCheck(!checked, evt);
+//         this.addRipple();
+//     };
+//
+//     onMouseEnter = () => {
+//         if (this.props.disabled) return;
+//         this.setState({isHovered: true});
+//     };
+//
+//     onMouseLeave = () => {
+//         if (this.props.disabled) return;
+//         this.setState({isHovered: false});
+//     };
+//
+//     addRipple = () => {
+//         const container = this.getContainer();
+//         if (container !== null) {
+//             const ripple = this.getRipple();
+//             if (ripple !== null) {
+//                 if (container.classList.contains('rippling'))
+//                     container.classList.remove('rippling');
+//                 ripple.addEventListener('transitionend', this.removeRipple);
+//                 container.classList.add('rippling');
+//             }
+//         }
+//     };
+//
+//     removeRipple = () => {
+//         const ripple = this.getRipple();
+//         const container = this.getContainer();
+//         if (ripple !== null && container !== null) {
+//             ripple.removeEventListener('transitionend', this.removeRipple);
+//             container.classList.remove('rippling');
+//         }
+//     };
+//
+//     componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
+//         if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
+//         else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
+//     };
+//
+//     componentWillUnmount = () => {
+//         this.removeRipple();
+//     };
+//
+//     render = () => {
+//         const {
+//             checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
+//             error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
+//         } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
+//         return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+//                          checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
+//                          labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
+//                          checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
+//                          error={error} errorClass={errorClass} title={title} baseColor={baseColor}
+//                          contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
+//     }
+// }

package/src/js/checkbox/style/checkbox.scss

@@ -9,7 +9,6 @@
   grid-template-columns: 22px auto;
   grid-column-gap: .5rem;
   align-items: center;
-  //padding: .2rem;
   cursor: pointer;
   position: relative;
   margin-bottom: 0;
@@ -63,6 +62,15 @@
       visibility: hidden;
       pointer-events: none;
     }
+
+    &.as-radio {
+      border-radius: 50%;
+
+      .checkbox-check {
+        @include centerXY;
+        font-size: 10px;
+      }
+    }
   }
 
   .error {