@dvrd/dvr-controls 1.0.83 → 1.0.84

package/index.ts

@@ -53,7 +53,7 @@ import Link from './src/js/link/link';
 import DvrdOptionsList from './src/js/optionsList/dvrdOptionsList';
 import DvrdSelectController from './src/js/select/dvrdSelectController';
 import DVRDGroupedSelect, { GroupedSelectRef } from './src/js/select/dvrdGroupedSelect';
-import DvrdSwitch from './src/js/switch/dvrdSwitch';
+import DVRDSwitch from './src/js/switch/dvrdSwitch';
 import DvrdHeaderController from './src/js/header/v2/dvrdHeaderController';
 import FileUpload from './src/js/fileUpload/fileUpload';
 import DvrdRadioController from './src/js/radio/dvrdRadioController';
@@ -104,7 +104,7 @@ export {
     DvrdOptionsList,
     DvrdSelectController as DvrdSelect,
     DVRDGroupedSelect,
-    DvrdSwitch,
+    DVRDSwitch,
     DvrdHeaderController as DvrdHeader,
     FileUpload,
     DvrdRadioController as DvrdRadio,

package/package.json

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

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -5,10 +5,10 @@ import './style/sidebarMenu.scss';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
 import {NavLink, useLocation} from 'react-router-dom';
-import {SidebarItem, SideMenuMode} from "../util/interfaces";
+import {SidebarItem, SideMenuMode} from '../util/interfaces';
 import classNames from 'classnames';
-import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
-import {ControlContext} from "../util/controlContext";
+import {AwesomeIcon, generateComponentId, isAbsoluteLink} from '../../../index';
+import {ControlContext} from '../util/controlContext';
 import defer from 'lodash.defer';
 import {IconName} from '@fortawesome/fontawesome-svg-core';
 
@@ -29,7 +29,7 @@ function getTopItems(items: SidebarItem[]): SidebarItem[] {
 }
 
 function getBottomItems(items: SidebarItem[]): SidebarItem[] {
-    return items.filter((item: SidebarItem) => item.onBottom)
+    return items.filter((item: SidebarItem) => item.onBottom);
 }
 
 function getActiveItem(items: SidebarItem[], pathname: string): SidebarItem | null {
@@ -52,7 +52,8 @@ function itemIsActive(item: SidebarItem, pathname: string): boolean {
 
 function itemHasActiveId(item: SidebarItem, activeId: string): boolean {
     if (item.id === activeId) return true;
-    else if (Array.isArray(item.children) && item.children.find((child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
+    else if (Array.isArray(item.children) && item.children.find(
+        (child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
     return false;
 }
 
@@ -77,7 +78,7 @@ export default function SidebarMenu(props: Props) {
             if (_route && !isAbsoluteLink(_route))
                 setActiveItem(item.id);
             onClickItem(item)(evt);
-        }
+        };
     }
 
     function renderItem(isChild: boolean = false) {
@@ -87,11 +88,12 @@ export default function SidebarMenu(props: Props) {
                 cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
                     isChild && 'child', children !== undefined && 'with-children');
 
-            const content = (
+            const content = (active: boolean) => (
                 <>
-                    {renderIcon(isChild, label, icon)}
-                    {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                    <span className='item-label'>{label}</span>
+                    {renderIcon(isChild, label, active, icon)}
+                    {mode === SideMenuMode.COMPACT &&
+                        <div className={classNames('active-indicator', active && 'active')}/>}
+                    <span className={classNames('item-label', active && 'active')}>{label}</span>
                     {children !== undefined && (
                         <>
                             {isActive && <div className='line'/>}
@@ -103,15 +105,15 @@ export default function SidebarMenu(props: Props) {
 
             if (asNavLink) return (
                 <NavLink key={id} to={item.route as string} className={cls} id={id}>
-                    {content}
+                    {({isActive}) => content(isActive)}
                 </NavLink>
             );
             return (
-                <div key={id} className={classNames(cls, isActive && 'active')} onClick={_onClickItem(item)} id={id}>
-                    {content}
+                <div key={id} className={cls} onClick={_onClickItem(item)} id={id}>
+                    {content(isActive)}
                 </div>
-            )
-        }
+            );
+        };
     }
 
     function renderChildren(isActive: boolean) {
@@ -121,12 +123,12 @@ export default function SidebarMenu(props: Props) {
                 <div className='children-container' style={{display}}>
                     {children.map(renderItem(true))}
                 </div>
-            )
-        }
+            );
+        };
     }
 
-    function renderIcon(isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
-        const className = 'item-icon'
+    function renderIcon(isChild: boolean, label: string, active: boolean, icon?: IconName | ReactNode): ReactNode {
+        const className = classNames('item-icon', active && 'active');
         if (icon) {
             if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
             else if (React.isValidElement(icon))
@@ -135,7 +137,7 @@ export default function SidebarMenu(props: Props) {
         }
         if (label.length) {
             if (isChild) return <span/>;
-            return <span className={classNames(className, 'letter')}>{label[0]}</span>
+            return <span className={classNames(className, 'letter')}>{label[0]}</span>;
         }
         return null;
     }
@@ -162,7 +164,7 @@ export default function SidebarMenu(props: Props) {
     }, []);
 
     useEffect(() => {
-        _setActiveItem()
+        _setActiveItem();
     }, [location]);
 
     return (
@@ -175,5 +177,5 @@ export default function SidebarMenu(props: Props) {
                 {getBottomItems(items).map(renderItem())}
             </div>
         </div>
-    )
+    );
 }

package/src/js/sidebarMenu/style/sidebarMenu.scss

@@ -34,6 +34,10 @@
       color: $color-gray-4;
       font-size: 1.5rem;
       transition: color .2s ease-in-out;
+
+      &.active {
+        color: var(--base-color);
+      }
     }
 
     .item-label {
@@ -61,24 +65,18 @@
       visibility: hidden;
       opacity: 0;
       transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-    }
 
-    &:hover {
-      .item-label {
+      &.active {
         visibility: visible;
         opacity: 1;
       }
     }
 
-    &.active {
-      .active-indicator {
+    &:hover {
+      .item-label {
         visibility: visible;
         opacity: 1;
       }
-
-      .item-icon {
-        color: var(--base-color);
-      }
     }
   }
 
@@ -119,11 +117,11 @@
         transition: color .2s ease-in-out;
         white-space: nowrap;
         user-select: none;
-        //
-        //&.active {
-        //  font-weight: 600;
-        //  color: black;
-        //}
+
+        &.active {
+          font-weight: 600;
+          color: black;
+        }
       }
 
       .line {
@@ -164,18 +162,6 @@
       &.with-children {
         margin-bottom: -.5rem;
       }
-
-      &.active {
-        .item-icon {
-          color: var(--base-color);
-          opacity: 1;
-        }
-
-        .item-label {
-          font-weight: 600;
-          color: black;
-        }
-      }
     }
   }
 }

package/src/js/switch/dvrdSwitch.tsx

@@ -4,7 +4,7 @@
 import './style/dvrdSwitch.scss';
 
 import classNames from 'classnames';
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 import {ControlContext} from "../util/controlContext";
 import {convertColor} from "../util/colorUtil";
 
@@ -12,13 +12,29 @@ interface Props {
     onChange: (value: boolean, evt?: React.MouseEvent | React.ChangeEvent) => void;
     value: boolean;
     className?: string;
+    labelClassName?: string;
     disabled?: boolean;
     activeColor?: string;
+    trackColor?: string;
+    baseColor?: string;
+    contrastColor?: string;
+    labels?: [string, string]; // Labels placed to the left and right of the switch
+    label?: string;  // Label placed to the right of the switch
 }
 
-export default function DvrdSwitch(props: Props) {
-    const context = useContext(ControlContext),
-        {className, onChange, disabled, value, activeColor} = props;
+export default function DVRDSwitch(props: Props) {
+    const context = useContext(ControlContext);
+    const {
+        onChange, disabled, value, activeColor, labels, label, trackColor, baseColor, contrastColor,
+        labelClassName
+    } = props;
+    const className = useMemo(() => {
+        const names: Array<string | undefined> = ['dvrd-switch', props.className];
+        if (!!labels || !!label) names.push('with-labels');
+        if (value) names.push('active');
+        if (disabled) names.push('disabled');
+        return classNames(names);
+    }, [props.className, labels, label, value, disabled]);
 
     function onToggle(evt: React.MouseEvent) {
         if (!disabled)
@@ -27,10 +43,11 @@ export default function DvrdSwitch(props: Props) {
 
     function getTrackColor(): string {
         let color: string;
-        if (disabled) color = 'color-gray-4';
+        if (trackColor) color = trackColor;
+        else if (disabled) color = 'color-gray-4';
         else if (value) {
             if (activeColor) color = activeColor;
-            else color = context.baseColor;
+            else color = baseColor ?? context.baseColor;
         } else color = 'color-gray-7';
         return convertColor(color);
     }
@@ -38,16 +55,26 @@ export default function DvrdSwitch(props: Props) {
     function getHandleColor(): string {
         let color: string;
         if (disabled) color = 'color-gray-3';
-        else color = context.contrastColor;
+        else color = contrastColor ?? context.contrastColor;
         return convertColor(color);
     }
 
+    function renderLabel(position?: 'left' | 'right') {
+        const _label = position === 'left' ? labels?.[0] : position === 'right' ? labels?.[1] : label;
+        if(!_label) return null;
+        return (
+            <label className={classNames('dvrd-switch-label', position, labelClassName)}>{_label}</label>
+        );
+    }
+
     return (
-        <div className={classNames('dvrd-switch', value && 'active', disabled && 'disabled', className)}
-             onClick={onToggle}>
+        <div className={className} onClick={onToggle}>
+            {renderLabel('left')}
             <div className='track' style={{backgroundColor: getTrackColor()}}>
                 <div className='handle' style={{backgroundColor: getHandleColor()}}/>
             </div>
+            {renderLabel('right')}
+            {renderLabel()}
         </div>
     )
 }

package/src/js/switch/style/dvrdSwitch.scss

@@ -7,6 +7,7 @@
 .dvrd-switch {
   $track-height: 14px;
   $handle-size: 18px;
+  cursor: pointer;
 
   .track {
     width: $handle-size * 1.3;
@@ -23,12 +24,21 @@
       border-radius: 100%;
       width: $handle-size;
       height: $handle-size;
-      cursor: pointer;
       transition: transform .2s ease-in-out, left .2s ease-in-out;
       will-change: left;
     }
   }
 
+  .dvrd-switch-label {
+    user-select: none;
+  }
+
+  &.with-labels {
+    display: flex;
+    column-gap: 1rem;
+    align-items: center;
+  }
+
   &.active {
     .track {
       .handle {
@@ -38,10 +48,6 @@
   }
 
   &.disabled {
-    .track {
-      .handle {
-        cursor: default;
-      }
-    }
+    cursor: default;
   }
 }