nitro-web 0.0.144 → 0.0.146

package/components/partials/element/timepicker.tsx

@@ -0,0 +1,119 @@
+import { isValid, format } from 'date-fns'
+import { TZDate } from '@date-fns/tz'
+import { twMerge } from 'nitro-web'
+import { dayButtonClassName } from '../element/calendar'
+
+type Timestamp = null | number
+export type TimePickerProps = {
+  className?: string
+  onChange?: (value: Timestamp) => void
+  tz?: string
+  value?: Timestamp
+}
+
+export function TimePicker({ value, onChange, className, tz }: TimePickerProps) {
+  const refs = {
+    hour: useRef<HTMLDivElement>(null),
+    minute: useRef<HTMLDivElement>(null),
+    period: useRef<HTMLDivElement>(null),
+  }
+  const lists = [
+    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // hours
+    [
+      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 
+      27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 
+      51, 52, 53, 54, 55, 56, 57, 58, 59,
+    ], // minutes
+    ['AM', 'PM'], // AM/PM
+  ]
+
+  // Convert the value to an valid* date
+  const internalValue = useMemo(() => {
+    return value && isValid(value) ? new TZDate(value, tz) : undefined
+  }, [value])
+  
+  // Get current values from date or use defaults
+  const hour = useMemo(() => internalValue ? parseInt(format(internalValue, 'h')) : undefined, [internalValue])
+  const minute = useMemo(() => internalValue ? parseInt(format(internalValue, 'm')) : undefined, [internalValue])
+  const period = useMemo(() => internalValue ? format(internalValue, 'a') : undefined, [internalValue])
+
+  // Scroll into view when the date changes
+  useEffect(() => {
+    if (hour !== undefined) scrollIntoView('hour', hour)
+    if (minute !== undefined) scrollIntoView('minute', minute)
+    if (period) scrollIntoView('period', period)
+  }, [hour, minute, period])
+  
+  const handleTimeChange = (type: 'hour' | 'minute' | 'period', value: string | number) => {
+    // use original internValue or new TZDate, make sure to use the same timezone to base it from
+    const _internalValue = internalValue ?? new TZDate(new Date(), tz)
+    const isPm = format(_internalValue, 'a') === 'PM'
+    if (type === 'hour') {
+      const newHour = value === 12 ? 0 : value as number
+      _internalValue.setHours(newHour + (isPm ? 12 : 0))
+    } else if (type === 'minute') {
+      _internalValue.setMinutes(value as number)
+    } else if (type === 'period') {
+      const newHours = _internalValue.getHours() + (isPm && value === 'AM' ? -12 : !isPm && value === 'PM' ? 12 : 0)
+      _internalValue.setHours(newHours)
+    }
+    
+    onChange?.(_internalValue.getTime())  
+  }
+
+  function scrollIntoView (type: 'hour' | 'minute' | 'period', value: string | number) {
+    const container = refs[type].current
+    if (!container) return
+    const element = container.querySelector(`[data-val="${value}"]`) as HTMLElement
+    if (!element) return
+  
+    const target =
+      element.offsetTop
+      - (container.clientHeight / 2)
+      + (element.clientHeight / 2)
+
+    container.scrollTo({ top: target, behavior: 'smooth' })
+  }
+
+  return (
+    <div className={twMerge('flex justify-center min-h-[250px]', className)}>
+      {
+        lists.map((list, i) => {
+          const type = i === 0 ? 'hour' : i === 1 ? 'minute' : 'period'
+          const currentValue = i === 0 ? hour : i === 1 ? minute : period
+          return (
+            <div 
+              key={i}
+              ref={refs[type]}
+              className="w-[60px] relative overflow-hidden hover:overflow-y-auto border-l border-gray-100 sm-scrollbar first:border-l-0"
+            >
+              <div className="w-[60px] absolute flex flex-col items-center py-2">
+                {/* using absolute since the scrollbar takes up space  */}
+                {list.map(item => (
+                  <div 
+                    className="py-[1px] flex group cursor-pointer"
+                    data-val={item}
+                    key={item}
+                    onClick={(_e) => {
+                      handleTimeChange(type, item)
+                    }}
+                  >
+                    <button 
+                      key={item}
+                      className={
+                        `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
+                        + (item === currentValue ? '!bg-input-border-focus text-white' : '')
+                      }
+                    >
+                      {item.toString().padStart(2, '0').toLowerCase()}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}

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

@@ -1,31 +1,34 @@
 import { hsvaToHex, hexToHsva, validHex, HsvaColor } from '@uiw/color-convert'
 import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
-import { Dropdown, util } from 'nitro-web'
+import { currency, Dropdown, util } from 'nitro-web'
 
-export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'|'value'> & {
+export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> & {
   name: string
   /** name is applied if id is not provided */
   id?: string 
-  defaultColor?: string
   Icon?: React.ReactNode
   onChange?: (event: { target: { name: string, value: string } }) => void
-  value?: string
+  value?: string // e.g. '#333'
+  defaultValue?: string // e.g. '#333'
 }
 
-export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp, value: valueProp, ...props }: FieldColorProps) {
-  const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
+export function FieldColor({ defaultValue='#000', Icon, onChange: onChangeProp, ...props }: FieldColorProps) {
   const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
   const id = props.id || props.name
 
-  // Since value and onChange are optional, we need to hold the value in state if not provided
-  const [internalValue, setInternalValue] = useState(valueProp ?? defaultColor)
-  const value = valueProp ?? internalValue
-  const onChange = onChangeProp ?? ((e: { target: { name: string, value: string } }) => setInternalValue(e.target.value))
+  // Since value and onChange are optional, we need need to create an internal value state
+  const [internalValue, setInternalValue] = useState<FieldColorProps['value']>(props.value ?? defaultValue)
+  const inputValue = internalValue
 
-  function onInputChange(e: { target: { name: string, value: string } }) {
-    setLastChanged(`ic-${Date.now()}`)
-    onChange(e)
+  // Update the internal value when the value changes outside of the component
+  useEffect(() => {
+    if (internalValue !== (props.value ?? defaultValue)) setInternalValue(props.value ?? defaultValue)
+  }, [props.value])
+
+  function onChange(e: { target: { name: string, value: string } }) {
+    if (onChangeProp) onChangeProp({ target: { name: props.name, value: e.target.value }})
+    else setInternalValue(e.target.value)
   }
 
   return (
@@ -33,7 +36,7 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
       dir="bottom-left"
       menuToggles={false}
       menuContent={
-        <ColorPicker key={lastChanged} defaultColor={defaultColor} name={props.name} value={value} onChange={onChange} />
+        <ColorPicker defaultValue={defaultValue} name={props.name} value={internalValue} onChange={onChange} />
       }
     >
       <div className="grid grid-cols-1">
@@ -42,9 +45,9 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
           {...props}
           className={(props.className || '') + ' ' + isInvalid}
           id={id}
-          value={value}
-          onChange={onInputChange}
-          onBlur={() => !validHex(value||'') && onInputChange({ target: { name: props.name, value: '' }})}
+          value={inputValue}
+          onChange={onChange}
+          onBlur={() => !validHex(internalValue||'') && onChange({ target: { name: props.name, value: '' }})} // wipe if invalid
           autoComplete="off"
           type="text"
         />
@@ -53,10 +56,15 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
   )
 }
 
-function ColorPicker({ name='', onChange, value='', defaultColor='' }: FieldColorProps) {
-  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
+function ColorPicker({ name='', onChange, value='', defaultValue='' }: FieldColorProps) {
+  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultValue))
   const [debounce] = useState(() => util.throttle(callOnChange, 50))
 
+  // Update the hsva when the internal value changes
+  useEffect(() => {
+    if (validHex(value)) setHsva(hexToHsva(value))
+  }, [value])
+
   function callOnChange(newHsva: HsvaColor) {
     if (onChange) onChange({ target: { name: name, value: hsvaToHex(newHsva) }})
   }

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

@@ -15,128 +15,74 @@ type NumericFormatProps = React.InputHTMLAttributes<HTMLInputElement> & {
   prefix?: string;
 }
 
-export type FieldCurrencyProps = NumericFormatProps & {
+type Currencies = { [key: string]: { symbol: string, digits: number } }
+type Cents = string|number|null
+export type FieldCurrencyProps = Omit<NumericFormatProps, 'onChange' | 'value' | 'defaultValue'> & {
   name: string
   /** name is applied if id is not provided */
   id?: string
   /** currency iso, e.g. 'nzd' */
   currency: string
   /** override the default currencies array used to lookup currency symbol and digits, e.g. {nzd: { symbol: '$', digits: 2 }} */
-  currencies?: { [key: string]: { symbol: string, digits: number } }, 
+  currencies?: Currencies, 
   /** override the default CLDR country currency format, e.g. '¤#,##0.00' */
   format?: string, 
-  onChange?: (event: { target: { name: string, value: string|number|null } }) => void
+  onChange?: (event: { target: { name: string, value: Cents } }) => void
   /** value should be in cents */
-  value?: string|number|null
-  defaultValue?: number | string | null
+  value?: Cents
+  defaultValue?: Cents // defined to just fix typescript error
 }
 
-export function FieldCurrency({ currency='nzd', currencies, format, onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
+export function FieldCurrency({ currency='nzd', currencies, format, onChange: onChangeProp, ...props }: FieldCurrencyProps) {
   const [dontFix, setDontFix] = useState(false)
-  const [settings, setSettings] = useState(() => getCurrencySettings(currency))
-  const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
+  const [lastBlurred, setLastBlurred] = useState(0)
+  const [settings, setSettings] = useState(() => getCurrencySettings(currency, currencies, format, props.name))
   const [prefixWidth, setPrefixWidth] = useState(0)
-  const ref = useRef({ settings, dontFix }) // was null
+  const ref = useRef({ dontFix }) // was null
   const id = props.id || props.name
-  ref.current = { settings, dontFix }
+  ref.current = { dontFix }
 
+  // Since value and onChange are optional, we need need to create an internal value state
+  const [internalValue, setInternalValue] = useState<FieldCurrencyProps['value']>(props.value ?? props.defaultValue)
+  const inputValue = useMemo(() => to('dollars', internalValue, settings), [internalValue, settings.key, lastBlurred])
+  
+  // Update the internal value when the value changes outside of the component
   useEffect(() => {
-    if (settings.currency !== currency) {
-      const settings = getCurrencySettings(currency)
-      setSettings(settings)
-      setDollars(toDollars(value, true, settings)) // required latest _settings
-    }
-  }, [currency])
+    if (internalValue !== (props.value ?? props.defaultValue)) setInternalValue(props.value ?? props.defaultValue)
+  }, [props.value])
 
+  // Update the settings if the setting parameters change
   useEffect(() => {
-    if (ref.current.dontFix) {
-      setDollars(toDollars(value))
-      setDontFix(false)
-    } else {
-      setDollars(toDollars(value, true))
-    }
-  }, [value])
+    const _settings = getCurrencySettings(currency, currencies, format, props.name)
+    if (settings.key !== _settings.key) setSettings(_settings)
+  }, [currency, currencies, format])
 
+  // Get the prefix content width
   useEffect(() => {
-    // Get the prefix content width
     setPrefixWidth(settings.prefix ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  function toCents(value?: string|number|null) {
-    const maxDecimals = ref.current.settings.maxDecimals
+  function to(type: 'dollars' | 'cents', value?: Cents, settings?: { maxDecimals?: number }) {
+    const maxDecimals = settings?.maxDecimals
     const parsed = parseFloat(value + '')
     if (!parsed && parsed !== 0) return null
     if (!maxDecimals) return parsed
-    const value2 = Math.round(parsed * Math.pow(10, maxDecimals)) // e.g. 1.23 => 123
-    // console.log('toCents', parsed, value2)
-    return value2
-  }
 
-  function toDollars(value?: string|number|null, toFixed?: boolean, settings?: { maxDecimals?: number }) {
-    const maxDecimals = (settings || ref.current.settings).maxDecimals
-    const parsed = parseFloat(value + '')
-    if (!parsed && parsed !== 0) return null
-    if (!maxDecimals) return parsed
-    const value2 = parsed / Math.pow(10, maxDecimals) // e.g. 1.23 => 123
-    // console.log('toDollars', value, value2)
-    return toFixed ? value2.toFixed(maxDecimals) : value2
-  }
+    const value2 = type === 'dollars' 
+      ? parsed / Math.pow(10, maxDecimals) 
+      : parsed * Math.pow(10, maxDecimals) // e.g. 1.23 => 123
 
-  function getCurrencySettings(currency: string) {
-    // parse CLDR currency string format, e.g. '¤#,##0.00'
-    const output: { 
-      currency: string,           // e.g. 'nzd'
-      decimalSeparator?: string,  // e.g. '.'
-      thousandSeparator?: string, // e.g. ','
-      minDecimals?: number,       // e.g. 2
-      maxDecimals?: number,       // e.g. 2
-      prefix?: string,            // e.g. '$'
-      suffix?: string             // e.g. ''
-    } = { currency }
-
-    let _format = format || defaultFormat
-    const _currencies = currencies ?? defaultCurrencies
-    const currencyObject = _currencies[currency as keyof typeof _currencies]
-    if (!currencyObject && currencies) {
-      console.error(
-        `The currency field "${props.name}" is using the currency "${currency}" which is not found in your currencies object`
-      )
-    } else if (!currencyObject && !currencies) {
-      console.error(
-        `The currency field "${props.name}" is using the currency "${currency}" which is not found in the 
-        default currencies, please provide a currencies object.`
-      )
-    }
-    const symbol = currencyObject ? currencyObject.symbol : ''
-    const digits = currencyObject ? currencyObject.digits : 2
-
-    // Check for currency symbol (¤) and determine its position
-    if (_format.indexOf('¤') !== -1) {
-      const position = _format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
-      output[position] = symbol
-      _format = _format.replace('¤', '')
-    }
+    // dont fix when the user is typing.
+    if (type === 'dollars' && ref.current.dontFix) { setDontFix(false) }
 
-    // Find and set the thousands separator
-    const thousandMatch = _format.match(/[^0-9#]/)
-    if (thousandMatch) output.thousandSeparator = thousandMatch[0]
-
-    // Find and set the decimal separator and fraction digits
-    const decimalMatch = _format.match(/0[^0-9]/)
-    if (decimalMatch) {
-      output.decimalSeparator = decimalMatch[0].slice(1)
-      if (typeof digits !== 'undefined') {
-        output.minDecimals = digits
-        output.maxDecimals = digits
-      } else {
-        const fractionDigits = _format.split(output.decimalSeparator)[1]
-        if (fractionDigits) {
-          output.minDecimals = fractionDigits.length 
-          output.maxDecimals = fractionDigits.length
-        }
-      }
-    }
-    return output
+    // console.log('to', type, value, value2)
+    return type === 'cents' || ref.current.dontFix ? value2 : value2.toFixed(maxDecimals)
+  }
+
+  function onChange(source: 'event' | 'prop', floatValue?: number) {
+    if (source === 'event') setDontFix(true)
+    if (onChangeProp) onChangeProp({ target: { name: props.name, value: to('cents', floatValue, settings) }})
+    else setInternalValue(to('cents', floatValue, settings))
   }
 
   return (
@@ -148,20 +94,15 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
         decimalSeparator={settings.decimalSeparator}
         thousandSeparator={settings.thousandSeparator}
         decimalScale={settings.maxDecimals}
-        onValueChange={!onChange ? undefined : ({ floatValue }, e) => {
-          // console.log('onValueChange', floatValue, e)
-          if (e.source === 'event') setDontFix(true)
-          onChange({ target: { name: props.name, value: toCents(floatValue) }})
-        }}
-        onBlur={() => { setDollars(toDollars(value, true))}}
+        onValueChange={({ floatValue }, e) => onChange(e.source, floatValue)}
+        onBlur={() => { setLastBlurred(Date.now())}}
         placeholder={props.placeholder || '0.00'}
-        value={dollars}
+        value={inputValue}
         style={{ textIndent: `${prefixWidth}px` }}
         type="text"
-        defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${inputValue !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>
@@ -169,6 +110,71 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
   )
 }
 
+function getCurrencySettings(currency: string, currencies?: Currencies, format?: string, name?: string) {
+  // parse CLDR currency string format, e.g. '¤#,##0.00'
+  const output: { 
+    key?: string               
+    currency: string,           // e.g. 'nzd'
+    decimalSeparator?: string,  // e.g. '.'
+    thousandSeparator?: string, // e.g. ','
+    minDecimals?: number,       // e.g. 2
+    maxDecimals?: number,       // e.g. 2
+    prefix?: string,            // e.g. '$'
+    suffix?: string             // e.g. ''
+  } = { currency }
+
+  let _format = format || defaultFormat
+  const _currencies = currencies ?? defaultCurrencies
+  const currencyObject = _currencies[currency as keyof typeof _currencies]
+  if (!currencyObject && currencies) {
+    console.error(
+      `The currency field "${name||''}" is using the currency "${currency}" which is not found in your currencies object`
+    )
+  } else if (!currencyObject && !currencies) {
+    console.error(
+      `The currency field "${name||''}" is using the currency "${currency}" which is not found in the 
+      default currencies, please provide a currencies object.`
+    )
+  }
+  const symbol = currencyObject ? currencyObject.symbol : ''
+  const digits = currencyObject ? currencyObject.digits : 2
+
+  // Check for currency symbol (¤) and determine its position
+  if (_format.indexOf('¤') !== -1) {
+    const position = _format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
+    output[position] = symbol
+    _format = _format.replace('¤', '')
+  }
+
+  // Find and set the thousands separator
+  const thousandMatch = _format.match(/[^0-9#]/)
+  if (thousandMatch) output.thousandSeparator = thousandMatch[0]
+
+  // Find and set the decimal separator and fraction digits
+  const decimalMatch = _format.match(/0[^0-9]/)
+  if (decimalMatch) {
+    output.decimalSeparator = decimalMatch[0].slice(1)
+    if (typeof digits !== 'undefined') {
+      output.minDecimals = digits
+      output.maxDecimals = digits
+    } else {
+      const fractionDigits = _format.split(output.decimalSeparator)[1]
+      if (fractionDigits) {
+        output.minDecimals = fractionDigits.length 
+        output.maxDecimals = fractionDigits.length
+      }
+    }
+  }
+
+  // create stable key from final output
+  output.key = Object.keys(output)
+    .filter(k => k !== 'key')
+    .sort()
+    .map(k => `${k}:${output[k as keyof typeof output] ?? ''}`)
+    .join('|')
+  return output
+}
+
 export const defaultCurrencies: { [key: string]: { name: string, symbol: string, digits: number } } = {
   nzd: { name: 'New Zealand Dollar', symbol: '$', digits: 2 },
   aud: { name: 'Australian Dollar', symbol: '$', digits: 2 },