@dvrd/dvr-controls 1.0.78 → 1.0.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.78",
+  "version": "1.0.81",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -30,7 +30,7 @@
     "react-router-dom": "6.15.0"
   },
   "dependencies": {
-    "@dvrd/idate": "^1.8.4",
+    "@dvrd/idate": "^1.8.6",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-regular-svg-icons": "6.5.2",
@@ -47,6 +47,7 @@
     "@types/react": "^18.2.28",
     "@types/react-color": "2.13.5",
     "@types/react-dom": "^18.0.11",
+    "@types/swiper": "^6.0.0",
     "@types/uuid": "9.0.0",
     "classnames": "2.5.1",
     "dompurify": "3.0.0",
@@ -58,6 +59,7 @@
     "lodash.mergewith": "^4.6.2",
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
+    "swiper": "^11.1.4",
     "typescript": "4.9.5",
     "uuid": "9.0.0"
   }

package/src/js/date/dvrdDatePicker.tsx

@@ -21,15 +21,17 @@ 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 {pad} from "../util/controlUtil";
 import defer from 'lodash.defer';
+import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
+import {FreeMode, Mousewheel} from 'swiper/modules';
+import 'swiper/css';
 
 interface Props {
     onChange: ChangeFunction<IDate>;
     closeOnChange?: boolean;
     value: IDate | null;
-    label: string;
+    label?: string;
     timeMode?: DatePickerTimeMode;
     error?: ErrorType;
     className?: string;
@@ -109,7 +111,7 @@ function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
     return (
         <div className={classNames('dvrd-date-picker', className, error && 'error', disabled && 'disabled')}>
             {!pickersOnly && <>
-                <label className='field-label'>{label}</label>
+                {!!label && <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) ??
@@ -453,85 +455,40 @@ interface TimePickerProps {
     closeOnChange?: boolean;
 }
 
-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, closeOnChange} = 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());
+    const internalValue = useRef<IDate>(value ?? new IDate('00:00:00', 'HH:mm:ss'));
 
     function onClickNow() {
-        setTimeParts(dateToTimeParts(new IDate()));
+        internalValue.current = IDate.now();
         if (closeOnChange)
             onSubmit();
     }
 
-    function onSubmit() {
-        const hours = timePartsToNumber(timeParts[0], timeParts[1]);
-        const minutes = timePartsToNumber(timeParts[2], timeParts[3]);
-        const seconds = timePartsToNumber(timeParts[4], timeParts[5]);
-        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 onSlideChange(key: 'hour' | 'minute' | 'second') {
+        return function (swiper: SwiperClass) {
+            if (key === 'hour') internalValue.current = internalValue.current.hours(swiper.realIndex);
+            if (key === 'minute') internalValue.current = internalValue.current.minutes(swiper.realIndex);
+            if (key === 'second') internalValue.current = internalValue.current.seconds(swiper.realIndex);
         }
     }
 
-    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 onSubmit() {
+        onChange(internalValue.current.clone());
+        onClose();
     }
 
-    function renderTimeControls() {
+    function renderTimeContainer() {
         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));
+        if (renderHours) timeControls.push(renderTimeSwiper('hour'));
+        if (renderMinutes) timeControls.push(renderTimeSwiper('minute'));
+        if (renderSeconds) timeControls.push(renderTimeSwiper('second'));
         return (
-            <div className='time-controls'>
+            <div className='time-swiper-container'>
+                <div className='vizor top'/>
                 {timeControls.map((control: React.ReactElement, index: number) => {
                     return (
                         <Fragment key={index}>
@@ -540,30 +497,42 @@ function TimePicker(props: TimePickerProps) {
                         </Fragment>
                     )
                 })}
+                <div className='vizor bottom'/>
             </div>
         )
     }
 
-    function renderTimeControl(timePartIndexes: [number, number], firstMax: number, secondMax: number = 9,
-                               autoFocus: boolean = false) {
+    function renderTimeSwiper(key: 'hour' | 'minute' | 'second') {
+        const _value = value ?? new IDate('00:00:00', 'HH:mm:ss');
+        let timeValue: number, numSlides: number;
+        if (key === 'hour') {
+            timeValue = _value.hours();
+            numSlides = 24;
+        } else if (key === 'minute') {
+            timeValue = _value.minutes();
+            numSlides = 60;
+        } else {
+            timeValue = _value.seconds();
+            numSlides = 60;
+        }
+        const slideValues: Array<string> = [];
+        for (let i = 0; i < numSlides; i++) slideValues.push(pad(i));
         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>
+            <Swiper modules={[Mousewheel, FreeMode]} slidesPerView={3} direction='vertical' initialSlide={timeValue}
+                    onTransitionEnd={onSlideChange(key)} mousewheel={{enabled: true, sensitivity: .5}} freeMode={{
+                enabled: true,
+                sticky: true,
+                minimumVelocity: .1,
+                momentumVelocityRatio: .25,
+                momentumRatio: .25
+            }} loop slideToClickedSlide centeredSlides>
+                {slideValues.map((value: string, index: number) => <SwiperSlide key={index}>{value}</SwiperSlide>)}
+            </Swiper>
         )
     }
 
     useEffect(() => {
-        setTimeParts(dateToTimeParts(value));
+        if (value) internalValue.current = value;
     }, [value]);
 
     return (
@@ -572,7 +541,7 @@ function TimePicker(props: TimePickerProps) {
                 <div className='switcher'>
                     <label className='switcher-label'>Tijdstip</label>
                 </div>
-                {renderTimeControls()}
+                {renderTimeContainer()}
                 <div className='actions-container'>
                     <DvrdButton onClick={onClickNow} label='Huidig tijdstip' secondary className='action'/>
                     <DvrdButton onClick={onSubmit} label='Oké' className='action'/>

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

@@ -296,6 +296,48 @@
   .picker.time {
     width: 20rem;
 
+    .time-swiper-container {
+      height: 10rem;
+      display: flex;
+      align-items: center;
+      column-gap: 1rem;
+      position: relative;
+      justify-content: center;
+
+      .swiper {
+        max-height: 100%;
+        margin: 0;
+
+        .swiper-slide {
+          display: flex;
+          align-items: center;
+          font-size: 1.2rem;
+          font-weight: 500;
+        }
+      }
+
+      .sep {
+        font-size: 1.2rem;
+        height: 1.2rem;
+      }
+
+      .vizor {
+        position: absolute;
+        background-color: $color-gray-4;
+        width: 100%;
+        height: 1px;
+        z-index: 1;
+
+        &.top {
+          top: 35%;
+        }
+
+        &.bottom {
+          top: 65%;
+        }
+      }
+    }
+
     .time-controls {
       display: flex;
       column-gap: .5rem;