@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/select/style/dvrdSelect.scss

@@ -0,0 +1,140 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-select-container {
+  transition: margin-bottom .2s ease-in-out;
+  position: relative;
+
+  .dvrd-select-label {
+    color: $color-blue-text;
+    font-size: .9rem;
+    margin-bottom: .25rem;
+    display: block;
+    transition: color .2s ease-in-out;
+  }
+
+  .content-container {
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    transition: border-color .2s ease-in-out;
+    display: grid;
+    grid-template-columns: 1fr fit-content(100%);
+    grid-column-gap: .25rem;
+    align-items: center;
+    padding: .75rem;
+    cursor: pointer;
+    background-color: white;
+
+    .dvrd-select-value {
+      color: $color-blue-text;
+      font-family: avenir-light, sans-serif;
+    }
+
+    .dvrd-select-search {
+      width: 100%;
+      outline: none;
+      border: none;
+      padding: .75rem;
+      color: #2A435F;
+      border-radius: inherit;
+      font-family: avenir-light, sans-serif;
+    }
+
+    .dvrd-select-arrow {
+      font-size: .9rem;
+      color: #686869;
+    }
+
+    &.search {
+      padding: 0 .75rem 0 0;
+    }
+  }
+
+  .dvrd-select-items {
+    background-color: white;
+    position: absolute;
+    left: 0;
+    z-index: $z-index-high;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .1s ease-in-out, opacity .1s ease-in-out, box-shadow .1s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    border-radius: .5rem;
+    overflow-y: auto;
+
+    .dvrd-select-item {
+      padding: .75rem;
+      color: $color-blue-text;
+      background-color: white;
+      transition: background-color .2s ease-in-out;
+      cursor: pointer;
+      font-family: avenir-light, sans-serif;
+      white-space: nowrap;
+
+      &:hover {
+        background-color: #e9f2fe;
+      }
+    }
+
+    &.bottom {
+      bottom: 0;
+      transform: translateY(100%);
+    }
+
+    &.top {
+      top: 0;
+      transform: translateY(calc(-100% + 1rem));
+    }
+
+    &.open {
+      @include backgroundShadow;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  .dvrd-select-error {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(1rem);
+    left: 0;
+    color: red;
+    font-size: .8rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .1s ease-in-out, opacity .1s ease-in-out;
+  }
+
+  &.disabled {
+    .content-container {
+      background-color: #F9FAFB;
+      cursor: not-allowed;
+    }
+  }
+
+  &.error {
+    margin-bottom: 1rem;
+
+    .dvrd-select-label {
+      color: red;
+    }
+
+    .content-container {
+      border-color: red;
+
+      .dvrd-select-value {
+        color: red;
+      }
+    }
+
+    .dvrd-select-error {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/src/js/select/style/select.scss

@@ -0,0 +1,199 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.selectContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-top: .8rem;
+  margin-bottom: 0;
+  transition: margin-bottom .2s ease-in-out;
+
+  &.fullWidth {
+    width: 100%;
+
+    .selectInputContainer .valueLabelContainer, .inputContainer {
+      width: 100%;
+    }
+  }
+
+  .selectInputContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .clearSelectButton {
+      font-size: .6rem;
+      color: red;
+      transition: color .2s ease-in-out;
+      cursor: pointer;
+
+      &:hover {
+        color: $color-red-1;
+      }
+    }
+
+    .valueLabelContainer {
+      @include borderRadius(.2rem);
+      border-width: 2px;
+      border-style: solid;
+      padding: .7rem .6rem;
+      transition: border-color .2s ease-in-out;
+      width: 20.7rem;
+      box-sizing: border-box;
+      margin-right: .5rem;
+      position: relative;
+      background-color: white;
+      min-height: 2.8rem;
+
+      .selectLabel {
+        @include centerY;
+        position: absolute;
+        left: .2rem;
+        font-size: .8rem;
+        transition: top .2s ease-in-out, transform .2s ease-in-out, font-size .2s ease-in-out, left .2s ease-in-out;
+        background-color: white;
+        padding: .2rem;
+        color: $color-gray-4;
+
+        &.up {
+          @include borderRadius(.2rem);
+          transform: none;
+          top: -.8rem;
+          font-size: .7rem;
+          color: $color-gray-3;
+        }
+      }
+
+      .labelContainer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .valueLabel {
+          font-size: 1rem;
+          color: $color-gray-5;
+          user-select: none;
+
+          &.disabled, &.readOnly {
+            color: $color-gray-4;
+          }
+        }
+      }
+
+      &.hasError {
+        .selectLabel {
+          color: red !important;
+        }
+      }
+    }
+
+    .selectInput {
+      flex: 1;
+      margin-right: .5rem;
+      margin-top: 0;
+      cursor: text;
+      margin-bottom: 0;
+
+      .searchIcon {
+        font-size: 1.2rem;
+        color: $color-gray-5;
+        padding: 0;
+      }
+    }
+
+    .caretIcon {
+      transition: transform .2s ease-in-out;
+
+      &.down {
+        transition-delay: .2s;
+        transform: rotate(180deg);
+      }
+    }
+
+    //.error {
+    //  position: absolute;
+    //  bottom: -1.4rem;
+    //  left: .4rem;
+    //  color: red;
+    //  font-size: .9rem;
+    //}
+  }
+
+  .itemsContainer {
+    @include borderRadius(.5rem);
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background-color: white;
+    box-sizing: border-box;
+    border-top-left-radius: 0;
+    border: 1px solid $color-gray-7;
+    z-index: $z-index-high;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
+    transition-delay: .2s;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .itemContainer {
+      cursor: pointer;
+      background-color: white;
+      transition: color .2s ease-in-out, background-color .2s ease-in-out;
+      padding: .5rem;
+      user-select: none;
+
+      &.readOnly {
+        cursor: not-allowed;
+        .itemLabel {
+          color: $color-gray-3;
+        }
+      }
+
+      &.multiple {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .selectedCheck {
+          color: $color-green-whatsapp;
+          font-size: 1rem;
+        }
+      }
+
+      .itemLabel {
+        cursor: inherit;
+      }
+    }
+
+    &.open {
+      visibility: visible;
+      opacity: 1;
+      transition-delay: 0s;
+    }
+  }
+
+  &.error {
+    margin-bottom: 2.4rem;
+  }
+
+  &.disabled, &.readOnly {
+    .selectInputContainer {
+      &, .selectInput {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.native-select-container {
+  display: flex;
+  flex-direction: column;
+
+  .native-select-label {
+    margin-bottom: .2rem;
+  }
+}

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/sidebarMenu.scss';
+
+import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
+import {useLocation} from 'react-router';
+import {SidebarItem, SideMenuMode} from "../util/interfaces";
+import classNames from 'classnames';
+import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
+import {ControlContext} from "../util/controlContext";
+import {defer} from 'lodash';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+interface Props {
+    onClickItem: (item: SidebarItem) => MouseEventHandler;
+    items: SidebarItem[];
+    activeItem?: string;
+    className?: string;
+    baseColor?: string;
+    contrastColor?: string;
+    controlled?: boolean;
+    mode?: SideMenuMode;
+    id?: string;
+}
+
+function getTopItems(items: SidebarItem[]): SidebarItem[] {
+    return items.filter((item: SidebarItem) => !item.onBottom);
+}
+
+function getBottomItems(items: SidebarItem[]): SidebarItem[] {
+    return items.filter((item: SidebarItem) => item.onBottom)
+}
+
+function getActiveItem(items: SidebarItem[], pathname: string): SidebarItem | null {
+    for (const item of items) {
+        if (itemIsActive(item, pathname)) return item;
+        if (Array.isArray(item.children)) {
+            const activeItem = getActiveItem(item.children, pathname);
+            if (activeItem) return activeItem;
+        }
+    }
+    return null;
+}
+
+function itemIsActive(item: SidebarItem, pathname: string): boolean {
+    if (Array.isArray(item.route) && item.route.includes(pathname)) return true;
+    else if (item.route === pathname) return true;
+    else if (typeof item.route === 'string' && item.exactRoute === false && pathname.includes(item.route)) return true;
+    return false;
+}
+
+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;
+    return false;
+}
+
+export default function SidebarMenu(props: Props) {
+    const context = useContext(ControlContext),
+        location = useLocation(),
+        {className, contrastColor, baseColor, items, onClickItem} = props,
+        mode = props.mode ?? SideMenuMode.COMPACT,
+        [activeItem, setActiveItem] = useState(props.activeItem ?? ''),
+        sideBar = useRef<HTMLDivElement>(null),
+        componentId = useRef(generateComponentId(props.id));
+
+    function _onClickItem(item: SidebarItem) {
+        return function (evt: React.MouseEvent) {
+            evt.stopPropagation();
+            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);
+        }
+    }
+
+    function renderItem(isChild: boolean = false) {
+        return function (item: SidebarItem) {
+            const {className, icon, id, label, children} = item,
+                isActive = itemHasActiveId(item, activeItem),
+                cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
+                    isChild && 'child', children !== undefined && 'with-children');
+            return (
+                <div key={id} className={cls} onClick={_onClickItem(item)}>
+                    {renderIcon(isActive, isChild, label, icon)}
+                    {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
+                    <span className={classNames('item-label', isActive && 'active')}>{label}</span>
+                    {children !== undefined && (
+                        <>
+                            {isActive && <div className='line'/>}
+                            {renderChildren(isActive)(children)}
+                        </>
+                    )}
+                </div>
+            )
+        }
+    }
+
+    function renderChildren(isActive: boolean) {
+        return function (children: SidebarItem[]) {
+            const display = isActive ? 'block' : 'none';
+            return (
+                <div className='children-container' style={{display}}>
+                    {children.map(renderItem(true))}
+                </div>
+            )
+        }
+    }
+
+    function renderIcon(isActive: boolean, isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
+        const className = classNames('item-icon', isActive && 'active');
+        if (icon) {
+            if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
+            else if (React.isValidElement(icon))
+                return React.cloneElement((icon as React.ReactElement),
+                    {className: classNames(className, icon.props.className)});
+        }
+        if (label.length) {
+            if (isChild) return <span/>;
+            return <span className={classNames(className, 'letter')}>{label[0]}</span>
+        }
+        return null;
+    }
+
+    function setColors() {
+        const bar = sideBar.current;
+        if (bar) {
+            const base: string = baseColor || context.baseColor,
+                contrast: string = contrastColor || context.contrastColor;
+            bar.style.setProperty('--base-color', base);
+            bar.style.setProperty('--contrast-color', contrast);
+        }
+    }
+
+    function _setActiveItem() {
+        const {pathname} = location;
+        const activeItem = getActiveItem(items, pathname);
+        if (activeItem) setActiveItem(activeItem.id);
+    }
+
+    useEffect(() => {
+        setColors();
+        defer(_setActiveItem);
+    }, []);
+
+    useEffect(() => {
+        _setActiveItem()
+    }, [location]);
+
+    return (
+        <div className={classNames(className, 'dvr-side-bar-menu', mode === SideMenuMode.FULL && 'full')}
+             ref={sideBar} id={componentId.current}>
+            <div>
+                {getTopItems(items).map(renderItem())}
+            </div>
+            <div>
+                {getBottomItems(items).map(renderItem())}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,167 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvr-side-bar-menu {
+  //--base-color: white;
+  //--contrast-color: $color-blue-1;
+  @include backgroundShadow;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  top: 4rem;
+  background-color: var(--contrast-color);
+  height: calc(100vh - 4rem);
+  width: 4rem;
+  z-index: $z-index-popup-4;
+
+  .side-bar-item {
+    border-bottom: 1px solid $color-gray-7;
+    height: 4rem;
+    width: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    background-color: var(--contrast-color-color);
+    transition: background-color .2s ease-in-out;
+    color: var(--base-color);
+
+    .item-icon {
+      color: $color-gray-4;
+      font-size: 1.5rem;
+      transition: color .2s ease-in-out;
+    }
+
+    .item-label {
+      @include centerY;
+      border-radius: .5rem;
+      position: absolute;
+      padding: 4px 6px;
+      background-color: rgba(black, .6);
+      color: white;
+      left: 115%;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+      font-size: 12px;
+    }
+
+    .active-indicator {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 3px;
+      background-color: var(--base-color);
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+    }
+
+    &:hover {
+      .item-label {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &.active {
+      .active-indicator {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .item-icon {
+        color: var(--base-color);
+      }
+    }
+  }
+
+  &.full {
+    width: unset;
+    box-shadow: none;
+    background-color: transparent;
+    position: sticky;
+    display: inline-flex;
+    height: calc(100vh - 5rem);
+    top: 5rem;
+
+    .side-bar-item-full {
+      display: grid;
+      grid-template-columns: 2rem auto;
+      grid-column-gap: 1rem;
+      margin: 2rem 1rem;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+
+      .item-icon {
+        color: #686869;
+        font-size: 1.5rem;
+        transition: color .2s ease-in-out;
+        justify-self: center;
+        opacity: .5;
+
+        &.active {
+          color: var(--base-color);
+          opacity: 1;
+        }
+      }
+
+      .item-label {
+        color: #686869;
+        transition: color .2s ease-in-out;
+        white-space: nowrap;
+
+        &.active {
+          font-weight: 600;
+          color: black;
+        }
+      }
+
+      .line {
+        width: 2px;
+        position: absolute;
+        height: calc(100% - 1.5rem);
+        top: 2rem;
+        left: 1rem;
+        background-color: var(--base-color);
+      }
+
+      &.child {
+        margin-bottom: .5rem !important;
+
+        .item-label {
+          padding-left: 1rem;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .children-container {
+        padding-top: 1rem;
+
+        .side-bar-item-full {
+          margin: 0;
+        }
+      }
+
+      &:hover {
+        .item-label {
+          color: black;
+        }
+      }
+
+      &.with-children {
+        margin-bottom: -.5rem;
+      }
+    }
+  }
+}