@dvrd/dvr-controls 1.0.63 → 1.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@dvrd/idate": "^1.8.4",
-    "@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/fontawesome-svg-core": "6.5.2",
+    "@fortawesome/free-brands-svg-icons": "6.5.2",
+    "@fortawesome/free-regular-svg-icons": "6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@types/dompurify": "2.4.0",
     "@types/js-cookie": "3.0.3",

package/src/js/checkbox/checkbox.tsx

@@ -84,12 +84,12 @@ export default function DvrdCheckbox(props: Props) {
         }
         return {borderColor: convertColor(color)};
     }, [error, useDarkestColor, isHovered, disabled, baseColor, contrastColor]);
-    const checkStyle: CSSProperties = useMemo(() => {
+    const [checkStyle, partialCheckStyle]: [CSSProperties, CSSProperties] = useMemo(() => {
         let color: string = baseColor;
         if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
         else if (useDarkestColor) color = findDarkestColor(baseColor, contrastColor);
-        return {color: convertColor(color)};
+        return [{color: convertColor(color)}, {backgroundColor: convertColor(color)}];
     }, [error, disabled, useDarkestColor, baseColor, contrastColor]);
     const mainColor = useMemo(() => {
         return useDarkestColor ? findDarkestColor(baseColor, contrastColor) : baseColor;
@@ -114,11 +114,15 @@ export default function DvrdCheckbox(props: Props) {
             className: classNames(checkIcon.props.className, checkClassName),
             style: {...checkIcon.props.style, ...checkStyle}
         });
+        else if (checked === 'partial') return (
+            <div className={classNames(checkClassName, 'partial-icon')} style={partialCheckStyle}/>
+        );
         let checkName: IconName = 'check';
-        if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
+        let additionalClassName: string | null = null;
+        if (typeof checkIcon === 'string') checkName = checkIcon as IconName;
         else if (asRadio) checkName = 'circle';
-        else if (checked === 'partial') checkName = 'minus';
-        return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
+        return <AwesomeIcon name={checkName} className={classNames(checkClassName, additionalClassName)}
+                            style={checkStyle}/>;
     }
 
     function renderError() {

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

@@ -47,6 +47,13 @@
       transition: opacity .1s ease-in-out, visibility .1s ease-in-out;
       user-select: none;
 
+      &.partial-icon {
+        top: 50%;
+        width: 12px;
+        height: 3px;
+        border-radius: 4px;
+      }
+
       &.checked {
         visibility: visible;
         opacity: 1;

package/src/js/loader/loader.tsx

@@ -4,76 +4,62 @@
 
 import './style/loader.scss';
 
-import React, {CSSProperties} from 'react';
+import React, {CSSProperties, useMemo} from 'react';
 import classNames from 'classnames';
 import {ThemeShape} from '../util/controlContext';
 import {isNull} from "../util/controlUtil";
 import {colorIsWhite, convertColor} from "../util/colorUtil";
 
-interface LoaderProps {
+interface Props {
     label?: string,
     size?: string,
     thickness?: string,
     baseColor: string,
     trackColor: string,
-    containerClass: string,
-    loaderClass: string,
-    labelClass: string,
+    className?: string,
+    loaderClassName?: string,
+    labelClassName?: string,
     contextStyle: ThemeShape,
-    disableBackground: boolean,
-    loaderStyle: CSSProperties;
+    disableBackground?: boolean,
+    loaderStyle?: CSSProperties;
     position: 'absolute' | 'fixed' | 'relative';
 }
 
-export class Loader extends React.Component<LoaderProps> {
-    getContainerClass = (): string => {
-        const {containerClass, disableBackground} = this.props, classes = ['loaderContainer'];
-        if (disableBackground) classes.push('noBack');
-        classes.push(containerClass);
+export default function Loader(props: Props) {
+    const {
+        loaderClassName, labelClassName, loaderStyle, label, className, contextStyle, disableBackground, size,
+        thickness, trackColor, baseColor, position
+    } = props;
+    const _className = useMemo(() => {
+        const classes: Array<string> = ['loader-container'];
+        if (disableBackground) classes.push('no-back');
+        if (className) classes.push(className);
         return classNames(classes);
-    };
-
-    getLoaderClass = (): string => {
-        const {loaderClass} = this.props, classes = ['loader'];
-        classes.push(loaderClass);
-        return classNames(classes);
-    };
-
-    getLoaderStyle = (): object => {
-        const {baseColor, trackColor, contextStyle} = this.props;
+    }, [className, disableBackground]);
+    const _loaderStyle = useMemo(() => {
         let color = isNull(baseColor) ? 'color-orange-1' :
-            colorIsWhite(baseColor) ? contextStyle.contrastColor : baseColor,
-            track = isNull(trackColor) ? 'color-gray-7' : trackColor;
-        const style: CSSProperties = {borderColor: convertColor(track), borderTopColor: convertColor(color)};
-        return this.addPropStyles(style);
-    };
+            colorIsWhite(baseColor) ? contextStyle.contrastColor : baseColor;
+        const track = isNull(trackColor) ? 'color-gray-7' : trackColor;
+        let style: CSSProperties = {borderColor: convertColor(track), borderTopColor: convertColor(color)};
+        if (!!size) {
+            style.width = size;
+            style.height = size;
+            style.paddingBottom = 'unset';
+        }
+        if (!!thickness)
+            style.borderWidth = thickness;
+        return {...style, ...loaderStyle};
+    }, [baseColor, contextStyle.contrastColor, trackColor, size, thickness, loaderStyle]);
 
-    addPropStyles = (style: CSSProperties): CSSProperties => {
-        const {size, thickness, loaderStyle} = this.props;
-        if (size !== null && size !== undefined)
-            style = Object.assign({}, style, {
-                width: size,
-                height: size,
-                paddingBottom: 'unset',
-            });
-        if (thickness !== null && thickness !== undefined)
-            style = Object.assign({}, style, {borderWidth: thickness});
-        return Object.assign({}, style, loaderStyle);
-    };
-
-    renderLabel = (): React.ReactNode => {
-        const {label, labelClass} = this.props;
-        if (label === null || label === undefined) return null;
-        return <label className={classNames('loaderLabel', labelClass)}>{label}</label>
-    };
-
-    render = () => {
-        const {position} = this.props;
-        return (
-            <div className={this.getContainerClass()} style={{position}}>
-                <div className={this.getLoaderClass()} style={this.getLoaderStyle()}/>
-                {this.renderLabel()}
-            </div>
-        )
+    function renderLabel() {
+        if (!label) return null;
+        return <label className={classNames('loader-label', labelClassName)}>{label}</label>
     }
+
+    return (
+        <div className={_className} style={{position}}>
+            <div className={classNames('loader', loaderClassName)} style={_loaderStyle}/>
+            {renderLabel()}
+        </div>
+    )
 }

package/src/js/loader/loaderController.tsx

@@ -2,60 +2,44 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React, {CSSProperties} from 'react';
-import {Loader} from "./loader";
+import React, {CSSProperties, useContext, useMemo} from 'react';
+import Loader from "./loader";
 import {ControlContext} from "../util/controlContext";
 
-interface LoaderProps {
+interface Props {
     label?: string,
     baseColor?: string,
-    thickness: string,
-    size: string,
+    thickness?: string,
+    size?: string,
     trackColor: string,
-    containerClass: string,
-    loaderClass: string,
-    labelClass: string,
+    className?: string,
+    loaderClassName?: string,
+    labelClassName?: string,
     active: boolean,
-    disableBackground: boolean,
-    loaderStyle: CSSProperties;
-    position: 'absolute' | 'fixed' | 'relative';
+    disableBackground?: boolean,
+    loaderStyle?: CSSProperties;
+    position?: 'absolute' | 'fixed' | 'relative';
 }
 
-export default class LoaderController extends React.Component<LoaderProps> {
-    // noinspection JSUnusedGlobalSymbols
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        trackColor: 'transparent',
-        size: '5rem',
-        thickness: '.2rem',
-        containerClass: '',
-        trackClass: '',
-        loaderClass: '',
-        labelClass: '',
-        disableBackground: false,
-        loaderStyle: {},
-        position: 'absolute',
-    };
-
-    getBaseColor = () => {
-        const {baseColor} = this.props;
-        if (baseColor !== null && baseColor !== undefined) return baseColor;
-        // noinspection JSDeprecatedSymbols
-        return this.context.baseColor;
-    };
-
-    render = () => {
-        const {
-            active, trackColor, containerClass, loaderClass, labelClass, label, size, thickness, disableBackground,
-            loaderStyle, position
-        } = this.props;
-        if (active)
-            return <Loader baseColor={this.getBaseColor()} trackColor={trackColor} contextStyle={this.context}
-                           containerClass={containerClass} loaderClass={loaderClass} labelClass={labelClass}
-                           label={label} size={size} thickness={thickness} disableBackground={disableBackground}
-                           loaderStyle={loaderStyle} position={position}/>;
-        return null;
+export default function LoaderController(props: Props) {
+    const context = useContext(ControlContext);
+    const baseColor = useMemo(() => {
+        if (!!props.baseColor) return props.baseColor;
+        return context.baseColor;
+    }, [props.baseColor, context.baseColor]);
+    const defaultProps: Props = {
+        ...props,
+        trackColor: props.trackColor ?? 'transparent',
+        size: props.size ?? '5rem',
+        thickness: props.thickness ?? '.2rem',
+        position: props.position ?? 'absolute',
     }
+
+    if (!props.active) return null;
+    return (
+        <Loader baseColor={baseColor} trackColor={defaultProps.trackColor} className={defaultProps.className}
+                loaderClassName={defaultProps.loaderClassName} labelClassName={defaultProps.labelClassName}
+                contextStyle={context} disableBackground={defaultProps.disableBackground}
+                loaderStyle={defaultProps.loaderStyle} position={defaultProps.position!}/>
+    )
 }

package/src/js/loader/style/loader.scss

@@ -4,7 +4,7 @@
 
 @import '../../../style/variables';
 
-.loaderContainer {
+.loader-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16,11 +16,11 @@
   width: 100%;
   height: 100%;
 
-  &.noBack {
+  &.no-back {
     background-color: transparent;
   }
 
-  .loaderLabel {
+  .loader-label {
     @include borderRadius(.2rem);
     font-size: .9rem;
     color: $color-gray-6;

package/src/js/switch/dvrdSwitch.tsx

@@ -9,7 +9,7 @@ import {ControlContext} from "../util/controlContext";
 import {convertColor} from "../util/colorUtil";
 
 interface Props {
-    onChange: (value: boolean, evt: React.MouseEvent) => void;
+    onChange: (value: boolean, evt?: React.MouseEvent | React.ChangeEvent) => void;
     value: boolean;
     className?: string;
     disabled?: boolean;