@dvrd/dvr-controls 1.0.74 → 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.74",
+  "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);

package/src/js/select/dvrdMultiSelect.tsx

@@ -3,7 +3,7 @@
  */
 import './style/dvrdSelect.scss';
 
-import React, {MouseEventHandler, ReactElement, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ReactElement, useEffect, useMemo, useRef, useState} from 'react';
 import classNames from 'classnames';
 import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
 import {hasHover, stopPropagation} from '../util/controlUtil';
@@ -11,7 +11,7 @@ import AwesomeIcon from '../icon/awesomeIcon';
 import delay from 'lodash.delay';
 
 interface Props {
-    onChange: (selected: Array<string | number>, submit: boolean) => MouseEventHandler;
+    onChange: (selected: Array<string | number>, submit: boolean) => VoidFunction;
     onChangeSearch: ChangeFunction;
     selected: Array<string | number>;
     items: SelectItemShape[];
@@ -72,8 +72,8 @@ export default function DvrdMultiSelect(props: Props) {
         return function (evt: React.MouseEvent) {
             stopPropagation(evt);
             if (selected.includes(_value))
-                onChange(selected.filter((value: string | number) => value !== _value), !submitOnClose)(evt);
-            else onChange(selected.concat(_value), !submitOnClose)(evt);
+                onChange(selected.filter((value: string | number) => value !== _value), !submitOnClose)();
+            else onChange(selected.concat(_value), !submitOnClose)();
         }
     }
 
@@ -200,7 +200,7 @@ export default function DvrdMultiSelect(props: Props) {
         if (open) addClickListener();
         else {
             removeClickListener();
-            if (submitOnClose && !isFirstRender) onChange(selected, true);
+            if (submitOnClose && !isFirstRender) onChange(selected, true)();
         }
         return function () {
             removeClickListener();