@dvrd/dvr-controls 1.0.57 → 1.0.59

package/package.json

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

package/src/js/date/dvrdDatePicker.tsx

@@ -4,19 +4,23 @@
 import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
-import React, {MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
-import {ChangeFunction, ErrorType} from '../util/interfaces';
+import React, {Fragment, MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
+import {ChangeFunction, DatePickerTimeMode, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import WithBackground from '../popup/withBackground';
 import DvrdButton from "../button/dvrdButton";
 import {generateComponentId} from "../util/componentUtil";
 import IDate from '@dvrd/idate';
+import {pad, padNum, voidFunction} from "../util/controlUtil";
+import {DvrdNumberInput} from "../../../index";
+import defer from 'lodash.defer';
 
 interface Props {
     onChange: ChangeFunction<IDate>;
     closeOnChange?: boolean;
     value: IDate | null;
     label: string;
+    timeMode?: DatePickerTimeMode;
     error?: ErrorType;
     className?: string;
     placeholder?: string;
@@ -32,12 +36,20 @@ interface Props {
 export default function DvrdDatePicker(props: Props) {
     const {
         onChange, className, closeOnChange, error, label, value, placeholder, disabled, alwaysShowArrows,
-        useMobileNative, max, min
+        useMobileNative, max, min, timeMode
     } = props;
     const [pickerOpen, setPickerOpen] = useState(false);
+    const [timePickerOpen, setTimePickerOpen] = useState(false);
     const dateFormat = useMemo(() => {
-        return props.dateFormat ?? 'YYYY-MM-DD';
-    }, [props.dateFormat]);
+        if (props.dateFormat) return props.dateFormat;
+        let format = 'YYYY-MM-DD';
+        if (timeMode === DatePickerTimeMode.FULL) format += ' HH:mm:ss';
+        else if (timeMode === DatePickerTimeMode.HOURS_MINUTES) format += ' HH:mm';
+        else if (timeMode === DatePickerTimeMode.HOURS_ONLY) format += ' HH';
+        else if (timeMode === DatePickerTimeMode.MINUTES_ONLY) format += ' mm';
+        else if (timeMode === DatePickerTimeMode.SECONDS_ONLY) format += ' ss';
+        return format;
+    }, [props.dateFormat, timeMode]);
     const id = useMemo(() => {
         return generateComponentId(props.id);
     }, [props.id]);
@@ -53,11 +65,19 @@ export default function DvrdDatePicker(props: Props) {
 
     const onChangePicker = (daySelected: boolean) => (value: IDate) => {
         onChange(value.clone());
-        if (closeOnChange && daySelected) onClosePicker();
+        if (closeOnChange && daySelected) {
+            onClosePicker();
+            if (!!timeMode) setTimePickerOpen(true);
+        }
     };
 
+    function onChangeTimePicker(value: IDate) {
+        onChange(value.clone());
+        setTimePickerOpen(false);
+    }
+
     function onClosePicker() {
-        setPickerOpen(false)
+        setPickerOpen(false);
     }
 
     function renderMobilePicker() {
@@ -80,14 +100,17 @@ export default function DvrdDatePicker(props: Props) {
                     placeholder ?? ''}</label>
                 <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
             </div>
-            <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
-                    alwaysShowArrows={alwaysShowArrows} max={max} min={min}/>
+            <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}/>}
             <label className='error-label'>{error}</label>
         </div>
     )
 }
 
-interface PickerProps {
+interface DatePickerProps {
     onChange: (daySelected: boolean) => ChangeFunction<IDate>;
     onClose: VoidFunction;
     value: IDate | null;
@@ -97,7 +120,7 @@ interface PickerProps {
     min?: IDate | string;
 }
 
-function Picker(props: PickerProps) {
+function DatePicker(props: DatePickerProps) {
     const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
     const divRef = useRef<HTMLDivElement>(null);
     const pickerValue = useMemo(() => new IDate(value), [value]);
@@ -401,4 +424,141 @@ function Picker(props: PickerProps) {
             </div>
         </WithBackground>
     )
+}
+
+interface TimePickerProps {
+    onChange: ChangeFunction<IDate>;
+    onClose: VoidFunction;
+    value: IDate | null;
+    open: boolean;
+    timeMode: DatePickerTimeMode;
+}
+
+type TimePartValues = [string, string, string, string, string, string];
+
+function dateToTimeParts(value: IDate | null): TimePartValues {
+    if (!value) return ['', '', '', '', '', ''];
+    const hours = padNum(value.hours());
+    const minutes = padNum(value.minutes());
+    const seconds = padNum(value.seconds());
+    return [...hours.split(''), ...minutes.split(''), ...seconds.split('')] as TimePartValues;
+}
+
+function timePartsToNumber(part1: string, part2: string): number {
+    const num = Number(part1 + part2);
+    return Number.isNaN(num) ? 0 : num;
+}
+
+function TimePicker(props: TimePickerProps) {
+    const {onChange, value, open, onClose, timeMode} = props;
+    const [timeParts, setTimeParts] = useState<TimePartValues>(dateToTimeParts(value));
+    const secondHourMax = useMemo(() => {
+        if (Number(timeParts[0]) === 2) return 3;
+        return 9;
+    }, timeParts);
+    const compID = useRef(generateComponentId());
+
+    function onClickNow() {
+        setTimeParts(dateToTimeParts(new IDate()));
+    }
+
+    function onSubmit() {
+        console.log(timeParts);
+        const hours = timePartsToNumber(timeParts[0], timeParts[1]);
+        const minutes = timePartsToNumber(timeParts[2], timeParts[3]);
+        const seconds = timePartsToNumber(timeParts[4], timeParts[5]);
+        console.log(hours, minutes, seconds);
+        const _value = value?.clone() ?? new IDate();
+        onChange(_value.set({hours, minutes, seconds}));
+        onClose();
+    }
+
+    function onKeyDown(index: number) {
+        return function (evt: React.KeyboardEvent) {
+            const {key} = evt;
+            if (/\d/.test(key) && index < 5) {
+                onChangePickerPart(index)(key);
+                defer(() => onFocusElement(index + 1));
+            }
+            if (key.toLowerCase() === 'backspace')
+                if ((evt.target as HTMLInputElement).value) {
+                    onChangePickerPart(index)('');
+                } else if (index > 0) {
+                    onChangePickerPart(index - 1)('');
+                    defer(() => onFocusElement(index - 1));
+                }
+        }
+    }
+
+    function onChangePickerPart(index: number) {
+        return function (value: string) {
+            const parts = [...timeParts];
+            parts[index] = value;
+            setTimeParts(parts as TimePartValues);
+        }
+    }
+
+    function onFocusElement(index: number) {
+        const input = document.getElementById(`${compID.current}-${index}-input`);
+        input?.focus();
+    }
+
+    function renderTimeControls() {
+        const renderHours = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES, DatePickerTimeMode.HOURS_ONLY].includes(timeMode);
+        const renderMinutes = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES, DatePickerTimeMode.MINUTES_ONLY].includes(timeMode);
+        const renderSeconds = [DatePickerTimeMode.FULL, DatePickerTimeMode.SECONDS_ONLY].includes(timeMode);
+        const timeControls: Array<React.ReactElement> = [];
+        if (renderHours) timeControls.push(renderTimeControl([0, 1], 2, secondHourMax, true));
+        if (renderMinutes) timeControls.push(renderTimeControl([2, 3], 5, 9, !renderHours));
+        if (renderSeconds) timeControls.push(renderTimeControl([4, 5], 5, 9, !renderHours && !renderMinutes));
+        return (
+            <div className='time-controls'>
+                {timeControls.map((control: React.ReactElement, index: number) => {
+                    return (
+                        <Fragment key={index}>
+                            {control}
+                            {index < timeControls.length - 1 && <span className='sep'>:</span>}
+                        </Fragment>
+                    )
+                })}
+            </div>
+        )
+    }
+
+    function renderTimeControl(timePartIndexes: [number, number], firstMax: number, secondMax: number = 9,
+                               autoFocus: boolean = false) {
+        return (
+            <div className='time-control'>
+                <DvrdNumberInput value={timeParts[timePartIndexes[0]]} onChange={voidFunction}
+                                 inputProps={{min: 0, max: firstMax, tabIndex: timePartIndexes[0] + 1, maxLength: 1}}
+                                 className='time-control-part' id={`${compID.current}-${timePartIndexes[0]}`}
+                                 onKeyDown={onKeyDown(timePartIndexes[0])} placeholder='0' autoFocus={autoFocus}
+                                 autoSelect wholeNumbers/>
+                <DvrdNumberInput value={timeParts[timePartIndexes[1]]} onChange={voidFunction}
+                                 inputProps={{min: 0, max: secondMax, tabIndex: timePartIndexes[1] + 1, maxLength: 1}}
+                                 onKeyDown={onKeyDown(timePartIndexes[1])} className='time-control-part'
+                                 id={`${compID.current}-${timePartIndexes[1]}`} placeholder='0' autoSelect
+                                 wholeNumbers/>
+            </div>
+        )
+    }
+
+    useEffect(() => {
+        setTimeParts(dateToTimeParts(value));
+    }, [value]);
+
+    return (
+        <WithBackground active={open} onClose={onClose}>
+            <div className='picker time'>
+                <div className='switcher'>
+                    <label className='switcher-label'>Tijdstip</label>
+                </div>
+                {renderTimeControls()}
+                <div className='actions-container'>
+                    <DvrdButton onClick={onClickNow} label='Huidig tijdstip' secondary className='action'/>
+                    <DvrdButton onClick={onSubmit} label='Oké' className='action'/>
+                </div>
+            </div>
+        </WithBackground>
+    );
 }

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

@@ -293,6 +293,31 @@
     }
   }
 
+  .picker.time {
+    width: 20rem;
+
+    .time-controls {
+      display: flex;
+      column-gap: .5rem;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem 0;
+
+      .time-control {
+        display: flex;
+        column-gap: .25rem;
+
+        .time-control-part {
+          width: 2.5rem;
+
+          .dvrd-input {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
   .error-label {
     position: absolute;
     bottom: 0;

package/src/js/select/dvrdGroupedSelect.tsx

@@ -11,7 +11,7 @@ import defer from 'lodash.defer';
 
 
 interface Props {
-    onChange: (value: SelectValueType, evt: React.MouseEvent) => void;
+    onChange: (value: SelectValueType, evt?: React.MouseEvent | React.ChangeEvent) => void;
     items: Array<GroupedSelectItem>;
     value: SelectValueType;
     label?: string;
@@ -77,8 +77,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
             if (item.value !== undefined) {
-                if (item.value !== value)
-                    onChange(item.value, evt);
+                onChange(item.value, evt);
                 onToggleOpen(false);
             }
         }
@@ -169,7 +168,8 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
                 <div id={`dvrd-grouped-item-${item.value}`} key={index}
                      className={classNames('dvrd-grouped-item', itemClassName)}
                      onClick={onSelectItem(item)}>
-                    {isElement ? renderCustomLabel(item.label as React.ReactElement, padding, isGroupHead, isSelectable) :
+                    {isElement ? renderCustomLabel(item.label as React.ReactElement, padding, isGroupHead,
+                            isSelectable, isSelected) :
                         <label className={classNames('grouped-item-label', isGroupHead && 'group-head',
                             isSelectable && 'selectable', (isSelected && highlightSelected) && 'selected')}
                                style={{paddingLeft: padding}}>{item.label}</label>}
@@ -183,12 +183,14 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
         }
     }
 
-    function renderCustomLabel(label: React.ReactElement, padding: string, isGroupHead: boolean, isSelectable: boolean) {
+    function renderCustomLabel(label: React.ReactElement, padding: string, isGroupHead: boolean, isSelectable: boolean,
+                               isSelected: boolean) {
         const style = label.props?.style ?? {};
         return React.cloneElement(label, {
             ...label.props,
             style: {...style, paddingLeft: padding},
             className: classNames('grouped-item-label', isGroupHead && 'group-head', isSelectable && 'selectable',
+                (isSelected && highlightSelected && 'selected'),
                 label.props?.className)
         });
     }

package/src/js/textField/dvrdInput.tsx

@@ -27,6 +27,7 @@ interface Props {
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     onKeyDown: KeyboardEventHandler;
+    onKeyUp?: KeyboardEventHandler;
     onClearInput?: MouseEventHandler;
     value: string | number;
     disabled?: boolean;
@@ -52,7 +53,7 @@ export default function DvrdInput(props: Props) {
     const {
         area, id, label, labelClassName, errorClassName, inputClassName, className, ornamentClassName, inputProps,
         disabled, onBlur, value, onChange, onFocus, autoSelect, autoFocus, onClearInput, noResize, onKeyDown, fullWidth,
-        ornaments, error
+        ornaments, error, onKeyUp
     } = props;
     const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
     const [active, setActive] = useState(props.autoFocus ?? false);
@@ -128,7 +129,7 @@ export default function DvrdInput(props: Props) {
         const elementProps = {
             ...inputProps, value, onChange, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown, disabled,
             className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'), id: `${id}-input`,
-            ref: inputRef,
+            ref: inputRef, onKeyUp,
         };
         if (area) return <textarea {...elementProps}/>;
         return <input {...elementProps}/>

package/src/js/textField/dvrdInputController.tsx

@@ -22,6 +22,7 @@ export interface InputControllerProps {
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
+    onKeyUp?: KeyboardEventHandler;
     onEnter?: KeyboardEventHandler;
     onClearInput?: MouseEventHandler;
     value: string | number;
@@ -53,7 +54,7 @@ export default function DvrdInputController(props: InputControllerProps) {
     const {
             disabled, onChange, onEnter, onKeyDown, inputProps, placeholder, type, max, min, step, onFocus, onBlur,
             autoFocus, error, label, ornaments, className, inputClassName, labelClassName, ornamentClassName, fullWidth,
-            errorClassName, autoSelect, area, noResize, onClearInput, unControlled
+            errorClassName, autoSelect, area, noResize, onClearInput, unControlled, onKeyUp
         } = props,
         componentId = useRef(generateComponentId(props.id)),
         [value, setValue] = useState(props.value);
@@ -92,6 +93,6 @@ export default function DvrdInputController(props: InputControllerProps) {
                    inputProps={getInputProps()} className={className} inputClassName={inputClassName}
                    labelClassName={labelClassName} ornamentClassName={ornamentClassName} fullWidth={fullWidth}
                    errorClassName={errorClassName} id={componentId.current} onBlur={onBlur} autoSelect={autoSelect}
-                   area={area} noResize={noResize} onClearInput={onClearInput}/>
+                   area={area} noResize={noResize} onClearInput={onClearInput} onKeyUp={onKeyUp}/>
     );
 }

package/src/js/textField/dvrdNumberInput.tsx

@@ -12,6 +12,7 @@ interface Props {
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
+    onKeyUp?: KeyboardEventHandler;
     onEnter?: KeyboardEventHandler;
     value: string | number;
     label?: string;

package/src/js/util/controlUtil.ts

@@ -26,7 +26,7 @@ export const isNotNull = (obj: any): boolean => {
 export const isNull = (obj: any): boolean => !isNotNull(obj);
 
 export const hasHover = (element: HTMLElement | null): boolean => {
-    if(!element) return false;
+    if (!element) return false;
     if (isNotNull(element) && element.parentElement !== null) {
         return element.parentElement.querySelector(':hover') === element;
     }
@@ -93,6 +93,10 @@ export const calculateTextWidth = (text: string, fontSize?: number, fontFamily?:
 
 export const pad = (num: string | number): string => ('0' + num).slice(-2);
 
+export function padNum(num: string | number, maxLength: number = 2): string {
+    return num.toString().padStart(maxLength, '0');
+}
+
 export const stopPropagation = (evt: Event | React.SyntheticEvent) => {
     evt.stopPropagation();
 };

package/src/js/util/interfaces.ts

@@ -150,6 +150,8 @@ export enum SideMenuMode {COMPACT, FULL}
 
 export enum PDFDisplay {FIRST_PAGE = 'first_page', LAST_PAGE = 'last_page', ALL_PAGES = 'all_pages'}
 
+export enum DatePickerTimeMode {FULL = 1, HOURS_MINUTES, HOURS_ONLY, MINUTES_ONLY, SECONDS_ONLY}
+
 // =========== TYPES
 export type OptionsMenuItem = {
     label: string;