@dvrd/dvr-controls 0.0.40 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.40",
+  "version": "1.0.1",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},
@@ -15,7 +15,7 @@
     "1": "not dead",
     "2": "ie >= 11"
   },
-  "devDependencies": {
+  "dependencies": {
     "@types/js-cookie": "^2.2.6",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.34",

package/src/js/select/dvrdSelect.tsx

@@ -81,7 +81,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
     getValueLabel = (): string | number => {
         const {value, items} = this.props;
         for (const item of items)
-            if (item.value === value) return item.label;
+            if (item.value === value) return item.inputLabel ?? item.label;
         return '';
     }
 

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

@@ -5,15 +5,15 @@
 @import '../../../style/variables';
 
 .dvr-side-bar-menu {
-  --base-color: white;
-  --contrast-color: $color-blue-1;
+  //--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(--base-color);
+  background-color: var(--contrast-color);
   height: calc(100vh - 4rem);
   width: 4rem;
   z-index: $z-index-popup-4;
@@ -27,9 +27,9 @@
     align-items: center;
     cursor: pointer;
     position: relative;
-    background-color: var(--base-color);
+    background-color: var(--contrast-color-color);
     transition: background-color .2s ease-in-out;
-    color: var(--contrast-color);
+    color: var(--base-color);
 
     .item-icon {
       color: $color-gray-4;
@@ -57,7 +57,7 @@
       right: 0;
       height: 100%;
       width: 3px;
-      background-color: var(--contrast-color);
+      background-color: var(--base-color);
       visibility: hidden;
       opacity: 0;
       transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
@@ -77,7 +77,7 @@
       }
 
       .item-icon {
-        color: var(--contrast-color);
+        color: var(--base-color);
       }
     }
   }
@@ -108,7 +108,7 @@
         opacity: .5;
 
         &.active {
-          color: var(--contrast-color);
+          color: var(--base-color);
           opacity: 1;
         }
       }
@@ -130,7 +130,7 @@
         height: calc(100% - 1.5rem);
         top: 2rem;
         left: 1rem;
-        background-color: var(--contrast-color);
+        background-color: var(--base-color);
       }
 
       &.child {

package/src/js/textField/dvrdInput.tsx

@@ -11,6 +11,7 @@ import classNames from "classnames";
 import {ElementPosition, ErrorType, OrnamentShape} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {directTimeout} from '../util/componentUtil';
+import {ControlContext} from "../util/controlContext";
 
 interface Props {
     onChange: ChangeEventHandler;
@@ -42,6 +43,7 @@ interface State {
 }
 
 export default class DvrdInput extends PureComponent<Props, State> {
+    static contextType = ControlContext;
     private input: HTMLInputElement | HTMLTextAreaElement;
 
     state: State = {

package/src/js/textField/style/dvrdInput.scss

@@ -62,17 +62,17 @@
 
   &:hover {
     .content-container {
-      border-color: lighten($color-blue-1, 10%);
+      border-color: var(--base-color);
     }
   }
 
   &.active {
     .dvrd-input-label {
-      color: $color-blue-1;
+      color: var(--base-color);
     }
 
     .content-container {
-      border-color: $color-blue-1;
+      border-color: var(--base-color);
     }
   }
 

package/src/js/util/controlContext.tsx

@@ -2,10 +2,9 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from 'react';
-import {voidFunction} from "./controlUtil";
+import React, {Context, PropsWithChildren, useEffect} from 'react';
 import {ControlVariant} from "./interfaces";
-import {Context} from "react";
+import {defer} from 'lodash';
 
 // noinspection JSUnusedGlobalSymbols
 export interface ThemeContextShape {
@@ -29,20 +28,19 @@ export interface ThemeShape {
 export const ControlContext: Context<ThemeShape> = React.createContext<ThemeShape>(
     {baseColor: 'black', contrastColor: 'white', controlVariant: ControlVariant.STANDARD});
 
-// noinspection JSUnusedGlobalSymbols
-export default class ThemeContextProvider extends React.Component<ProviderProps> {
-    static defaultProps = {
-        theme: {
-            baseColor: '',
-            contrasColor: '',
-            onChange: voidFunction,
-        }
-    };
+export default function ThemeContextProvider(props: PropsWithChildren<ProviderProps>) {
+    const {theme, children} = props;
+    useEffect(() => {
+        defer(() => {
+            const root = document.documentElement;
+            root.style.setProperty('--base-color', theme.baseColor);
+            root.style.setProperty('--contrast-color', theme.contrastColor);
+        });
+    }, [theme]);
 
-    render = () => {
-        const {theme} = this.props;
-        return <ControlContext.Provider value={theme}>
-            {this.props.children}
+    return (
+        <ControlContext.Provider value={theme}>
+            {children}
         </ControlContext.Provider>
-    }
+    )
 }

package/src/style/variables.scss

@@ -3,4 +3,9 @@
  */
 
 @import 'common-variables';
-@import 'display-breakpoints';
+@import 'display-breakpoints';
+
+:root {
+  --base-color: $color-blue-1;
+  --contrast-color: white;
+}