nitro-web 0.0.149 → 0.0.151

package/components/partials/element/filters.tsx

@@ -15,7 +15,7 @@ export type FilterType = (
 )
 
 type FilterState = {
-  [key: string]: unknown
+  [key: string]: any
 }
 
 type FiltersProps = {
@@ -37,10 +37,6 @@ type FiltersProps = {
   dropdownFiltersClassName?: string
 }
 
-export type FiltersHandleType = {
-  submit: (includePagination?: boolean) => void
-}
-
 const debounceTime = 250
 
 export function Filters({ 

package/components/partials/element/timepicker.tsx

@@ -1,3 +1,4 @@
+import { useRef, useMemo, useEffect } from 'react'
 import { isValid, format } from 'date-fns'
 import { TZDate } from '@date-fns/tz'
 import { twMerge } from 'nitro-web'
@@ -9,9 +10,12 @@ 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 */
+  referenceTimestamp?: Timestamp
 }
 
-export function TimePicker({ value, onChange, className, tz }: TimePickerProps) {
+export function TimePicker({ value, onChange, className, tz, referenceTimestamp }: TimePickerProps) {
+  const [internallyChanged, setInternallyChanged] = useState<Timestamp>()
   const refs = {
     hour: useRef<HTMLDivElement>(null),
     minute: useRef<HTMLDivElement>(null),
@@ -29,8 +33,32 @@ export function TimePicker({ value, onChange, className, tz }: TimePickerProps)
 
   // Convert the value to an valid* date
   const internalValue = useMemo(() => {
-    return value && isValid(value) ? new TZDate(value, tz) : undefined
-  }, [value])
+    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
+  }, [value, tz, referenceTimestamp])
+
+  // Update the value when the changedValue changes
+  useEffect(() => {
+    if (internallyChanged && isValid(internallyChanged)) {
+      onChange?.(internallyChanged)
+      setInternallyChanged(undefined)
+    }
+  }, [internallyChanged])
   
   // 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

@@ -34,6 +34,8 @@ type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   DropdownProps?: DropdownProps
   /** timezone to use for the date picker */
   tz?: string
+  /** Reference timestamp to use for the time picker's date. Precedence order: `referenceTimestamp`, `value`, or today */
+  referenceTimestamp?: Timestamp
 }
 
 // Discriminated union types based on mode
@@ -64,6 +66,7 @@ export function FieldDate({
   DayPickerProps,
   DropdownProps,
   tz,
+  referenceTimestamp,
   ...props
 }: FieldDateProps) {
   const [month, setMonth] = useState<number|undefined>()
@@ -141,7 +144,7 @@ export function FieldDate({
 
     // Parse the datestring into timestamps
     let timestamps = e.target.value.split(/-|,/).map(o => {
-      return parseDateString(o.trim(), pattern, tz)
+      return parseDateString(o.trim(), pattern, tz, referenceTimestamp)
     })
 
     // For range mode we need limit the array to 2
@@ -168,7 +171,10 @@ export function FieldDate({
   }
 
   function onNowClick() {
-    onChange(new Date().getTime())
+    // 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)
+    onChange(nowInTz)
   }
   
   // Common props for the Calendar component
@@ -198,7 +204,8 @@ export function FieldDate({
             {
               (props.mode == 'time' || (!!showTime && props.mode == 'single')) &&
               <TimePicker value={internalValue?.[0]} onChange={onChange<Timestamp>} 
-                className={`border-l border-gray-100 ${props.mode == 'single' ? 'min-h-[0]' : ''}`} 
+                className={`border-l border-gray-100 ${props.mode == 'single' ? 'min-h-[0]' : ''}`}
+                referenceTimestamp={referenceTimestamp}
               />
             }
           </div>
@@ -247,8 +254,8 @@ export function FieldDate({
  * @param [referenceDate] - required if value doesn't contain a date, e.g. for time only
  * @param [tz] - timezone
  */
-function parseDateString(value: string, pattern: string, tz?: string, referenceDate?: Date) {
-  const parsedDate = parse(value.trim(), pattern, referenceDate ?? new Date(), tz ? { in: _tz(tz) } : undefined)
+function parseDateString(value: string, pattern: string, tz?: string, referenceTimestamp?: Timestamp) {
+  const parsedDate = parse(value.trim(), pattern, referenceTimestamp ?? new Date(), tz ? { in: _tz(tz) } : undefined)
   if (!isValid(parsedDate)) return null
   else return parsedDate.getTime()
 }

package/components/partials/styleguide.tsx

@@ -62,12 +62,13 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
       country: 'nz',
       currency: 'nzd',
       date: Date.now(),
-      'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
-      'date-multiple': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 2],
-      'date-time': Date.now(),//////
+      dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
+      dateMultiple: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 2],
+      dateTime: Date.now(),
       time: Date.now(),
-      'calendar-single': Date.now(),
-      'calendar-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
+      timeReference: Date.now(),
+      calendarSingle: Date.now(),
+      calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
       firstName: 'Bruce',
       tableFilter: '',
       errors: [
@@ -81,12 +82,13 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
       country: 'au',
       currency: 'btc', 
       date: Date.now() + 1000 * 60 * 60 * 24 * 1.2,
-      'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 5.2],
-      'date-multiple': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
-      'date-time': Date.now() + 1000 * 60 * 60 * 24 * 2.2,
+      dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 5.2],
+      dateMultiple: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
+      dateTime: Date.now() + 1000 * 60 * 60 * 24 * 2.2,
       time: Date.now() + 1000 * 60 * 60 * 1.2,
-      'calendar-single': Date.now(),
-      'calendar-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
+      timeReference: Date.now() + 1000 * 60 * 60 * 1.2,
+      calendarSingle: Date.now(),
+      calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
       firstName: 'John',
       tableFilter: '',
       errors: [
@@ -110,7 +112,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
     const filters: FilterType[] = [
       { 
         type: 'date',
-        name: 'dateRange',
+        name: 'dateRange2',
         mode: 'range',
         placeholder: 'Select a range...',
       },
@@ -513,17 +515,17 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           <h2 class="h3">Date Inputs</h2>
           <div class="grid grid-cols-1 gap-x-6 sm:grid-cols-3">
             <div>
-              <label for="date">Date with time</label>
-              <Field name="date-time" type="date" mode="single" showTime={true} state={state} onChange={(e) => onChange(e, setState)}
+              <label for="dateTime">Date with time</label>
+              <Field name="dateTime" type="date" mode="single" showTime={true} state={state} onChange={(e) => onChange(e, setState)}
                 // Testing timezone support:
                 // tz="Pacific/Honolulu"
                 // DropdownProps={{ menuIsOpen: true }} 
               />
             </div>
            <div>
-              <label for="date-range">Date range (with prefix & disabled days)</label>
+              <label for="dateRange">Date range (with prefix & disabled days)</label>
               <Field 
-                name="date-range" 
+                name="dateRange" 
                 type="date" 
                 mode="range" 
                 prefix="Date:" 
@@ -535,16 +537,25 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
               />
             </div>
             <div>
-              <label for="date">Date multi-select (right aligned)</label>
-              <Field name="date-multiple" type="date" mode="multiple" state={state} onChange={(e) => onChange(e, setState)} dir="bottom-right" />
+              <label for="dateMultiple">Date multi-select (right aligned)</label>
+              <Field name="dateMultiple" type="date" mode="multiple" state={state} onChange={(e) => onChange(e, setState)} dir="bottom-right" />
             </div>
             <div>
-              <label for="time">Time</label>
+              <label for="time">Time: {date(state.time, 'dd MMM hh:mmaa')}</label>
               <Field name="time" type="date" mode="time" state={state} onChange={(e) => onChange(e, setState)}  
                 // Testing timezone support:
                 // tz="Pacific/Honolulu"
               />
             </div>
+            <div>
+              <label for="timeReference">Time: {date(state.timeReference, 'dd MMM hh:mmaa')} (with date reference)</label>
+              <Field name="timeReference" type="date" mode="time" state={state} onChange={(e) => onChange(e, setState)}  
+                // Testing timezone support:
+                // tz="Pacific/Honolulu"
+                // referenceTimestamp={useMemo(() => new Date().getTime() + 1000 * 60 * 60 * 24 * 5, [])}
+                referenceTimestamp={state.dateTime}
+              />
+            </div>
           </div>
         </div>
       )}
@@ -560,10 +571,10 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
             <div>
               <label for="calendar">
                 Calendar
-                {/* {'  ' +  new Date(state['calendar-single'] || '')?.toLocaleString('en-US', { timeZone: 'Pacific/Honolulu' })} */}
+                {/* {'  ' +  new Date(state.calendarSingle || '')?.toLocaleString('en-US', { timeZone: 'Pacific/Honolulu' })} */}
               </label>
-              <Calendar mode="range" value={state['calendar-range']} numberOfMonths={1} 
-                onChange={(value) => onChange({ target: { name: 'calendar-range', value: value } }, setState)}
+              <Calendar mode="range" value={state.calendarRange} numberOfMonths={1} 
+                onChange={(value) => onChange({ target: { name: 'calendarRange', value: value } }, setState)}
                 // Testing timezone support:
                 // tz="Pacific/Honolulu"
                 // preserveTime={true}
@@ -571,13 +582,16 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
             </div>
             <div>
               <label for="time">TimePicker</label>
-              <div className="mt-2.5 mb-6 mt-input-before mb-input-after pt-2">
-                <TimePicker value={state.time} className="min-h-[150]"
+              {/* <div className="mt-2.5 mb-6 mt-input-before mb-input-after pt-2"> */}
+                <TimePicker
+                  value={state.time} 
+                  className="min-h-[150] mt-2.5 mb-6 mt-input-before mb-input-after pt-2"
                   onChange={(value) => onChange({ target: { name: 'time', value: value }}, setState)} 
                   // Testing timezone support:
                   // tz="Pacific/Honolulu"
+                  // referenceTimestamp={new Date().getTime() + 1000 * 60 * 60 * 24 * 5}
                 />
-              </div>
+              {/* </div> */}
             </div>
           </div>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.149",
+  "version": "0.0.151",
   "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 🚀",