@dvrd/dvr-controls 1.0.75 → 1.0.76

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.76",
   "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';
@@ -33,7 +43,9 @@ interface Props {
     min?: IDate | string;
 }
 
-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
@@ -91,6 +103,8 @@ 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>
@@ -562,4 +576,6 @@ function TimePicker(props: TimePickerProps) {
             </div>
         </WithBackground>
     );
-}
+}
+
+export default forwardRef<DVRDDatePickerRef, Props>(DvrdDatePicker);