@dvrd/dvr-controls 1.0.75 → 1.0.77

package/index.ts

@@ -45,7 +45,7 @@ import SidebarMenu from './src/js/sidebarMenu/sidebarMenu';
 import Info from './src/js/info/info';
 import Media from './src/js/media/media';
 import DvrdButton, {DvrdButtonProps} from './src/js/button/dvrdButton';
-import DvrdDatePicker from './src/js/date/dvrdDatePicker';
+import DvrdDatePicker, {DVRDDatePickerRef} from './src/js/date/dvrdDatePicker';
 import DvrdInputController from './src/js/textField/dvrdInputController';
 import DvrdNumberInput from './src/js/textField/dvrdNumberInput';
 import DVRDPasswordInput from './src/js/textField/dvrdPasswordInput';
@@ -96,6 +96,7 @@ export {
     Media,
     DvrdButton,
     DvrdDatePicker,
+    DVRDDatePickerRef,
     DvrdInputController as DvrdInput,
     DvrdNumberInput,
     DVRDPasswordInput,

package/package.json

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

package/src/js/date/dvrdDatePicker.tsx

@@ -4,7 +4,17 @@
 import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
-import React, {Fragment, MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
+import React, {
+    ForwardedRef,
+    forwardRef,
+    Fragment,
+    MouseEventHandler,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState
+} from 'react';
 import {ChangeFunction, DatePickerTimeMode, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import WithBackground from '../popup/withBackground';
@@ -31,12 +41,15 @@ interface Props {
     id?: string;
     max?: IDate | string;
     min?: IDate | string;
+    pickersOnly?: boolean;
 }
 
-export default function DvrdDatePicker(props: Props) {
+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);
@@ -91,21 +104,25 @@ export default function DvrdDatePicker(props: Props) {
         )
     }
 
+    useImperativeHandle(ref, () => ({onOpen: onClickContainer, onClose: onClosePicker}));
+
     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>
     )
 }
@@ -347,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');
@@ -562,4 +580,6 @@ function TimePicker(props: TimePickerProps) {
             </div>
         </WithBackground>
     );
-}
+}
+
+export default forwardRef<DVRDDatePickerRef, Props>(DvrdDatePicker);

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]);