nitro-web 0.0.159 → 0.0.160

package/components/partials/element/timepicker.tsx

@@ -1,7 +1,7 @@
 import { useRef, useMemo, useEffect } from 'react'
 import { isValid, format } from 'date-fns'
 import { TZDate } from '@date-fns/tz'
-import { twMerge } from 'nitro-web'
+import { twMerge, date } from 'nitro-web'
 import { dayButtonClassName } from '../element/calendar'
 
 type Timestamp = null | number
@@ -10,12 +10,14 @@ export type TimePickerProps = {
   onChange?: (value: Timestamp) => void
   tz?: string
   value?: Timestamp
-  /** "Reactive" reference timestamp to use for the time picker's date. Precedence order: `referenceTimestamp`, `value`, or today */
+  // eslint-disable-next-line max-len
+  /** "Reactive" reference timestamp to copy the date from. Precedence order: `referenceTimestamp`, `value`, or today. Warning: This value needs to be updated after, or at the same time as `value`, otherwise the useffect will use the previous `value` */
   referenceTimestamp?: Timestamp
+  /** Data for testing */
+  // _data?: { name: unknown }
 }
 
 export function TimePicker({ value, onChange, className, tz, referenceTimestamp }: TimePickerProps) {
-  const [internallyChanged, setInternallyChanged] = useState<Timestamp>()
   const refs = {
     hour: useRef<HTMLDivElement>(null),
     minute: useRef<HTMLDivElement>(null),
@@ -34,31 +36,33 @@ export function TimePicker({ value, onChange, className, tz, referenceTimestamp
   // Convert the value to an valid* date
   const internalValue = useMemo(() => {
     if (!value || !isValid(value)) return undefined
-    const date = new TZDate(value, tz)
-
-    // Carry over the date from the referenceTimestamp, if provided
-    if (referenceTimestamp && isValid(referenceTimestamp)) {
-      const referenceDate = new TZDate(referenceTimestamp, tz)
-      const originalTime = date.getTime()
-      date.setDate(referenceDate.getDate())
-      date.setMonth(referenceDate.getMonth())
-      date.setFullYear(referenceDate.getFullYear())
-      // If the time has changed, update the value
-      if (originalTime !== date.getTime()) {
-        setInternallyChanged(date.getTime())
-      }
-    }
-
-    return date
+    const tzdate = new TZDate(value, tz)
+    return tzdate
   }, [value, tz, referenceTimestamp])
 
-  // Update the value when the changedValue changes
+  // Carry over the date from the referenceTimestamp, if provided
   useEffect(() => {
-    if (internallyChanged && isValid(internallyChanged)) {
-      onChange?.(internallyChanged)
-      setInternallyChanged(undefined)
-    }
-  }, [internallyChanged])
+    if (!referenceTimestamp || !isValid(referenceTimestamp) || !internalValue) return
+    const referenceDate = new TZDate(referenceTimestamp, tz)
+    const newInternalValue = new TZDate(internalValue.getTime(), tz)
+    const [day, month, year] = [newInternalValue.getDate(), newInternalValue.getMonth(), newInternalValue.getFullYear()]
+    const [refDay, refMonth, refYear] = [referenceDate.getDate(), referenceDate.getMonth(), referenceDate.getFullYear()]
+    // const old = date(newInternalValue.getTime(), 'dd hh:mm aa', 'Pacific/Auckland')
+
+    if (day === refDay && month === refMonth && year === refYear) return
+    newInternalValue.setDate(refDay)
+    newInternalValue.setMonth(refMonth)
+    newInternalValue.setFullYear(refYear)
+
+    // if (_data && _data?.name === 'endTime') {
+    //   console.log({
+    //     old: old,
+    //     new: date(newInternalValue.getTime(), 'dd hh:mm aa', 'Pacific/Auckland'),
+    //   })
+    // }
+
+    onChange?.(newInternalValue?.getTime())
+  }, [referenceTimestamp])
   
   // Get current values from date or use defaults
   const hour = useMemo(() => internalValue ? parseInt(format(internalValue, 'h')) : undefined, [internalValue])

package/components/partials/form/field-date.tsx

@@ -108,8 +108,7 @@ export function FieldDate({
     switch (props.mode) {
       case 'single':
       case 'time': {
-        const value = props?.value ?? props?.defaultValue
-        return [value && isValid(value) ? new Date(value).getTime() : null]
+        return [getStringValue(props.value, props.defaultValue)]
       }
       case 'multiple':
       case 'range': {
@@ -127,6 +126,11 @@ export function FieldDate({
     }
   }
 
+  function getStringValue(value?: Timestamp, defaultValue?: Timestamp) {
+    const value2 = value ?? defaultValue
+    return value2 && isValid(value2) ? new Date(value2).getTime() : null
+  }
+
   function getInputValue(value: Timestamp[]) {
     return value.map(o => date(o, pattern, tz)).join(props.mode == 'range' ? ' - ' : ', ')
   }
@@ -173,7 +177,7 @@ export function FieldDate({
   function onNowClick() {
     // Use the browser's local time and parse it into the timezone
     const [hours, minutes, seconds] = [new Date().getHours(), new Date().getMinutes(), new Date().getSeconds()]
-    const nowInTz = parseDateString(`${hours}:${minutes}:${seconds}`, 'hh:mm:ss', tz, referenceTimestamp)
+    const nowInTz = parseDateString(`${hours}:${minutes}:${seconds}`, 'HH:mm:ss', tz)
     onChange(nowInTz)
   }
   
@@ -203,9 +207,15 @@ export function FieldDate({
             }
             {
               (props.mode == 'time' || (!!showTime && props.mode == 'single')) &&
-              <TimePicker value={internalValue?.[0]} onChange={onChange<Timestamp>} 
+              <TimePicker
+                // The `value` needs to be updated before or at the same time as `referenceTimestamp`, otherwise the
+                // useffect in the timepicker will use the previous `value`
+                value={getStringValue(props.value, props.defaultValue)} 
+                onChange={onChange<Timestamp>} 
                 className={`border-l border-gray-100 ${props.mode == 'single' ? 'min-h-[0]' : ''}`}
-                referenceTimestamp={referenceTimestamp} tz={tz}
+                referenceTimestamp={referenceTimestamp} 
+                tz={tz}
+                // _data={{ name: props.name }}
               />
             }
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.159",
+  "version": "0.0.160",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",