@bytebrand/fe-ui-core 4.1.52 → 4.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.52",
+  "version": "4.1.53",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/TimePicker/TimePicker.tsx

@@ -3,7 +3,9 @@ import MaterialSelect from '../MaterialSelect/MaterialSelect';
 import styles from './TimePicker.styl';
 
 interface ITimePickerProps {
-  onHandleTimestampChange: (value: string) => void;
+  onHandleTimestampChange: (value: number) => void;
+  onDayChange: (value: number) => void;
+  onTimeChange: (value: number) => void;
   className: string;
   lang: string;
   time: number;
@@ -14,22 +16,24 @@ interface ITimePickerProps {
 
 const TimePicker = ({
   onHandleTimestampChange,
+  onDayChange,
+  onTimeChange,
+  day,
+  time,
   className,
   lang,
   t,
   size = 'custom'
  }: ITimePickerProps) => {
-  const date = new Date();
+  const date: any = new Date();
   const [currentDay, setCurrentDay] = useState(date.getDay());
-  const [day, setDay] = useState(0);
-  const [time, setTime] = useState(0);
   const onHandleDayChange = (value: number) => {
-    setDay(value);
+    onDayChange(value);
   };
   const onHandleTimeChange = (value: number) => {
-    setTime(value);
+    onTimeChange(value);
   };
-  const format = {
+  const format: { hour: 'numeric' | '2-digit', minute: 'numeric' | '2-digit' } = {
     hour: 'numeric',
     minute: 'numeric'
   };
@@ -70,7 +74,7 @@ const TimePicker = ({
       const time = date.toLocaleTimeString('de', format);
       const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
       currentDayRanges.push({ time, value: currentDayRanges.length, label: `${time} - ${rangeTime}` });
-    }
+    } // time ranges for current day and from current time
 
     for (let minutes = 0; minutes < ranges * 60; minutes = minutes + 30) {
       date.setHours(startTime);
@@ -78,19 +82,20 @@ const TimePicker = ({
       const time = date.toLocaleTimeString('de', format);
       const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
       dayRanges.push({ time, value: dayRanges.length, label: `${time} - ${rangeTime}` });
-    }
+    } // time ranges for full day
 
     return currentDay === new Date().getDay() && isWorkingHours() ? currentDayRanges : dayRanges;
   };
 
   useEffect(
     () => {
-      onHandleTimestampChange(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`);
+      setCurrentDay(new Date(nextWeekDaysFull[day]).getDay())
       if (isAfterWorkingHours() && date.getDay() === 0) {
         setCurrentDay(1);
       }
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
     },
-    [day, time]
+    [day, time, currentDay]
   );
 
   const getHours = (time: string) => {
@@ -100,7 +105,6 @@ const TimePicker = ({
 
   const dayOnchange = (value: number) => {
     onHandleDayChange(value);
-    setCurrentDay(new Date(nextWeekDaysFull[value]).getDay());
     onHandleTimeChange(0);
   };