@dvrd/dvr-controls 1.0.76 → 1.0.78

package/package.json

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

package/src/js/date/dvrdDatePicker.tsx

@@ -41,6 +41,7 @@ interface Props {
     id?: string;
     max?: IDate | string;
     min?: IDate | string;
+    pickersOnly?: boolean;
 }
 
 export type DVRDDatePickerRef = { onOpen: VoidFunction; onClose: VoidFunction; }
@@ -48,7 +49,7 @@ export type DVRDDatePickerRef = { onOpen: VoidFunction; onClose: VoidFunction; }
 function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
     const {
         onChange, className, closeOnChange, error, label, value, placeholder, disabled, alwaysShowArrows,
-        useMobileNative, max, min, timeMode
+        useMobileNative, max, min, timeMode, pickersOnly
     } = props;
     const [pickerOpen, setPickerOpen] = useState(false);
     const [timePickerOpen, setTimePickerOpen] = useState(false);
@@ -107,19 +108,21 @@ function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
 
     return (
         <div className={classNames('dvrd-date-picker', className, error && 'error', disabled && 'disabled')}>
-            <label className='field-label'>{label}</label>
-            {renderMobilePicker()}
-            <div className={classNames('value-container', useMobileNative && 'no-mob')} onClick={onClickContainer}>
-                <label className={classNames('value', !value && 'placeholder')}>{value?.format(dateFormat) ??
-                    placeholder ?? ''}</label>
-                <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
-            </div>
+            {!pickersOnly && <>
+                <label className='field-label'>{label}</label>
+                {renderMobilePicker()}
+                <div className={classNames('value-container', useMobileNative && 'no-mob')} onClick={onClickContainer}>
+                    <label className={classNames('value', !value && 'placeholder')}>{value?.format(dateFormat) ??
+                        placeholder ?? ''}</label>
+                    <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
+                </div>
+            </>}
             <DatePicker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
                         alwaysShowArrows={alwaysShowArrows} max={max} min={min}/>
             {!!timeMode &&
                 <TimePicker onChange={onChangeTimePicker} onClose={onClosePicker} value={value}
                             open={timePickerOpen} timeMode={timeMode} closeOnChange={closeOnChange}/>}
-            <label className='error-label'>{error}</label>
+            {!pickersOnly && <label className='error-label'>{error}</label>}
         </div>
     )
 }
@@ -351,7 +354,7 @@ function DatePicker(props: DatePickerProps) {
     useEffect(() => {
         if (open) {
             document.addEventListener('keydown', keyListener);
-            addMountClass();
+            defer(addMountClass);
             window.setTimeout(removeMountClass, 1000);
         } else {
             document.removeEventListener('keydown', keyListener);
@@ -361,7 +364,8 @@ function DatePicker(props: DatePickerProps) {
         }
     }, [open]);
 
-    function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string, type?: 'prev' | 'next') {
+    function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string,
+                       type?: 'prev' | 'next') {
         let pickValue = pickerValue.clone();
         if (type === 'prev')
             pickValue = pickValue.subtract(1, 'month');
@@ -380,7 +384,7 @@ function DatePicker(props: DatePickerProps) {
 
     return (
         <WithBackground active={open} onClose={onClose}>
-            <div className='picker' ref={divRef}>
+            <div className={classNames('picker', alwaysShowArrows && 'switch-mount')} ref={divRef}>
                 <div className='switcher year'>
                     {renderSwitcher('year', 'reduce')}
                     <label className='switcher-label'

package/src/js/date/style/dvrdDatePicker.scss

@@ -66,8 +66,8 @@
     .switcher {
       display: grid;
       justify-content: center;
-      background-color: $color-blue-1;
-      color: white;
+      background-color: var(--base-color);
+      color: var(--contrast-color);
       align-items: center;
       grid-column-gap: .5rem;
 
@@ -247,12 +247,12 @@
         }
 
         &.selected {
-          background-color: $color-blue-1 !important;
-          color: white;
+          background-color: var(--base-color);
+          color: var(--contrast-color);
         }
 
         &:hover {
-          background-color: rgba($color-blue-1, .2);
+          background-color: rgba(var(--base-color-rgb), .2);
         }
 
         &.disabled {

package/src/js/util/controlContext.tsx

@@ -5,6 +5,7 @@
 import React, {Context, PropsWithChildren, useEffect} from 'react';
 import {ControlVariant} from "./interfaces";
 import defer from 'lodash.defer';
+import {convertColor, hexToRgb} from "./colorUtil";
 
 // noinspection JSUnusedGlobalSymbols
 export interface ThemeContextShape {
@@ -34,8 +35,12 @@ export default function ThemeContextProvider(props: PropsWithChildren<ProviderPr
     useEffect(() => {
         defer(() => {
             const root = document.documentElement;
+            const baseRgb = hexToRgb(convertColor(theme.baseColor));
+            const contrastRgb = hexToRgb(convertColor(theme.contrastColor));
             root.style.setProperty('--base-color', theme.baseColor);
+            root.style.setProperty('--base-color-rgb', `${baseRgb.r}, ${baseRgb.g}, ${baseRgb.b}`);
             root.style.setProperty('--contrast-color', theme.contrastColor);
+            root.style.setProperty('--contrast-color-rgb', `${contrastRgb.r}, ${contrastRgb.g}, ${contrastRgb.b}`);
         });
     }, [theme]);